@opencode-ai/ui 0.0.0-beta-202606251302

package/src/components/list.tsx

@@ -0,0 +1,394 @@
+import { type FilteredListProps, useFilteredList } from "@opencode-ai/ui/hooks"
+import { createEffect, For, type JSX, on, Show } from "solid-js"
+import { createStore } from "solid-js/store"
+import { makeEventListener } from "@solid-primitives/event-listener"
+import { useI18n } from "../context/i18n"
+import { Icon, type IconProps } from "./icon"
+import { IconButton } from "./icon-button"
+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
+  }
+}
+
+export interface ListSearchProps {
+  placeholder?: string
+  autofocus?: boolean
+  hideIcon?: boolean
+  class?: string
+  action?: JSX.Element
+}
+
+export interface ListAddProps {
+  class?: string
+  render: () => JSX.Element
+}
+
+export interface ListAddProps {
+  class?: string
+  render: () => JSX.Element
+}
+
+export interface ListProps<T> extends FilteredListProps<T> {
+  class?: string
+  children: (item: T) => JSX.Element
+  emptyMessage?: string
+  loadingMessage?: string
+  onKeyEvent?: (event: KeyboardEvent, item: T | undefined) => void
+  onMove?: (item: T | undefined) => void
+  onFilter?: (value: string) => void
+  activeIcon?: IconProps["name"]
+  filter?: string
+  search?: ListSearchProps | boolean
+  itemWrapper?: (item: T, node: JSX.Element) => JSX.Element
+  divider?: boolean
+  add?: ListAddProps
+  groupHeader?: (group: { category: string; items: T[] }) => JSX.Element
+}
+
+export interface ListRef {
+  onKeyDown: (e: KeyboardEvent) => void
+  setScrollRef: (el: HTMLDivElement | undefined) => void
+  setFilter: (value: string) => void
+}
+
+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
+  const setInternalFilter = (value: string) => setStore("internalFilter", value)
+
+  const scrollIntoView = (container: HTMLDivElement, node: HTMLElement, block: "center" | "nearest") => {
+    const containerRect = container.getBoundingClientRect()
+    const nodeRect = node.getBoundingClientRect()
+    const top = nodeRect.top - containerRect.top + container.scrollTop
+    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
+        : top < viewTop
+          ? top
+          : bottom > viewBottom
+            ? bottom - container.clientHeight
+            : viewTop
+    const max = Math.max(0, container.scrollHeight - container.clientHeight)
+    container.scrollTop = Math.max(0, Math.min(target, max))
+  }
+
+  const { filter, grouped, flat, active, setActive, onKeyDown, onInput, refetch } = useFilteredList<T>(props)
+
+  const searchProps = () => (typeof props.search === "object" ? props.search : {})
+  const searchAction = () => searchProps().action
+  const addProps = () => props.add
+  const showAdd = () => !!addProps()
+
+  const moved = (event: MouseEvent) => event.movementX !== 0 || event.movementY !== 0
+
+  const applyFilter = (value: string, options?: { ref?: boolean }) => {
+    const prev = filter()
+    setInternalFilter(value)
+    onInput(value)
+    props.onFilter?.(value)
+
+    if (!options?.ref) return
+
+    // Force a refetch even if the value is unchanged.
+    // 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)
+  })
+
+  createEffect(
+    on(
+      filter,
+      () => {
+        scrollRef()?.scrollTo(0, 0)
+      },
+      { defer: true },
+    ),
+  )
+
+  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")
+    })
+  })
+
+  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")
+  })
+
+  createEffect(() => {
+    const all = flat()
+    const current = active()
+    const item = all.find((x) => props.key(x) === current)
+    props.onMove?.(item)
+  })
+
+  const handleSelect = (item: T | undefined, index: number) => {
+    props.onSelect?.(item, index)
+  }
+
+  const handleKey = (e: KeyboardEvent) => {
+    setStore("mouseActive", false)
+    if (e.key === "Escape") return
+
+    const all = flat()
+    const selected = all.find((x) => props.key(x) === active())
+    const index = selected ? all.indexOf(selected) : -1
+    props.onKeyEvent?.(e, selected)
+
+    if (e.defaultPrevented) return
+
+    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)
+      }
+    } else {
+      onKeyDown(e)
+    }
+  }
+
+  props.ref?.({
+    onKeyDown: handleKey,
+    setScrollRef,
+    setFilter: (value) => applyFilter(value, { ref: true }),
+  })
+
+  const renderAdd = () => {
+    const add = addProps()
+    if (!add) return null
+    return (
+      <div data-slot="list-item-add" classList={{ [add.class ?? ""]: !!add.class }}>
+        {add.render()}
+      </div>
+    )
+  }
+
+  function GroupHeader(groupProps: { group: { category: string; items: T[] } }): JSX.Element {
+    const [state, setState] = createStore({
+      stuck: false,
+      header: undefined as HTMLDivElement | undefined,
+    })
+
+    createEffect(() => {
+      const scroll = scrollRef()
+      const node = state.header
+      if (!scroll || !node) return
+
+      const handler = () => {
+        const rect = node.getBoundingClientRect()
+        const scrollRect = scroll.getBoundingClientRect()
+        setState("stuck", rect.top <= scrollRect.top + 1 && scroll.scrollTop > 0)
+      }
+
+      makeEventListener(scroll, "scroll", handler, { passive: true })
+      handler()
+    })
+
+    return (
+      <div data-slot="list-header" data-stuck={state.stuck} ref={(el) => setState("header", el)}>
+        {props.groupHeader?.(groupProps.group) ?? groupProps.group.category}
+      </div>
+    )
+  }
+
+  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>
+        <span data-slot="list-filter">&quot;{query}&quot;</span>
+        <Show when={suffix}>
+          <span>{suffix}</span>
+        </Show>
+      </>
+    )
+  }
+
+  return (
+    <div data-component="list" classList={{ [props.class ?? ""]: !!props.class }}>
+      <Show when={!!props.search}>
+        <div data-slot="list-search-wrapper">
+          <div
+            data-slot="list-search"
+            classList={{ [searchProps().class ?? ""]: !!searchProps().class }}
+            onPointerDown={(event) => {
+              const container = event.currentTarget
+              if (!(container instanceof HTMLElement)) return
+
+              const node = container.querySelector("input, textarea")
+              const input = node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement ? node : inputRef
+              input?.focus()
+
+              // Prevent global listeners (e.g. dnd sensors) from cancelling focus.
+              event.stopPropagation()
+            }}
+          >
+            <div data-slot="list-search-container">
+              <Show when={!searchProps().hideIcon}>
+                <Icon name="magnifying-glass" />
+              </Show>
+              <TextField
+                autofocus={searchProps().autofocus}
+                variant="ghost"
+                data-slot="list-search-input"
+                type="text"
+                ref={(el: HTMLInputElement | HTMLTextAreaElement) => {
+                  inputRef = el
+                }}
+                value={internalFilter()}
+                onChange={(value) => applyFilter(value)}
+                onKeyDown={handleKey}
+                placeholder={searchProps().placeholder}
+                spellcheck={false}
+                autocorrect="off"
+                autocomplete="off"
+                autocapitalize="off"
+              />
+            </div>
+            <Show when={internalFilter()}>
+              <IconButton
+                icon="circle-x"
+                variant="ghost"
+                onClick={() => {
+                  setInternalFilter("")
+                  queueMicrotask(() => inputRef?.focus())
+                }}
+                aria-label={i18n.t("ui.list.clearFilter")}
+              />
+            </Show>
+          </div>
+          {searchAction()}
+        </div>
+      </Show>
+      <div ref={setScrollRef} data-slot="list-scroll">
+        <Show
+          when={flat().length > 0 || showAdd()}
+          fallback={
+            <div data-slot="list-empty-state">
+              <div data-slot="list-message">{emptyMessage()}</div>
+            </div>
+          }
+        >
+          <For each={grouped.latest}>
+            {(group, groupIndex) => {
+              const isLastGroup = () => groupIndex() === grouped.latest.length - 1
+              return (
+                <div data-slot="list-group">
+                  <Show when={group.category}>
+                    <GroupHeader group={group} />
+                  </Show>
+                  <div data-slot="list-items">
+                    <For each={group.items}>
+                      {(item, i) => {
+                        const node = (
+                          <button
+                            data-slot="list-item"
+                            data-key={props.key(item)}
+                            data-active={props.key(item) === active()}
+                            data-selected={item === props.current}
+                            onClick={() => handleSelect(item, i())}
+                            onKeyDown={handleKey}
+                            type="button"
+                            onMouseMove={(event) => {
+                              if (!moved(event)) return
+                              setStore("mouseActive", true)
+                              setActive(props.key(item))
+                            }}
+                            onMouseLeave={() => {
+                              if (!store.mouseActive) return
+                              setActive(null)
+                            }}
+                          >
+                            {props.children(item)}
+                            <Show when={item === props.current}>
+                              <span data-slot="list-item-selected-icon">
+                                <Icon name="check-small" />
+                              </span>
+                            </Show>
+                            <Show when={props.activeIcon}>
+                              {(icon) => (
+                                <span data-slot="list-item-active-icon">
+                                  <Icon name={icon()} />
+                                </span>
+                              )}
+                            </Show>
+                            {props.divider && (i() !== group.items.length - 1 || (showAdd() && isLastGroup())) && (
+                              <span data-slot="list-item-divider" />
+                            )}
+                          </button>
+                        )
+                        if (props.itemWrapper) return props.itemWrapper(item, node)
+                        return node
+                      }}
+                    </For>
+                    <Show when={showAdd() && isLastGroup()}>{renderAdd()}</Show>
+                  </div>
+                </div>
+              )
+            }}
+          </For>
+          <Show when={grouped.latest.length === 0 && showAdd()}>
+            <div data-slot="list-group">
+              <div data-slot="list-items">{renderAdd()}</div>
+            </div>
+          </Show>
+        </Show>
+      </div>
+    </div>
+  )
+}

