@opencode/ui 2.0.27 → 2.0.28

package/dist/context/dialog.d.ts

@@ -1,5 +1,9 @@
 import { type Owner, type ParentProps, type JSX } from "solid-js";
 type DialogElement = () => JSX.Element;
+type FocusReturn = {
+    element: HTMLElement;
+    range?: Range;
+};
 type Active = {
     id: string;
     node: JSX.Element;
@@ -7,6 +11,9 @@ type Active = {
     owner: Owner;
     onClose?: () => void;
     setClosing: (closing: boolean) => void;
+    /** Where focus was before this dialog opened, or before the dialogs it replaced opened. */
+    focus?: FocusReturn;
+    returnFocus: () => void;
 };
 export declare function useDialogLayer(): {
     setBackdropDismiss: (value: boolean) => void;

package/package.json

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

package/src/context/dialog.tsx

@@ -18,6 +18,8 @@ import { makeEventListener } from "@solid-primitives/event-listener"
 
 type DialogElement = () => JSX.Element
 
+type FocusReturn = { element: HTMLElement; range?: Range }
+
 type Active = {
   id: string
   node: JSX.Element
@@ -25,6 +27,9 @@ type Active = {
   owner: Owner
   onClose?: () => void
   setClosing: (closing: boolean) => void
+  /** Where focus was before this dialog opened, or before the dialogs it replaced opened. */
+  focus?: FocusReturn
+  returnFocus: () => void
 }
 
 const Context = createContext<ReturnType<typeof init>>()
@@ -81,6 +86,10 @@ function init() {
     setExiting((ids) => new Set([...ids, current.id]))
     isolate(() => current.onClose?.())
     current.setClosing(true)
+
+    // Only the top open dialog holds focus. It returns before close() does, as a native dialog's does, so an
+    // action that runs after closing, such as a palette command that opens the terminal, can move it on.
+    if (stack().findLast((item) => item === current || !closing.has(item.id)) === current) current.returnFocus()
   }
 
   /** Programmatic close. Without an id it closes the top dialog, one at a time; with an id it never waits. */
@@ -116,7 +125,13 @@ function init() {
     makeEventListener(window, "keydown", onKeyDown, { capture: true })
   })
 
-  const mount = (element: DialogElement, owner: Owner, onClose: (() => void) | undefined, key?: string) => {
+  const mount = (
+    element: DialogElement,
+    owner: Owner,
+    onClose: (() => void) | undefined,
+    key: string | undefined,
+    focus: FocusReturn | undefined,
+  ) => {
     // 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)
@@ -131,6 +146,7 @@ function init() {
     const zIndex = () => String(50 + layer() * 10)
     let dispose: (() => void) | undefined
     let setClosing: ((closing: boolean) => void) | undefined
+    let layerRef: HTMLDivElement | undefined
 
     // Stacked dialogs render as sibling portals, so only the top layer may own the focus trap.
     const node = runWithOwner(owner, () =>
@@ -157,6 +173,7 @@ function init() {
                 }}
               />
               <div
+                ref={layerRef}
                 data-dialog-layer={layer()}
                 style={{
                   position: "fixed",
@@ -178,19 +195,35 @@ function init() {
 
     if (!dispose || !setClosing) return
 
-    const active: Active = { id, node, dispose, owner, onClose, setClosing }
+    const active: Active = {
+      id,
+      node,
+      dispose,
+      owner,
+      onClose,
+      setClosing,
+      focus,
+      returnFocus: () => {
+        // A close inside a reactive update unmounts the dialog, and its focus trap, only when the update ends.
+        if (layerRef?.contains(document.activeElement)) return queueMicrotask(() => returnFocus(focus, layerRef))
+        returnFocus(focus, layerRef)
+      },
+    }
+
     setStack((items) => [...items, active])
   }
 
   const push = (element: DialogElement, owner: Owner, onClose?: () => void, id?: string) => {
     lock.value = false
-    mount(element, owner, onClose, id)
+    mount(element, owner, onClose, id, captureFocus())
   }
 
   const show = (element: DialogElement, owner: Owner, onClose?: () => void, id?: string) => {
+    // A replacement returns focus to where the dialogs it replaces would have, not to their now-removed content.
+    const focus = stack().length > 0 ? stack()[0].focus : captureFocus()
     disposeAll(true)
     lock.value = false
-    mount(element, owner, onClose, id)
+    mount(element, owner, onClose, id, focus)
   }
 
   return {
@@ -210,6 +243,36 @@ function isolate(fn: () => void) {
   }
 }
 
+/** Remembers the focused element and, in editable content, the caret, which focusing alone does not restore. */
+function captureFocus(): FocusReturn | undefined {
+  const element = document.activeElement
+
+  if (!(element instanceof HTMLElement) || element === document.body) return
+  const selection = document.getSelection()
+
+  if (!element.isContentEditable || !selection?.rangeCount || !element.contains(selection.anchorNode)) {
+    return { element }
+  }
+
+  return { element, range: selection.getRangeAt(0).cloneRange() }
+}
+
+/** Kobalte only returns focus to a dialog trigger, and these dialogs open without one. */
+function returnFocus(focus: FocusReturn | undefined, layer: HTMLElement | undefined) {
+  const active = document.activeElement
+
+  if (!focus?.element.isConnected) return
+
+  // Something outside the closed dialog already has focus, for example because the dialog's onClose moved it.
+  if (active && active !== document.body && !layer?.contains(active)) return
+  focus.element.focus({ preventScroll: true })
+
+  if (!focus.range || !focus.element.contains(focus.range.commonAncestorContainer)) return
+  const selection = document.getSelection()
+  selection?.removeAllRanges()
+  selection?.addRange(focus.range)
+}
+
 export function DialogProvider(props: ParentProps) {
   const ctx = init()
 

package/src/overlays/dialog/dialog.tsx

@@ -120,12 +120,14 @@ export function Dialog(props: DialogProps) {
             [local.class ?? ""]: !!local.class,
           }}
           onOpenAutoFocus={(e) => {
-            const target = e.currentTarget as HTMLElement | null
-            const autofocusEl = target?.querySelector("[autofocus]") as HTMLElement | null
+            const autofocusEl =
+              e.currentTarget instanceof HTMLElement ? e.currentTarget.querySelector<HTMLElement>("[autofocus]") : null
 
             if (autofocusEl) {
               e.preventDefault()
-              autofocusEl.focus({ preventScroll: true })
+              // Kobalte attaches its focus trap after this event, so focusing now would leave the trap with no
+              // element to return to. Deferring, as Kobalte's own autofocus does, lets it pull stray focus back.
+              setTimeout(() => autofocusEl.focus({ preventScroll: true }))
             }
           }}
         >