@opencode-ai/ui 0.0.0-dev-18424 → 0.0.0-dev-202608272004

package/src/{icons/icon → v2/components}/icon.tsx

@@ -1,8 +1,5 @@
 import { onMount, type ComponentProps, splitProps } from "solid-js"
-import { additionalIcons, additionalIconViewBox } from "./additional-icons"
-import "./icon.css"
 
-// Consumers center the SVG viewport, so each icon must center its artwork within its viewBox.
 const icons = {
   edit: {
     viewBox: "0 0 16 16",
@@ -20,10 +17,6 @@ const icons = {
     viewBox: "0 0 16 16",
     body: `<path d="M5.118 5.686V10.314M5.118 5.686C5.97 5.686 6.661 4.995 6.661 4.143C6.661 3.291 5.97 2.6 5.118 2.6C4.266 2.6 3.575 3.291 3.575 4.143C3.575 4.995 4.266 5.686 5.118 5.686ZM5.118 10.314C4.266 10.314 3.575 11.005 3.575 11.857C3.575 12.709 4.266 13.4 5.118 13.4C5.97 13.4 6.661 12.709 6.661 11.857M5.118 10.314C5.97 10.314 6.661 11.005 6.661 11.857M10.882 5.686C11.734 5.686 12.425 4.995 12.425 4.143C12.425 3.291 11.734 2.6 10.882 2.6C10.03 2.6 9.339 3.291 9.339 4.143C9.339 4.995 10.03 5.686 10.882 5.686ZM10.882 5.686V9.457C10.882 10.783 9.807 11.857 8.482 11.857H6.661" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>`,
   },
-  "branch-out": {
-    viewBox: "0 0 16 16",
-    body: `<path d="M10.4225 3.35355L12.9024 5.83344L10.4225 8.31333" stroke="currentColor"/><path d="M1 12.2852H4.23042C4.89912 12.2852 5.52359 11.951 5.89452 11.3946L9.00783 6.72462C8.37877 6.16823 10.0032 5.83402 10.6719 5.83402H12.9024" stroke="currentColor"/><path d="M8.5 12.2852H14" stroke="currentColor" stroke-linejoin="round"/>`,
-  },
   "grid-plus": {
     viewBox: "0 0 16 16",
     body: `<path d="M13.9948 11.668H9.32812M11.6641 9.33203V13.9987M6.66667 9.33203V13.9987H2V9.33203H6.66667ZM6.66667 2V6.66667H2V2H6.66667ZM13.9948 2V6.66667H9.32812V2H13.9948Z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="square"/>`,
@@ -32,10 +25,6 @@ const icons = {
     viewBox: "0 0 16 16",
     body: `<path d="M6.33345 6.33349V5.00015H9.66679V7.00015L8.00015 8.00015V9.66679M8.27485 11.6819H7.71897M14.4446 8.00011C14.4446 11.5593 11.5593 14.4446 8.00011 14.4446C4.44094 14.4446 1.55566 11.5593 1.55566 8.00011C1.55566 4.44094 4.44094 1.55566 8.00011 1.55566C11.5593 1.55566 14.4446 4.44094 14.4446 8.00011Z" stroke="currentColor" stroke-linecap="square"/>`,
   },
-  "circle-exclamation": {
-    viewBox: "0 0 16 16",
-    body: `<path d="M7.9987 5.50016V8.50016M7.9987 10.5002V10.5068M14.1654 8.00016C14.1654 11.4059 11.4045 14.1668 7.9987 14.1668C6.29582 14.1668 4.75415 13.4766 3.63821 12.3607C2.52226 11.2447 1.83203 9.70304 1.83203 8.00016C1.83203 4.59441 4.59294 1.8335 7.9987 1.8335C9.70158 1.8335 11.2432 2.52372 12.3592 3.63967C13.4751 4.75562 14.1654 6.29728 14.1654 8.00016Z" stroke="currentColor" stroke-linecap="square"/>`,
-  },
   "sidebar-right": {
     viewBox: "0 0 20 20",
     body: `<path d="M2.91536 2.91406H2.36536V2.36406H2.91536V2.91406ZM2.91536 17.0807V17.6307H2.36536V17.0807H2.91536ZM17.082 17.0807H17.632V17.6307H17.082V17.0807ZM17.082 2.91406V2.36406H17.632V2.91406H17.082ZM6.9987 2.91406H6.4487V2.36406H6.9987V2.91406ZM6.9987 17.0807V17.6307H6.4487V17.0807H6.9987ZM2.91536 2.91406H3.46536V17.0807H2.91536H2.36536V2.91406H2.91536ZM2.91536 17.0807V16.5307H17.082V17.0807V17.6307H2.91536V17.0807ZM17.082 17.0807H16.532V2.91406H17.082H17.632V17.0807H17.082ZM17.082 2.91406V3.46406H2.91536V2.91406V2.36406H17.082V2.91406ZM6.9987 2.91406H7.5487V17.0807H6.9987H6.4487V2.91406H6.9987ZM17.082 17.0807L17.082 17.6307L6.9987 17.6307V17.0807V16.5307L17.082 16.5307L17.082 17.0807ZM6.9987 2.91406V2.36406H17.082V2.91406V3.46406H6.9987V2.91406Z" fill="currentColor"/>`,
@@ -132,14 +121,6 @@ const icons = {
     viewBox: "0 0 20 20",
     body: `<path d="M7 14.5H13M7 7.99512H10.0049M10.0049 7.99512H13M10.0049 7.99512V5M10.0049 7.99512V11M18 18V2L2 2L2 18H18Z" stroke="currentColor"/>`,
   },
-  "window-analytics": {
-    viewBox: "0 0 16 16",
-    body: `<g transform="translate(1 2)"><path d="M7 4H11M7 8H11M0.5 0.5V11.5H13.5V0.5H0.5ZM3.5 3.5H4.5V4.5H3.5V3.5ZM3.5 7.5H4.5V8.5H3.5V7.5Z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="square"/></g>`,
-  },
-  trash: {
-    viewBox: "0 0 20 20",
-    body: `<path d="M4.58342 17.9134L4.58369 17.4134L4.22787 17.5384L4.22766 18.0384H4.58342V17.9134ZM15.4167 17.9134V18.0384H15.7725L15.7723 17.5384L15.4167 17.9134ZM2.08342 3.95508V3.45508H1.58342V3.95508H2.08342V4.45508V3.95508ZM17.9167 4.45508V4.95508H18.4167V4.45508H17.9167V3.95508V4.45508ZM4.16677 4.58008L3.66701 4.5996L4.22816 17.5379L4.72792 17.4934L5.22767 17.4489L4.66652 4.54055L4.16677 4.58008ZM4.58342 18.0384V17.9134H15.4167V18.0384V18.5384H4.58342V18.0384ZM15.4167 17.9134L15.8332 17.5379L16.2498 4.5996L15.7501 4.58008L15.2503 4.56055L14.8337 17.4989L15.4167 17.9134ZM15.8334 4.58008V4.08008H4.16677V4.58008V5.08008H15.8334V4.58008ZM2.08342 4.45508V4.95508H4.16677V4.58008V4.08008H2.08342V4.45508ZM15.8334 4.58008V5.08008H17.9167V4.45508V3.95508H15.8334V4.58008ZM6.83951 4.35149L7.432 4.55047C7.79251 3.47701 8.80699 2.70508 10.0001 2.70508V2.20508V1.70508C8.25392 1.70508 6.77335 2.83539 6.24702 4.15251L6.83951 4.35149ZM10.0001 2.20508V2.70508C11.1932 2.70508 12.2077 3.47701 12.5682 4.55047L13.1607 4.35149L13.7532 4.15251C13.2269 2.83539 11.7463 1.70508 10.0001 1.70508V2.20508Z" fill="currentColor"/>`,
-  },
   "outline-sliders": {
     viewBox: "0 0 16 16",
     body: `<path d="M11.7779 4.66675H14.4446M11.7779 4.66675C11.7779 5.77132 10.8825 6.66675 9.77789 6.66675C8.67332 6.66675 7.77789 5.77132 7.77789 4.66675M11.7779 4.66675C11.7779 3.56218 10.8825 2.66675 9.77789 2.66675C8.67332 2.66675 7.77789 3.56218 7.77789 4.66675M1.55566 4.66675H7.77789M4.22233 11.3334H1.55566M4.22233 11.3334C4.22233 12.438 5.11776 13.3334 6.22233 13.3334C7.3269 13.3334 8.22233 12.438 8.22233 11.3334M4.22233 11.3334C4.22233 10.2288 5.11776 9.33341 6.22233 9.33341C7.3269 9.33341 8.22233 10.2288 8.22233 11.3334M14.4446 11.3334H8.22233" stroke="currentColor"/>`,
@@ -164,29 +145,16 @@ const icons = {
     viewBox: "0 0 20 20",
     body: `<path d="M5.83333 4.16406L2.5 7.4974L5.83333 10.8307M3.33333 7.4974H17.9167V15.4141H10" stroke="currentColor" stroke-linecap="square"/>`,
   },
-  "fill-triangle-down": {
-    viewBox: "0 0 16 16",
-    body: `<path d="M5.37624 6.75194C5.1818 6.41861 5.42223 6 5.80813 6H10.1921C10.578 6 10.8184 6.41861 10.624 6.75194L8.43199 10.5096C8.23905 10.8404 7.76115 10.8404 7.56821 10.5096L5.37624 6.75194Z" fill="currentColor"/>`,
-  },
   archive: {
     viewBox: "0 0 16 16",
     body: `<path d="M13.1112 13.5555V14.0555H13.6112V13.5555H13.1112ZM2.889 13.5555H2.389L2.389 14.0555H2.889V13.5555ZM3.38901 5.55546L3.38901 5.05546L2.38901 5.05546L2.38901 5.55546L2.88901 5.55546L3.38901 5.55546ZM14.4446 2.44434H14.9446V1.94434L14.4446 1.94434L14.4446 2.44434ZM14.4446 5.55545L14.4446 6.05545L14.9446 6.05545V5.55545H14.4446ZM1.55566 5.55546L1.05566 5.55545L1.05566 6.05546L1.55566 6.05546L1.55566 5.55546ZM1.5557 2.44436L1.5557 1.94436L1.05571 1.94436L1.0557 2.44435L1.5557 2.44436ZM13.1112 5.55546H12.6112V13.5555H13.1112H13.6112V5.55546H13.1112ZM2.889 13.5555H3.389L3.38901 5.55546L2.88901 5.55546L2.38901 5.55546L2.389 13.5555H2.889ZM14.4446 2.44434H13.9446V5.55545H14.4446H14.9446V2.44434H14.4446ZM1.55566 5.55546L2.05566 5.55547L2.0557 2.44436L1.5557 2.44436L1.0557 2.44435L1.05566 5.55545L1.55566 5.55546ZM6.22234 8.22213V8.72213H9.7779V8.22213V7.72213H6.22234V8.22213ZM13.1112 13.5555V13.0555H2.889V13.5555V14.0555H13.1112V13.5555ZM1.5557 2.44436L1.5557 2.94436L14.4446 2.94434L14.4446 2.44434L14.4446 1.94434L1.5557 1.94436L1.5557 2.44436ZM14.4446 5.55545L14.4446 5.05545L1.55566 5.05546L1.55566 5.55546L1.55566 6.05546L14.4446 6.05545L14.4446 5.55545Z" fill="currentColor"/>`,
   },
 }
 
-type IconName = keyof typeof icons | keyof typeof additionalIcons
-
 const spriteID = "opencode-v2-icon-sprite"
-const symbol = (name: IconName) => `opencode-v2-icon-${name}`
+const symbol = (name: keyof typeof icons) => `opencode-v2-icon-${name}`
 let spriteInserted = false
 
-function getIcon(name: IconName) {
-  const icon = icons[name as keyof typeof icons]
-  if (icon) return icon
-  const body = additionalIcons[name as keyof typeof additionalIcons]
-  return { body, viewBox: additionalIconViewBox(name as keyof typeof additionalIcons) }
-}
-
 function ensureSprite() {
   if (spriteInserted) return
   if (typeof document === "undefined") return
@@ -202,26 +170,25 @@ function ensureSprite() {
   svg.setAttribute("height", "0")
   svg.style.position = "absolute"
   svg.style.overflow = "hidden"
-  svg.innerHTML = Array.from(new Set<IconName>([...Object.keys(additionalIcons), ...Object.keys(icons)] as IconName[]))
-    .map((name) => `<symbol id="${symbol(name)}" viewBox="${getIcon(name).viewBox}">${getIcon(name).body}</symbol>`)
+  svg.innerHTML = Object.entries(icons)
+    .map(
+      ([name, icon]) =>
+        `<symbol id="${symbol(name as keyof typeof icons)}" viewBox="${icon.viewBox}">${icon.body}</symbol>`,
+    )
     .join("")
   document.body.insertBefore(svg, document.body.firstChild)
   spriteInserted = true
 }
 
 export interface IconProps extends ComponentProps<"svg"> {
-  name: IconName | (string & {})
+  name: keyof typeof icons | (string & {})
   size?: "small" | "normal" | "large"
 }
 
 export function Icon(props: IconProps) {
   const [split, rest] = splitProps(props, ["name", "size"])
-  const iconName = (): IconName => {
-    if (icons[split.name as keyof typeof icons]) return split.name as keyof typeof icons
-    if (additionalIcons[split.name as keyof typeof additionalIcons]) return split.name as keyof typeof additionalIcons
-    return "plus"
-  }
-  const icon = () => getIcon(iconName())
+  const iconName = () => (icons[split.name as keyof typeof icons] ? (split.name as keyof typeof icons) : "plus")
+  const icon = () => icons[iconName()]
   const pixelSize = split.size === "small" ? 14 : split.size === "large" ? 20 : 16
   onMount(ensureSprite)
 
@@ -229,14 +196,6 @@ export function Icon(props: IconProps) {
     <svg
       {...rest}
       data-slot="icon-svg"
-      data-directional={
-        iconName() === "arrow-left" ||
-        iconName() === "arrow-right" ||
-        iconName() === "chevron-left" ||
-        iconName() === "chevron-right"
-          ? ""
-          : undefined
-      }
       width={pixelSize}
       height={pixelSize}
       viewBox={icon().viewBox}

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.css → v2/components/line-comment-v2.css}

@@ -49,7 +49,7 @@
   font-size: 13px;
   font-style: normal;
   font-weight: 440;
-  line-height: var(--line-height-compact);
+  line-height: 1;
   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: var(--line-height-tight);
+  line-height: 1;
   letter-spacing: 0.05px;
   color: var(--v2-text-text-faint);
   font-variation-settings: "slnt" 0;
@@ -138,7 +138,7 @@
   font-size: 13px;
   font-style: normal;
   font-weight: 530;
-  line-height: var(--line-height-compact);
+  line-height: 1;
   letter-spacing: -0.04px;
   color: var(--v2-text-text-base);
   user-select: none;

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