@opencode-ai/ui 0.0.0-beta-202606251302

package/src/components/provider-icons/types.ts

@@ -0,0 +1,105 @@
+// This file is generated by icon spritesheet generator
+
+export const iconNames = [
+  "zhipuai",
+  "zhipuai-coding-plan",
+  "zenmux",
+  "zai",
+  "zai-coding-plan",
+  "xiaomi",
+  "xai",
+  "wandb",
+  "vultr",
+  "vivgrid",
+  "vercel",
+  "venice",
+  "v0",
+  "upstage",
+  "togetherai",
+  "synthetic",
+  "submodel",
+  "stepfun",
+  "stackit",
+  "siliconflow",
+  "siliconflow-cn",
+  "scaleway",
+  "sap-ai-core",
+  "requesty",
+  "qiniu-ai",
+  "qihang-ai",
+  "privatemode-ai",
+  "poe",
+  "perplexity",
+  "ovhcloud",
+  "openrouter",
+  "llmgateway",
+  "opencode",
+  "opencode-go",
+  "openai",
+  "ollama-cloud",
+  "nvidia",
+  "novita-ai",
+  "nova",
+  "nebius",
+  "nano-gpt",
+  "morph",
+  "moonshotai",
+  "moonshotai-cn",
+  "modelscope",
+  "moark",
+  "mistral",
+  "minimax",
+  "minimax-coding-plan",
+  "minimax-cn",
+  "minimax-cn-coding-plan",
+  "meganova",
+  "lucidquery",
+  "lmstudio",
+  "llama",
+  "kuae-cloud-coding-plan",
+  "kimi-for-coding",
+  "kilo",
+  "jiekou",
+  "io-net",
+  "inference",
+  "inception",
+  "iflowcn",
+  "huggingface",
+  "helicone",
+  "groq",
+  "google",
+  "google-vertex",
+  "google-vertex-anthropic",
+  "gitlab",
+  "github-models",
+  "github-copilot",
+  "friendli",
+  "firmware",
+  "fireworks-ai",
+  "fastrouter",
+  "evroc",
+  "digitalocean",
+  "deepseek",
+  "deepinfra",
+  "cortecs",
+  "cohere",
+  "cloudflare-workers-ai",
+  "cloudflare-ai-gateway",
+  "cloudferro-sherlock",
+  "chutes",
+  "cerebras",
+  "berget",
+  "baseten",
+  "bailing",
+  "azure",
+  "azure-cognitive-services",
+  "anthropic",
+  "amazon-bedrock",
+  "alibaba",
+  "alibaba-cn",
+  "aihubmix",
+  "abacus",
+  "302ai",
+] as const
+
+export type IconName = (typeof iconNames)[number]

package/src/components/radio-group.css

