@opencode-ai/ui 0.0.0-dev-202608241310 → 0.0.0-dev-18092

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

@@ -18,15 +18,13 @@
     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;
@@ -48,15 +46,12 @@
     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); /* 142.857% */
+    line-height: var(--line-height-large);
     letter-spacing: var(--letter-spacing-normal);
-
     white-space: nowrap;
     flex-shrink: 0;
     max-width: 280px;
@@ -86,6 +81,13 @@
       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;
     }
@@ -94,14 +96,17 @@
       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;
       }
@@ -110,6 +115,7 @@
     &:hover:not(:disabled):not([data-selected]) {
       color: var(--text-strong);
     }
+
     &:has([data-slot="tabs-trigger-close-button"]) {
       padding-inline-end: 12px;
 
@@ -122,10 +128,9 @@
   [data-slot="tabs-content"] {
     overflow-y: auto;
     flex: 1;
-
-    /* Hide scrollbar */
     scrollbar-width: none;
     -ms-overflow-style: none;
+
     &::-webkit-scrollbar {
       display: none;
     }
@@ -218,6 +223,7 @@
 
       &:has([data-slot="tabs-trigger-close-button"]) {
         padding-inline-end: 5px;
+
         [data-slot="tabs-trigger"] {
           padding-inline-end: 0 !important;
         }
@@ -239,10 +245,6 @@
         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 {
@@ -329,9 +331,6 @@
         border: none;
         background-color: transparent;
       }
-      &:empty::after {
-        display: none;
-      }
     }
 
     [data-slot="tabs-trigger-wrapper"] {
@@ -342,13 +341,11 @@
       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); /* 171.429% */
+      line-height: var(--line-height-x-large);
       letter-spacing: var(--letter-spacing-normal);
 
       [data-slot="tabs-trigger"] {
@@ -359,18 +356,6 @@
         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;
@@ -383,14 +368,12 @@
 
       &: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"] {
@@ -413,8 +396,6 @@
       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;
@@ -434,17 +415,13 @@
         color: var(--text-strong);
       }
 
-      &:active:not(:disabled) {
+      &:active:not(:disabled),
+      &:has([data-selected]) {
         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);
-        }
       }
     }
   }
@@ -481,170 +458,6 @@
       }
     }
   }
-
-  &[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"] {
@@ -685,10 +498,10 @@
   position: relative;
 }
 
-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"] {
+: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"] {
   background-color: var(--v2-background-bg-base);
 
   [data-slot="tabs-list"] {
@@ -708,7 +521,7 @@ body[data-new-layout] #terminal-panel [data-component="tabs"][data-variant="norm
   }
 }
 
-body[data-new-layout] #review-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"] {
+:root body #review-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"] {
   [data-slot="tabs-list"] {
     height: 52px;
     padding-inline-end: 12px;
@@ -765,16 +578,15 @@ body[data-new-layout] #review-panel [data-component="tabs"][data-variant="normal
     [data-slot="icon-svg"] {
       margin-inline-start: -2px;
     }
-  }
 
