@opencode-ai/ui 0.0.0-dev-202609030903 → 0.0.0-dev-18997

package/src/components/animated-number.tsx

@@ -43,10 +43,10 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
   )
 
   return (
-    <span data-slot="animated-number-digit">
+    <span data-slot="animated-number-digit" data-animating={animating() ? "true" : "false"}>
+      <span data-slot="animated-number-static">{props.value}</span>
       <span
         data-slot="animated-number-strip"
-        data-animating={animating() ? "true" : "false"}
         onTransitionEnd={() => {
           setState("animating", false)
           setState("step", (value) => normalize(value) + 10)

package/src/components/card.css

@@ -58,7 +58,7 @@
     gap: var(--card-gap);
   }
 
-  :where([data-slot="card-title"]) [data-component="icon"] {
+  :where([data-slot="card-title"]) [data-slot="icon-svg"] {
     color: var(--card-accent);
   }
 
@@ -71,7 +71,7 @@
     flex: 0 0 auto;
   }
 
-  :where([data-slot="card-title-icon"][data-placeholder]) [data-component="icon"] {
+  :where([data-slot="card-title-icon"][data-placeholder]) [data-slot="icon-svg"] {
     color: var(--v2-text-text-faint);
   }
 
@@ -92,24 +92,3 @@
     padding-left: var(--card-indent);
   }
 }
-
-body:not([data-new-layout]) [data-component="card"] {
-  color: var(--text-strong);
-  --card-accent: var(--icon-active);
-
-  :where([data-card="title"], [data-slot="card-title"]) {
-    color: var(--text-strong);
-  }
-
-  :where([data-slot="card-title-icon"][data-placeholder]) [data-component="icon"] {
-    color: var(--text-weak);
-  }
-
-  :where([data-card="description"], [data-slot="card-description"]) {
-    color: var(--text-base);
-  }
-
-  &[data-variant="error"] {
-    --card-accent: var(--icon-critical-base) !important;
-  }
-}

package/src/components/card.tsx

@@ -1,5 +1,5 @@
-import { type ComponentProps, splitProps } from "solid-js"
-import { Icon, type IconProps } from "./icon"
+import { type ComponentProps, Show, splitProps } from "solid-js"
+import { Icon, type IconProps } from "@opencode-ai/ui/icon"
 
 type Variant = "normal" | "error" | "warning" | "success" | "info"
 
@@ -80,11 +80,11 @@ export function CardTitle(props: CardTitleProps) {
         [split.class ?? ""]: !!split.class,
       }}
     >
-      {show() ? (
+      <Show when={show()}>
         <span data-slot="card-title-icon" data-placeholder={placeholder() || undefined}>
           <Icon name={name() ?? "dash"} size="small" />
         </span>
-      ) : null}
+      </Show>
       {split.children}
     </div>
   )

package/src/components/collapsible.tsx

@@ -1,6 +1,6 @@
 import { Collapsible as Kobalte, CollapsibleRootProps } from "@kobalte/core/collapsible"
 import { ComponentProps, ParentProps, splitProps } from "solid-js"