package/src/components/logo.css

@@ -0,0 +1,4 @@
+[data-component="logo-mark"] {
+  width: 16px;
+  aspect-ratio: 4/5;
+}

package/src/components/logo.tsx

@@ -0,0 +1,62 @@
+import { type ComponentProps } from "solid-js"
+
+export const Mark = (props: { class?: string }) => {
+  return (
+    <svg
+      data-component="logo-mark"
+      classList={{ [props.class ?? ""]: !!props.class }}
+      viewBox="0 0 16 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path data-slot="logo-logo-mark-shadow" d="M12 16H4V8H12V16Z" fill="var(--icon-weak-base)" />
+      <path data-slot="logo-logo-mark-o" d="M12 4H4V16H12V4ZM16 20H0V0H16V20Z" fill="var(--icon-strong-base)" />
+    </svg>
+  )
+}
+
+export const Splash = (props: Pick<ComponentProps<"svg">, "ref" | "class">) => {
+  return (
+    <svg
+      ref={props.ref}
+      data-component="logo-splash"
+      classList={{ [props.class ?? ""]: !!props.class }}
+      viewBox="0 0 80 100"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M60 80H20V40H60V80Z" fill="var(--icon-base)" />
+      <path d="M60 20H20V80H60V20ZM80 100H0V0H80V100Z" fill="var(--icon-strong-base)" />
+    </svg>
+  )
+}
+
+export const Logo = (props: { class?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 234 42"
+      fill="none"
+      classList={{ [props.class ?? ""]: !!props.class }}
+    >
+      <g>
+        <path d="M18 30H6V18H18V30Z" fill="var(--icon-weak-base)" />
+        <path d="M18 12H6V30H18V12ZM24 36H0V6H24V36Z" fill="var(--icon-base)" />
+        <path d="M48 30H36V18H48V30Z" fill="var(--icon-weak-base)" />
+        <path d="M36 30H48V12H36V30ZM54 36H36V42H30V6H54V36Z" fill="var(--icon-base)" />
+        <path d="M84 24V30H66V24H84Z" fill="var(--icon-weak-base)" />
+        <path d="M84 24H66V30H84V36H60V6H84V24ZM66 18H78V12H66V18Z" fill="var(--icon-base)" />
+        <path d="M108 36H96V18H108V36Z" fill="var(--icon-weak-base)" />
+        <path d="M108 12H96V36H90V6H108V12ZM114 36H108V12H114V36Z" fill="var(--icon-base)" />
+        <path d="M144 30H126V18H144V30Z" fill="var(--icon-weak-base)" />
+        <path d="M144 12H126V30H144V36H120V6H144V12Z" fill="var(--icon-strong-base)" />
+        <path d="M168 30H156V18H168V30Z" fill="var(--icon-weak-base)" />
+        <path d="M168 12H156V30H168V12ZM174 36H150V6H174V36Z" fill="var(--icon-strong-base)" />
+        <path d="M198 30H186V18H198V30Z" fill="var(--icon-weak-base)" />
+        <path d="M198 12H186V30H198V12ZM204 36H180V6H198V0H204V36Z" fill="var(--icon-strong-base)" />
+        <path d="M234 24V30H216V24H234Z" fill="var(--icon-weak-base)" />
+        <path d="M216 12V18H228V12H216ZM234 24H216V30H234V36H210V6H234V24Z" fill="var(--icon-strong-base)" />
+      </g>
+    </svg>
+  )
+}