-  /* 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;
+    .italic {
+      font-style: italic !important;
+      font-variation-settings: "slnt" -10 !important;
+    }
   }
 }
 
-body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-tabs-bar {
+:root body #review-panel [data-component="tabs"] .session-review-v2-tabs-bar {
   width: 100%;
   min-width: 0;
   gap: 8px;
@@ -783,8 +595,9 @@ body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-t
   background-color: var(--v2-background-bg-base);
 }
 
-body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-tabs-bar [data-slot="tabs-list"],
-body[data-new-layout]
+:root body #review-panel [data-component="tabs"] .session-review-v2-tabs-bar [data-slot="tabs-list"],
+:root
+  body
   #review-panel
   [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"]
   .session-review-v2-tabs-bar
@@ -795,12 +608,7 @@ body[data-new-layout]
   border-bottom: none;
 }
 
-body[data-new-layout]
-  #review-panel
-  [data-component="tabs"]
-  .session-review-v2-tabs-bar
-  [data-slot="tabs-list"]
-  > .sticky {
+:root body #review-panel [data-component="tabs"] .session-review-v2-tabs-bar [data-slot="tabs-list"] > .sticky {
   padding-inline-end: 0;
 
   [data-component="icon-button-v2"] {
@@ -820,7 +628,8 @@ body[data-new-layout]
   }
 }
 
-body[data-new-layout]
+:root
+  body
   #review-panel
   [data-component="tabs"]
   .session-review-v2-tabs-bar
@@ -831,7 +640,8 @@ body[data-new-layout]
   inset-inline-end: 0;
 }
 
-body[data-new-layout]
+:root
+  body
   #review-panel
   [data-component="tabs"]
   .session-review-v2-tabs-bar
@@ -879,11 +689,11 @@ body[data-new-layout]
   }
 }
 
-body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-open-in-app-slot {
+:root body #review-panel [data-component="tabs"] .session-review-v2-open-in-app-slot {
   flex-shrink: 0;
   margin-inline-start: auto;
 }
 
-body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-open-in-app {
+:root body #review-panel [data-component="tabs"] .session-review-v2-open-in-app {
   flex-shrink: 0;
 }

package/src/navigation/tabs/tabs.tsx

@@ -0,0 +1,194 @@
+import { Content, List, Root, Trigger } from "@kobalte/core/tabs"
+import { createContext, Show, splitProps, useContext, type JSX } from "solid-js"
+import type { Component, ComponentProps, ParentProps } from "solid-js"
+import { useI18n } from "../../context/i18n"
+import "./tabs-current.css"
+
+export type TabsVariant = "panel" | "underline" | "surface" | "line" | "pill" | "settings"
+
+export interface TabsProps extends ComponentProps<typeof Root> {
+  variant?: TabsVariant
+  orientation?: "horizontal" | "vertical"
+}
+export interface TabsListProps extends ComponentProps<typeof List> {}
+export interface TabsTriggerProps extends ComponentProps<typeof Trigger> {
+  classes?: { button?: string }
+  closeButton?: JSX.Element
+  hideCloseButton?: boolean
+  onMiddleClick?: () => void
+  subtext?: JSX.Element | string
+}
+export interface TabsCloseButtonProps extends ComponentProps<"button"> {}
+export interface TabsContentProps extends ComponentProps<typeof Content> {}
+
+const TabsContext = createContext<{ current: () => boolean }>({ current: () => false })
+
+function TabsRoot(props: TabsProps) {
+  const [local, rest] = splitProps(props, ["class", "classList", "variant", "orientation", "children"])
+  const variant = () => local.variant ?? "panel"
+  const current = () => variant() === "line" || variant() === "pill" || variant() === "settings"
+  const dataVariant = () => {
+    if (variant() === "panel" || variant() === "line") return "normal"
+    if (variant() === "underline") return "alt"
+    if (variant() === "surface") return "pill"
+    return variant()
+  }
+  return (
+    <TabsContext.Provider value={{ current }}>
+      <Root
+        {...rest}
+        orientation={local.orientation}
+        data-component={current() ? "tabs-v2" : "tabs"}
+        data-variant={dataVariant()}
+        data-orientation={local.orientation || "horizontal"}
+        classList={{
+          ...local.classList,
+          [local.class ?? ""]: !!local.class,
+        }}
+      >
+        {local.children}
+      </Root>
+    </TabsContext.Provider>
+  )
+}
+
+function TabsList(props: TabsListProps) {
+  const ctx = useContext(TabsContext)
+  const [local, rest] = splitProps(props, ["class", "classList"])
+  return (
+    <List
+      {...rest}
+      data-slot={ctx.current() ? "tabs-v2-list" : "tabs-list"}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    />
+  )
+}
+
+function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
+  const ctx = useContext(TabsContext)
+  const [local, rest] = splitProps(props, [
+    "class",
+    "classList",
+    "classes",
+    "children",
+    "closeButton",
+    "hideCloseButton",
+    "onMiddleClick",
+    "subtext",
+    "dir",
+  ])
+  const wrapperSlot = () => (ctx.current() ? "tabs-v2-trigger-wrapper" : "tabs-trigger-wrapper")
+  const triggerSlot = () => (ctx.current() ? "tabs-v2-trigger" : "tabs-trigger")
+  const closeSlot = () => (ctx.current() ? "tabs-v2-trigger-close-button" : "tabs-trigger-close-button")
+  return (
+    <div
+      data-slot={wrapperSlot()}
+      data-value={props.value}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+      onMouseDown={(event) => {
+        if (event.button !== 1 || !local.onMiddleClick) return
+        event.preventDefault()
+      }}
+      onAuxClick={(event) => {
+        if (event.button !== 1 || !local.onMiddleClick) return
+        event.preventDefault()
+        local.onMiddleClick()
+      }}
+    >
+      <Trigger
+        {...rest}
+        dir={local.dir ?? "auto"}
+        data-slot={triggerSlot()}
+        data-value={props.value}
+        classList={{ [local.classes?.button ?? ""]: !!local.classes?.button }}
+      >
+        <Show when={ctx.current()} fallback={local.children}>
+          <span class="inline-flex items-center gap-2" data-slot="tabs-v2-trigger-content">
+            {local.children}
+            <Show when={local.subtext}>
+              {(subtext) => (
+                <span data-slot="tabs-v2-subtext" class="ms-2 text-xs text-text-weak">
+                  {subtext()}
+                </span>
+              )}
+            </Show>
+          </span>
+        </Show>
+      </Trigger>
+      <Show when={local.closeButton}>
+        {(closeButton) => (
+          <div data-slot={closeSlot()} data-hidden={local.hideCloseButton ? "" : undefined}>
+            {closeButton()}
+          </div>
+        )}
+      </Show>
+    </div>
+  )
+}
+
+function TabsCloseButton(props: TabsCloseButtonProps) {
+  const i18n = useI18n()
+  const [local, rest] = splitProps(props, ["class", "classList", "onClick", "onPointerDown", "aria-label"])
+  return (
+    <button
+      type="button"
+      {...rest}
+      aria-label={local["aria-label"] ?? i18n.t("ui.tabs.close")}
+      data-slot="tabs-close-button"
+      classList={{
+        [local.class ?? ""]: !!local.class,
+        ...local.classList,
+      }}
+      onPointerDown={(event) => {
+        event.stopPropagation()
+        if (typeof local.onPointerDown === "function") local.onPointerDown(event)
+      }}
+      onClick={(event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        if (typeof local.onClick === "function") local.onClick(event)
+      }}
+    >
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <path d="M10.8889 3.11108L3.11108 10.8889" stroke="currentColor" stroke-linejoin="round" />
+        <path d="M3.11108 3.11108L10.8889 10.8889" stroke="currentColor" stroke-linejoin="round" />
+      </svg>
+    </button>
+  )
+}
+
+function TabsContent(props: ParentProps<TabsContentProps>) {
+  const ctx = useContext(TabsContext)
+  const [local, rest] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Content
+      {...rest}
+      data-slot={ctx.current() ? "tabs-v2-content" : "tabs-content"}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      {local.children}
+    </Content>
+  )
+}
+
+const TabsSectionTitle: Component<ParentProps> = (props) => {
+  const ctx = useContext(TabsContext)
+  return <div data-slot={ctx.current() ? "tabs-v2-section-title" : "tabs-section-title"}>{props.children}</div>
+}
+
+export const Tabs = Object.assign(TabsRoot, {
+  List: TabsList,
+  Trigger: TabsTrigger,
+  CloseButton: TabsCloseButton,
+  Content: TabsContent,
+  SectionTitle: TabsSectionTitle,
+})

package/src/{v2/components/dialog-v2.css → overlays/dialog/dialog.css}

@@ -93,6 +93,9 @@
         [data-slot="dialog-description"] {
           flex: none;
           flex-grow: 0;
+          min-width: 0;
+          max-width: 100%;
+          overflow-wrap: anywhere;
           user-select: none;
           font-weight: 440;
           font-size: 13px;