@opencode-ai/ui 0.0.0-dev-202609040530 → 0.0.0-dev-19079

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;

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

@@ -1,7 +1,7 @@
-import { Dialog as Kobalte } from "@kobalte/core/dialog"
+import { CloseButton, Content, Description, Title } from "@kobalte/core/dialog"
 import { type ComponentProps, type JSXElement, type ParentProps, Show, children, splitProps } from "solid-js"
 import { useI18n } from "../../context/i18n"
-import "./dialog-v2.css"
+import "./dialog.css"
 
 export interface DialogProps extends ParentProps {
   size?: "normal" | "large" | "x-large"
@@ -36,7 +36,7 @@ export function DialogBody(props: ParentProps & { class?: ComponentProps<"div">[
 }
 
 export function DialogTitle(props: ParentProps) {
-  return <Kobalte.Title data-slot="dialog-header-title">{props.children}</Kobalte.Title>
+  return <Title data-slot="dialog-header-title">{props.children}</Title>
 }
 
 export function DialogTitleGroup(props: DialogTitleGroupProps) {
@@ -45,8 +45,8 @@ export function DialogTitleGroup(props: DialogTitleGroupProps) {
 
   return (
     <div data-slot="dialog-title-group">
-      <Show when={title()}>{(t) => <Kobalte.Title data-slot="dialog-title">{t()}</Kobalte.Title>}</Show>
-      <Kobalte.Description data-slot="dialog-description">{description()}</Kobalte.Description>
+      <Show when={title()}>{(t) => <Title data-slot="dialog-title">{t()}</Title>}</Show>
+      <Description data-slot="dialog-description">{description()}</Description>
     </div>
   )
 }
@@ -59,8 +59,8 @@ export function DialogHeader(props: DialogHeaderProps) {
   return (
     <div data-slot="dialog-header" data-hide-close={hideClose() ? "" : undefined}>
       {local.children}
-      {!hideClose() && (
-        <Kobalte.CloseButton data-slot="dialog-close-button" aria-label={local.closeLabel ?? i18n.t("ui.common.close")}>
+      <Show when={!hideClose()}>
+        <CloseButton data-slot="dialog-close-button" aria-label={local.closeLabel ?? i18n.t("ui.common.close")}>
           <svg
             width="16"
             height="16"
@@ -75,8 +75,8 @@ export function DialogHeader(props: DialogHeaderProps) {
               stroke-linejoin="round"
             />
           </svg>
-        </Kobalte.CloseButton>
-      )}
+        </CloseButton>
+      </Show>
     </div>
   )
 }
@@ -92,7 +92,7 @@ export function Dialog(props: DialogProps) {
       data-size={local.size || "normal"}
     >
       <div data-slot="dialog-container" class={local.containerClass}>
-        <Kobalte.Content
+        <Content
           data-slot="dialog-content"
           classList={{
             ...local.classList,
@@ -108,10 +108,8 @@ export function Dialog(props: DialogProps) {
           }}
         >
           {local.children}
-        </Kobalte.Content>
+        </Content>
       </div>
     </div>
   )
 }
-
-export const DialogV2 = Dialog

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

@@ -39,6 +39,32 @@
   }
 }
 
+[data-component="tooltip-v2"][data-appearance="standard"] {
+  display: block;
+  max-width: 320px;
+  padding: 2px 8px;
+  border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07));
+  border-radius: var(--radius-sm);
+  background: var(--surface-float-base);
+  color: var(--text-invert-strong);
+  box-shadow: var(--shadow-md);
+  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);
+  letter-spacing: var(--letter-spacing-normal);
+  font-variant-numeric: normal;
+  font-variation-settings: normal;
+  user-select: text;
+  animation: none;
+
+  &[data-closed]:not([data-force-open="true"]) {
+    opacity: 0;
+    animation: none;
+  }
+}
+
 @keyframes tooltipV2In {
   from {
     opacity: 0;

package/src/{v2/components/tooltip-v2.tsx → overlays/tooltip/tooltip.tsx}

@@ -1,19 +1,21 @@
-import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip"
-import { createEffect, Match, onCleanup, splitProps, Switch, type JSX } from "solid-js"
+import { Content, Portal, Root, Trigger } from "@kobalte/core/tooltip"
+import { createEffect, Match, onCleanup, splitProps, Switch, untrack, type JSX } from "solid-js"
 import type { ComponentProps } from "solid-js"
 import { createStore } from "solid-js/store"
-import "./tooltip-v2.css"
+import "./tooltip.css"
 
-export interface TooltipV2Props extends ComponentProps<typeof KobalteTooltip> {
+export interface TooltipProps extends ComponentProps<typeof Root> {
   value: JSX.Element
+  appearance?: "standard" | "compact"
   class?: string
   contentClass?: string
   contentStyle?: JSX.CSSProperties
   inactive?: boolean
   forceOpen?: boolean
+  triggerTabIndex?: number
 }
 
-export function TooltipV2(props: TooltipV2Props) {
+export function Tooltip(props: TooltipProps) {
   let ref: HTMLDivElement | undefined
   const [state, setState] = createStore({
     open: false,
@@ -22,16 +24,19 @@ export function TooltipV2(props: TooltipV2Props) {
   })
   const [local, others] = splitProps(props, [
     "children",
+    "appearance",
     "class",
     "contentClass",
     "contentStyle",
     "inactive",
     "forceOpen",
+    "triggerTabIndex",
     "ignoreSafeArea",
     "value",
   ])
 
   const close = () => setState("open", false)
+  const controlled = () => local.forceOpen !== undefined
 
   const inside = () => {
     const active = document.activeElement
@@ -40,7 +45,7 @@ export function TooltipV2(props: TooltipV2Props) {
   }
 
   const drop = (expand = state.expand) => {
-    if (expand) return
+    if (expand || !state.block) return
     if (ref?.matches(":hover")) return
     if (inside()) return
     setState("block", false)
@@ -69,7 +74,7 @@ export function TooltipV2(props: TooltipV2Props) {
 
   createEffect(() => {
     if (!ref) return
-    sync()
+    untrack(sync)
     const obs = new MutationObserver(sync)
     obs.observe(ref, {
       subtree: true,
@@ -86,16 +91,16 @@ export function TooltipV2(props: TooltipV2Props) {
     <Switch>
       <Match when={local.inactive}>{local.children}</Match>
       <Match when={true}>
-        <KobalteTooltip
+        <Root
           gutter={4}
           openDelay={400}
           skipDelayDuration={300}
           {...others}
           closeDelay={0}
           ignoreSafeArea={local.ignoreSafeArea ?? true}
-          open={local.forceOpen || state.open}
+          open={controlled() ? local.forceOpen : state.open}
           onOpenChange={(open) => {
-            if (local.forceOpen) return
+            if (controlled()) return
             if (state.block && open) return
             if (justClickedTrigger) {
               justClickedTrigger = false
@@ -104,9 +109,10 @@ export function TooltipV2(props: TooltipV2Props) {
             setState("open", open)
           }}
         >
-          <KobalteTooltip.Trigger
+          <Trigger
             ref={ref}
             as="div"
+            tabIndex={local.triggerTabIndex}
             data-component="tooltip-v2-trigger"
             class={local.class}
             onPointerDownCapture={arm}
@@ -118,14 +124,15 @@ export function TooltipV2(props: TooltipV2Props) {
             onFocusOut={() => requestAnimationFrame(() => drop())}
           >
             {local.children}
-          </KobalteTooltip.Trigger>
-          <KobalteTooltip.Portal>
-            <KobalteTooltip.Content
+          </Trigger>
+          <Portal>
+            <Content
               ref={(el) => {
                 const theme = ref?.closest("[data-theme]")?.getAttribute("data-theme")
                 if (theme) el.setAttribute("data-theme", theme)
               }}
               data-component="tooltip-v2"
+              data-appearance={local.appearance ?? "compact"}
               data-placement={props.placement}
               data-force-open={local.forceOpen}
               class={local.contentClass}
@@ -138,9 +145,9 @@ export function TooltipV2(props: TooltipV2Props) {
               }}
             >
               {local.value}
-            </KobalteTooltip.Content>
-          </KobalteTooltip.Portal>
-        </KobalteTooltip>
+            </Content>
+          </Portal>
+        </Root>
       </Match>
     </Switch>
   )

package/src/styles/base.css

@@ -401,4 +401,9 @@ input:where([type="button"], [type="reset"], [type="submit"]),
   [contenteditable="true"] {
     font-size: 16px !important;
   }
+
+  input::placeholder,
+  textarea::placeholder {
+    font-size: 13px;
+  }
 }

package/src/styles/index.css

@@ -6,47 +6,31 @@
 @import "./base.css" layer(base);
 @import "katex/dist/katex.min.css" layer(base);
 
-@import "../components/accordion.css" layer(components);
+@import "../data-display/accordion/accordion.css" layer(components);
 @import "../components/animated-number.css" layer(components);
 @import "../components/app-icon.css" layer(components);
-@import "../components/avatar.css" layer(components);
-@import "../components/button.css" layer(components);
 @import "../components/card.css" layer(components);
-@import "../components/checkbox.css" layer(components);
+@import "../forms/checkbox/checkbox.css" layer(components);
 @import "../components/collapsible.css" layer(components);
-@import "../components/diff-changes.css" layer(components);
 @import "../components/context-menu.css" layer(components);
-@import "../components/dropdown-menu.css" layer(components);
-@import "../components/dialog.css" layer(components);
 @import "../components/file-icon.css" layer(components);
 @import "../components/hover-card.css" layer(components);
 @import "../components/provider-icon.css" layer(components);
 @import "../components/dock-surface.css" layer(components);
-@import "../components/icon.css" layer(components);
-@import "../components/icon-button.css" layer(components);
 @import "../components/image-preview.css" layer(components);
-@import "../components/keybind.css" layer(components);
+@import "../forms/inline-input/inline-input.css" layer(components);
 @import "../components/text-field.css" layer(components);
-@import "../components/inline-input.css" layer(components);
 @import "../components/list.css" layer(components);
 @import "../components/logo.css" layer(components);
 @import "../components/popover.css" layer(components);
 @import "../components/progress.css" layer(components);
-@import "../components/progress-circle.css" layer(components);
-@import "../components/radio-group.css" layer(components);
 @import "../components/resize-handle.css" layer(components);
-@import "../components/select.css" layer(components);
 @import "../components/spinner.css" layer(components);
-@import "../components/switch.css" layer(components);
 @import "../components/scroll-view.css" layer(components);
 @import "../components/sticky-accordion-header.css" layer(components);
-@import "../components/tabs.css" layer(components);
-@import "../components/tag.css" layer(components);
+@import "../navigation/tabs/tabs.css" layer(components);
 @import "../components/text-reveal.css" layer(components);
 @import "../components/text-strikethrough.css" layer(components);
-@import "../components/text-shimmer.css" layer(components);
-@import "../components/toast.css" layer(components);
-@import "../components/tooltip.css" layer(components);
 @import "../components/typewriter.css" layer(components);
 
 @import "./utilities.css" layer(utilities);

package/src/styles/tailwind/colors.css

@@ -252,6 +252,7 @@
   --color-v2-text-text-code-accent: var(--v2-text-text-code-accent);
   --color-v2-icon-icon-base: var(--v2-icon-icon-base);
   --color-v2-icon-icon-muted: var(--v2-icon-icon-muted);
+  --color-v2-icon-icon-faint: var(--v2-icon-icon-faint);
   --color-v2-icon-icon-inverse: var(--v2-icon-icon-inverse);
   --color-v2-icon-icon-contrast: var(--v2-icon-icon-contrast);
   --color-v2-icon-icon-accent: var(--v2-icon-icon-accent);

package/src/styles/tailwind/index.css

@@ -1,7 +1,21 @@
 @layer theme, base, components, utilities;
 
 @import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities) source("../../../../");
+@import "tailwindcss/utilities.css" layer(utilities) source(none);
+@source "../../../../app/src";
+@source "../../../../app/index.html";
+@source not "../../../../app/src/i18n";
+@source not "../../../../app/src/**/*.test.{ts,tsx}";
+@source "../../../../desktop/src/renderer";
+@source not "../../../../desktop/src/renderer/**/*.test.{ts,tsx}";
+@source "../../../../enterprise/src";
+@source "../../../../session-ui/src";
+@source not "../../../../session-ui/src/**/*.test.{ts,tsx}";
+@source "../../../../storybook";
+@source "../../../src";
+@source not "../../../src/assets";
+@source not "../../../src/i18n";
+@source not "../../../src/**/*.test.{ts,tsx}";
 @import "./utilities.css";
 
 @import "../index.css";
@@ -51,6 +65,9 @@
   --leading-lg: var(--line-height-large);
   --leading-xl: var(--line-height-x-large);
   --leading-2xl: var(--line-height-2x-large);
+  --leading-text-tight: var(--line-height-tight);
+  --leading-text-compact: var(--line-height-compact);
+  --leading-text-base: var(--line-height-base);
 
   --tracking-normal: var(--letter-spacing-normal);
   --tracking-tight: var(--letter-spacing-tight);

package/src/styles/theme.css

@@ -1,8 +1,8 @@
 :root {
-  --font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-family-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-family-sans--font-feature-settings: normal;
   --font-family-mono:
-    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --font-family-mono--font-feature-settings: normal;
 
   --font-size-small: 13px;

package/src/{v2/styles → styles/tokens}/colors.css

@@ -128,18 +128,18 @@
     --v2-cyan-1200: #00353fff;
 
     /* ── Blue ── */
-    --v2-blue-100: #ecf1feff;
-    --v2-blue-200: #d7e2fcff;
+    --v2-blue-100: #f5f8ffff;
+    --v2-blue-200: #ecf1feff;
     --v2-blue-300: #c3d4fdff;
     --v2-blue-400: #a2bcffff;
     --v2-blue-500: #7698fdff;
     --v2-blue-600: #3b5cf6ff;
-    --v2-blue-700: #3250dfff;
-    --v2-blue-800: #2c47c8ff;
-    --v2-blue-900: #263fa9ff;
-    --v2-blue-1000: #22388fff;
-    --v2-blue-1100: #1c2e70ff;
-    --v2-blue-1200: #1b2852ff;
+    --v2-blue-700: #0b34f4ff;
+    --v2-blue-800: #3250dfff;
+    --v2-blue-900: #2c47c8ff;
+    --v2-blue-1000: #263fa9ff;
+    --v2-blue-1100: #22388fff;
+    --v2-blue-1200: #021945ff;
 
     /* ── Purple ── */
     --v2-purple-100: #ebecfeff;