@opencode-ai/ui 0.0.0-dev-18801 → 0.0.0-dev-202609010712

package/src/{navigation/tabs → components}/tabs.css

@@ -18,13 +18,15 @@
     display: flex;
     align-items: center;
     overflow-x: auto;
+
+    /* Hide scrollbar */
     scrollbar-width: none;
     -ms-overflow-style: none;
-
     &::-webkit-scrollbar {
       display: none;
     }
 
+    /* After element to fill remaining space */
     &::after {
       content: "";
       display: block;
@@ -46,12 +48,15 @@
     align-items: center;
     gap: 12px;
     color: var(--text-base);
+
+    /* text-14-medium */
     font-family: var(--font-family-sans);
     font-size: 14px;
     font-style: normal;
     font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large);
+    line-height: var(--line-height-large); /* 142.857% */
     letter-spacing: var(--letter-spacing-normal);
+
     white-space: nowrap;
     flex-shrink: 0;
     max-width: 280px;
@@ -81,13 +86,6 @@
       justify-content: center;
     }
 
-    [data-slot="tabs-close-button"] {
-      padding: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
     [data-component="icon-button"] {
       margin: -0.25rem;
     }
@@ -96,17 +94,14 @@
       pointer-events: none;
       color: var(--text-weaker);
     }
-
     &:focus-visible {
       outline: none;
       box-shadow: none;
     }
-
     &:has([data-selected]) {
       color: var(--text-strong);
       background-color: transparent;
       border-bottom-color: transparent;
-
       [data-slot="tabs-trigger-close-button"] {
         opacity: 1;
       }
@@ -115,7 +110,6 @@
     &:hover:not(:disabled):not([data-selected]) {
       color: var(--text-strong);
     }
-
     &:has([data-slot="tabs-trigger-close-button"]) {
       padding-inline-end: 12px;
 
@@ -128,9 +122,10 @@
   [data-slot="tabs-content"] {
     overflow-y: auto;
     flex: 1;
+
+    /* Hide scrollbar */
     scrollbar-width: none;
     -ms-overflow-style: none;
-
     &::-webkit-scrollbar {
       display: none;
     }
@@ -223,7 +218,6 @@
 
       &:has([data-slot="tabs-trigger-close-button"]) {
         padding-inline-end: 5px;
-
         [data-slot="tabs-trigger"] {
           padding-inline-end: 0 !important;
         }
@@ -245,6 +239,10 @@
         background-color: var(--surface-base-hover);
       }
 
+      /*
+        File tabs: use monochrome icon by default.
+        Full-color icon is shown on hover/selected.
+      */
       [data-slot="tabs-trigger"] {
         .tab-fileicon-color,
         .tab-fileicon-mono {
@@ -331,6 +329,9 @@
         border: none;
         background-color: transparent;
       }
+      &:empty::after {
+        display: none;
+      }
     }
 
     [data-slot="tabs-trigger-wrapper"] {
@@ -341,11 +342,13 @@
       border-bottom-style: solid;
       border-bottom-color: transparent;
       gap: 4px;
+
+      /* text-14-regular */
       font-family: var(--font-family-sans);
       font-size: var(--font-size-base);
       font-style: normal;
       font-weight: var(--font-weight-regular);
-      line-height: var(--line-height-x-large);
+      line-height: var(--line-height-x-large); /* 171.429% */
       letter-spacing: var(--letter-spacing-normal);
 
       [data-slot="tabs-trigger"] {
@@ -356,6 +359,18 @@
         border-bottom-color: transparent;
       }
 
+      [data-slot="tabs-trigger-close-button"] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      [data-component="icon-button"] {
+        width: 16px;
+        height: 16px;
+        margin: 0;
+      }
+
       &:has([data-selected]) {
         color: var(--text-strong);
         background-color: transparent;
@@ -368,12 +383,14 @@
 
       &:has([data-slot="tabs-trigger-close-button"]) {
         padding-inline-end: 0;
-
         [data-slot="tabs-trigger"] {
           padding-inline-end: 0;
         }
       }
     }
+
+    /* [data-slot="tabs-content"] { */
+    /* } */
   }
 
   &[data-variant="pill"][data-orientation="horizontal"] {
@@ -396,6 +413,8 @@
       border-radius: var(--radius-sm);
       background-color: transparent;
       gap: 0;
+
+      /* text-13-medium */
       font-family: var(--font-family-sans);
       font-size: var(--font-size-small);
       font-style: normal;
@@ -415,13 +434,17 @@
         color: var(--text-strong);
       }
 
-      &:active:not(:disabled),
-      &:has([data-selected]) {
+      &:active:not(:disabled) {
         background-color: var(--surface-base-active);
       }
 
       &:has([data-selected]) {
+        background-color: var(--surface-base-active);
         color: var(--text-strong);
+
+        &:hover:not(:disabled) {
+          background-color: var(--surface-base-active);
+        }
       }
     }
   }
@@ -458,6 +481,170 @@
       }
     }
   }
