@opencode-ai/ui 0.0.0-dev-17746 → 0.0.0-dev-202608201733

package/src/v2/components/inline-input-v2.css

@@ -0,0 +1,225 @@
+[data-component="inline-input-v2"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  padding: 0;
+  width: 280px;
+  height: 28px;
+  border: 0;
+  border-radius: 6px;
+  outline: 1px solid transparent;
+  outline-offset: 0;
+  background:
+    linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
+  box-shadow: var(--v2-elevation-button-neutral);
+  flex: none;
+  align-self: stretch;
+  overflow: hidden;
+  transition:
+    background 85ms ease-out,
+    outline-color 85ms ease-out,
+    box-shadow 85ms ease-out;
+}
+
+[data-component="inline-input-v2"][data-appearance="large"] {
+  height: 32px;
+}
+
+[data-component="inline-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
+  background:
+    linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
+    linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
+}
+
+[data-component="inline-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within)
+  [data-slot="inline-input-v2-prefix"] {
+  background: transparent;
+}
+
+[data-component="inline-input-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
+  outline-color: var(--v2-border-border-focus);
+  box-shadow: none;
+}
+
+[data-component="inline-input-v2"]:where([data-invalid]):not([data-disabled]) {
+  outline-color: var(--v2-state-fg-danger);
+  box-shadow: none;
+}
+
+[data-component="inline-input-v2"]:where([data-disabled]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-component="inline-input-v2"] [data-slot="inline-input-v2-prefix"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  flex: none;
+  align-self: stretch;
+  width: fit-content;
+  min-width: 0;
+  max-width: 100%;
+  padding: 4px 8px;
+  gap: 4px;
+  background: var(--v2-background-bg-layer-01);
+  border-radius: 4px 0 0 4px;
+  cursor: default;
+  transition: background 85ms ease-out;
+}
+
+[data-component="inline-input-v2"]:where([data-disabled]) [data-slot="inline-input-v2-prefix"] {
+  cursor: not-allowed;
+}
+
+[data-component="inline-input-v2"][data-label-width] [data-slot="inline-input-v2-prefix"] {
+  width: var(--inline-input-v2-label-width);
+  min-width: var(--inline-input-v2-label-width);
+  max-width: var(--inline-input-v2-label-width);
+}
+
+[data-component="inline-input-v2"] [data-slot="inline-input-v2-prefix-text"] {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-style: normal;
+  font-weight: 440;
+  font-size: 13px;
+  line-height: 1;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-muted);
+  font-variation-settings: "slnt" 0;
+  user-select: none;
+}
+
+[data-component="inline-input-v2"][data-numeric] [data-slot="inline-input-v2-prefix-text"] {
+  font-variant-numeric: tabular-nums;
+}
+
+[data-component="inline-input-v2"] [data-slot="inline-input-v2-divider"] {
+  flex: none;
+  align-self: stretch;
+  width: 0.5px;
+  min-width: 0.5px;
+  background: var(--v2-border-border-base);
+}
+
+[data-component="inline-input-v2"] [data-slot="inline-input-v2-field"] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 4px 8px;
+  gap: 8px;
+}
+
+[data-component="inline-input-v2"][data-appearance="large"] [data-slot="inline-input-v2-field"] {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+[data-component="inline-input-v2"] [data-slot="inline-input-v2-value"] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+[data-component="inline-input-v2"] [data-slot="inline-input-v2-input"] {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  outline: none;
+  font-style: normal;
+  font-weight: 440;
+  font-size: 13px;
+  line-height: 1;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-base);
+  font-variation-settings: "slnt" 0;
+}
+
+[data-component="inline-input-v2"] [data-slot="inline-input-v2-input"]::placeholder {
+  color: var(--v2-text-text-faint);
+  user-select: none;
+}
+
+[data-component="inline-input-v2"][data-numeric] [data-slot="inline-input-v2-input"] {
+  font-variant-numeric: tabular-nums;
+}
+
+[data-component="inline-input-v2"] [data-slot="inline-input-v2-icon-button"] {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex: none;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+  gap: 3px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--v2-icon-icon-muted);
+  cursor: pointer;
+  outline: none;
+}
+
+[data-component="inline-input-v2"]
+  [data-slot="inline-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-component="inline-input-v2"]
+  [data-slot="inline-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="inline-input-v2"] [data-slot="inline-input-v2-icon-button"]:focus {
+  outline: none;
+}
+
+[data-component="inline-input-v2"] [data-slot="inline-input-v2-icon-button"]:focus-visible {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 1px;
+}
+
+[data-component="inline-input-v2"]:where([data-disabled]) [data-slot="inline-input-v2-icon-button"] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+[data-component="inline-input-v2"] [data-slot="inline-input-v2-icon-button"] [data-slot="icon-svg"] {
+  display: block;
+  flex: none;
+  color: currentColor;
+}
+
+[data-component="inline-input-v2"][data-invalid]:not([data-disabled]) [data-slot="inline-input-v2-prefix-text"] {
+  color: var(--v2-text-text-muted);
+}
+
+[data-component="inline-input-v2"][data-invalid]:not([data-disabled]) [data-slot="inline-input-v2-input"] {
+  color: var(--v2-state-fg-danger);
+  caret-color: var(--v2-state-fg-danger);
+}
+
+[data-component="inline-input-v2"][data-invalid]:not([data-disabled]) [data-slot="inline-input-v2-input"]::placeholder {
+  color: var(--v2-state-fg-danger);
+  opacity: 1;
+}

package/src/v2/components/inline-input-v2.tsx

@@ -0,0 +1,107 @@
+import { type ComponentProps, type JSX, Show, splitProps } from "solid-js"
+import { Icon } from "./icon"
+import { useI18n } from "../../context/i18n"
+import "./inline-input-v2.css"
+
+export interface InlineInputV2Props extends Omit<ComponentProps<"input">, "type" | "prefix"> {
+  /** Inline label shown before the field (prefix segment). */
+  prefix: JSX.Element
+  /** Fixed width for the prefix segment (px number or CSS length). Omit for fit-content. */
+  labelWidth?: number | string
+  /** Show the trailing copy action. */
+  showCopyButton?: boolean
+  /** Accessible label for the copy button. */
+  copyLabel?: string
+  onCopyClick?: (event: MouseEvent) => void
+  /** Apply tabular numerals to the prefix and field value. */
+  numeric?: boolean
+  /** Error styling for the field and value text. */
+  invalid?: boolean
+  /** `base` is 28px tall; `large` is 32px tall. */
+  appearance?: "base" | "large"
+  type?: ComponentProps<"input">["type"]
+}
+
+export function InlineInputV2(props: InlineInputV2Props) {
+  const i18n = useI18n()
+  const [local, inputProps] = splitProps(props, [
+    "class",
+    "classList",
+    "prefix",
+    "labelWidth",
+    "showCopyButton",
+    "copyLabel",
+    "onCopyClick",
+    "numeric",
+    "invalid",
+    "appearance",
+    "disabled",
+    "style",
+  ])
+
+  let input: HTMLInputElement | undefined
+
+  return (
+    <div
+      data-component="inline-input-v2"
+      data-disabled={local.disabled ? "" : undefined}
+      data-invalid={local.invalid ? "" : undefined}
+      data-numeric={local.numeric ? "" : undefined}
+      data-appearance={local.appearance ?? "base"}
+      data-label-width={local.labelWidth != null ? "" : undefined}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+      style={{
+        ...(typeof local.style === "object" && local.style != null ? local.style : {}),
+        ...(local.labelWidth != null
+          ? {
+              "--inline-input-v2-label-width":
+                typeof local.labelWidth === "number" ? `${local.labelWidth}px` : local.labelWidth,
+            }
+          : {}),
+      }}
+    >
+      <div
+        data-slot="inline-input-v2-prefix"
+        onMouseDown={(event) => {
+          if (local.disabled || event.button !== 0) return
+          // Keep focus on the input without using a native <label>, so external labels still work.
+          event.preventDefault()
+          input?.focus()
+        }}
+      >
+        <span data-slot="inline-input-v2-prefix-text">{local.prefix}</span>
+      </div>
+      <div data-slot="inline-input-v2-divider" aria-hidden="true" />
+      <div data-slot="inline-input-v2-field">
+        <div data-slot="inline-input-v2-value">
+          <input
+            {...inputProps}
+            ref={(el) => {
+              input = el
+              const ref = inputProps.ref
+              if (typeof ref === "function") ref(el)
+            }}
+            type={inputProps.type ?? "text"}
+            disabled={local.disabled}
+            aria-invalid={local.invalid ? true : undefined}
+            data-slot="inline-input-v2-input"
+          />
+        </div>
+        <Show when={local.showCopyButton}>
+          <button
+            type="button"
+            data-slot="inline-input-v2-icon-button"
+            aria-label={local.copyLabel ?? i18n.t("ui.message.copy")}
+            disabled={local.disabled}
+            onClick={local.onCopyClick}
+          >
+            <Icon name="copy" />
+          </button>
+        </Show>
+      </div>
+    </div>
+  )
+}

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

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

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

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

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

@@ -1,12 +1,12 @@
 import { For, Show, createSignal, onMount, splitProps, type ComponentProps, type JSX } from "solid-js"
-import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { FileIcon } from "../../components/file-icon"
 import { useI18n } from "../../context/i18n"
 import { useFilteredList } from "../../hooks"
-import { Button } from "@opencode-ai/ui/button"
-import "./line-comment.css"
+import { ButtonV2 } from "./button-v2"
+import "./line-comment-v2.css"
 
 /** Horizontal “more” glyph for the display-card overflow control (Figma outline-dots). */
-export function LineCommentOverflowIcon(props: ComponentProps<"svg">) {
+export function LineCommentV2OverflowIcon(props: ComponentProps<"svg">) {
   return (
     <svg
       {...props}
@@ -24,16 +24,16 @@ export function LineCommentOverflowIcon(props: ComponentProps<"svg">) {
   )
 }
 
-export interface LineCommentProps extends ComponentProps<"div"> {
+export interface LineCommentV2Props 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 `LineCommentOverflowIcon` inside `line-comment-v2-overflow`. */
+  /** Typically an overflow menu trigger; use `LineCommentV2OverflowIcon` inside `line-comment-v2-overflow`. */
   actions?: JSX.Element
 }
 
-export function LineComment(props: LineCommentProps) {
+export function LineCommentV2(props: LineCommentV2Props) {
   const [local, rest] = splitProps(props, ["comment", "selection", "actions", "class", "classList"])
   return (
     <div
@@ -56,11 +56,11 @@ export function LineComment(props: LineCommentProps) {
   )
 }
 
-export type LineCommentEditorMention = {
+export type LineCommentEditorV2Mention = {
   items: (query: string) => string[] | Promise<string[]>
 }
 
-export interface LineCommentEditorProps extends Omit<ComponentProps<"div">, "children" | "onInput" | "onSubmit"> {
+export interface LineCommentEditorV2Props 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 LineCommentEditorProps extends Omit<ComponentProps<"div">, "chi
   cancelLabel?: string
   submitLabel?: string
   autofocus?: boolean
-  mention?: LineCommentEditorMention
+  mention?: LineCommentEditorV2Mention
 }
 
 function pathFilename(path: string) {
@@ -86,7 +86,7 @@ function pathDirectory(path: string) {
   return index === -1 ? "" : path.slice(0, index + 1)
 }
 
-export function LineCommentEditor(props: LineCommentEditorProps) {
+export function LineCommentEditorV2(props: LineCommentEditorV2Props) {
   const i18n = useI18n()
   let textareaRef: HTMLTextAreaElement | undefined
   const [mentionOpen, setMentionOpen] = createSignal(false)
@@ -212,11 +212,9 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
               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()
@@ -294,12 +292,12 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
         <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">
-            <Button type="button" size="normal" variant="neutral" onClick={() => local.onCancel()}>
+            <ButtonV2 type="button" size="normal" variant="neutral" onClick={() => local.onCancel()}>
               {local.cancelLabel ?? i18n.t("ui.lineComment.cancel")}
-            </Button>
-            <Button type="button" size="normal" variant="contrast" disabled={!canSubmit()} onClick={submit}>
+            </ButtonV2>
+            <ButtonV2 type="button" size="normal" variant="contrast" disabled={!canSubmit()} onClick={submit}>
               {local.submitLabel ?? i18n.t("ui.lineComment.submit")}
-            </Button>
+            </ButtonV2>
           </div>
         </div>
       </div>

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

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

package/src/{navigation/menu/menu.css → v2/components/menu-v2.css}

@@ -31,10 +31,6 @@
   }
 }
 
-:dir(rtl) [data-slot="menu-v2-item-chevron"] {
-  transform: scaleX(-1);
-}
-
 [data-component="menu-v2-item"] {
   --menu-v2-fg: var(--v2-text-text-base);
   --menu-v2-fg-muted: var(--v2-text-text-faint);
@@ -182,123 +178,6 @@
   font-variant-numeric: tabular-nums;
 }
 
-[data-component="menu-v2-content"][data-appearance="standard"] {
-  min-width: 8rem;
-  padding: 4px;
-  overflow: hidden;
-  border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
-  border-radius: var(--radius-md);
-  background: var(--surface-raised-stronger-non-alpha);
-  background-clip: padding-box;
-  box-shadow: var(--shadow-md);
-  z-index: 60;
-  animation: dropdown-menu-open 150ms ease-out;
-
-  &[data-closed] {
-    animation: dropdown-menu-close 150ms ease-out;
-  }
-
-  [data-component="menu-v2-item"] {
-    position: relative;
-    height: auto;
-    min-height: 0;
-    padding: 4px 8px;
-    border-radius: var(--radius-sm);
-    color: var(--text-strong);
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
-    font-variant-numeric: normal;
-    -webkit-font-smoothing: auto;
-    text-rendering: auto;
-
-    [data-slot="menu-v2-item-content"] {
-      font-family: inherit;
-      font-size: inherit;
-      font-weight: inherit;
-      line-height: inherit;
-      letter-spacing: inherit;
-      color: inherit;
-    }
-
-    &[data-highlighted] {
-      background: var(--surface-raised-base-hover);
-    }
-
-    &[data-disabled] {
-      color: var(--text-weak);
-      opacity: 1;
-    }
-
-    &[data-checked] {
-      padding-inline-end: 28px;
-    }
-
-    &[data-checked] [data-slot="menu-v2-item-content"] {
-      font-weight: inherit;
-      color: inherit;
-    }
-
-    [data-slot="menu-v2-item-indicator"] {
-      position: absolute;
-      inset-inline-end: 8px;
-      top: 50%;
-      width: 16px;
-      height: 16px;
-      transform: translateY(-50%);
-      color: var(--icon-base);
-    }
-
-    [data-slot="menu-v2-item-chevron"] {
-      margin-inline-start: auto;
-      color: var(--icon-base);
-    }
-  }
-
-  [data-slot="menu-v2-separator"] {
-    width: calc(100% + 8px);
-    height: 1px;
-    margin: 4px -4px;
-    background: var(--border-weak-base);
-  }
-
-  [data-slot="menu-v2-group-label"] {
-    height: auto;
-    padding: 4px 8px;
-    color: var(--text-weak);
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-x-small);
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
-    font-variant-numeric: normal;
-  }
-}
-
-@keyframes dropdown-menu-open {
-  from {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes dropdown-menu-close {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-}
-
 @keyframes menu-v2-in {
   from {
     opacity: 0;