-import { Icon } from "./icon"
+import { Icon } from "@opencode-ai/ui/icon"
 
 export interface CollapsibleProps extends ParentProps<CollapsibleRootProps> {
   class?: string
@@ -35,7 +35,7 @@ function CollapsibleArrow(props?: ComponentProps<"div">) {
   return (
     <div data-slot="collapsible-arrow" {...(props || {})}>
       <span data-slot="collapsible-arrow-icon">
-        <Icon name="chevron-down" size="small" />
+        <Icon name="fill-triangle-down" size="small" />
       </span>
     </div>
   )

package/src/components/dock-surface.css

@@ -10,15 +10,8 @@
 [data-dock-border-underlay] {
   /* Later shadows paint underneath, so this solid ring masks overlapping surfaces without changing border geometry. */
   box-shadow:
-    var(--dock-shell-visual-shadow, var(--shadow-xs-border)),
-    0 0 0 var(--dock-shell-border-underlay-width, 1px)
-      var(--dock-shell-border-underlay-background, var(--surface-raised-stronger-non-alpha));
-}
-
-[data-dock-border-underlay="v2"] {
-  --dock-shell-visual-shadow: var(--v2-elevation-raised);
-  --dock-shell-border-underlay-width: 0.5px;
-  --dock-shell-border-underlay-background: var(--v2-background-bg-base);
+    var(--v2-elevation-raised),
+    0 0 0 0.5px var(--v2-background-bg-base);
 }
 
 [data-dock-surface="tray"] {

package/src/components/image-preview.tsx

@@ -1,6 +1,7 @@
 import { Dialog as Kobalte } from "@kobalte/core/dialog"
 import { useI18n } from "../context/i18n"
-import { IconButton } from "./icon-button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
 
 export interface ImagePreviewProps {
   src: string
@@ -17,7 +18,7 @@ export function ImagePreview(props: ImagePreviewProps) {
             <Kobalte.CloseButton
               data-slot="image-preview-close"
               as={IconButton}
-              icon="close"
+              icon={<Icon name="close" />}
               variant="ghost"
               aria-label={i18n.t("ui.common.close")}
             />

package/src/components/list.css

@@ -31,7 +31,7 @@
     align-self: stretch;
     margin-bottom: 4px;
 
-    > [data-component="icon-button"] {
+    > [data-component="icon-button-v2"] {
       width: 24px;
       height: 24px;
       flex-shrink: 0;
@@ -83,7 +83,7 @@
       }
     }
 
-    > [data-component="icon-button"] {
+    > [data-component="icon-button-v2"] {
       width: 20px;
       height: 20px;
       background-color: transparent;
@@ -106,7 +106,7 @@
       }
     }
 
-    > [data-component="icon-button"] {
+    > [data-component="icon-button-v2"] {
       background-color: transparent;
 
       &:hover:not(:disabled),
@@ -252,7 +252,7 @@
             justify-content: center;
             flex-shrink: 0;
             aspect-ratio: 1/1;
-            [data-component="icon"] {
+            [data-slot="icon-svg"] {
               color: var(--icon-strong-base);
             }
           }
@@ -262,7 +262,7 @@
             justify-content: center;
             flex-shrink: 0;
             aspect-ratio: 1/1;
-            [data-component="icon"] {
+            [data-slot="icon-svg"] {
               color: var(--icon-strong-base);
             }
           }

package/src/components/list.tsx

@@ -3,8 +3,8 @@ 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 { Icon, type IconProps } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
 import { TextField } from "./text-field"
 
 function findByKey(container: HTMLElement, key: string) {
@@ -302,7 +302,7 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
             </div>
             <Show when={internalFilter()}>
               <IconButton
-                icon="circle-x"
+                icon={<Icon name="circle-x" />}
                 variant="ghost"
                 onClick={() => {
                   setInternalFilter("")
@@ -367,9 +367,11 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
                                 </span>
                               )}
                             </Show>
-                            {props.divider && (i() !== group.items.length - 1 || (showAdd() && isLastGroup())) && (
+                            <Show
+                              when={props.divider && (i() !== group.items.length - 1 || (showAdd() && isLastGroup()))}
+                            >
                               <span data-slot="list-item-divider" />
-                            )}
+                            </Show>
                           </button>
                         )
                         if (props.itemWrapper) return props.itemWrapper(item, node)

package/src/components/popover.tsx

@@ -3,7 +3,8 @@ import { ComponentProps, JSXElement, ParentProps, Show, createEffect, splitProps
 import { createStore } from "solid-js/store"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { useI18n } from "../context/i18n"
-import { IconButton } from "./icon-button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
 
 export interface PopoverProps<T extends ValidComponent = "div">
   extends ParentProps,
@@ -122,7 +123,7 @@ export function Popover<T extends ValidComponent = "div">(props: PopoverProps<T>
           <Kobalte.CloseButton
             data-slot="popover-close-button"
             as={IconButton}
-            icon="close"
+            icon={<Icon name="close" />}
             variant="ghost"
             aria-label={i18n.t("ui.common.close")}
           />

package/src/components/scroll-view.tsx

@@ -1,14 +1,4 @@
-import {
-  createEffect,
-  createMemo,
-  mergeProps,
-  onCleanup,
-  onMount,
-  Show,
-  splitProps,
-  type Accessor,
-  type ComponentProps,
-} from "solid-js"
+import { createEffect, mergeProps, onCleanup, onMount, Show, splitProps, type ComponentProps } from "solid-js"
 import { Portal } from "solid-js/web"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { createStore } from "solid-js/store"
@@ -27,9 +17,9 @@ export interface ScrollViewProps extends ComponentProps<"div"> {
    * */
   thumbVisibility?: ScrollViewThumbVisibility
   /** Mount the thumb into an external track. Scroll metrics still come from this ScrollView. */
-  thumbContainer?: HTMLElement | Accessor<HTMLElement | undefined>
+  thumbContainer?: HTMLElement
   /** Element whose hover reveals the thumb. Defaults to the ScrollView root when unset. */
-  thumbHoverTarget?: HTMLElement | Accessor<HTMLElement | undefined>
+  thumbHoverTarget?: HTMLElement
 }
 
 export const scrollKey = (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">) => {
@@ -128,13 +118,8 @@ export function ScrollView(props: ScrollViewProps) {
   let viewportRef!: HTMLDivElement
   let thumbRef!: HTMLDivElement
 
-  const resolveEl = (value: HTMLElement | Accessor<HTMLElement | undefined> | undefined) => {
-    if (typeof value === "function") return value()
-    return value
-  }
-
-  const thumbMount = createMemo(() => resolveEl(local.thumbContainer))
-  const thumbHover = createMemo(() => resolveEl(local.thumbHoverTarget))
+  const thumbMount = () => local.thumbContainer
+  const thumbHover = () => local.thumbHoverTarget
   const hoverRoot = () => !local.thumbHoverTarget && !local.thumbContainer
 
   const [state, setState] = createStore({

package/src/components/sticky-accordion-header.tsx

@@ -1,4 +1,4 @@
-import { Accordion } from "./accordion"
+import { Accordion } from "@opencode-ai/ui/accordion"
 import { ParentProps } from "solid-js"
 
 export function StickyAccordionHeader(

package/src/components/text-field.tsx

@@ -2,8 +2,9 @@ import { TextField as Kobalte } from "@kobalte/core/text-field"
 import { createSignal, Show, splitProps } from "solid-js"
 import type { ComponentProps } from "solid-js"
 import { useI18n } from "../context/i18n"
-import { IconButton } from "./icon-button"
-import { Tooltip } from "./tooltip"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 
 export interface TextFieldProps
   extends ComponentProps<typeof Kobalte.Input>,
@@ -106,10 +107,17 @@ export function TextField(props: TextFieldProps) {
           <Kobalte.TextArea {...others} autoResize data-slot="input-input" class={local.class} />
         </Show>
         <Show when={local.copyable}>
-          <Tooltip value={label()} placement="top" gutter={4} forceOpen={copied()} skipDelayDuration={0}>
+          <Tooltip
+            appearance="standard"
+            value={label()}
+            placement="top"
+            gutter={4}
+            forceOpen={copied() ? true : undefined}
+            skipDelayDuration={0}
+          >
             <IconButton
               type="button"
-              icon={icon()}
+              icon={<Icon name={icon()} />}
               variant="ghost"
               onClick={handleCopy}
               tabIndex={-1}

package/src/context/dialog.tsx

@@ -81,6 +81,7 @@ function init() {
     let dispose: (() => void) | undefined
     let setClosing: ((closing: boolean) => void) | undefined
 
+    // Stacked dialogs render as sibling portals, so only the top layer may own the focus trap.
     const node = runWithOwner(owner, () =>
       createRoot((d: () => void) => {
         dispose = d

package/src/context/i18n.tsx

@@ -1,26 +1,24 @@
 import { createContext, useContext, type Accessor, type ParentProps } from "solid-js"
 import { I18nProvider } from "@kobalte/core/i18n"
 import { dict as en } from "../i18n/en"
+import type { Key, LocaleKey, PluralCategory, PluralKey, PluralLookupKey } from "../i18n/en"
 
-export type UiI18nKey = keyof typeof en
-
-export const UI_PLURAL_KEYS = [
-  "ui.sessionTurn.diffs.changed",
-  "ui.messagePart.context.read",
-  "ui.messagePart.context.search",
-  "ui.messagePart.context.list",
-] as const
-export type UiI18nPluralKey = (typeof UI_PLURAL_KEYS)[number]
-export type UiPluralCategory = "zero" | "one" | "two" | "few" | "many" | "other"
-export type UiI18nPluralLookupKey = `${UiI18nPluralKey}.${UiPluralCategory}`
+export type UiI18nKey = Key
+export type UiI18nPluralKey = PluralKey
+export type UiPluralCategory = PluralCategory
+export type UiI18nPluralLookupKey = PluralLookupKey
+export type UiI18nLocaleKey = LocaleKey
+type UiTranslationKey<Value extends string> = Value extends UiI18nPluralLookupKey ? never : Value
 
 export type UiI18nParams = Record<string, string | number | boolean>
+export type UiTranslate = <Value extends string>(key: UiTranslationKey<Value>, params?: UiI18nParams) => string
 
 export type UiI18n = {
   locale: Accessor<string>
   layoutLocale?: Accessor<string>
-  t: (key: UiI18nKey, params?: UiI18nParams) => string
+  t: UiTranslate
   plural: (key: UiI18nPluralKey, count: number, params?: UiI18nParams) => string
+  pluralForm?: (key: UiI18nPluralKey, category: UiPluralCategory, params?: UiI18nParams) => string
 }
 
 const rules = new Map<string, Intl.PluralRules>()
@@ -50,11 +48,16 @@ function resolveTemplate(text: string, params?: UiI18nParams) {
 const fallback: UiI18n = {
   locale: () => "en",
   t: (key, params) => {
-    const value = en[key] ?? String(key)
+    const value = en[key as UiI18nKey] ?? String(key)
     return resolveTemplate(value, params)
   },
   plural: (key, count, params) =>
-    fallback.t(pluralKey(key, pluralCategory(fallback.locale(), count)), { ...params, count }),
+    fallback.pluralForm!(key, pluralCategory(fallback.locale(), count), { ...params, count }),
+  pluralForm: (key, category, params) => {
+    const values = en as Partial<Record<UiI18nLocaleKey, string>>
+    const value = values[pluralKey(key, category)] ?? values[`${key}.other`] ?? `${key}.other`
+    return resolveTemplate(value, params)
+  },
 }
 
 const Context = createContext<UiI18n>(fallback)

package/src/context/marked-base.tsx

@@ -0,0 +1,27 @@
+import { Marked } from "marked"
+
+export function createMarkdownBase() {
+  return new Marked({
+    renderer: {
+      link({ href, title, text }) {
+        const titleAttr = title ? ` title="${title}"` : ""
+        return `<a href="${href}"${titleAttr} class="external-link" target="_blank" rel="noopener noreferrer">${text}</a>`
+      },
+    },
+  })
+}
+
+let smallParser: Marked | undefined
+
+export function parseSmallMarkdown(text: string) {
+  // Any possible KaTeX delimiter stays on the worker, including escaped ones.
+  if (text.length > 1024 || text.includes("\\(") || text.includes("$$")) return
+  const parser = (smallParser ??= createMarkdownBase())
+  const tokens = parser.lexer(text)
+  let code = false
+  parser.walkTokens(tokens, (token) => {
+    if (token.type === "code") code = true
+  })
+  if (code) return
+  return parser.parser(tokens)
+}

package/src/context/marked-parser.tsx

@@ -1,20 +1,10 @@
 import katex from "katex"
-import { Marked, type MarkedExtension, type Tokens } from "marked"
+import type { MarkedExtension, Tokens } from "marked"
 import markedShiki from "marked-shiki"
+import { createMarkdownBase } from "./marked-base"
 
 export function createMarkdownParser(highlight: (code: string, language: string) => string | Promise<string>) {
-  return new Marked(
-    {
-      renderer: {
-        link({ href, title, text }) {
-          const titleAttr = title ? ` title="${title}"` : ""
-          return `<a href="${href}"${titleAttr} class="external-link" target="_blank" rel="noopener noreferrer">${text}</a>`
-        },
-      },
-    },
-    katexExtension,
-    markedShiki({ highlight }),
-  )
+  return createMarkdownBase().use(katexExtension, markedShiki({ highlight }))
 }
 
 const inlineMathRegex = /^\\\(((?:\\.|[^\\\n])*?)\\\)/

package/src/{components → data-display/accordion}/accordion.css

@@ -43,19 +43,17 @@
         color: var(--v2-text-text-base);
         transition: background-color 0.15s ease;
 
-        /* text-12-regular */
         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); /* 166.667% */
+        line-height: var(--line-height-large);
         letter-spacing: var(--letter-spacing-normal);
 
-        &:hover:not([data-disabled]) {
-          background-color: var(--v2-overlay-simple-overlay-hover);
-        }
-        &:active:not([data-disabled]) {
-          background-color: var(--v2-overlay-simple-overlay-pressed);
+        @media (hover: hover) {
+          &:hover:not([data-disabled]) {
+            background-color: var(--v2-overlay-simple-overlay-hover);
+          }
         }
         &:focus-visible {
           outline: none;
@@ -104,30 +102,6 @@
   }
 }
 
-body:not([data-new-layout]) [data-component="accordion"] {
-  [data-slot="accordion-item"] [data-slot="accordion-header"] [data-slot="accordion-trigger"] {
-    background-color: var(--background-stronger);
-    border-width: 1px;
-    border-color: var(--border-weak-base);
-    color: var(--text-strong);
-
-    &:hover:not([data-disabled]) {
-      background-color: var(--surface-base-hover);
-    }
-
-    &:active:not([data-disabled]) {
-      background-color: var(--surface-base-active);
-    }
-  }
-
-  [data-slot="accordion-item"][data-expanded] [data-slot="accordion-content"] {
-    border-width: 1px;
-    border-color: var(--border-weak-base);
-    border-top: 0;
-    background-color: var(--background-stronger);
-  }
-}
-
 @keyframes slideDown {
   from {
     height: 0;

package/src/{components → data-display/accordion}/accordion.tsx

@@ -1,17 +1,17 @@
-import { Accordion as Kobalte } from "@kobalte/core/accordion"
+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 Kobalte> {}
-export interface AccordionItemProps extends ComponentProps<typeof Kobalte.Item> {}
-export interface AccordionHeaderProps extends ComponentProps<typeof Kobalte.Header> {}
-export interface AccordionTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {}
-export interface AccordionContentProps extends ComponentProps<typeof Kobalte.Content> {}
+export interface AccordionProps extends ComponentProps<typeof Root> {}
+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"])
   return (
-    <Kobalte
+    <Root
       {...rest}
       data-component="accordion"
       classList={{
@@ -25,7 +25,7 @@ function AccordionRoot(props: AccordionProps) {
 function AccordionItem(props: AccordionItemProps) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
-    <Kobalte.Item
+    <Item
       {...rest}
       data-slot="accordion-item"
       classList={{
@@ -39,7 +39,7 @@ function AccordionItem(props: AccordionItemProps) {
 function AccordionHeader(props: ParentProps<AccordionHeaderProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
   return (
-    <Kobalte.Header
+    <Header
       {...rest}
       data-slot="accordion-header"
       classList={{
@@ -48,14 +48,14 @@ function AccordionHeader(props: ParentProps<AccordionHeaderProps>) {
       }}
     >
       {split.children}
-    </Kobalte.Header>
+    </Header>
   )
 }
 
 function AccordionTrigger(props: ParentProps<AccordionTriggerProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
   return (
-    <Kobalte.Trigger
+    <Trigger
       {...rest}
       data-slot="accordion-trigger"
       classList={{
@@ -64,14 +64,14 @@ function AccordionTrigger(props: ParentProps<AccordionTriggerProps>) {
       }}
     >
       {split.children}
-    </Kobalte.Trigger>
+    </Trigger>
   )
 }
 
 function AccordionContent(props: ParentProps<AccordionContentProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
   return (
-    <Kobalte.Content
+    <Content
       {...rest}
       data-slot="accordion-content"
       classList={{
@@ -80,7 +80,7 @@ function AccordionContent(props: ParentProps<AccordionContentProps>) {
       }}
     >
       {split.children}
-    </Kobalte.Content>
+    </Content>
   )
 }
 

package/src/{v2/components/avatar-v2.tsx → data-display/avatar/avatar.tsx}

@@ -1,5 +1,5 @@
 import { type ComponentProps, splitProps, Show } from "solid-js"
-import "./avatar-v2.css"
+import "./avatar.css"
 
 const segmenter =
   typeof Intl !== "undefined" && "Segmenter" in Intl

package/src/{v2/components/badge-v2.css → data-display/badge/badge.css}

@@ -31,3 +31,22 @@
   background: var(--v2-background-bg-accent);
   color: var(--v2-text-text-contrast);
 }
+
+[data-component="tag"][data-appearance="standard"] {
+  height: 18px;
+  padding: 0 6px;
+  border-radius: var(--radius-xs);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large);
+  letter-spacing: var(--letter-spacing-normal);
+  font-variant-numeric: normal;
+}
+
+[data-component="tag"][data-appearance="standard"][data-variant="neutral"] {
+  border: 0.5px solid var(--border-weak-base);
+  background: var(--surface-raised-base);
+  color: var(--text-base);
+}

package/src/{v2/components/badge-v2.tsx → data-display/badge/badge.tsx}

@@ -1,16 +1,18 @@
 import { type ComponentProps, splitProps } from "solid-js"
-import "./badge-v2.css"
+import "./badge.css"
 
-export interface TagProps extends ComponentProps<"span"> {
+export interface BadgeProps extends ComponentProps<"span"> {
+  appearance?: "standard" | "compact"
   variant?: "neutral" | "accent"
 }
 
-export function Tag(props: TagProps) {
-  const [split, rest] = splitProps(props, ["class", "classList", "children", "variant"])
+export function Badge(props: BadgeProps) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children", "appearance", "variant"])
   return (
     <span
       {...rest}
       data-component="tag"
+      data-appearance={split.appearance ?? "compact"}
       data-variant={split.variant ?? "neutral"}
       classList={{
         ...split.classList,