+
+  &[data-orientation="vertical"] {
+    flex-direction: row;
+
+    [data-slot="tabs-list"] {
+      flex-direction: column;
+      width: auto;
+      height: 100%;
+      overflow-x: hidden;
+      overflow-y: auto;
+      padding: 8px;
+      gap: 4px;
+      background-color: var(--background-base);
+      border-inline-end: 1px solid var(--border-weak-base);
+
+      &::after {
+        display: none;
+      }
+    }
+
+    [data-slot="tabs-trigger-wrapper"] {
+      width: 100%;
+      height: 32px;
+      border: none;
+      border-radius: 8px;
+      background-color: transparent;
+
+      [data-slot="tabs-trigger"] {
+        height: 100%;
+        padding: 0 8px;
+        gap: 8px;
+        justify-content: flex-start;
+      }
+
+      &:hover:not(:disabled) {
+        background-color: var(--surface-base-hover);
+      }
+
+      &:has([data-selected]) {
+        background-color: var(--surface-base-active);
+        color: var(--text-strong);
+      }
+    }
+
+    [data-slot="tabs-content"] {
+      overflow-x: auto;
+      overflow-y: auto;
+    }
+
+    &[data-variant="alt"] {
+      [data-slot="tabs-list"] {
+        padding: 8px;
+        gap: 4px;
+        border: none;
+
+        &::after {
+          display: none;
+        }
+      }
+
+      [data-slot="tabs-trigger-wrapper"] {
+        height: 32px;
+        border: none;
+        border-radius: 8px;
+
+        [data-slot="tabs-trigger"] {
+          border: none;
+          padding: 0 8px;
+          gap: 8px;
+          justify-content: flex-start;
+        }
+
+        &:hover:not(:disabled) {
+          background-color: var(--surface-base-hover);
+        }
+
+        &:has([data-selected]) {
+          background-color: var(--surface-base-hover);
+          color: var(--text-strong);
+        }
+      }
+    }
+
+    &[data-variant="settings"] {
+      [data-slot="tabs-list"] {
+        width: 150px;
+        min-width: 150px;
+
+        @media (min-width: 640px) {
+          width: 200px;
+          min-width: 200px;
+        }
+        padding: 12px;
+        gap: 0;
+        background-color: var(--background-base);
+        border-inline-end: 1px solid var(--border-weak-base);
+
+        &::after {
+          display: none;
+        }
+      }
+
+      [data-slot="tabs-section-title"] {
+        width: 100%;
+        padding: 0;
+        padding-inline-start: 4px;
+        font-family: var(--font-family-sans);
+        font-size: var(--font-size-small);
+        font-weight: var(--font-weight-medium);
+        color: var(--text-weak);
+      }
+
+      [data-slot="tabs-trigger-wrapper"] {
+        height: 32px;
+        border: none;
+        border-radius: var(--radius-md);
+
+        /* text-14-medium */
+        font-family: var(--font-family-sans);
+        font-size: var(--font-size-base);
+        font-weight: var(--font-weight-medium);
+        line-height: var(--line-height-large);
+
+        [data-slot="tabs-trigger"] {
+          border: none;
+          padding: 0 8px;
+          gap: 12px;
+          justify-content: flex-start;
+          width: 100%;
+          height: 100%;
+        }
+
+        [data-component="icon"] {
+          color: var(--icon-base);
+        }
+
+        &:hover:not(:disabled) {
+          background-color: var(--surface-base-hover);
+        }
+
+        &:has([data-slot="tabs-trigger"]:focus-visible) {
+          background-color: var(--surface-base-hover);
+          box-shadow: var(--shadow-xs-border-focus);
+        }
+
+        &:has([data-selected]) {
+          background-color: var(--surface-base-active);
+          color: var(--text-strong);
+
+          [data-component="icon"] {
+            color: var(--icon-strong-base);
+          }
+
+          &:hover:not(:disabled) {
+            background-color: var(--surface-base-active);
+          }
+        }
+      }
+
+      [data-slot="tabs-content"] {
+        background-color: var(--surface-stronger-non-alpha);
+      }
+    }
+  }
 }
 
 [data-component="tabs-drag-preview"] {
@@ -498,10 +685,10 @@
   position: relative;
 }
 
-:root body #review-panel [data-component="tabs"],
-:root body #terminal-panel [data-component="tabs"],
-:root body #review-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"],
-:root body #terminal-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"] {
+body[data-new-layout] #review-panel [data-component="tabs"],
+body[data-new-layout] #terminal-panel [data-component="tabs"],
+body[data-new-layout] #review-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"],
+body[data-new-layout] #terminal-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"] {
   background-color: var(--v2-background-bg-base);
 
   [data-slot="tabs-list"] {
@@ -521,7 +708,7 @@
   }
 }
 
