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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode/ui",
-  "version": "0.0.0-dev-20607",
+  "version": "0.0.0-dev-20609",
   "type": "module",
   "license": "MIT",
   "repository": {

package/src/actions/button/button.tsx

@@ -23,6 +23,7 @@ export interface ButtonProps
 
 export function Button(props: ButtonProps) {
   const [split, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList"])
+
   return (
     <Root
       {...rest}

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

@@ -14,6 +14,7 @@ export interface IconButtonProps
 
 export function IconButton(props: ComponentProps<"button"> & IconButtonProps) {
   const [local, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList", "state"])
+
   return (
     <Root
       {...rest}

package/src/actions/split-button/split-button.tsx

@@ -3,6 +3,7 @@ import "./split-button.css"
 
 export function SplitButton(props: ParentProps<ComponentProps<"div">>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <div
       data-component="split-button-v2"
@@ -19,6 +20,7 @@ export function SplitButton(props: ParentProps<ComponentProps<"div">>) {
 
 export function SplitButtonAction(props: ComponentProps<"button">) {
   const [split, rest] = splitProps(props, ["class", "classList"])
+
   return (
     <button
       type="button"
@@ -34,6 +36,7 @@ export function SplitButtonAction(props: ComponentProps<"button">) {
 
 export function SplitButtonMenuTrigger(props: ComponentProps<"button">) {
   const [split, rest] = splitProps(props, ["class", "classList"])
+
   return (
     <button
       type="button"

package/src/components/animated-number.tsx

@@ -2,6 +2,7 @@ import { For, Index, createEffect, createMemo, on } from "solid-js"
 import { createStore } from "solid-js/store"
 
 const TRACK = Array.from({ length: 30 }, (_, index) => index % 10)
+
 const DURATION = 600
 
 function normalize(value: number) {
@@ -10,7 +11,9 @@ function normalize(value: number) {
 
 function spin(from: number, to: number, direction: 1 | -1) {
   if (from === to) return 0
+
   if (direction > 0) return (to - from + 10) % 10
+
   return -((from - to + 10) % 10)
 }
 
@@ -19,6 +22,7 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
     step: props.value + 10,
     animating: false,
   })
+
   const step = () => state.step
   const animating = () => state.animating
   let last = props.value
@@ -29,9 +33,11 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
       (next) => {
         const delta = spin(last, next, props.direction)
         last = next
+
         if (!delta) {
           setState("animating", false)
           setState("step", next + 10)
+
           return
         }
 
@@ -65,6 +71,7 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
 export function AnimatedNumber(props: { value: number; class?: string }) {
   const target = createMemo(() => {
     if (!Number.isFinite(props.value)) return 0
+
     return Math.max(0, Math.round(props.value))
   })
 
@@ -72,6 +79,7 @@ export function AnimatedNumber(props: { value: number; class?: string }) {
     value: target(),
     direction: 1 as 1 | -1,
   })
+
   const value = () => state.value
   const direction = () => state.direction
 
@@ -80,6 +88,7 @@ export function AnimatedNumber(props: { value: number; class?: string }) {
       target,
       (next) => {
         const current = value()
+
         if (next === current) return
 
         setState("direction", next > current ? 1 : -1)
@@ -90,13 +99,17 @@ export function AnimatedNumber(props: { value: number; class?: string }) {
   )
 
   const label = createMemo(() => value().toString())
+
   const digits = createMemo(() =>
     Array.from(label(), (char) => {
       const code = char.charCodeAt(0) - 48
+
       if (code < 0 || code > 9) return 0
+
       return code
     }).reverse(),
   )
+
   const width = createMemo(() => `${digits().length}ch`)
 
   return (

package/src/components/app-icon.tsx

@@ -46,7 +46,9 @@ const themed: Partial<Record<IconName, { light: string; dark: string }>> = {
 
 const scheme = () => {
   if (typeof document !== "object") return "light" as const
+
   if (document.documentElement.dataset.colorScheme === "dark") return "dark" as const
+
   return "light" as const
 }
 

package/src/components/card.tsx

@@ -22,30 +22,44 @@ export interface CardTitleProps extends ComponentProps<"div"> {
 
 function pick(variant: Variant) {
   if (variant === "error") return "circle-ban-sign" as const
+
   if (variant === "warning") return "warning" as const
+
   if (variant === "success") return "circle-check" as const
+
   if (variant === "info") return "help" as const
+
   return
 }
 
 function mix(style: ComponentProps<"div">["style"], value?: string) {
   if (!value) return style
+
   if (!style) return { "--card-accent": value }
+
   if (typeof style === "string") return `${style};--card-accent:${value};`
+
   return { ...(style as Record<string, string | number>), "--card-accent": value }
 }
 
 export function Card(props: CardProps) {
   const [split, rest] = splitProps(props, ["variant", "style", "class", "classList"])
   const variant = () => split.variant ?? "normal"
+
   const accent = () => {
     const v = variant()
+
     if (v === "error") return "var(--v2-state-fg-danger)"
+
     if (v === "warning") return "var(--icon-warning-active)"
+
     if (v === "success") return "var(--icon-success-active)"
+
     if (v === "info") return "var(--icon-info-active)"
+
     return
   }
+
   return (
     <div
       {...rest}
@@ -65,12 +79,17 @@ export function Card(props: CardProps) {
 export function CardTitle(props: CardTitleProps) {
   const [split, rest] = splitProps(props, ["variant", "icon", "class", "classList", "children"])
   const show = () => split.icon !== false && split.icon !== null
+
   const name = () => {
     if (split.icon === false || split.icon === null) return
+
     if (typeof split.icon === "string") return split.icon
+
     return pick(split.variant ?? "normal")
   }
+
   const placeholder = () => !name()
+
   return (
     <div
       {...rest}
@@ -92,6 +111,7 @@ export function CardTitle(props: CardTitleProps) {
 
 export function CardDescription(props: ComponentProps<"div">) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <div
       {...rest}
@@ -108,6 +128,7 @@ export function CardDescription(props: ComponentProps<"div">) {
 
 export function CardActions(props: ComponentProps<"div">) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <div
       {...rest}

package/src/components/collapsible.tsx

@@ -10,6 +10,7 @@ export interface CollapsibleProps extends ParentProps<CollapsibleRootProps> {
 
 function CollapsibleRoot(props: CollapsibleProps) {
   const [local, others] = splitProps(props, ["class", "classList", "variant"])
+
   return (
     <Kobalte
       data-component="collapsible"

package/src/components/context-menu.tsx

@@ -3,23 +3,41 @@ import { splitProps } from "solid-js"
 import type { ComponentProps, ParentProps } from "solid-js"
 
 export interface ContextMenuProps extends ComponentProps<typeof Kobalte> {}
+
 export interface ContextMenuTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {}
+
 export interface ContextMenuIconProps extends ComponentProps<typeof Kobalte.Icon> {}
+
 export interface ContextMenuPortalProps extends ComponentProps<typeof Kobalte.Portal> {}
+
 export interface ContextMenuContentProps extends ComponentProps<typeof Kobalte.Content> {}
+
 export interface ContextMenuArrowProps extends ComponentProps<typeof Kobalte.Arrow> {}
+
 export interface ContextMenuSeparatorProps extends ComponentProps<typeof Kobalte.Separator> {}
+
 export interface ContextMenuGroupProps extends ComponentProps<typeof Kobalte.Group> {}
+
 export interface ContextMenuGroupLabelProps extends ComponentProps<typeof Kobalte.GroupLabel> {}
+
 export interface ContextMenuItemProps extends ComponentProps<typeof Kobalte.Item> {}
+
 export interface ContextMenuItemLabelProps extends ComponentProps<typeof Kobalte.ItemLabel> {}
+
 export interface ContextMenuItemDescriptionProps extends ComponentProps<typeof Kobalte.ItemDescription> {}
+
 export interface ContextMenuItemIndicatorProps extends ComponentProps<typeof Kobalte.ItemIndicator> {}
+
 export interface ContextMenuRadioGroupProps extends ComponentProps<typeof Kobalte.RadioGroup> {}
+
 export interface ContextMenuRadioItemProps extends ComponentProps<typeof Kobalte.RadioItem> {}
+
 export interface ContextMenuCheckboxItemProps extends ComponentProps<typeof Kobalte.CheckboxItem> {}
+
 export interface ContextMenuSubProps extends ComponentProps<typeof Kobalte.Sub> {}
+
 export interface ContextMenuSubTriggerProps extends ComponentProps<typeof Kobalte.SubTrigger> {}
+
 export interface ContextMenuSubContentProps extends ComponentProps<typeof Kobalte.SubContent> {}
 
 function ContextMenuRoot(props: ContextMenuProps) {
@@ -28,6 +46,7 @@ function ContextMenuRoot(props: ContextMenuProps) {
 
 function ContextMenuTrigger(props: ParentProps<ContextMenuTriggerProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.Trigger
       {...rest}
@@ -44,6 +63,7 @@ function ContextMenuTrigger(props: ParentProps<ContextMenuTriggerProps>) {
 
 function ContextMenuIcon(props: ParentProps<ContextMenuIconProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.Icon
       {...rest}
@@ -64,6 +84,7 @@ function ContextMenuPortal(props: ContextMenuPortalProps) {
 
 function ContextMenuContent(props: ParentProps<ContextMenuContentProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.Content
       {...rest}
@@ -80,6 +101,7 @@ function ContextMenuContent(props: ParentProps<ContextMenuContentProps>) {
 
 function ContextMenuArrow(props: ContextMenuArrowProps) {
   const [local, rest] = splitProps(props, ["class", "classList"])
+
   return (
     <Kobalte.Arrow
       {...rest}
@@ -94,6 +116,7 @@ function ContextMenuArrow(props: ContextMenuArrowProps) {
 
 function ContextMenuSeparator(props: ContextMenuSeparatorProps) {
   const [local, rest] = splitProps(props, ["class", "classList"])
+
   return (
     <Kobalte.Separator
       {...rest}
@@ -108,6 +131,7 @@ function ContextMenuSeparator(props: ContextMenuSeparatorProps) {
 
 function ContextMenuGroup(props: ParentProps<ContextMenuGroupProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.Group
       {...rest}
@@ -124,6 +148,7 @@ function ContextMenuGroup(props: ParentProps<ContextMenuGroupProps>) {
 
 function ContextMenuGroupLabel(props: ParentProps<ContextMenuGroupLabelProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.GroupLabel
       {...rest}
@@ -140,6 +165,7 @@ function ContextMenuGroupLabel(props: ParentProps<ContextMenuGroupLabelProps>) {
 
 function ContextMenuItem(props: ParentProps<ContextMenuItemProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.Item
       {...rest}
@@ -156,6 +182,7 @@ function ContextMenuItem(props: ParentProps<ContextMenuItemProps>) {
 
 function ContextMenuItemLabel(props: ParentProps<ContextMenuItemLabelProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.ItemLabel
       {...rest}
@@ -172,6 +199,7 @@ function ContextMenuItemLabel(props: ParentProps<ContextMenuItemLabelProps>) {
 
 function ContextMenuItemDescription(props: ParentProps<ContextMenuItemDescriptionProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.ItemDescription
       {...rest}
@@ -188,6 +216,7 @@ function ContextMenuItemDescription(props: ParentProps<ContextMenuItemDescriptio
 
 function ContextMenuItemIndicator(props: ParentProps<ContextMenuItemIndicatorProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.ItemIndicator
       {...rest}
@@ -204,6 +233,7 @@ function ContextMenuItemIndicator(props: ParentProps<ContextMenuItemIndicatorPro
 
 function ContextMenuRadioGroup(props: ParentProps<ContextMenuRadioGroupProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.RadioGroup
       {...rest}
@@ -220,6 +250,7 @@ function ContextMenuRadioGroup(props: ParentProps<ContextMenuRadioGroupProps>) {
 
 function ContextMenuRadioItem(props: ParentProps<ContextMenuRadioItemProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.RadioItem
       {...rest}
@@ -236,6 +267,7 @@ function ContextMenuRadioItem(props: ParentProps<ContextMenuRadioItemProps>) {
 
 function ContextMenuCheckboxItem(props: ParentProps<ContextMenuCheckboxItemProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.CheckboxItem
       {...rest}
@@ -256,6 +288,7 @@ function ContextMenuSub(props: ContextMenuSubProps) {
 
 function ContextMenuSubTrigger(props: ParentProps<ContextMenuSubTriggerProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.SubTrigger
       {...rest}
@@ -272,6 +305,7 @@ function ContextMenuSubTrigger(props: ParentProps<ContextMenuSubTriggerProps>) {
 
 function ContextMenuSubContent(props: ParentProps<ContextMenuSubContentProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.SubContent
       {...rest}

package/src/components/dock-surface.tsx

@@ -6,6 +6,7 @@ export interface DockTrayProps extends ComponentProps<"div"> {
 
 export function DockShell(props: ComponentProps<"div">) {
   const [split, rest] = splitProps(props, ["children", "class", "classList"])
+
   return (
     <div
       {...rest}
@@ -22,6 +23,7 @@ export function DockShell(props: ComponentProps<"div">) {
 
 export function DockShellForm(props: ComponentProps<"form">) {
   const [split, rest] = splitProps(props, ["children", "class", "classList"])
+
   return (
     <form
       {...rest}
@@ -38,6 +40,7 @@ export function DockShellForm(props: ComponentProps<"form">) {
 
 export function DockTray(props: DockTrayProps) {
   const [split, rest] = splitProps(props, ["attach", "children", "class", "classList"])
+
   return (
     <div
       {...rest}

package/src/components/file-icon.tsx

@@ -13,6 +13,7 @@ export const FileIcon: Component<FileIconProps> = (props) => {
   const [local, rest] = splitProps(props, ["node", "class", "classList", "expanded", "mono"])
   const name = createMemo(() => chooseIconName(local.node.path, local.node.type, local.expanded || false))
   const id = `file-icon-mono-${createUniqueId()}`
+
   return (
     <svg
       data-component="file-icon"
@@ -542,8 +543,11 @@ const ICON_MAPS: IconMaps = {
 
 const toOpenVariant = (icon: IconName): IconName => {
   if (!icon.startsWith("Folder")) return icon
+
   if (icon.endsWith("_light")) return icon.replace("_light", "Open_light") as IconName
+
   if (!icon.endsWith("Open")) return (icon + "Open") as IconName
+
   return icon
 }
 
@@ -551,16 +555,20 @@ const basenameOf = (p: string) => p.split("\\").join("/").split("/").filter(Bool
 
 const folderNameVariants = (name: string) => {
   const n = name.toLowerCase()
+
   return [n, `.${n}`, `_${n}`, `__${n}__`]
 }
 
 const dottedSuffixesDesc = (name: string) => {
   const n = name.toLowerCase()
   const idxs: number[] = []
+
   for (let i = 0; i < n.length; i++) if (n[i] === ".") idxs.push(i)
   const out = new Set<string>()
   out.add(n) // allow exact whole-name "extensions" like "dockerfile"
+
   for (const i of idxs) if (i + 1 < n.length) out.add(n.slice(i + 1))
+
   return Array.from(out).sort((a, b) => b.length - a.length) // longest first
 }
 
@@ -571,16 +579,20 @@ export function chooseIconName(path: string, type: "directory" | "file", expande
   if (type === "directory") {
     for (const cand of folderNameVariants(baseLower)) {
       const icon = ICON_MAPS.folderNames[cand]
+
       if (icon) return expanded ? toOpenVariant(icon) : icon
     }
+
     return expanded ? ICON_MAPS.defaults.folderOpen : ICON_MAPS.defaults.folder
   }
 
   const byName = ICON_MAPS.fileNames[baseLower]
+
   if (byName) return byName
 
   for (const ext of dottedSuffixesDesc(baseLower)) {
     const icon = ICON_MAPS.fileExtensions[ext]
+
     if (icon) return icon
   }
 

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>