@opencode/ui 2.0.20 → 2.0.22

package/dist/context/dialog.d.ts

@@ -14,8 +14,12 @@ export declare function useDialogLayer(): {
 export declare function DialogProvider(props: ParentProps): JSX.Element;
 export declare function useDialog(): {
     readonly active: Active | undefined;
-    show(element: DialogElement, onClose?: () => void): Promise<void>;
-    push(element: DialogElement, onClose?: () => void): Promise<void>;
-    close(): void;
+    /**
+     * id lets the caller close this dialog later rather than whichever is on top. Opening is deferred; once
+     * signal aborts, the open neither mounts nor replaces anything and onClose runs as for a replaced dialog.
+     */
+    show(element: DialogElement, onClose?: () => void, id?: string, signal?: AbortSignal): Promise<void>;
+    push(element: DialogElement, onClose?: () => void, id?: string, signal?: AbortSignal): Promise<void>;
+    close(id?: string): void;
 };
 export {};

package/dist/data-display/project-avatar/project-avatar.d.ts

@@ -3,6 +3,16 @@ import "./project-avatar.css";
 export declare const PROJECT_AVATAR_VARIANTS: readonly ["orange", "yellow", "cyan", "green", "red", "pink", "blue", "purple", "gray"];
 export type ProjectAvatarVariant = (typeof PROJECT_AVATAR_VARIANTS)[number];
 export type ProjectAvatarStyle = ProjectAvatarVariant | "outline";
+export declare function getProjectAvatarSource(id?: string, icon?: {
+    color?: string;
+    url?: string;
+    override?: string;
+}): string | undefined;
+export declare function getProjectAvatarVariant(key?: string): ProjectAvatarVariant;
+export declare const displayName: (project: {
+    name?: string;
+    worktree: string;
+}) => string;
 export interface ProjectAvatarProps extends ComponentProps<"div"> {
     fallback: string;
     src?: string;

package/dist/icons/icon/icon.d.ts

@@ -10,6 +10,10 @@ declare const icons: {
         viewBox: string;
         body: string;
     };
+    "select-element": {
+        viewBox: string;
+        body: string;
+    };
     flask: {
         viewBox: string;
         body: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode/ui",
-  "version": "2.0.20",
+  "version": "2.0.22",
   "type": "module",
   "license": "MIT",
   "repository": {

package/src/context/dialog.tsx

@@ -37,35 +37,66 @@ export function useDialogLayer() {
 
 function init() {
   const [stack, setStack] = createSignal<Active[]>([])
-  const timer = { current: undefined as ReturnType<typeof setTimeout> | undefined }
+  // A dialog is closing from the moment its close starts until its exit animation ends and it is disposed.
+  const closing = new Map<string, ReturnType<typeof setTimeout> | undefined>()
+  // The same ids, reactive, so the top dialog that stays open owns the focus trap during an exit animation.
+  const [exiting, setExiting] = createSignal<ReadonlySet<string>>(new Set())
   const lock = { value: false }
+  const state = { disposed: false }
+
+  // Detach the stack before disposing, so cleanups that close dialogs find nothing to admit. Every dialog is
+  // drained even when one throws. A replaced dialog that was not already closing still hears onClose.
+  const disposeAll = (notify: boolean) => {
+    const items = stack()
+    const exited = new Set(closing.keys())
+    setStack([])
+    closing.forEach((timer) => clearTimeout(timer))
+    closing.clear()
+    setExiting(new Set<string>())
+    items.forEach((item) => {
+      if (notify && !exited.has(item.id)) isolate(() => item.onClose?.())
+      isolate(item.dispose)
+    })
+  }
 
   onCleanup(() => {
-    if (timer.current === undefined) return
-    clearTimeout(timer.current)
-    timer.current = undefined
+    state.disposed = true
+    disposeAll(false)
   })
 
-  const close = (id?: string) => {
-    const items = stack()
-    const current = id ? items.find((item) => item.id === id) : items.at(-1)
-    if (!current || lock.value) return
-    lock.value = true
-    current.onClose?.()
+  const finish = (current: Active) => {
+    // Scheduled first, so the dialog still goes away when a callback throws.
+    closing.set(
+      current.id,
+      setTimeout(() => {
+        closing.delete(current.id)
+        if (closing.size === 0) lock.value = false
+        setExiting((ids) => new Set([...ids].filter((id) => id !== current.id)))
+        setStack((items) => items.filter((item) => item.id !== current.id))
+        current.dispose()
+      }, 100),
+    )
+    setExiting((ids) => new Set([...ids, current.id]))
+    isolate(() => current.onClose?.())
     current.setClosing(true)
+  }
 
-    const closed = current.id
-    if (timer.current !== undefined) {
-      clearTimeout(timer.current)
-      timer.current = undefined
-    }
+  /** Programmatic close. Without an id it closes the top dialog, one at a time; with an id it never waits. */
+  const close = (id?: string) => {
+    const current = id ? stack().find((item) => item.id === id) : stack().at(-1)
+    if (!current || closing.has(current.id) || (!id && lock.value)) return
+    closing.set(current.id, undefined)
+    lock.value = true
+    finish(current)
+  }
 
-    timer.current = setTimeout(() => {
-      timer.current = undefined
-      current.dispose()
-      setStack((items) => items.filter((item) => item.id !== closed))
-      lock.value = false
-    }, 100)
+  /** Escape, a backdrop click, or Kobalte dismissing: only the top dialog, and one per exit animation. */
+  const dismiss = (id?: string) => {
+    const current = stack().at(-1)
+    if (!current || (id && current.id !== id) || closing.has(current.id) || lock.value) return
+    closing.set(current.id, undefined)
+    lock.value = true
+    finish(current)
   }
 
   createEffect(() => {
@@ -73,7 +104,7 @@ function init() {
 
     const onKeyDown = (event: KeyboardEvent) => {
       if (event.key !== "Escape") return
-      close()
+      dismiss()
       event.preventDefault()
       event.stopPropagation()
     }
@@ -81,9 +112,17 @@ function init() {
     makeEventListener(window, "keydown", onKeyDown, { capture: true })
   })
 
-  const mount = (element: DialogElement, owner: Owner, onClose: (() => void) | undefined, layer: number) => {
-    const id = Math.random().toString(36).slice(2)
-    const zIndex = 50 + layer * 10
+  const mount = (element: DialogElement, owner: Owner, onClose: (() => void) | undefined, key?: string) => {
+    // A deferred open (e.g. from a focus callback) must not mount after the provider is gone.
+    if (state.disposed) return
+    const id = key ?? Math.random().toString(36).slice(2)
+    // The layer follows the dialog's current place in the stack, so a new top dialog always renders above.
+    const layer = () =>
+      Math.max(
+        0,
+        stack().findIndex((item) => item.id === id),
+      )
+    const zIndex = () => String(50 + layer() * 10)
     let dispose: (() => void) | undefined
     let setClosing: ((closing: boolean) => void) | undefined
 
@@ -96,27 +135,26 @@ function init() {
         setClosing = setClosingSignal
         return (
           <Kobalte
-            modal={stack().at(-1)?.id === id}
+            modal={stack().findLast((item) => !exiting().has(item.id))?.id === id}
             open={!closing()}
             onOpenChange={(open: boolean) => {
-              if (open || stack().at(-1)?.id !== id) return
-              close(id)
+              if (!open) dismiss(id)
             }}
           >
             <Kobalte.Portal>
               <Kobalte.Overlay
                 data-component="dialog-overlay"
-                style={{ "z-index": String(zIndex) }}
+                style={{ "z-index": zIndex() }}
                 onClick={() => {
-                  if (backdropDismiss()) close(id)
+                  if (backdropDismiss()) dismiss(id)
                 }}
               />
               <div
-                data-dialog-layer={layer}
+                data-dialog-layer={layer()}
                 style={{
                   position: "fixed",
                   inset: "0",
-                  "z-index": String(zIndex),
+                  "z-index": zIndex(),
                   display: "flex",
                   "align-items": "center",
                   "justify-content": "center",
@@ -137,24 +175,15 @@ function init() {
     setStack((items) => [...items, active])
   }
 
-  const push = (element: DialogElement, owner: Owner, onClose?: () => void) => {
-    if (timer.current !== undefined) {
-      clearTimeout(timer.current)
-      timer.current = undefined
-    }
+  const push = (element: DialogElement, owner: Owner, onClose?: () => void, id?: string) => {
     lock.value = false
-    mount(element, owner, onClose, stack().length)
+    mount(element, owner, onClose, id)
   }
 
-  const show = (element: DialogElement, owner: Owner, onClose?: () => void) => {
-    for (const item of stack()) item.dispose()
-    setStack([])
-    if (timer.current !== undefined) {
-      clearTimeout(timer.current)
-      timer.current = undefined
-    }
+  const show = (element: DialogElement, owner: Owner, onClose?: () => void, id?: string) => {
+    disposeAll(true)
     lock.value = false
-    mount(element, owner, onClose, 0)
+    mount(element, owner, onClose, id)
   }
 
   return {
@@ -164,6 +193,14 @@ function init() {
     push,
   }
 }
+/** Runs a dialog callback so its throw is reported without stopping the caller's cleanup. */
+function isolate(fn: () => void) {
+  try {
+    fn()
+  } catch (error) {
+    console.error("[dialog]", error)
+  }
+}
 
 export function DialogProvider(props: ParentProps) {
   const ctx = init()
@@ -192,16 +229,26 @@ export function useDialog() {
     get active() {
       return ctx.stack().at(-1)
     },
-    show(element: DialogElement, onClose?: () => void) {
+    /**
+     * id lets the caller close this dialog later rather than whichever is on top. Opening is deferred; once
+     * signal aborts, the open neither mounts nor replaces anything and onClose runs as for a replaced dialog.
+     */
+    show(element: DialogElement, onClose?: () => void, id?: string, signal?: AbortSignal) {
       const base = ctx.stack().at(-1)?.owner ?? owner
-      return startTransition(() => ctx.show(element, base, onClose))
+      return startTransition(() => {
+        if (signal?.aborted) return isolate(() => onClose?.())
+        ctx.show(element, base, onClose, id)
+      })
     },
-    push(element: DialogElement, onClose?: () => void) {
+    push(element: DialogElement, onClose?: () => void, id?: string, signal?: AbortSignal) {
       const base = ctx.stack().at(-1)?.owner ?? owner
-      return startTransition(() => ctx.push(element, base, onClose))
+      return startTransition(() => {
+        if (signal?.aborted) return isolate(() => onClose?.())
+        ctx.push(element, base, onClose, id)
+      })
     },
-    close() {
-      ctx.close()
+    close(id?: string) {
+      ctx.close(id)
     },
   }
 }

package/src/data-display/project-avatar/project-avatar.tsx

@@ -29,6 +29,39 @@ export type ProjectAvatarVariant = (typeof PROJECT_AVATAR_VARIANTS)[number]
 // "outline" is a neutral, muted style (e.g. recently closed projects) and is not part of the color rotation.
 export type ProjectAvatarStyle = ProjectAvatarVariant | "outline"
 
+const OPENCODE_PROJECT_ID = "4b0ea68d7af9a6031a7ffda7ad66e0cb83315750"
+
+export function getProjectAvatarSource(id?: string, icon?: { color?: string; url?: string; override?: string }) {
+  if (id === OPENCODE_PROJECT_ID) return "https://opencode.ai/favicon.svg"
+  if (icon?.override) return icon.override
+  if (icon?.color) return undefined
+  return icon?.url
+}
+
+export function getProjectAvatarVariant(key?: string): ProjectAvatarVariant {
+  if (key === "mint") return "cyan"
+  if (key === "lime") return "green"
+  if (
+    key === "orange" ||
+    key === "yellow" ||
+    key === "cyan" ||
+    key === "green" ||
+    key === "red" ||
+    key === "pink" ||
+    key === "blue" ||
+    key === "purple" ||
+    key === "gray"
+  )
+    return key
+  return "gray"
+}
+
+export const displayName = (project: { name?: string; worktree: string }) => {
+  const trimmed = project.worktree.replace(/[/\\]+$/, "")
+  const filename = trimmed.slice(Math.max(trimmed.lastIndexOf("/"), trimmed.lastIndexOf("\\")) + 1)
+  return project.name || filename || project.worktree
+}
+
 export interface ProjectAvatarProps extends ComponentProps<"div"> {
   fallback: string
   src?: string

package/src/icons/icon/icon.tsx

@@ -12,6 +12,10 @@ const icons = {
     viewBox: "0 0 16 16",
     body: `<circle cx="8" cy="8" r="6" stroke="currentColor"/><ellipse cx="8" cy="8" rx="2.5" ry="6" stroke="currentColor"/><path d="M2 8h12" stroke="currentColor"/>`,
   },
+  "select-element": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M12.5 6.5V2.5C12.5 1.94772 12.0523 1.5 11.5 1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V11.5C1.5 12.0523 1.94772 12.5 2.5 12.5H6.5" stroke="currentColor" stroke-linecap="round"/><path d="M7.5 7.5L14.5 10.1L11.1 11.1L10.1 14.5L7.5 7.5Z" stroke="currentColor" stroke-linejoin="round"/>`,
+  },
   flask: {
     viewBox: "0 0 16 16",
     body: `<path d="M5.5 2H10.5M6 2V6L2.5 12C2 13 2.5 14 3.5 14H12.5C13.5 14 14 13 13.5 12L10 6V2M4.25 9H11.75" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/>`,

package/src/navigation/tabs/tabs.css

@@ -211,11 +211,6 @@
           transform 120ms ease;
       }
 
-      &[data-value="review"] {
-        padding-left: 8px;
-        padding-right: 8px;
-      }
-
       [data-slot="tabs-trigger"] {
         height: 100%;
         padding: 0 !important;
@@ -552,18 +547,6 @@
       }
     }
 
-    &[data-value="open-file"],
-    &[data-value^="file://"],
-    &[data-value="browser"],
-    &[data-value^="browser:"] {
-      gap: 8px;
-      padding-inline-end: 4px;
-
-      [data-slot="tabs-trigger-close-button"] {
-        margin-inline-start: 0;
-      }
-    }
-
     &:has([data-selected]) {
       background-color: var(--v2-background-bg-layer-02);
       box-shadow: none;
@@ -581,7 +564,7 @@
     font-variation-settings: "slnt" 0;
     font-variant-numeric: tabular-nums;
 
-    &[data-selected]:not([data-value="open-file"]) {
+    &[data-selected] {
       color: var(--v2-text-text-base);
     }
 

package/src/styles/tailwind/index.css

@@ -10,6 +10,7 @@
 @source not "../../../../desktop/src/renderer/**/*.test.{ts,tsx}";
 @source "../../../../enterprise/src";
 @source "../../../../session-ui/src";
+@source "../../../../gui-extensions/src";
 @source not "../../../../session-ui/src/**/*.test.{ts,tsx}";
 @source "../../../../storybook";
 @source "../../../src";

package/src/styles/theme.css

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