-:root body #review-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"] {
+body[data-new-layout] #review-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"] {
   [data-slot="tabs-list"] {
     height: 52px;
     padding-inline-end: 12px;
@@ -578,15 +765,16 @@
     [data-slot="icon-svg"] {
       margin-inline-start: -2px;
     }
+  }
 
-    .italic {
-      font-style: italic !important;
-      font-variation-settings: "slnt" -10 !important;
-    }
+  /* Preview/temporary tabs: beat trigger + .text-14-medium upright defaults */
+  [data-slot="tabs-trigger"] .italic {
+    font-style: italic !important;
+    font-variation-settings: "slnt" -10 !important;
   }
 }
 
-:root body #review-panel [data-component="tabs"] .session-review-v2-tabs-bar {
+body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-tabs-bar {
   width: 100%;
   min-width: 0;
   gap: 8px;
@@ -595,9 +783,8 @@
   background-color: var(--v2-background-bg-base);
 }
 
-:root body #review-panel [data-component="tabs"] .session-review-v2-tabs-bar [data-slot="tabs-list"],
-:root
-  body
+body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-tabs-bar [data-slot="tabs-list"],
+body[data-new-layout]
   #review-panel
   [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"]
   .session-review-v2-tabs-bar
@@ -608,7 +795,12 @@
   border-bottom: none;
 }
 
-:root body #review-panel [data-component="tabs"] .session-review-v2-tabs-bar [data-slot="tabs-list"] > .sticky {
+body[data-new-layout]
+  #review-panel
+  [data-component="tabs"]
+  .session-review-v2-tabs-bar
+  [data-slot="tabs-list"]
+  > .sticky {
   padding-inline-end: 0;
 
   [data-component="icon-button-v2"] {
@@ -628,8 +820,7 @@
   }
 }
 
-:root
-  body
+body[data-new-layout]
   #review-panel
   [data-component="tabs"]
   .session-review-v2-tabs-bar
@@ -640,8 +831,7 @@
   inset-inline-end: 0;
 }
 
-:root
-  body
+body[data-new-layout]
   #review-panel
   [data-component="tabs"]
   .session-review-v2-tabs-bar
@@ -689,11 +879,11 @@
   }
 }
 
-:root body #review-panel [data-component="tabs"] .session-review-v2-open-in-app-slot {
+body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-open-in-app-slot {
   flex-shrink: 0;
   margin-inline-start: auto;
 }
 
-:root body #review-panel [data-component="tabs"] .session-review-v2-open-in-app {
+body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-open-in-app {
   flex-shrink: 0;
 }

package/src/components/tabs.tsx

@@ -0,0 +1,126 @@
+import { Tabs as Kobalte } from "@kobalte/core/tabs"
+import { Show, splitProps, type JSX } from "solid-js"
+import type { ComponentProps, ParentProps, Component } from "solid-js"
+
+export interface TabsProps extends ComponentProps<typeof Kobalte> {
+  variant?: "normal" | "alt" | "pill" | "settings"
+  orientation?: "horizontal" | "vertical"
+}
+export interface TabsListProps extends ComponentProps<typeof Kobalte.List> {}
+export interface TabsTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
+  classes?: {
+    button?: string
+  }
+  hideCloseButton?: boolean
+  closeButton?: JSX.Element
+  onMiddleClick?: () => void
+}
+export interface TabsContentProps extends ComponentProps<typeof Kobalte.Content> {}
+
+function TabsRoot(props: TabsProps) {
+  const [split, rest] = splitProps(props, ["class", "classList", "variant", "orientation"])
+  return (
+    <Kobalte
+      {...rest}
+      orientation={split.orientation}
+      data-component="tabs"
+      data-variant={split.variant || "normal"}
+      data-orientation={split.orientation || "horizontal"}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    />
+  )
+}
+
+function TabsList(props: TabsListProps) {
+  const [split, rest] = splitProps(props, ["class", "classList"])
+  return (
+    <Kobalte.List
+      {...rest}
+      data-slot="tabs-list"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    />
+  )
+}
+
+function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
+  const [split, rest] = splitProps(props, [
+    "class",
+    "classList",
+    "classes",
+    "children",
+    "closeButton",
+    "hideCloseButton",
+    "onMiddleClick",
+  ])
+  return (
+    <div
+      data-slot="tabs-trigger-wrapper"
+      data-value={props.value}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+      onMouseDown={(e) => {
+        if (e.button === 1 && split.onMiddleClick) {
+          e.preventDefault()
+        }
+      }}
+      onAuxClick={(e) => {
+        if (e.button === 1 && split.onMiddleClick) {
+          e.preventDefault()
+          split.onMiddleClick()
+        }
+      }}
+    >
+      <Kobalte.Trigger
+        {...rest}
+        dir={rest.dir ?? "auto"}
+        data-slot="tabs-trigger"
+        data-value={props.value}
+        classList={{ [split.classes?.button ?? ""]: split.classes?.button }}
+      >
+        {split.children}
+      </Kobalte.Trigger>
+      <Show when={split.closeButton}>
+        {(closeButton) => (
+          <div data-slot="tabs-trigger-close-button" data-hidden={split.hideCloseButton}>
+            {closeButton()}
+          </div>
+        )}
+      </Show>
+    </div>
+  )
+}
+
+function TabsContent(props: ParentProps<TabsContentProps>) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Kobalte.Content
+      {...rest}
+      data-slot="tabs-content"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {split.children}
+    </Kobalte.Content>
+  )
+}
+
+const TabsSectionTitle: Component<ParentProps> = (props) => {
+  return <div data-slot="tabs-section-title">{props.children}</div>
+}
+
+export const Tabs = Object.assign(TabsRoot, {
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent,
+  SectionTitle: TabsSectionTitle,
+})

