@opencode-ai/ui 0.0.0-dev-202608201855 → 0.0.0-dev-17751

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/provider-icon.tsx

@@ -9,7 +9,7 @@ export type ProviderIconProps = JSX.SVGElementTags["svg"] & {
 
 export const ProviderIcon: Component<ProviderIconProps> = (props) => {
   const [local, rest] = splitProps(props, ["id", "class", "classList"])
-  const resolved = createMemo(() => (iconNames.includes(local.id as IconName) ? local.id : "synthetic"))
+  const resolved = createMemo(() => (iconNames.includes(local.id as IconName) ? local.id : "session.synthetic"))
   return (
     <svg
       data-component="provider-icon"

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/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/{components → data-display/accordion}/accordion.css

@@ -43,12 +43,11 @@
         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]) {
@@ -104,30 +103,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,

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

@@ -6,18 +6,27 @@
   justify-content: flex-end;
   align-items: center;
 
-  [data-slot="diff-changes-additions"] {
-    font-family: var(--font-family-mono);
-    font-feature-settings: var(--font-family-mono--font-feature-settings);
-    font-size: 14px;
+  [data-slot="diff-changes-additions"],
+  [data-slot="diff-changes-deletions"] {
+    font-size: 11px;
     font-style: normal;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
+    font-weight: 440;
+    line-height: 1;
+    letter-spacing: 0.05px;
     text-align: right;
-    color: var(--text-diff-add-base);
+  }
+
+  [data-slot="diff-changes-additions"] {
+    color: var(--v2-state-fg-success);
   }
 
+  [data-slot="diff-changes-deletions"] {
+    color: var(--v2-state-fg-danger);
+  }
+}
+
+[data-component="diff-changes"][data-appearance="standard"] {
+  [data-slot="diff-changes-additions"],
   [data-slot="diff-changes-deletions"] {
     font-family: var(--font-family-mono);
     font-feature-settings: var(--font-family-mono--font-feature-settings);
@@ -26,19 +35,13 @@
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-large);
     letter-spacing: var(--letter-spacing-normal);
-    text-align: right;
-    color: var(--text-diff-delete-base);
   }
-}
 
-[data-component="diff-changes"][data-variant="bars"] {
-  width: 18px;
-  height: 14px;
-  flex-shrink: 0;
+  [data-slot="diff-changes-additions"] {
+    color: var(--text-diff-add-base);
+  }
 
-  svg {
-    display: block;
-    width: 100%;
-    height: 100%;
+  [data-slot="diff-changes-deletions"] {
+    color: var(--text-diff-delete-base);
   }
 }

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

@@ -1,8 +1,9 @@
 import { createMemo, Show } from "solid-js"
-import "./diff-changes-v2.css"
+import "./diff-changes.css"
 
 export function DiffChanges(props: {
   class?: string
+  appearance?: "standard" | "compact"
   changes: { additions: number; deletions: number } | { additions: number; deletions: number }[]
 }) {
   const additions = createMemo(() =>
@@ -19,7 +20,11 @@ export function DiffChanges(props: {
 
   return (
     <Show when={total() > 0}>
-      <div data-component="diff-changes" classList={{ [props.class ?? ""]: true }}>
+      <div
+        data-component="diff-changes"
+        data-appearance={props.appearance ?? "compact"}
+        classList={{ [props.class ?? ""]: true }}
+      >
         <span data-slot="diff-changes-additions">{`+${additions()}`}</span>
         <span data-slot="diff-changes-deletions">{`-${deletions()}`}</span>
       </div>

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

@@ -27,6 +27,7 @@
   justify-content: center;
   align-items: center;
   padding: 0;
+  padding-inline: 4px;
   gap: 4px;
   min-width: 14px;
   height: 14px;
@@ -48,7 +49,6 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  min-width: 14px;
   height: 11px;
   padding: 0;
   flex: none;

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

@@ -1,12 +1,12 @@
 import { type ComponentProps, For, splitProps } from "solid-js"
-import "./keybind-v2.css"
+import "./keybind.css"
 
-export interface KeybindV2Props extends ComponentProps<"div"> {
+export interface KeybindProps extends ComponentProps<"div"> {
   keys: string[]
   variant?: "neutral" | "ghost"
 }
 
-export function KeybindV2(props: KeybindV2Props) {
+export function Keybind(props: KeybindProps) {
   const [local, rest] = splitProps(props, ["keys", "variant", "class", "classList"])
   return (
     <div

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

@@ -1,12 +1,12 @@
 import { For, Show, createSignal, onMount, splitProps, type ComponentProps, type JSX } from "solid-js"
-import { FileIcon } from "../../components/file-icon"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { useI18n } from "../../context/i18n"
 import { useFilteredList } from "../../hooks"
-import { ButtonV2 } from "./button-v2"
-import "./line-comment-v2.css"
+import { Button } from "@opencode-ai/ui/button"
+import "./line-comment.css"
 
 /** Horizontal “more” glyph for the display-card overflow control (Figma outline-dots). */
-export function LineCommentV2OverflowIcon(props: ComponentProps<"svg">) {
+export function LineCommentOverflowIcon(props: ComponentProps<"svg">) {
   return (
     <svg
       {...props}
@@ -24,16 +24,16 @@ export function LineCommentV2OverflowIcon(props: ComponentProps<"svg">) {
   )
 }
 
-export interface LineCommentV2Props extends ComponentProps<"div"> {
+export interface LineCommentProps extends ComponentProps<"div"> {
   /** Main comment body (text or rich content). */
   comment: JSX.Element
   /** Line / selection context (e.g. “Comment on line 40”). */
   selection: JSX.Element
-  /** Typically an overflow menu trigger; use `LineCommentV2OverflowIcon` inside `line-comment-v2-overflow`. */
+  /** Typically an overflow menu trigger; use `LineCommentOverflowIcon` inside `line-comment-v2-overflow`. */
   actions?: JSX.Element
 }
 
-export function LineCommentV2(props: LineCommentV2Props) {
+export function LineComment(props: LineCommentProps) {
   const [local, rest] = splitProps(props, ["comment", "selection", "actions", "class", "classList"])
   return (
     <div
@@ -56,11 +56,11 @@ export function LineCommentV2(props: LineCommentV2Props) {
   )
 }
 
-export type LineCommentEditorV2Mention = {
+export type LineCommentEditorMention = {
   items: (query: string) => string[] | Promise<string[]>
 }
 
-export interface LineCommentEditorV2Props extends Omit<ComponentProps<"div">, "children" | "onInput" | "onSubmit"> {
+export interface LineCommentEditorProps extends Omit<ComponentProps<"div">, "children" | "onInput" | "onSubmit"> {
   /** Visible field label above the textarea (default: “Comment”). */
   heading?: JSX.Element | string
   value: string
@@ -73,7 +73,7 @@ export interface LineCommentEditorV2Props extends Omit<ComponentProps<"div">, "c
   cancelLabel?: string
   submitLabel?: string
   autofocus?: boolean
-  mention?: LineCommentEditorV2Mention
+  mention?: LineCommentEditorMention
 }
 
 function pathFilename(path: string) {
@@ -86,7 +86,7 @@ function pathDirectory(path: string) {
   return index === -1 ? "" : path.slice(0, index + 1)
 }
 
-export function LineCommentEditorV2(props: LineCommentEditorV2Props) {
+export function LineCommentEditor(props: LineCommentEditorProps) {
   const i18n = useI18n()
   let textareaRef: HTMLTextAreaElement | undefined
   const [mentionOpen, setMentionOpen] = createSignal(false)
@@ -212,9 +212,11 @@ export function LineCommentEditorV2(props: LineCommentEditorV2Props) {
               textareaRef = el
             }}
             data-slot="line-comment-v2-textarea"
+            dir="auto"
             rows={local.rows ?? 3}
             placeholder={local.placeholder ?? i18n.t("ui.lineComment.contextPlaceholder")}
             value={local.value}
+            style={{ "unicode-bidi": "plaintext", "text-align": "start" }}
             onInput={(e) => {
               local.onInput(e.currentTarget.value)
               syncMention()
@@ -292,12 +294,12 @@ export function LineCommentEditorV2(props: LineCommentEditorV2Props) {
         <div data-slot="line-comment-v2-footer">
           <div data-slot="line-comment-v2-footer-meta">{local.selection}</div>
           <div data-slot="line-comment-v2-footer-actions">
-            <ButtonV2 type="button" size="normal" variant="neutral" onClick={() => local.onCancel()}>
+            <Button type="button" size="normal" variant="neutral" onClick={() => local.onCancel()}>
               {local.cancelLabel ?? i18n.t("ui.lineComment.cancel")}
-            </ButtonV2>
-            <ButtonV2 type="button" size="normal" variant="contrast" disabled={!canSubmit()} onClick={submit}>
+            </Button>
+            <Button type="button" size="normal" variant="contrast" disabled={!canSubmit()} onClick={submit}>
               {local.submitLabel ?? i18n.t("ui.lineComment.submit")}
-            </ButtonV2>
+            </Button>
           </div>
         </div>
       </div>

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

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