@@ -0,0 +1,187 @@
+[data-component="radio-group"] {
+  --radio-group-height: 28px;
+  --radio-group-gap: 4px;
+  --radio-group-padding: 2px;
+
+  display: inline-flex;
+
+  [data-slot="radio-group-wrapper"] {
+    all: unset;
+    background-color: var(--surface-inset-base);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-xxs-border);
+    display: inline-flex;
+    height: var(--radio-group-height);
+    margin: 0;
+    overflow: visible;
+    padding: 0;
+    position: relative;
+    width: fit-content;
+  }
+
+  &[data-fill] [data-slot="radio-group-wrapper"] {
+    width: 100%;
+  }
+
+  [data-slot="radio-group-items"] {
+    display: inline-flex;
+    flex-direction: row;
+    gap: var(--radio-group-gap);
+    height: 100%;
+    list-style: none;
+    position: relative;
+    z-index: 1;
+  }
+
+  &[data-fill] [data-slot="radio-group-items"] {
+    width: 100%;
+  }
+
+  [data-slot="radio-group-indicator"] {
+    background: var(--button-secondary-base);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-xs-border-base);
+    content: "";
+    opacity: var(--indicator-opacity, 1);
+    pointer-events: none;
+    position: absolute;
+    transition:
+      opacity 200ms ease-out,
+      box-shadow 100ms ease-in-out,
+      width 200ms cubic-bezier(0.22, 1.2, 0.36, 1),
+      height 200ms cubic-bezier(0.22, 1.2, 0.36, 1),
+      transform 300ms cubic-bezier(0.22, 1.2, 0.36, 1);
+    will-change: transform;
+    z-index: 0;
+  }
+
+  [data-slot="radio-group-item"] {
+    display: flex;
+    height: 100%;
+    min-width: 0;
+    position: relative;
+  }
+
+  &[data-fill] [data-slot="radio-group-item"] {
+    flex: 1;
+  }
+
+  [data-slot="radio-group-item-input"] {
+    border-width: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  [data-slot="radio-group-item-label"] {
+    color: var(--text-weak);
+    cursor: default;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-medium);
+    flex: 1;
+    height: 100%;
+    line-height: 1;
+    padding: var(--radio-group-padding);
+    position: relative;
+    transition:
+      color 200ms ease-out,
+      opacity 200ms ease-out;
+    user-select: none;
+  }
+
+  [data-slot="radio-group-item-control"] {
+    align-items: center;
+    border-radius: var(--radius-xs);
+    display: inline-flex;
+    height: 100%;
+    justify-content: center;
+    min-width: 0;
+    padding: var(--radio-group-control-padding, 0 10px);
+    transition: background-color 200ms ease-out;
+    width: 100%;
+  }
+
+  &[data-pad="none"] {
+    --radio-group-control-padding: 0;
+  }
+
+  &[data-pad="normal"] {
+    --radio-group-control-padding: 0 10px;
+  }
+
+  /* Checked state */
+  [data-slot="radio-group-item-input"][data-checked] + [data-slot="radio-group-item-label"] {
+    color: var(--text-strong);
+  }
+
+  /* Hover state: match the inset background (adds subtle density) */
+  [data-slot="radio-group-item-input"]:not([data-checked], [data-disabled])
+    + [data-slot="radio-group-item-label"]:hover
+    [data-slot="radio-group-item-control"] {
+    background-color: var(--surface-inset-base);
+  }
+
+  /* Do not overlay hover on the active segment */
+  [data-slot="radio-group-item-input"][data-checked]
+    + [data-slot="radio-group-item-label"]:hover
+    [data-slot="radio-group-item-control"] {
+    background-color: transparent;
+  }
+
+  /* Disabled state */
+  [data-slot="radio-group-item-input"][data-disabled] + [data-slot="radio-group-item-label"] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Focus state */
+  [data-slot="radio-group-wrapper"]:has([data-slot="radio-group-item-input"]:focus-visible)
+    [data-slot="radio-group-indicator"] {
+    box-shadow: var(--shadow-xs-border-focus);
+  }
+
+  /* Hide indicator when nothing is checked */
+  [data-slot="radio-group-wrapper"]:not(:has([data-slot="radio-group-item-input"][data-checked]))
+    [data-slot="radio-group-indicator"] {
+    --indicator-opacity: 0;
+  }
+
+  /* Vertical orientation */
+  &[aria-orientation="vertical"] [data-slot="radio-group-items"] {
+    flex-direction: column;
+  }
+
+  /* Small size variant */
+  &[data-size="small"] {
+    --radio-group-height: 24px;
+    --radio-group-gap: 3px;
+    --radio-group-padding: 2px;
+
+    [data-slot="radio-group-item-label"] {
+      font-size: 12px;
+    }
+
+    [data-slot="radio-group-item-control"] {
+      padding: var(--radio-group-control-padding, 0 8px);
+    }
+  }
+
+  &[data-size="small"][data-pad="normal"] {
+    --radio-group-control-padding: 0 8px;
+  }
+
+  /* Disabled root state */
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}

package/src/components/radio-group.tsx

