@opencode/ui 2.0.22 → 2.0.24

package/src/navigation/menu/menu.tsx

@@ -47,7 +47,9 @@ const MenuAppearanceContext = createContext<{ appearance: Accessor<MenuAppearanc
 
 function useMenuContext() {
   const ctx = useContext(MenuAppearanceContext)
+
   if (!ctx) throw new Error("Menu components must be used inside Menu or Menu.Context")
+
   return ctx
 }
 
@@ -76,6 +78,7 @@ export interface MenuItemProps extends ComponentProps<typeof DropdownMenu.Item>
 function MenuItem(props: ParentProps<MenuItemProps>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
+
   return (
     <DropdownMenu.Item
       {...r}
@@ -98,6 +101,7 @@ export interface MenuCheckboxItemProps extends ComponentProps<typeof DropdownMen
 function MenuCheckboxItem(props: ParentProps<MenuCheckboxItemProps>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
+
   return (
     <DropdownMenu.CheckboxItem
       {...r}
@@ -128,6 +132,7 @@ export interface MenuRadioItemProps extends ComponentProps<typeof DropdownMenu.R
 function MenuRadioItem(props: ParentProps<MenuRadioItemProps>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
+
   return (
     <DropdownMenu.RadioItem
       {...r}
@@ -178,6 +183,7 @@ function MenuSub(props: MenuSubProps) {
 function MenuSubTrigger(props: ParentProps<MenuSubTriggerProps>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
+
   return (
     <DropdownMenu.SubTrigger
       {...r}
@@ -195,6 +201,7 @@ function MenuSubTrigger(props: ParentProps<MenuSubTriggerProps>) {
 function MenuSubContent(props: ComponentProps<typeof DropdownMenu.SubContent>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
+
   return (
     <DropdownMenu.SubContent
       {...r}
@@ -208,6 +215,7 @@ function MenuSubContent(props: ComponentProps<typeof DropdownMenu.SubContent>) {
 function MenuGroupLabel(props: ComponentProps<typeof DropdownMenu.GroupLabel>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
+
   return (
     <DropdownMenu.GroupLabel
       {...r}
@@ -221,6 +229,7 @@ function MenuGroupLabel(props: ComponentProps<typeof DropdownMenu.GroupLabel>) {
 function MenuSeparator(props: ComponentProps<typeof DropdownMenu.Separator>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
+
   return (
     <DropdownMenu.Separator
       {...r}
@@ -234,6 +243,7 @@ function MenuSeparator(props: ComponentProps<typeof DropdownMenu.Separator>) {
 function MenuContent(props: ComponentProps<typeof DropdownMenu.Content>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
+
   return (
     <DropdownMenu.Content
       {...r}
@@ -251,6 +261,7 @@ export interface MenuProps extends ComponentProps<typeof DropdownMenu> {
 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>
@@ -265,6 +276,7 @@ export interface MenuContextProps extends ComponentProps<typeof ContextMenu> {
 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>
@@ -275,6 +287,7 @@ function MenuContextRoot(props: MenuContextProps) {
 function MenuContextContent(props: ComponentProps<typeof ContextMenu.Content>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
+
   return (
     <ContextMenu.Content
       {...r}

package/src/navigation/segmented-control/segmented-control.tsx

@@ -26,7 +26,9 @@ const SegmentedControlContext = createContext<SegmentedControlContextValue>()
 
 function useSegmentedControlContext() {
   const ctx = useContext(SegmentedControlContext)
+
   if (!ctx) throw new Error("SegmentedControlItem must be used inside SegmentedControl")
+
   return ctx
 }
 
@@ -45,6 +47,7 @@ export type SegmentedControlProps = Omit<ComponentProps<"div">, "onChange"> &
 export function SegmentedControl(props: SegmentedControlProps) {
   const isControlled = createMemo(() => Object.hasOwn(props as object, "value"))
   const merged = mergeProps({ allowDeselect: false, disabled: false }, props)
+
   const [local, rest] = splitProps(merged, [
     "class",
     "classList",
@@ -77,10 +80,13 @@ export function SegmentedControl(props: SegmentedControlProps) {
 
   const focusNext = (from: HTMLButtonElement, direction: 1 | -1) => {
     const root = from.closest(`[data-slot="segmented-control-v2"]`)
+
     if (!root) return
+
     const buttons = Array.from(
       root.querySelectorAll<HTMLButtonElement>(`button[data-slot="segmented-control-v2-item"]`),
     ).filter((b) => !b.disabled)
+
     const i = buttons.indexOf(from)
     const next = buttons[i + direction]
     next?.focus()
@@ -96,6 +102,7 @@ export function SegmentedControl(props: SegmentedControlProps) {
 
   const assignRef = (el: HTMLDivElement | undefined) => {
     const r = local.ref
+
     if (typeof r === "function") (r as (el: HTMLDivElement | undefined) => void)(el)
     else if (r != null && typeof r === "object" && "value" in r) (r as { value: HTMLDivElement | undefined }).value = el
   }
@@ -134,6 +141,7 @@ function invokeButtonHandler<E extends Event>(
 
 export function SegmentedControlItem(props: SegmentedControlItemProps) {
   const merged = mergeProps({ disabled: false }, props)
+
   const [local, rest] = splitProps(merged, [
     "class",
     "classList",
@@ -143,6 +151,7 @@ export function SegmentedControlItem(props: SegmentedControlItemProps) {
     "onClick",
     "onKeyDown",
   ])
+
   const ctx = useSegmentedControlContext()
 
   const pressed = createMemo(() => ctx.selected() === local.value)
@@ -150,13 +159,16 @@ export function SegmentedControlItem(props: SegmentedControlItemProps) {
 
   const onClick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> = (e) => {
     invokeButtonHandler(local.onClick, e)
+
     if (e.defaultPrevented || disabled()) return
+
     if (pressed()) ctx.clearIfAllowed(local.value)
     else ctx.select(local.value)
   }
 
   const onKeyDown: JSX.EventHandlerUnion<HTMLButtonElement, KeyboardEvent> = (e) => {
     invokeButtonHandler(local.onKeyDown, e)
+
     if (e.defaultPrevented || disabled()) return
     const t = e.currentTarget
     const horizontal = t.closest(`[data-slot="segmented-control-v2"]`)?.matches(":dir(rtl)") ? -1 : 1
@@ -173,16 +185,20 @@ export function SegmentedControlItem(props: SegmentedControlItemProps) {
     else if (e.key === "Home") {
       e.preventDefault()
       const root = t.closest(`[data-slot="segmented-control-v2"]`)
+
       const first = root?.querySelector<HTMLButtonElement>(
         `button[data-slot="segmented-control-v2-item"]:not(:disabled)`,
       )
+
       first?.focus()
     } else if (e.key === "End") {
       e.preventDefault()
       const root = t.closest(`[data-slot="segmented-control-v2"]`)
+
       const buttons = root?.querySelectorAll<HTMLButtonElement>(
         `button[data-slot="segmented-control-v2-item"]:not(:disabled)`,
       )
+
       const last = buttons?.[buttons.length - 1]
       last?.focus()
     }

package/src/navigation/tab-state-indicator.tsx

@@ -2,6 +2,7 @@ import { splitProps, type ComponentProps } from "solid-js"
 
 export function TabStateIndicator(props: ComponentProps<"svg">) {
   const [local, rest] = splitProps(props, ["class", "classList", "width", "height"])
+
   return (
     <svg
       {...rest}

package/src/navigation/tabs/tabs.css

@@ -568,11 +568,6 @@
       color: var(--v2-text-text-base);
     }
 
-    .tab-fileicon-color,
-    .tab-fileicon-mono {
-      margin-inline-start: -2px;
-    }
-
     .italic {
       font-style: italic !important;
       font-variation-settings: "slnt" -10 !important;
@@ -600,27 +595,15 @@
   flex: 1 1 0;
   min-width: 0;
   width: auto;
+  height: var(--tabs-bar-height);
+  padding-inline-end: 0;
   border-bottom: none;
 }
 
+/* The end gap lives inside the sticky "+" box. Sticky offsets respect the strip's padding, so padding there
+   would leave a gap after the "+" where scrolled tabs show through. */
 :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"] {
-    position: relative;
-
-    &::after {
-      content: "";
-      position: absolute;
-      inset-inline-start: 100%;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 20px;
-      height: 28px;
-      background-color: var(--v2-background-bg-base);
-      pointer-events: none;
-    }
-  }
+  padding-inline-end: 12px;
 }
 
 :root
@@ -629,61 +612,12 @@
   [data-component="tabs"]
   .session-review-v2-tabs-bar
   [data-slot="tabs-list"]
-  > .sticky:not(.session-review-v2-sidebar-toggle-slot) {
+  > .sticky {
   left: auto;
   right: auto;
   inset-inline-end: 0;
 }
 
-:root
-  body
-  #review-panel
-  [data-component="tabs"]
-  .session-review-v2-tabs-bar
-  [data-slot="tabs-list"]
-  > .session-review-v2-sidebar-toggle-slot.sticky {
-  left: auto;
-  right: auto;
-  inset-inline-start: 0;
-  padding-inline-end: 0;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    bottom: auto;
-    inset-inline-start: auto;
-    inset-inline-end: 100%;
-    transform: translateY(-50%);
-    width: 12px;
-    height: 28px;
-    background-color: var(--v2-background-bg-base);
-    background-image: none;
-    pointer-events: none;
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    top: 50%;
-    inset-inline-start: 100%;
-    inset-inline-end: auto;
-    transform: translateY(-50%);
-    width: 8px;
-    height: 28px;
-    pointer-events: none;
-    background: linear-gradient(90deg, var(--v2-background-bg-base), transparent);
-  }
-
-  &:dir(rtl)::after {
-    background: linear-gradient(270deg, var(--v2-background-bg-base), transparent);
-  }
-
-  [data-component="icon-button-v2"]::after {
-    display: none;
-  }
-}
-
 :root body #review-panel [data-component="tabs"] .session-review-v2-open-in-app-slot {
   flex-shrink: 0;
   margin-inline-start: auto;

package/src/navigation/tabs/tabs.tsx

@@ -10,7 +10,9 @@ 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
@@ -18,7 +20,9 @@ export interface TabsTriggerProps extends ComponentProps<typeof Trigger> {
   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 })
@@ -27,12 +31,17 @@ 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
@@ -55,6 +64,7 @@ function TabsRoot(props: TabsProps) {
 function TabsList(props: TabsListProps) {
   const ctx = useContext(TabsContext)
   const [local, rest] = splitProps(props, ["class", "classList"])
+
   return (
     <List
       {...rest}
@@ -69,6 +79,7 @@ function TabsList(props: TabsListProps) {
 
 function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
   const ctx = useContext(TabsContext)
+
   const [local, rest] = splitProps(props, [
     "class",
     "classList",
@@ -80,9 +91,11 @@ function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
     "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()}
@@ -135,6 +148,7 @@ function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
 function TabsCloseButton(props: TabsCloseButtonProps) {
   const i18n = useI18n()
   const [local, rest] = splitProps(props, ["class", "classList", "onClick", "onPointerDown", "aria-label"])
+
   return (
     <button
       type="button"
@@ -147,11 +161,13 @@ function TabsCloseButton(props: TabsCloseButtonProps) {
       }}
       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)
       }}
     >
@@ -166,6 +182,7 @@ function TabsCloseButton(props: TabsCloseButtonProps) {
 function TabsContent(props: ParentProps<TabsContentProps>) {
   const ctx = useContext(TabsContext)
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Content
       {...rest}
@@ -182,6 +199,7 @@ function TabsContent(props: ParentProps<TabsContentProps>) {
 
 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>
 }
 

package/src/overlays/dialog/dialog.tsx

@@ -31,6 +31,7 @@ export function DialogFooter(props: ParentProps) {
 
 export function DialogBody(props: ParentProps & { class?: ComponentProps<"div">["class"] }) {
   const [local] = splitProps(props, ["class", "children"])
+
   return (
     <div data-slot="dialog-body" class={local.class}>
       {local.children}
@@ -96,6 +97,7 @@ export function Dialog(props: DialogProps) {
     "onCloseAutoFocus",
     "preventBackdropDismiss",
   ])
+
   const layer = useDialogLayer()
   createEffect(() => layer?.setBackdropDismiss(!local.preventBackdropDismiss))
 
@@ -120,6 +122,7 @@ export function Dialog(props: DialogProps) {
           onOpenAutoFocus={(e) => {
             const target = e.currentTarget as HTMLElement | null
             const autofocusEl = target?.querySelector("[autofocus]") as HTMLElement | null
+
             if (autofocusEl) {
               e.preventDefault()
               autofocusEl.focus({ preventScroll: true })

package/src/overlays/tooltip/tooltip.tsx

@@ -17,11 +17,13 @@ export interface TooltipProps extends ComponentProps<typeof Root> {
 
 export function Tooltip(props: TooltipProps) {
   let ref: HTMLDivElement | undefined
+
   const [state, setState] = createStore({
     open: false,
     block: false,
     expand: false,
   })
+
   const [local, others] = splitProps(props, [
     "children",
     "appearance",
@@ -40,13 +42,17 @@ export function Tooltip(props: TooltipProps) {
 
   const inside = () => {
     const active = document.activeElement
+
     if (!ref || !active) return false
+
     return ref.contains(active)
   }
 
   const drop = (expand = state.expand) => {
     if (expand || !state.block) return
+
     if (ref?.matches(":hover")) return
+
     if (inside()) return
     setState("block", false)
   }
@@ -54,11 +60,14 @@ export function Tooltip(props: TooltipProps) {
   const sync = () => {
     const expand = !!ref?.querySelector('[aria-expanded="true"], [data-expanded]')
     setState("expand", expand)
+
     if (expand) {
       setState("block", true)
       close()
+
       return
     }
+
     drop(expand)
   }
 
@@ -101,11 +110,15 @@ export function Tooltip(props: TooltipProps) {
           open={controlled() ? local.forceOpen : state.open}
           onOpenChange={(open) => {
             if (controlled()) return
+
             if (state.block && open) return
+
             if (justClickedTrigger) {
               justClickedTrigger = false
+
               return
             }
+
             setState("open", open)
           }}
         >
@@ -129,6 +142,7 @@ export function Tooltip(props: TooltipProps) {
             <Content
               ref={(el) => {
                 const theme = ref?.closest("[data-theme]")?.getAttribute("data-theme")
+
                 if (theme) el.setAttribute("data-theme", theme)
               }}
               data-component="tooltip-v2"
@@ -141,6 +155,7 @@ export function Tooltip(props: TooltipProps) {
                 if (ref === e.target || (e.target instanceof Node && ref?.contains(e.target))) {
                   justClickedTrigger = true
                 }
+
                 e.preventDefault()
               }}
             >

package/src/storybook/scaffold.tsx

@@ -7,14 +7,17 @@ function fn(value: unknown): value is (...args: never[]) => unknown {
 
 function pick(mod: Record<string, unknown>, name?: string) {
   if (name && fn(mod[name])) return mod[name]
+
   if (fn(mod.default)) return mod.default
 
   const preferred = Object.keys(mod)
     .filter((k) => k[0] && k[0] === k[0].toUpperCase())
     .find((k) => fn(mod[k]))
+
   if (preferred) return mod[preferred]
 
   const first = Object.keys(mod).find((k) => fn(mod[k]))
+
   if (first) return mod[first]
 
   return () => {

package/src/styles/theme.css

@@ -11,7 +11,7 @@
   --font-size-x-large: 20px;
   --font-weight-regular: 400;
   --font-weight-medium: 500;
-  --font-weight-bold: 700;
+  --font-weight-bold: 670;
   --line-height-normal: 130%;
   --line-height-large: 150%;
   --line-height-x-large: 180%;