@opencode-ai/ui 0.0.0-dev-19174 → 0.0.0-dev-202609060432

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="ghost" 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);
@@ -51,13 +47,11 @@
 
   box-sizing: border-box;
   display: flex;
-  flex-shrink: 0;
   flex-direction: row;
   align-items: center;
   gap: 8px;
   height: 28px;
   padding: 0 12px;
-  padding-inline-end: 6px;
   background: transparent;
   border-radius: 4px;
   outline: none;
@@ -78,7 +72,7 @@
 
     font-size: 13px;
     font-weight: 440;
-    line-height: var(--line-height-compact);
+    line-height: 100%;
     letter-spacing: -0.04px;
     color: var(--menu-v2-fg);
   }
@@ -177,129 +171,13 @@
 
   font-size: 11px;
   font-weight: 530;
+  line-height: 100%;
   letter-spacing: 0.05px;
   color: var(--v2-text-text-faint);
   user-select: none;
   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;

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

@@ -1,17 +1,7 @@
 import { DropdownMenu } from "@kobalte/core/dropdown-menu"
 import { ContextMenu } from "@kobalte/core/context-menu"
-import {
-  createContext,
-  Show,
-  splitProps,
-  useContext,
-  type Accessor,
-  type Component,
-  type ComponentProps,
-  type JSX,
-  type ParentProps,
-} from "solid-js"
-import "./menu.css"
+import { Show, splitProps, type Component, type ComponentProps, type JSX, type ParentProps } from "solid-js"
+import "./menu-v2.css"
 
 const ChevronRight: Component = () => (
   <svg
@@ -39,18 +29,6 @@ const CheckMark: Component = () => (
   </svg>
 )
 
-export type MenuAppearance = "standard" | "compact"
-
-const MenuAppearanceContext = createContext<{ appearance: Accessor<MenuAppearance> }>({
-  appearance: (): MenuAppearance => "compact",
-})
-
-function useMenuContext() {
-  const ctx = useContext(MenuAppearanceContext)
-  if (!ctx) throw new Error("Menu components must be used inside Menu or Menu.Context")
-  return ctx
-}
-
 function ItemBody(
   props: ParentProps<{
     shortcut?: JSX.Element | string
@@ -68,21 +46,15 @@ function ItemBody(
   )
 }
 
-export interface MenuItemProps extends ComponentProps<typeof DropdownMenu.Item> {
+export interface MenuV2ItemProps extends ComponentProps<typeof DropdownMenu.Item> {
   shortcut?: JSX.Element | string
   badge?: JSX.Element | string
 }
 
-function MenuItem(props: ParentProps<MenuItemProps>) {
-  const ctx = useMenuContext()
+function MenuV2Item(props: ParentProps<MenuV2ItemProps>) {
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
   return (
-    <DropdownMenu.Item
-      {...r}
-      data-component="menu-v2-item"
-      data-appearance={ctx.appearance()}
-      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
-    >
+    <DropdownMenu.Item {...r} data-component="menu-v2-item" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}>
       <ItemBody shortcut={s.shortcut} badge={s.badge}>
         {s.children}
       </ItemBody>
@@ -90,19 +62,17 @@ function MenuItem(props: ParentProps<MenuItemProps>) {
   )
 }
 
-export interface MenuCheckboxItemProps extends ComponentProps<typeof DropdownMenu.CheckboxItem> {
+export interface MenuV2CheckboxItemProps extends ComponentProps<typeof DropdownMenu.CheckboxItem> {
   shortcut?: JSX.Element | string
   badge?: JSX.Element | string
 }
 
-function MenuCheckboxItem(props: ParentProps<MenuCheckboxItemProps>) {
-  const ctx = useMenuContext()
+function MenuV2CheckboxItem(props: ParentProps<MenuV2CheckboxItemProps>) {
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
   return (
     <DropdownMenu.CheckboxItem
       {...r}
       data-component="menu-v2-item"
-      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     >
       <ItemBody
@@ -120,19 +90,17 @@ function MenuCheckboxItem(props: ParentProps<MenuCheckboxItemProps>) {
   )
 }
 
-export interface MenuRadioItemProps extends ComponentProps<typeof DropdownMenu.RadioItem> {
+export interface MenuV2RadioItemProps extends ComponentProps<typeof DropdownMenu.RadioItem> {
   shortcut?: JSX.Element | string
   badge?: JSX.Element | string
 }
 
-function MenuRadioItem(props: ParentProps<MenuRadioItemProps>) {
-  const ctx = useMenuContext()
+function MenuV2RadioItem(props: ParentProps<MenuV2RadioItemProps>) {
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
   return (
     <DropdownMenu.RadioItem
       {...r}
       data-component="menu-v2-item"
-      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     >
       <ItemBody
@@ -150,19 +118,17 @@ function MenuRadioItem(props: ParentProps<MenuRadioItemProps>) {
   )
 }
 
-export interface MenuSubTriggerProps extends ComponentProps<typeof DropdownMenu.SubTrigger> {
+export interface MenuV2SubTriggerProps extends ComponentProps<typeof DropdownMenu.SubTrigger> {
   shortcut?: JSX.Element | string
   badge?: JSX.Element | string
 }
 
-function MenuSubTrigger(props: ParentProps<MenuSubTriggerProps>) {
-  const ctx = useMenuContext()
+function MenuV2SubTrigger(props: ParentProps<MenuV2SubTriggerProps>) {
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
   return (
     <DropdownMenu.SubTrigger
       {...r}
       data-component="menu-v2-item"
-      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     >
       <ItemBody shortcut={s.shortcut} badge={s.badge} trailing={<ChevronRight />}>
@@ -172,118 +138,88 @@ function MenuSubTrigger(props: ParentProps<MenuSubTriggerProps>) {
   )
 }
 
-function MenuSubContent(props: ComponentProps<typeof DropdownMenu.SubContent>) {
-  const ctx = useMenuContext()
+function MenuV2SubContent(props: ComponentProps<typeof DropdownMenu.SubContent>) {
   const [s, r] = splitProps(props, ["class", "classList"])
   return (
     <DropdownMenu.SubContent
       {...r}
       data-component="menu-v2-content"
-      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     />
   )
 }
 
-function MenuGroupLabel(props: ComponentProps<typeof DropdownMenu.GroupLabel>) {
-  const ctx = useMenuContext()
+function MenuV2GroupLabel(props: ComponentProps<typeof DropdownMenu.GroupLabel>) {
   const [s, r] = splitProps(props, ["class", "classList"])
   return (
     <DropdownMenu.GroupLabel
       {...r}
       data-slot="menu-v2-group-label"
-      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     />
   )
 }
 
-function MenuSeparator(props: ComponentProps<typeof DropdownMenu.Separator>) {
-  const ctx = useMenuContext()
+function MenuV2Separator(props: ComponentProps<typeof DropdownMenu.Separator>) {
   const [s, r] = splitProps(props, ["class", "classList"])
   return (
     <DropdownMenu.Separator
       {...r}
       data-slot="menu-v2-separator"
-      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     />
   )
 }
 
-function MenuContent(props: ComponentProps<typeof DropdownMenu.Content>) {
-  const ctx = useMenuContext()
+function MenuV2Content(props: ComponentProps<typeof DropdownMenu.Content>) {
   const [s, r] = splitProps(props, ["class", "classList"])
   return (
     <DropdownMenu.Content
       {...r}
       data-component="menu-v2-content"
-      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     />
   )
 }
 
-export interface MenuProps extends ComponentProps<typeof DropdownMenu> {
-  appearance?: MenuAppearance
+function MenuV2Root(props: ComponentProps<typeof DropdownMenu>) {
+  return <DropdownMenu {...props} />
 }
 
-function MenuRoot(props: MenuProps) {
-  const [local, rest] = splitProps(props, ["appearance", "children"])
-  const appearance = () => local.appearance ?? "compact"
-  return (
-    <MenuAppearanceContext.Provider value={{ appearance }}>
-      <DropdownMenu {...rest}>{local.children}</DropdownMenu>
-    </MenuAppearanceContext.Provider>
-  )
-}
-
-export interface MenuContextProps extends ComponentProps<typeof ContextMenu> {
-  appearance?: MenuAppearance
-}
-
-function MenuContextRoot(props: MenuContextProps) {
-  const [local, rest] = splitProps(props, ["appearance", "children"])
-  const appearance = () => local.appearance ?? "compact"
-  return (
-    <MenuAppearanceContext.Provider value={{ appearance }}>
-      <ContextMenu {...rest}>{local.children}</ContextMenu>
-    </MenuAppearanceContext.Provider>
-  )
+function MenuV2ContextRoot(props: ComponentProps<typeof ContextMenu>) {
+  return <ContextMenu {...props} />
 }
 
-function MenuContextContent(props: ComponentProps<typeof ContextMenu.Content>) {
-  const ctx = useMenuContext()
+function MenuV2ContextContent(props: ComponentProps<typeof ContextMenu.Content>) {
   const [s, r] = splitProps(props, ["class", "classList"])
   return (
     <ContextMenu.Content
       {...r}
       data-component="menu-v2-content"
-      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     />
   )
 }
 
-const MenuContext = Object.assign(MenuContextRoot, {
+const MenuV2Context = Object.assign(MenuV2ContextRoot, {
   Trigger: ContextMenu.Trigger,
   Portal: ContextMenu.Portal,
-  Content: MenuContextContent,
+  Content: MenuV2ContextContent,
 })
 
-export const Menu = Object.assign(MenuRoot, {
+export const MenuV2 = Object.assign(MenuV2Root, {
   Trigger: DropdownMenu.Trigger,
   Portal: DropdownMenu.Portal,
-  Content: MenuContent,
-  Item: MenuItem,
-  CheckboxItem: MenuCheckboxItem,
+  Content: MenuV2Content,
+  Item: MenuV2Item,
+  CheckboxItem: MenuV2CheckboxItem,
   RadioGroup: DropdownMenu.RadioGroup,
-  RadioItem: MenuRadioItem,
+  RadioItem: MenuV2RadioItem,
   Group: DropdownMenu.Group,
-  GroupLabel: MenuGroupLabel,
-  Separator: MenuSeparator,
+  GroupLabel: MenuV2GroupLabel,
+  Separator: MenuV2Separator,
   Sub: DropdownMenu.Sub,
-  SubTrigger: MenuSubTrigger,
-  SubContent: MenuSubContent,
-  Context: MenuContext,
+  SubTrigger: MenuV2SubTrigger,
+  SubContent: MenuV2SubContent,
+  Context: MenuV2Context,
 })

package/src/v2/components/progress-circle-v2.css

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

package/src/v2/components/progress-circle-v2.tsx

@@ -0,0 +1,52 @@
+import { type ComponentProps, createMemo, splitProps } from "solid-js"
+import "./progress-circle-v2.css"
+
+export interface ProgressCircleV2Props extends Pick<ComponentProps<"svg">, "class" | "classList"> {
+  percentage: number
+  size?: number
+  strokeWidth?: number
+}
+
+export function ProgressCircleV2(props: ProgressCircleV2Props) {
+  const [split, rest] = splitProps(props, ["percentage", "size", "strokeWidth", "class", "classList"])
+
+  const size = () => split.size ?? 14
+  const strokeWidth = () => split.strokeWidth ?? 1.5
+  const viewBoxSize = 14
+  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, split.percentage || 0)) / 100))
+
+  return (
+    <svg
+      {...rest}
+      width={size()}
+      height={size()}
+      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
+      fill="none"
+      data-component="progress-circle-v2"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      <circle
+        cx={center}
+        cy={center}
+        r={radius()}
+        data-slot="progress-circle-v2-background"
+        stroke-width={strokeWidth()}
+      />
+      <circle
+        cx={center}
+        cy={center}
+        r={radius()}
+        data-slot="progress-circle-v2-progress"
+        stroke-width={strokeWidth()}
+        stroke-dasharray={circumference().toString()}
+        stroke-dashoffset={offset()}
+      />
+    </svg>
+  )
+}

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

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