@opencode-ai/ui 0.0.0-dev-202609071625 → 0.0.0-dev-19270

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.css → data-display/line-comment/line-comment.css}

@@ -49,7 +49,7 @@
   font-size: 13px;
   font-style: normal;
   font-weight: 440;
-  line-height: 1;
+  line-height: var(--line-height-compact);
   letter-spacing: -0.04px;
   color: var(--v2-text-text-base);
   font-variation-settings: "slnt" 0;
@@ -59,7 +59,7 @@
   font-size: 11px;
   font-style: normal;
   font-weight: 530;
-  line-height: 1;
+  line-height: var(--line-height-tight);
   letter-spacing: 0.05px;
   color: var(--v2-text-text-faint);
   font-variation-settings: "slnt" 0;
@@ -103,7 +103,7 @@
   background-color: var(--v2-overlay-simple-overlay-hover);
 }
 
-[data-slot="line-comment-v2-overflow"]:is(:active, [data-state="pressed"]) {
+[data-slot="line-comment-v2-overflow"]:is(:active, [data-state="pressed"], [data-expanded]) {
   background-color: var(--v2-overlay-simple-overlay-pressed);
 }
 
@@ -138,7 +138,7 @@
   font-size: 13px;
   font-style: normal;
   font-weight: 530;
-  line-height: 1;
+  line-height: var(--line-height-compact);
   letter-spacing: -0.04px;
   color: var(--v2-text-text-base);
   user-select: none;

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="ghost" 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.css → data-display/project-avatar/project-avatar.css}

@@ -105,8 +105,8 @@
 }
 
 [data-component="project-avatar-v2"][data-unread] [data-slot="project-avatar-surface"] {
-  -webkit-mask-image: radial-gradient(circle 4.5px at calc(100% - 1px) 1px, transparent 4.5px, black 4.5px);
-  mask-image: radial-gradient(circle 4.5px at calc(100% - 1px) 1px, transparent 4.5px, black 4.5px);
+  -webkit-mask-image: radial-gradient(circle 4.5px at 100% 0, transparent 4px, black 5px);
+  mask-image: radial-gradient(circle 4.5px at 100% 0, transparent 4px, black 5px);
 }
 
 [data-slot="project-avatar-unread-dot"] {
@@ -114,8 +114,8 @@
   z-index: 3;
   width: 6px;
   height: 6px;
-  right: -2px;
-  top: -2px;
+  right: -3px;
+  top: -3px;
   border-radius: 9999px;
   background: var(--v2-background-bg-accent);
   pointer-events: none;

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

package/src/{v2/components/loader-v2.tsx → feedback/loader/loader.tsx}

@@ -1,7 +1,7 @@
 import { splitProps, type ComponentProps } from "solid-js"
-import "./loader-v2.css"
+import "./loader.css"
 
-export function LoaderV2(props: ComponentProps<"svg">) {
+export function Loader(props: ComponentProps<"svg">) {
   const [local, rest] = splitProps(props, ["class", "classList", "width", "height"])
   return (
     <svg

package/src/feedback/progress-circle/progress-circle.css

@@ -0,0 +1,28 @@
+[data-component="progress-circle"] {
+  display: block;
+  transform: rotate(-90deg);
+}
+
+[data-component="progress-circle"][data-appearance="compact"] [data-slot="progress-circle-background"] {
+  stroke: var(--v2-background-bg-layer-04);
+}
+
+[data-component="progress-circle"][data-appearance="compact"] [data-slot="progress-circle-progress"] {
+  stroke: var(--v2-icon-icon-base);
+}
+
+[data-component="progress-circle"][data-appearance="indicator"] [data-slot="progress-circle-background"] {
+  stroke: var(--progress-circle-background, var(--border-weak-base));
+}
+
+[data-component="progress-circle"][data-appearance="indicator"] [data-slot="progress-circle-background-overlay"] {
+  stroke: var(--progress-circle-background-overlay, transparent);
+}
+
+[data-component="progress-circle"][data-appearance="indicator"] [data-slot="progress-circle-progress"] {
+  stroke: var(--progress-circle-progress, var(--border-active));
+}
+
+[data-component="progress-circle"] [data-slot="progress-circle-progress"] {
+  transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1);
+}

package/src/feedback/progress-circle/progress-circle.tsx

@@ -0,0 +1,64 @@
+import { type ComponentProps, createMemo, Show, splitProps } from "solid-js"
+import "./progress-circle.css"
+
+export interface ProgressCircleProps extends Pick<ComponentProps<"svg">, "class" | "classList" | "style"> {
+  percentage: number
+  appearance?: "compact" | "indicator"
+  size?: number
+  strokeWidth?: number
+}
+
+export function ProgressCircle(props: ProgressCircleProps) {
+  const [local, rest] = splitProps(props, ["percentage", "appearance", "size", "strokeWidth", "class", "classList"])
+
+  const appearance = () => local.appearance ?? "compact"
+  const viewBoxSize = () => (appearance() === "indicator" ? 16 : 14)
+  const size = () => local.size ?? viewBoxSize()
+  const strokeWidth = () => local.strokeWidth ?? (appearance() === "indicator" ? 3 : 1.5)
+  const center = () => viewBoxSize() / 2
+  const radius = () => center() - strokeWidth() / 2
+  const circumference = createMemo(() => 2 * Math.PI * radius())
+  const offset = createMemo(() => circumference() * (1 - Math.max(0, Math.min(100, local.percentage || 0)) / 100))
+
+  return (
+    <svg
+      {...rest}
+      width={size()}
+      height={size()}
+      viewBox={`0 0 ${viewBoxSize()} ${viewBoxSize()}`}
+      fill="none"
+      data-component="progress-circle"
+      data-appearance={appearance()}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <circle
+        cx={center()}
+        cy={center()}
+        r={radius()}
+        data-slot="progress-circle-background"
+        stroke-width={strokeWidth()}
+      />
+      <Show when={appearance() === "indicator"}>
+        <circle
+          cx={center()}
+          cy={center()}
+          r={radius()}
+          data-slot="progress-circle-background-overlay"
+          stroke-width={strokeWidth()}
+        />
+      </Show>
+      <circle
+        cx={center()}
+        cy={center()}
+        r={radius()}
+        data-slot="progress-circle-progress"
+        stroke-width={strokeWidth()}
+        stroke-dasharray={circumference().toString()}
+        stroke-dashoffset={offset()}
+      />
+    </svg>
+  )
+}