@@ -0,0 +1,83 @@
+import { SegmentedControl as Kobalte } from "@kobalte/core/segmented-control"
+import { For, splitProps } from "solid-js"
+import type { ComponentProps, JSX } from "solid-js"
+
+export type RadioGroupProps<T> = Omit<
+  ComponentProps<typeof Kobalte>,
+  "value" | "defaultValue" | "onChange" | "children"
+> & {
+  options: T[]
+  current?: T
+  defaultValue?: T
+  value?: (x: T) => string
+  label?: (x: T) => JSX.Element | string
+  onSelect?: (value: T | undefined) => void
+  class?: ComponentProps<"div">["class"]
+  classList?: ComponentProps<"div">["classList"]
+  size?: "small" | "medium"
+  fill?: boolean
+  pad?: "none" | "normal"
+}
+
+export function RadioGroup<T>(props: RadioGroupProps<T>) {
+  const [local, others] = splitProps(props, [
+    "class",
+    "classList",
+    "options",
+    "current",
+    "defaultValue",
+    "value",
+    "label",
+    "onSelect",
+    "size",
+    "fill",
+    "pad",
+  ])
+
+  const getValue = (item: T): string => {
+    if (local.value) return local.value(item)
+    return String(item)
+  }
+
+  const getLabel = (item: T): JSX.Element | string => {
+    if (local.label) return local.label(item)
+    return String(item)
+  }
+
+  const findOption = (v: string): T | undefined => {
+    return local.options.find((opt) => getValue(opt) === v)
+  }
+
+  return (
+    <Kobalte
+      {...others}
+      data-component="radio-group"
+      data-size={local.size ?? "medium"}
+      data-fill={local.fill ? "" : undefined}
+      data-pad={local.pad ?? "normal"}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+      value={local.current ? getValue(local.current) : undefined}
+      defaultValue={local.defaultValue ? getValue(local.defaultValue) : undefined}
+      onChange={(v) => local.onSelect?.(findOption(v))}
+    >
+      <div role="presentation" data-slot="radio-group-wrapper">
+        <Kobalte.Indicator data-slot="radio-group-indicator" />
+        <div role="presentation" data-slot="radio-group-items">
+          <For each={local.options}>
+            {(option) => (
+              <Kobalte.Item value={getValue(option)} data-slot="radio-group-item" data-value={getValue(option)}>
+                <Kobalte.ItemInput data-slot="radio-group-item-input" />
+                <Kobalte.ItemLabel data-slot="radio-group-item-label">
+                  <span data-slot="radio-group-item-control">{getLabel(option)}</span>
+                </Kobalte.ItemLabel>
+              </Kobalte.Item>
+            )}
+          </For>
+        </div>
+      </div>
+    </Kobalte>
+  )
+}

package/src/components/resize-handle.css