package/src/components/tag.css

@@ -0,0 +1,37 @@
+[data-component="tag"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+
+  border-radius: var(--radius-xs);
+  border: 0.5px solid var(--border-weak-base);
+  background: var(--surface-raised-base);
+  color: var(--text-base);
+
+  &[data-size="normal"] {
+    height: 18px;
+    padding: 0 6px;
+
+    /* text-12-medium */
+    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); /* 166.667% */
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  &[data-size="large"] {
+    height: 22px;
+    padding: 0 8px;
+
+    /* text-14-medium */
+    font-family: var(--font-family-sans);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large); /* 142.857% */
+    letter-spacing: var(--letter-spacing-normal);
+  }
+}

package/src/components/tag.tsx

@@ -0,0 +1,22 @@
+import { type ComponentProps, splitProps } from "solid-js"
+
+export interface TagProps extends ComponentProps<"span"> {
+  size?: "normal" | "large"
+}
+
+export function Tag(props: TagProps) {
+  const [split, rest] = splitProps(props, ["size", "class", "classList", "children"])
+  return (
+    <span
+      {...rest}
+      data-component="tag"
+      data-size={split.size || "normal"}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {split.children}
+    </span>
+  )
+}

package/src/components/text-field.tsx

@@ -2,9 +2,8 @@ import { TextField as Kobalte } from "@kobalte/core/text-field"
 import { createSignal, Show, splitProps } from "solid-js"
 import type { ComponentProps } from "solid-js"
 import { useI18n } from "../context/i18n"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Icon } from "@opencode-ai/ui/icon"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { IconButton } from "./icon-button"
+import { Tooltip } from "./tooltip"
 
 export interface TextFieldProps
   extends ComponentProps<typeof Kobalte.Input>,
@@ -107,17 +106,10 @@ export function TextField(props: TextFieldProps) {
           <Kobalte.TextArea {...others} autoResize data-slot="input-input" class={local.class} />
         </Show>
         <Show when={local.copyable}>
-          <Tooltip
-            appearance="standard"
-            value={label()}
-            placement="top"
-            gutter={4}
-            forceOpen={copied() ? true : undefined}
-            skipDelayDuration={0}
-          >
+          <Tooltip value={label()} placement="top" gutter={4} forceOpen={copied()} skipDelayDuration={0}>
             <IconButton
               type="button"
-              icon={<Icon name={icon()} />}
+              icon={icon()}
               variant="ghost"
               onClick={handleCopy}
               tabIndex={-1}

package/src/{typography/text-shimmer → components}/text-shimmer.css

@@ -5,8 +5,7 @@
   --text-shimmer-index: 0;
   --text-shimmer-angle: 90deg;
   --text-shimmer-spread: 5.2ch;
-  --text-shimmer-gutter: calc(var(--text-shimmer-spread) + 1ch);
-  --text-shimmer-size: calc(200% + var(--text-shimmer-gutter) + var(--text-shimmer-gutter));
+  --text-shimmer-size: 360%;
   --text-shimmer-base-color: var(--text-weak);
   --text-shimmer-peak-color: var(--text-strong);
   --text-shimmer-sweep: linear-gradient(

package/src/{typography/text-shimmer → components}/text-shimmer.tsx

@@ -1,6 +1,5 @@
 import { createEffect, createMemo, createSignal, onCleanup, type ValidComponent } from "solid-js"
 import { Dynamic } from "solid-js/web"
-import "./text-shimmer.css"
 
 export const TextShimmer = <T extends ValidComponent = "span">(props: {
   text: string