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

package/src/hooks/create-auto-scroll.tsx

@@ -53,10 +53,12 @@ export function createAutoScroll(options: AutoScrollOptions) {
 
   const isAuto = (el: HTMLElement) => {
     const a = auto
+
     if (!a) return false
 
     if (Date.now() - a.time > 1500) {
       auto = undefined
+
       return false
     }
 
@@ -65,10 +67,13 @@ export function createAutoScroll(options: AutoScrollOptions) {
 
   const scrollToBottomNow = (behavior: ScrollBehavior) => {
     const el = store.scrollRef
+
     if (!el) return
     markAuto(el)
+
     if (behavior === "smooth") {
       el.scrollTo({ top: el.scrollHeight, behavior })
+
       return
     }
 
@@ -82,13 +87,16 @@ export function createAutoScroll(options: AutoScrollOptions) {
     if (force && store.userScrolled) setStore("userScrolled", false)
 
     const el = store.scrollRef
+
     if (!el) return
 
     if (!force && store.userScrolled) return
 
     const distance = distanceFromBottom(el)
+
     if (distance < 2) {
       markAuto(el)
+
       return
     }
 
@@ -99,11 +107,15 @@ export function createAutoScroll(options: AutoScrollOptions) {
 
   const stop = () => {
     const el = store.scrollRef
+
     if (!el) return
+
     if (!canScroll(el)) {
       if (store.userScrolled) setStore("userScrolled", false)
+
       return
     }
+
     if (store.userScrolled) return
 
     setStore("userScrolled", true)
@@ -118,27 +130,32 @@ export function createAutoScroll(options: AutoScrollOptions) {
     const el = store.scrollRef
     const target = e.target instanceof Element ? e.target : undefined
     const nested = target?.closest("[data-scrollable]")
+
     if (el && nested && nested !== el) return
     stop()
   }
 
   const handleScroll = () => {
     const el = store.scrollRef
+
     if (!el) return
 
     if (!canScroll(el)) {
       if (store.userScrolled) setStore("userScrolled", false)
+
       return
     }
 
     if (distanceFromBottom(el) < threshold()) {
       if (store.userScrolled) setStore("userScrolled", false)
+
       return
     }
 
     // Ignore scroll events triggered by our own scrollToBottom calls.
     if (!store.userScrolled && isAuto(el)) {
       scrollToBottom(false)
+
       return
     }
 
@@ -148,6 +165,7 @@ export function createAutoScroll(options: AutoScrollOptions) {
   const handleInteraction = () => {
     if (!active()) return
     const selection = window.getSelection()
+
     if (selection && selection.toString().length > 0) {
       stop()
     }
@@ -158,11 +176,13 @@ export function createAutoScroll(options: AutoScrollOptions) {
 
     if (mode === "none") {
       el.style.overflowAnchor = "none"
+
       return
     }
 
     if (mode === "auto") {
       el.style.overflowAnchor = "auto"
+
       return
     }
 
@@ -173,11 +193,15 @@ export function createAutoScroll(options: AutoScrollOptions) {
     () => store.contentRef,
     () => {
       const el = store.scrollRef
+
       if (el && !canScroll(el)) {
         if (store.userScrolled) setStore("userScrolled", false)
+
         return
       }
+
       if (!active()) return
+
       if (store.userScrolled) return
       // ResizeObserver fires after layout, before paint.
       // Keep the bottom locked in the same frame to avoid visible
@@ -188,20 +212,26 @@ export function createAutoScroll(options: AutoScrollOptions) {
 
   createEffect(() => {
     const el = store.scrollRef
+
     if (!el) return
     const root = el.closest("main")
+
     if (!root) return
     let connected = el.isConnected
     const contains = (node: Node) => node === el || (node instanceof Element && node.contains(el))
+
     const observer = new MutationObserver((records) => {
       records.forEach((record) => {
         if ([...record.removedNodes].some(contains)) connected = false
+
         if (!record.addedNodes.length || ![...record.addedNodes].some(contains)) return
         const reattached = !connected
         connected = true
+
         if (reattached) scrollToBottom(false)
       })
     })
+
     observer.observe(root, { childList: true })
     onCleanup(() => observer.disconnect())
   })
@@ -209,11 +239,13 @@ export function createAutoScroll(options: AutoScrollOptions) {
   createEffect(
     on(options.working, (working: boolean) => {
       settling = false
+
       if (settleTimer) clearTimeout(settleTimer)
       settleTimer = undefined
 
       if (working) {
         if (!store.userScrolled) scrollToBottom(true)
+
         return
       }
 
@@ -229,6 +261,7 @@ export function createAutoScroll(options: AutoScrollOptions) {
     // update overflow anchoring once the element exists.
     store.userScrolled
     const el = store.scrollRef
+
     if (!el) return
     updateOverflowAnchor(el)
   })
@@ -237,6 +270,7 @@ export function createAutoScroll(options: AutoScrollOptions) {
 
   onCleanup(() => {
     if (settleTimer) clearTimeout(settleTimer)
+
     if (autoTimer) clearTimeout(autoTimer)
   })
 

package/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from "./use-filtered-list"
+
 export * from "./create-auto-scroll"

package/src/hooks/use-filtered-list.tsx

@@ -21,6 +21,7 @@ export function useFilteredList<T>(props: FilteredListProps<T>) {
   const [store, setStore] = createStore<{ filter: string }>({ filter: "" })
 
   type Group = { category: string; items: [T, ...T[]] }
+
   const empty: Group[] = []
 
   const [grouped, { refetch }] = createResource(
@@ -32,6 +33,7 @@ export function useFilteredList<T>(props: FilteredListProps<T>) {
       const query = filter ?? ""
       const needle = query.toLowerCase()
       const all = (await Promise.resolve(items)) || []
+
       const result = pipe(
         all,
         (x) => {
@@ -39,10 +41,12 @@ export function useFilteredList<T>(props: FilteredListProps<T>) {
           const skipFilter = props.skipFilter
           const filterable = skipFilter ? x.filter((item) => !skipFilter(item)) : x
           const skipped = skipFilter ? x.filter(skipFilter) : []
+
           const filtered =
             !props.filterKeys && Array.isArray(filterable) && filterable.every((e) => typeof e === "string")
               ? (fuzzysort.go(needle, filterable).map((x) => x.target) as T[])
               : fuzzysort.go(needle, filterable, { keys: props.filterKeys! }).map((x) => x.obj)
+
           return skipped.length ? [...filtered, ...skipped] : filtered
         },
         groupBy((x) => (props.groupBy ? props.groupBy(x) : "")),
@@ -50,6 +54,7 @@ export function useFilteredList<T>(props: FilteredListProps<T>) {
         map(([k, v]) => ({ category: k, items: props.sortBy ? v.sort(props.sortBy) : v })),
         (groups) => (props.sortGroupsBy ? groups.sort(props.sortGroupsBy) : groups),
       )
+
       return result
     },
     { initialValue: empty },
@@ -64,10 +69,13 @@ export function useFilteredList<T>(props: FilteredListProps<T>) {
 
   function initialActive() {
     if (props.noInitialSelection) return ""
+
     if (props.current) return props.key(props.current)
 
     const items = flat()
+
     if (items.length === 0) return ""
+
     return props.key(items[0])
   }
 
@@ -80,9 +88,12 @@ export function useFilteredList<T>(props: FilteredListProps<T>) {
   const reset = () => {
     if (props.noInitialSelection) {
       list.setActive("")
+
       return
     }
+
     const all = flat()
+
     if (all.length === 0) return
     list.setActive(props.key(all[0]))
   }
@@ -92,14 +103,17 @@ export function useFilteredList<T>(props: FilteredListProps<T>) {
       event.preventDefault()
       const selectedIndex = flat().findIndex((x) => props.key(x) === list.active())
       const selected = flat()[selectedIndex]
+
       if (selected) props.onSelect?.(selected, selectedIndex)
     } else if (event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey) {
       if (event.key === "n" || event.key === "p") {
         event.preventDefault()
+
         const navEvent = new KeyboardEvent("keydown", {
           key: event.key === "n" ? "ArrowDown" : "ArrowUp",
           bubbles: true,
         })
+
         list.onKeyDown(navEvent)
       }
     } else {

package/src/i18n/no.ts

@@ -1,4 +1,5 @@
 import { dict as en } from "./en"
+
 type Keys = keyof typeof en
 
 export const dict: Record<Keys, string> = {

package/src/layout/divider/divider.tsx

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

package/src/navigation/menu/menu.tsx

@@ -47,7 +47,9 @@ const MenuAppearanceContext = createContext<{ appearance: Accessor<MenuAppearanc
 
 function useMenuContext() {
   const ctx = useContext(MenuAppearanceContext)
+
   if (!ctx) throw new Error("Menu components must be used inside Menu or Menu.Context")
+
   return ctx
 }
 
@@ -76,6 +78,7 @@ export interface MenuItemProps extends ComponentProps<typeof DropdownMenu.Item>
 function MenuItem(props: ParentProps<MenuItemProps>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
+
   return (
     <DropdownMenu.Item
       {...r}
@@ -98,6 +101,7 @@ export interface MenuCheckboxItemProps extends ComponentProps<typeof DropdownMen
 function MenuCheckboxItem(props: ParentProps<MenuCheckboxItemProps>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
+
   return (
     <DropdownMenu.CheckboxItem
       {...r}
@@ -128,6 +132,7 @@ export interface MenuRadioItemProps extends ComponentProps<typeof DropdownMenu.R
 function MenuRadioItem(props: ParentProps<MenuRadioItemProps>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
+
   return (
     <DropdownMenu.RadioItem
       {...r}
@@ -178,6 +183,7 @@ function MenuSub(props: MenuSubProps) {
 function MenuSubTrigger(props: ParentProps<MenuSubTriggerProps>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
+
   return (
     <DropdownMenu.SubTrigger
       {...r}
@@ -195,6 +201,7 @@ function MenuSubTrigger(props: ParentProps<MenuSubTriggerProps>) {
 function MenuSubContent(props: ComponentProps<typeof DropdownMenu.SubContent>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
+
   return (
     <DropdownMenu.SubContent
       {...r}
@@ -208,6 +215,7 @@ function MenuSubContent(props: ComponentProps<typeof DropdownMenu.SubContent>) {
 function MenuGroupLabel(props: ComponentProps<typeof DropdownMenu.GroupLabel>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
+
   return (
     <DropdownMenu.GroupLabel
       {...r}
@@ -221,6 +229,7 @@ function MenuGroupLabel(props: ComponentProps<typeof DropdownMenu.GroupLabel>) {
 function MenuSeparator(props: ComponentProps<typeof DropdownMenu.Separator>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
+
   return (
     <DropdownMenu.Separator
       {...r}
@@ -234,6 +243,7 @@ function MenuSeparator(props: ComponentProps<typeof DropdownMenu.Separator>) {
 function MenuContent(props: ComponentProps<typeof DropdownMenu.Content>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
+
   return (
     <DropdownMenu.Content
       {...r}
@@ -251,6 +261,7 @@ export interface MenuProps extends ComponentProps<typeof DropdownMenu> {
 function MenuRoot(props: MenuProps) {
   const [local, rest] = splitProps(props, ["appearance", "children"])
   const appearance = () => local.appearance ?? "compact"
+
   return (
     <MenuAppearanceContext.Provider value={{ appearance }}>
       <DropdownMenu {...rest}>{local.children}</DropdownMenu>
@@ -265,6 +276,7 @@ export interface MenuContextProps extends ComponentProps<typeof ContextMenu> {
 function MenuContextRoot(props: MenuContextProps) {
   const [local, rest] = splitProps(props, ["appearance", "children"])
   const appearance = () => local.appearance ?? "compact"
+
   return (
     <MenuAppearanceContext.Provider value={{ appearance }}>
       <ContextMenu {...rest}>{local.children}</ContextMenu>
@@ -275,6 +287,7 @@ function MenuContextRoot(props: MenuContextProps) {
 function MenuContextContent(props: ComponentProps<typeof ContextMenu.Content>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
+
   return (
     <ContextMenu.Content
       {...r}

package/src/navigation/segmented-control/segmented-control.tsx

@@ -26,7 +26,9 @@ const SegmentedControlContext = createContext<SegmentedControlContextValue>()
 
 function useSegmentedControlContext() {
   const ctx = useContext(SegmentedControlContext)
+
   if (!ctx) throw new Error("SegmentedControlItem must be used inside SegmentedControl")
+
   return ctx
 }
 
@@ -45,6 +47,7 @@ export type SegmentedControlProps = Omit<ComponentProps<"div">, "onChange"> &
 export function SegmentedControl(props: SegmentedControlProps) {
   const isControlled = createMemo(() => Object.hasOwn(props as object, "value"))
   const merged = mergeProps({ allowDeselect: false, disabled: false }, props)
+
   const [local, rest] = splitProps(merged, [
     "class",
     "classList",
@@ -77,10 +80,13 @@ export function SegmentedControl(props: SegmentedControlProps) {
 
   const focusNext = (from: HTMLButtonElement, direction: 1 | -1) => {
     const root = from.closest(`[data-slot="segmented-control-v2"]`)
+
     if (!root) return
+
     const buttons = Array.from(
       root.querySelectorAll<HTMLButtonElement>(`button[data-slot="segmented-control-v2-item"]`),
     ).filter((b) => !b.disabled)
+
     const i = buttons.indexOf(from)
     const next = buttons[i + direction]
     next?.focus()
@@ -96,6 +102,7 @@ export function SegmentedControl(props: SegmentedControlProps) {
 
   const assignRef = (el: HTMLDivElement | undefined) => {
     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
   }
@@ -134,6 +141,7 @@ function invokeButtonHandler<E extends Event>(
 
 export function SegmentedControlItem(props: SegmentedControlItemProps) {
   const merged = mergeProps({ disabled: false }, props)
+
   const [local, rest] = splitProps(merged, [
     "class",
     "classList",
@@ -143,6 +151,7 @@ export function SegmentedControlItem(props: SegmentedControlItemProps) {
     "onClick",
     "onKeyDown",
   ])
+
   const ctx = useSegmentedControlContext()
 
   const pressed = createMemo(() => ctx.selected() === local.value)
@@ -150,13 +159,16 @@ export function SegmentedControlItem(props: SegmentedControlItemProps) {
 
   const onClick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> = (e) => {
     invokeButtonHandler(local.onClick, e)
+
     if (e.defaultPrevented || disabled()) return
+
     if (pressed()) ctx.clearIfAllowed(local.value)
     else 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
@@ -173,16 +185,20 @@ export function SegmentedControlItem(props: SegmentedControlItemProps) {
     else if (e.key === "Home") {
       e.preventDefault()
       const root = t.closest(`[data-slot="segmented-control-v2"]`)
+
       const first = root?.querySelector<HTMLButtonElement>(
         `button[data-slot="segmented-control-v2-item"]:not(:disabled)`,
       )
+
       first?.focus()
     } else if (e.key === "End") {
       e.preventDefault()
       const root = t.closest(`[data-slot="segmented-control-v2"]`)
+
       const buttons = root?.querySelectorAll<HTMLButtonElement>(
         `button[data-slot="segmented-control-v2-item"]:not(:disabled)`,
       )
+
       const last = buttons?.[buttons.length - 1]
       last?.focus()
     }

package/src/navigation/tab-state-indicator.tsx

@@ -2,6 +2,7 @@ import { splitProps, type ComponentProps } from "solid-js"
 
 export function TabStateIndicator(props: ComponentProps<"svg">) {
   const [local, rest] = splitProps(props, ["class", "classList", "width", "height"])
+
   return (
     <svg
       {...rest}

package/src/navigation/tabs/tabs.tsx

@@ -10,7 +10,9 @@ export interface TabsProps extends ComponentProps<typeof Root> {
   variant?: TabsVariant
   orientation?: "horizontal" | "vertical"
 }
+
 export interface TabsListProps extends ComponentProps<typeof List> {}
+
 export interface TabsTriggerProps extends ComponentProps<typeof Trigger> {
   classes?: { button?: string }
   closeButton?: JSX.Element
@@ -18,7 +20,9 @@ export interface TabsTriggerProps extends ComponentProps<typeof Trigger> {
   onMiddleClick?: () => void
   subtext?: JSX.Element | string
 }
+
 export interface TabsCloseButtonProps extends ComponentProps<"button"> {}
+
 export interface TabsContentProps extends ComponentProps<typeof Content> {}
 
 const TabsContext = createContext<{ current: () => boolean }>({ current: () => false })
@@ -27,12 +31,17 @@ function TabsRoot(props: TabsProps) {
   const [local, rest] = splitProps(props, ["class", "classList", "variant", "orientation", "children"])
   const variant = () => local.variant ?? "panel"
   const current = () => variant() === "line" || variant() === "pill" || variant() === "settings"
+
   const dataVariant = () => {
     if (variant() === "panel" || variant() === "line") return "normal"
+
     if (variant() === "underline") return "alt"
+
     if (variant() === "surface") return "pill"
+
     return variant()
   }
+
   return (
     <TabsContext.Provider value={{ current }}>
       <Root
@@ -55,6 +64,7 @@ function TabsRoot(props: TabsProps) {
 function TabsList(props: TabsListProps) {
   const ctx = useContext(TabsContext)
   const [local, rest] = splitProps(props, ["class", "classList"])
+
   return (
     <List
       {...rest}
@@ -69,6 +79,7 @@ function TabsList(props: TabsListProps) {
 
 function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
   const ctx = useContext(TabsContext)
+
   const [local, rest] = splitProps(props, [
     "class",
     "classList",
@@ -80,9 +91,11 @@ function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
     "subtext",
     "dir",
   ])
+
   const wrapperSlot = () => (ctx.current() ? "tabs-v2-trigger-wrapper" : "tabs-trigger-wrapper")
   const triggerSlot = () => (ctx.current() ? "tabs-v2-trigger" : "tabs-trigger")
   const closeSlot = () => (ctx.current() ? "tabs-v2-trigger-close-button" : "tabs-trigger-close-button")
+
   return (
     <div
       data-slot={wrapperSlot()}
@@ -135,6 +148,7 @@ function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
 function TabsCloseButton(props: TabsCloseButtonProps) {
   const i18n = useI18n()
   const [local, rest] = splitProps(props, ["class", "classList", "onClick", "onPointerDown", "aria-label"])
+
   return (
     <button
       type="button"
@@ -147,11 +161,13 @@ function TabsCloseButton(props: TabsCloseButtonProps) {
       }}
       onPointerDown={(event) => {
         event.stopPropagation()
+
         if (typeof local.onPointerDown === "function") local.onPointerDown(event)
       }}
       onClick={(event) => {
         event.preventDefault()
         event.stopPropagation()
+
         if (typeof local.onClick === "function") local.onClick(event)
       }}
     >
@@ -166,6 +182,7 @@ function TabsCloseButton(props: TabsCloseButtonProps) {
 function TabsContent(props: ParentProps<TabsContentProps>) {
   const ctx = useContext(TabsContext)
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Content
       {...rest}
@@ -182,6 +199,7 @@ function TabsContent(props: ParentProps<TabsContentProps>) {
 
 const TabsSectionTitle: Component<ParentProps> = (props) => {
   const ctx = useContext(TabsContext)
+
   return <div data-slot={ctx.current() ? "tabs-v2-section-title" : "tabs-section-title"}>{props.children}</div>
 }
 

package/src/overlays/dialog/dialog.tsx

@@ -31,6 +31,7 @@ export function DialogFooter(props: ParentProps) {
 
 export function DialogBody(props: ParentProps & { class?: ComponentProps<"div">["class"] }) {
   const [local] = splitProps(props, ["class", "children"])
+
   return (
     <div data-slot="dialog-body" class={local.class}>
       {local.children}
@@ -96,6 +97,7 @@ export function Dialog(props: DialogProps) {
     "onCloseAutoFocus",
     "preventBackdropDismiss",
   ])
+
   const layer = useDialogLayer()
   createEffect(() => layer?.setBackdropDismiss(!local.preventBackdropDismiss))
 
@@ -120,6 +122,7 @@ export function Dialog(props: DialogProps) {
           onOpenAutoFocus={(e) => {
             const target = e.currentTarget as HTMLElement | null
             const autofocusEl = target?.querySelector("[autofocus]") as HTMLElement | null
+
             if (autofocusEl) {
               e.preventDefault()
               autofocusEl.focus({ preventScroll: true })

package/src/overlays/tooltip/tooltip.tsx

@@ -17,11 +17,13 @@ export interface TooltipProps extends ComponentProps<typeof Root> {
 
 export function Tooltip(props: TooltipProps) {
   let ref: HTMLDivElement | undefined
+
   const [state, setState] = createStore({
     open: false,
     block: false,
     expand: false,
   })
+
   const [local, others] = splitProps(props, [
     "children",
     "appearance",
@@ -40,13 +42,17 @@ export function Tooltip(props: TooltipProps) {
 
   const inside = () => {
     const active = document.activeElement
+
     if (!ref || !active) return false
+
     return ref.contains(active)
   }
 
   const drop = (expand = state.expand) => {
     if (expand || !state.block) return
+
     if (ref?.matches(":hover")) return
+
     if (inside()) return
     setState("block", false)
   }
@@ -54,11 +60,14 @@ export function Tooltip(props: TooltipProps) {
   const sync = () => {
     const expand = !!ref?.querySelector('[aria-expanded="true"], [data-expanded]')
     setState("expand", expand)
+
     if (expand) {
       setState("block", true)
       close()
+
       return
     }
+
     drop(expand)
   }
 
@@ -101,11 +110,15 @@ export function Tooltip(props: TooltipProps) {
           open={controlled() ? local.forceOpen : state.open}
           onOpenChange={(open) => {
             if (controlled()) return
+
             if (state.block && open) return
+
             if (justClickedTrigger) {
               justClickedTrigger = false
+
               return
             }
+
             setState("open", open)
           }}
         >
@@ -129,6 +142,7 @@ export function Tooltip(props: TooltipProps) {
             <Content
               ref={(el) => {
                 const theme = ref?.closest("[data-theme]")?.getAttribute("data-theme")
+
                 if (theme) el.setAttribute("data-theme", theme)
               }}
               data-component="tooltip-v2"
@@ -141,6 +155,7 @@ export function Tooltip(props: TooltipProps) {
                 if (ref === e.target || (e.target instanceof Node && ref?.contains(e.target))) {
                   justClickedTrigger = true
                 }
+
                 e.preventDefault()
               }}
             >