package/src/components/motion-spring.tsx

@@ -0,0 +1,58 @@
+import { attachSpring, motionValue } from "motion"
+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 &&
+  a?.stiffness === b?.stiffness &&
+  a?.damping === b?.damping &&
+  a?.mass === b?.mass &&
+  a?.velocity === b?.velocity
+
+export function useSpring(target: () => number, options?: Opt | (() => Opt), snapKey?: () => unknown) {
+  const read = () => (typeof options === "function" ? options() : options)
+  const [value, setValue] = createSignal(target())
+  const source = motionValue(value())
+  const spring = motionValue(value())
+  let config = read()
+  let snapValue = snapKey?.()
+  let stop = attachSpring(spring, source, config)
+  let off = spring.on("change", (next: number) => setValue(next))
+
+  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
+      stop()
+      spring.jump(next)
+      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()
+    stop = attachSpring(spring, source, next)
+    setValue(spring.get())
+  })
+
+  onCleanup(() => {
+    off()
+    stop()
+    spring.destroy()
+    source.destroy()
+  })
+
+  return value
+}

package/src/components/popover.css

@@ -0,0 +1,98 @@
+[data-slot="popover-trigger"] {
+  display: inline-flex;
+}
+
+[data-component="popover-content"] {
+  z-index: 50;
+  min-width: 200px;
+  max-width: 320px;
+  border-radius: var(--radius-md);
+  background-color: var(--surface-raised-stronger-non-alpha);
+
+  border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
+  background-clip: padding-box;
+  box-shadow: var(--shadow-md);
+
+  transform-origin: var(--kb-popover-content-transform-origin);
+
+  &:focus-within {
+    outline: none;
+  }
+
+  &[data-closed] {
+    animation: popover-close 0.15s ease-out;
+  }
+
+  &[data-expanded] {
+    animation: popover-open 0.15s ease-out;
+  }
+
+  [data-slot="popover-header"] {
+    display: flex;
+    padding: 12px;
+    padding-bottom: 0;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+
+    [data-slot="popover-title"] {
+      flex: 1;
+      color: var(--text-strong);
+      margin: 0;
+
+      font-family: var(--font-family-sans);
+      font-size: var(--font-size-base);
+      font-style: normal;
+      font-weight: var(--font-weight-medium);
+      line-height: var(--line-height-large);
+      letter-spacing: var(--letter-spacing-normal);
+    }
+
+    [data-slot="popover-close-button"] {
+      flex-shrink: 0;
+    }
+  }
+
+  [data-slot="popover-description"] {
+    padding: 0 12px;
+    margin: 0;
+    color: var(--text-base);
+
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="popover-body"] {
+    padding: 12px;
+  }
+
+  [data-slot="popover-arrow"] {
+    fill: var(--surface-raised-stronger-non-alpha);
+  }
+}
+
+@keyframes popover-open {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes popover-close {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}