@@ -0,0 +1,58 @@
+[data-component="resize-handle"] {
+  position: absolute;
+  z-index: 10;
+
+  &::after {
+    content: "";
+    position: absolute;
+    opacity: 0;
+    transition: opacity 0.15s ease-in-out;
+  }
+
+  &:hover::after,
+  &:active::after {
+    opacity: 1;
+  }
+
+  &[data-direction="horizontal"] {
+    inset-block: 0;
+    inset-inline-end: 0;
+    width: 8px;
+    transform: translateX(50%);
+    cursor: col-resize;
+
+    &[data-edge="start"] {
+      inset-inline-start: 0;
+      inset-inline-end: auto;
+      transform: translateX(-50%);
+    }
+
+    &::after {
+      width: 3px;
+      inset-block: 0;
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  &[data-direction="vertical"] {
+    inset-inline: 0;
+    inset-block-start: 0;
+    height: 8px;
+    transform: translateY(-50%);
+    cursor: row-resize;
+
+    &[data-edge="end"] {
+      inset-block-start: auto;
+      inset-block-end: 0;
+      transform: translateY(50%);
+    }
+
+    &::after {
+      height: 3px;
+      inset-inline: 0;
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}

package/src/components/resize-handle.tsx

@@ -0,0 +1,82 @@
+import { splitProps, type JSX } from "solid-js"
+
+export interface ResizeHandleProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onResize"> {
+  direction: "horizontal" | "vertical"
+  edge?: "start" | "end"
+  size: number
+  min: number
+  max: number
+  onResize: (size: number) => void
+  onCollapse?: () => void
+  collapseThreshold?: number
+}
+
+export function ResizeHandle(props: ResizeHandleProps) {
+  const [local, rest] = splitProps(props, [
+    "direction",
+    "edge",
+    "size",
+    "min",
+    "max",
+    "onResize",
+    "onCollapse",
+    "collapseThreshold",
+    "class",
+    "classList",
+  ])
+
+  const handleMouseDown = (e: MouseEvent) => {
+    e.preventDefault()
+    const edge = local.edge ?? (local.direction === "vertical" ? "start" : "end")
+    const start = local.direction === "horizontal" ? e.clientX : e.clientY
+    const startSize = local.size
+    let current = startSize
+
+    document.body.style.userSelect = "none"
+    document.body.style.overflow = "hidden"
+
+    const onMouseMove = (moveEvent: MouseEvent) => {
+      const pos = local.direction === "horizontal" ? moveEvent.clientX : moveEvent.clientY
+      const delta =
+        local.direction === "vertical"
+          ? edge === "end"
+            ? pos - start
+            : start - pos
+          : edge === "start"
+            ? start - pos
+            : pos - start
+      current = startSize + delta
+      const clamped = Math.min(local.max, Math.max(local.min, current))
+      local.onResize(clamped)
+    }
+
+    const onMouseUp = () => {
+      document.body.style.userSelect = ""
+      document.body.style.overflow = ""
+      document.removeEventListener("mousemove", onMouseMove)
+      document.removeEventListener("mouseup", onMouseUp)
+
+      const threshold = local.collapseThreshold ?? 0
+      if (local.onCollapse && threshold > 0 && current < threshold) {
+        local.onCollapse()
+      }
+    }
+
+    document.addEventListener("mousemove", onMouseMove)
+    document.addEventListener("mouseup", onMouseUp)
+  }
+
+  return (
+    <div
+      {...rest}
+      data-component="resize-handle"
+      data-direction={local.direction}
+      data-edge={local.edge ?? (local.direction === "vertical" ? "start" : "end")}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+      onMouseDown={handleMouseDown}
+    />
+  )
+}

package/src/components/scroll-view.css

@@ -0,0 +1,66 @@
+.scroll-view {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.scroll-view__viewport {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  overflow-y: auto;
+  scrollbar-width: none;
+  outline: none;
+}
+
+.scroll-view__viewport::-webkit-scrollbar {
+  display: none;
+}
+
+.scroll-view__thumb {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 12px;
+  transition: opacity 200ms ease;
+  cursor: default;
+  user-select: none;
+  opacity: 0;
+}
+
+.scroll-view__thumb::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  border-radius: 9999px;
+  background-color: var(--border-weak-base);
+  backdrop-filter: blur(4px);
+  transition: background-color 150ms ease;
+}
+
+.scroll-view__thumb:hover::after,
+.scroll-view__thumb[data-dragging="true"]::after {
+  background-color: var(--border-strong-base);
+}
+
+.dark .scroll-view__thumb::after,
+[data-theme="dark"] .scroll-view__thumb::after {
+  background-color: var(--border-weak-base);
+}
+
+.dark .scroll-view__thumb:hover::after,
+[data-theme="dark"] .scroll-view__thumb:hover::after,
+.dark .scroll-view__thumb[data-dragging="true"]::after,
+[data-theme="dark"] .scroll-view__thumb[data-dragging="true"]::after {
+  background-color: var(--border-strong-base);
+}
+
+.scroll-view__thumb[data-visible="true"] {
+  opacity: 1;
+}