@opencode-ai/ui 0.0.0-dev-202609070401 → 0.0.0-dev-19227

package/src/{v2/components/icon-button-v2.css → actions/icon-button/icon-button.css}

@@ -71,23 +71,37 @@
 
 /* Contrast */
 [data-component="icon-button-v2"][data-variant="contrast"] {
+  --icon-button-contrast-highlight: var(--v2-alpha-light-20);
+  --icon-button-contrast-hover: var(--v2-overlay-simple-overlay-contrast-hover);
+
   background-image:
-    linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%),
-    linear-gradient(90deg, var(--v2-background-bg-contrast) 0%, var(--v2-background-bg-contrast) 100%);
+    linear-gradient(180deg, var(--icon-button-contrast-highlight) 0%, var(--v2-alpha-light-0) 100%),
+    linear-gradient(
+      90deg,
+      var(--v2-background-bg-icon-button-contrast) 0%,
+      var(--v2-background-bg-icon-button-contrast) 100%
+    );
   color: var(--v2-text-text-contrast);
   text-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.3);
   box-shadow: var(--v2-elevation-button-contrast);
 }
 
+[data-color-scheme="dark"] [data-component="icon-button-v2"][data-variant="contrast"] {
+  --icon-button-contrast-highlight: var(--v2-alpha-light-60);
+  --icon-button-contrast-hover: var(--v2-alpha-dark-8);
+
+  color: var(--v2-icon-icon-inverse);
+}
+
 [data-component="icon-button-v2"][data-variant="contrast"]:is(:hover, [data-state="hover"]):not(:disabled) {
   background-image:
+    linear-gradient(90deg, var(--icon-button-contrast-hover) 0%, var(--icon-button-contrast-hover) 100%),
+    linear-gradient(180deg, var(--icon-button-contrast-highlight) 0%, var(--v2-alpha-light-0) 100%),
     linear-gradient(
       90deg,
-      var(--v2-overlay-simple-overlay-contrast-hover) 0%,
-      var(--v2-overlay-simple-overlay-contrast-hover) 100%
-    ),
-    linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%),
-    linear-gradient(90deg, var(--v2-background-bg-contrast) 0%, var(--v2-background-bg-contrast) 100%);
+      var(--v2-background-bg-icon-button-contrast) 0%,
+      var(--v2-background-bg-icon-button-contrast) 100%
+    );
 }
 
 [data-component="icon-button-v2"][data-variant="contrast"]:is(:active, [data-state="pressed"]):not(:disabled) {
@@ -97,8 +111,12 @@
       var(--v2-overlay-simple-overlay-contrast-pressed) 0%,
       var(--v2-overlay-simple-overlay-contrast-pressed) 100%
     ),
-    linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%),
-    linear-gradient(90deg, var(--v2-background-bg-contrast) 0%, var(--v2-background-bg-contrast) 100%);
+    linear-gradient(180deg, var(--icon-button-contrast-highlight) 0%, var(--v2-alpha-light-0) 100%),
+    linear-gradient(
+      90deg,
+      var(--v2-background-bg-icon-button-contrast) 0%,
+      var(--v2-background-bg-icon-button-contrast) 100%
+    );
 }
 
 [data-component="icon-button-v2"][data-variant="contrast"]:is(:disabled, [data-state="disabled"]) {

package/src/actions/icon-button/icon-button.tsx

@@ -0,0 +1,32 @@
+import { Root } from "@kobalte/core/button"
+import { type ComponentProps, splitProps } from "solid-js"
+import { JSX } from "solid-js"
+import "./icon-button.css"
+
+export interface IconButtonProps
+  extends ComponentProps<typeof Root>,
+    Pick<ComponentProps<"button">, "class" | "classList"> {
+  icon?: JSX.Element
+  size?: "small" | "normal" | "large"
+  variant?: "neutral" | "contrast" | "ghost" | "ghost-muted"
+  state?: "rest" | "hover" | "pressed"
+}
+
+export function IconButton(props: ComponentProps<"button"> & IconButtonProps) {
+  const [local, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList", "state"])
+  return (
+    <Root
+      {...rest}
+      data-component="icon-button-v2"
+      data-size={local.size || "normal"}
+      data-variant={local.variant || "neutral"}
+      data-state={local.state}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      {local.icon}
+    </Root>
+  )
+}

package/src/{v2/components/split-button-v2.css → actions/split-button/split-button.css}

@@ -9,6 +9,7 @@
   overflow: hidden;
 }
 
+[data-component="split-button-v2"].session-review-v2-open-in-app,
 [data-component="split-button-v2"]:is(:hover, :has([data-component="split-button-v2-menu-trigger"][data-expanded])) {
   box-shadow: inset 0 0 0 1px var(--v2-border-border-muted);
 }
@@ -87,13 +88,8 @@
   flex-shrink: 0;
 }
 
-[data-component="menu-v2-content"].open-in-app-v2-menu [data-component="icon"] {
+[data-component="menu-v2-content"].open-in-app-v2-menu [data-slot="icon-svg"] {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
 }
-
-[data-component="menu-v2-content"].open-in-app-v2-menu [data-component="icon"] [data-slot="icon-svg"] {
-  width: 16px;
-  height: 16px;
-}

package/src/{v2/components/split-button-v2.tsx → actions/split-button/split-button.tsx}

@@ -1,7 +1,7 @@
 import { splitProps, type ComponentProps, type ParentProps } from "solid-js"
-import "./split-button-v2.css"
+import "./split-button.css"
 
-export function SplitButtonV2(props: ParentProps<ComponentProps<"div">>) {
+export function SplitButton(props: ParentProps<ComponentProps<"div">>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
   return (
     <div
@@ -17,7 +17,7 @@ export function SplitButtonV2(props: ParentProps<ComponentProps<"div">>) {
   )
 }
 
-export function SplitButtonV2Action(props: ComponentProps<"button">) {
+export function SplitButtonAction(props: ComponentProps<"button">) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
     <button
@@ -32,7 +32,7 @@ export function SplitButtonV2Action(props: ComponentProps<"button">) {
   )
 }
 
-export function SplitButtonV2MenuTrigger(props: ComponentProps<"button">) {
+export function SplitButtonMenuTrigger(props: ComponentProps<"button">) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
     <button

package/src/components/animated-number.css

@@ -17,7 +17,7 @@
   }
 
   [data-slot="animated-number-digit"] {
-    display: inline-block;
+    display: inline-grid;
     width: 1ch;
     height: 1em;
     line-height: 1em;
@@ -41,19 +41,12 @@
     mask-repeat: no-repeat;
   }
 
+  [data-slot="animated-number-static"],
   [data-slot="animated-number-strip"] {
-    display: inline-flex;
-    flex-direction: column;
-    transform: translateY(calc(var(--animated-number-offset, 10) * -1em));
-    transition-property: transform;
-    transition-duration: var(--animated-number-duration, 560ms);
-    transition-timing-function: var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
-  }
-
-  [data-slot="animated-number-strip"][data-animating="false"] {
-    transition-duration: 0ms;
+    grid-area: 1 / 1;
   }
 
+  [data-slot="animated-number-static"],
   [data-slot="animated-number-cell"] {
     display: inline-flex;
     align-items: center;
@@ -62,6 +55,24 @@
     height: 1em;
     line-height: 1em;
   }
+
+  [data-slot="animated-number-digit"][data-animating="true"] [data-slot="animated-number-static"] {
+    visibility: hidden;
+  }
+
+  [data-slot="animated-number-strip"] {
+    display: inline-flex;
+    flex-direction: column;
+    margin-top: calc(var(--animated-number-offset, 10) * -1em);
+    transition-property: margin-top;
+    transition-duration: var(--animated-number-duration, 560ms);
+    transition-timing-function: var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
+  }
+
+  [data-slot="animated-number-digit"][data-animating="false"] [data-slot="animated-number-strip"] {
+    transition-duration: 0ms;
+    visibility: hidden;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -71,5 +82,12 @@
 
   [data-component="animated-number"] [data-slot="animated-number-strip"] {
     transition-duration: 0ms;
+    visibility: hidden;
+  }
+
+  [data-component="animated-number"]
+    [data-slot="animated-number-digit"][data-animating]
+    [data-slot="animated-number-static"] {
+    visibility: visible;
   }
 }

package/src/components/animated-number.tsx

@@ -43,10 +43,10 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
   )
 
   return (
-    <span data-slot="animated-number-digit">
+    <span data-slot="animated-number-digit" data-animating={animating() ? "true" : "false"}>
+      <span data-slot="animated-number-static">{props.value}</span>
       <span
         data-slot="animated-number-strip"
-        data-animating={animating() ? "true" : "false"}
         onTransitionEnd={() => {
           setState("animating", false)
           setState("step", (value) => normalize(value) + 10)

package/src/components/card.css

@@ -58,7 +58,7 @@
     gap: var(--card-gap);
   }
 
-  :where([data-slot="card-title"]) [data-component="icon"] {
+  :where([data-slot="card-title"]) [data-slot="icon-svg"] {
     color: var(--card-accent);
   }
 
@@ -71,7 +71,7 @@
     flex: 0 0 auto;
   }
 
-  :where([data-slot="card-title-icon"][data-placeholder]) [data-component="icon"] {
+  :where([data-slot="card-title-icon"][data-placeholder]) [data-slot="icon-svg"] {
     color: var(--v2-text-text-faint);
   }
 
@@ -92,24 +92,3 @@
     padding-left: var(--card-indent);
   }
 }
-
-body:not([data-new-layout]) [data-component="card"] {
-  color: var(--text-strong);
-  --card-accent: var(--icon-active);
-
-  :where([data-card="title"], [data-slot="card-title"]) {
-    color: var(--text-strong);
-  }
-
-  :where([data-slot="card-title-icon"][data-placeholder]) [data-component="icon"] {
-    color: var(--text-weak);
-  }
-
-  :where([data-card="description"], [data-slot="card-description"]) {
-    color: var(--text-base);
-  }
-
-  &[data-variant="error"] {
-    --card-accent: var(--icon-critical-base) !important;
-  }
-}

package/src/components/card.tsx

@@ -1,5 +1,5 @@
-import { type ComponentProps, splitProps } from "solid-js"
-import { Icon, type IconProps } from "./icon"
+import { type ComponentProps, Show, splitProps } from "solid-js"
+import { Icon, type IconProps } from "@opencode-ai/ui/icon"
 
 type Variant = "normal" | "error" | "warning" | "success" | "info"
 
@@ -80,11 +80,11 @@ export function CardTitle(props: CardTitleProps) {
         [split.class ?? ""]: !!split.class,
       }}
     >
-      {show() ? (
+      <Show when={show()}>
         <span data-slot="card-title-icon" data-placeholder={placeholder() || undefined}>
           <Icon name={name() ?? "dash"} size="small" />
         </span>
-      ) : null}
+      </Show>
       {split.children}
     </div>
   )

package/src/components/collapsible.tsx

@@ -1,6 +1,6 @@
 import { Collapsible as Kobalte, CollapsibleRootProps } from "@kobalte/core/collapsible"
 import { ComponentProps, ParentProps, splitProps } from "solid-js"
-import { Icon } from "./icon"
+import { Icon } from "@opencode-ai/ui/icon"
 
 export interface CollapsibleProps extends ParentProps<CollapsibleRootProps> {
   class?: string
@@ -35,7 +35,7 @@ function CollapsibleArrow(props?: ComponentProps<"div">) {
   return (
     <div data-slot="collapsible-arrow" {...(props || {})}>
       <span data-slot="collapsible-arrow-icon">
-        <Icon name="chevron-down" size="small" />
+        <Icon name="fill-triangle-down" size="small" />
       </span>
     </div>
   )

package/src/components/dock-surface.css

@@ -10,15 +10,8 @@
 [data-dock-border-underlay] {
   /* Later shadows paint underneath, so this solid ring masks overlapping surfaces without changing border geometry. */
   box-shadow:
-    var(--dock-shell-visual-shadow, var(--shadow-xs-border)),
-    0 0 0 var(--dock-shell-border-underlay-width, 1px)
-      var(--dock-shell-border-underlay-background, var(--surface-raised-stronger-non-alpha));
-}
-
-[data-dock-border-underlay="v2"] {
-  --dock-shell-visual-shadow: var(--v2-elevation-raised);
-  --dock-shell-border-underlay-width: 0.5px;
-  --dock-shell-border-underlay-background: var(--v2-background-bg-base);
+    var(--v2-elevation-raised),
+    0 0 0 0.5px var(--v2-background-bg-base);
 }
 
 [data-dock-surface="tray"] {

package/src/components/image-preview.tsx

@@ -1,6 +1,7 @@
 import { Dialog as Kobalte } from "@kobalte/core/dialog"
 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 ImagePreviewProps {
   src: string
@@ -17,7 +18,7 @@ export function ImagePreview(props: ImagePreviewProps) {
             <Kobalte.CloseButton
               data-slot="image-preview-close"
               as={IconButton}
-              icon="close"
+              icon={<Icon name="close" />}
               variant="ghost"
               aria-label={i18n.t("ui.common.close")}
             />

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/scroll-view.css

@@ -15,15 +15,21 @@
   outline: none;
 }
 
+.scroll-view[data-orientation="horizontal"] .scroll-view__viewport {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.scroll-view[data-orientation="both"] .scroll-view__viewport {
+  overflow: auto;
+}
+
 .scroll-view__viewport::-webkit-scrollbar {
   display: none;
 }
 
 .scroll-view__thumb {
   position: absolute;
-  inset-inline-end: 0;
-  top: 0;
-  width: 12px;
   transition: opacity 200ms ease;
   cursor: default;
   user-select: none;
@@ -31,7 +37,19 @@
   opacity: 0;
 }
 
-.scroll-view__thumb::after {
+.scroll-view__thumb[data-orientation="vertical"] {
+  inset-inline-end: 0;
+  top: 0;
+  width: 12px;
+}
+
+.scroll-view__thumb[data-orientation="horizontal"] {
+  left: 0;
+  bottom: 0;
+  height: 12px;
+}
+
+.scroll-view__thumb[data-orientation="vertical"]::after {
   content: "";
   position: absolute;
   left: 50%;
@@ -45,6 +63,20 @@
   transition: background-color 150ms ease;
 }
 
+.scroll-view__thumb[data-orientation="horizontal"]::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 4px;
+  transform: translateY(-50%);
+  border-radius: 9999px;
+  background-color: var(--border-weak-base);
+  backdrop-filter: blur(4px);
+  transition: background-color 150ms ease;
+}
+
 .scroll-view__thumb:hover::after,
 .scroll-view__thumb[data-dragging="true"]::after {
   background-color: var(--border-strong-base);