@opencode/ui 2.0.26 → 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.26",
+  "version": "2.0.28",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -195,6 +195,7 @@
     },
     "./styles": "./src/styles/index.css",
     "./styles/tokens": "./src/styles/tokens/index.css",
+    "./styles/tokens/*": "./src/styles/tokens/*",
     "./styles/tailwind": "./src/styles/tailwind/index.css",
     "./theme": {
       "types": "./dist/theme/index.d.ts",

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/context/marked-base.tsx

@@ -3,10 +3,10 @@ import { Marked } from "marked"
 export function createMarkdownBase() {
   return new Marked({
     renderer: {
-      link({ href, title, text }) {
+      link({ href, title, tokens }) {
         const titleAttr = title ? ` title="${title}"` : ""
 
-        return `<a href="${href}"${titleAttr} class="external-link" target="_blank" rel="noopener noreferrer">${text}</a>`
+        return `<a href="${href}"${titleAttr} class="external-link" target="_blank" rel="noopener noreferrer">${this.parser.parseInline(tokens)}</a>`
       },
     },
   })

package/src/icons/icon/additional-icons.ts

@@ -52,7 +52,7 @@ export const additionalIcons = {
   "magnifying-glass-menu": `<path d="M2.08325 10.0002H4.58325M2.08325 5.41683H5.41659M2.08325 14.5835H5.41659M16.4583 13.9585L18.7499 16.2502M17.9166 10.0002C17.9166 12.9917 15.4915 15.4168 12.4999 15.4168C9.50838 15.4168 7.08325 12.9917 7.08325 10.0002C7.08325 7.00862 9.50838 4.5835 12.4999 4.5835C15.4915 4.5835 17.9166 7.00862 17.9166 10.0002Z" stroke="currentColor" stroke-linecap="square"/>`,
   "window-cursor": `<path d="M17.5 10.4167V3.75H2.5V17.0833H10.4166M17.9166 13.5897L11.6666 11.6667L13.5897 17.9167L15.032 15.0321L17.9166 13.5897Z" stroke="currentColor" stroke-linecap="square"/><path d="M5.41675 6.125C5.71576 6.12518 5.95777 6.36795 5.95777 6.66699C5.95759 6.96589 5.71565 7.20783 5.41675 7.20801C5.11771 7.20801 4.87494 6.966 4.87476 6.66699C4.87476 6.36784 5.1176 6.125 5.41675 6.125ZM8.33276 6.125C8.63191 6.125 8.87476 6.36784 8.87476 6.66699C8.87458 6.966 8.63181 7.20801 8.33276 7.20801C8.03386 7.20783 7.79192 6.96589 7.79175 6.66699C7.79175 6.36795 8.03376 6.12518 8.33276 6.125ZM11.2498 6.125C11.5489 6.125 11.7917 6.36784 11.7917 6.66699C11.7916 6.966 11.5488 7.20801 11.2498 7.20801C10.9507 7.20801 10.7079 6.966 10.7078 6.66699C10.7078 6.36784 10.9506 6.125 11.2498 6.125Z" fill="currentColor" stroke="currentColor" stroke-width="0.25" stroke-linecap="square"/>`,
   task: `<path d="M9.99992 2.0835V17.9168M7.08325 3.75016H2.08325V16.2502H7.08325M12.9166 16.2502H17.9166V3.75016H12.9166" stroke="currentColor" stroke-linecap="square"/>`,
-  subagent: `<path d="M4.5 5C4.5 4.72386 4.72386 4.5 5 4.5H11C11.2761 4.5 11.5 4.72386 11.5 5V11C11.5 11.2761 11.2761 11.5 11 11.5H5C4.72386 11.5 4.5 11.2761 4.5 11V5Z" fill="currentColor"/><path d="M13.5 2C13.7761 2 14 2.22386 14 2.5V13.5C14 13.7761 13.7761 14 13.5 14H2.5C2.22386 14 2 13.7761 2 13.5V2.5C2 2.22386 2.22386 2 2.5 2H13.5ZM3 13H13V3H3V13Z" fill="currentColor"/>`,
+  subagent: `<path d="M4 4.5C4 4.22386 4.22386 4 4.5 4H11.5C11.7761 4 12 4.22386 12 4.5V11.5C12 11.7761 11.7761 12 11.5 12H4.5C4.22386 12 4 11.7761 4 11.5V4.5Z" fill="currentColor"/><path d="M14.5 1C14.7761 1 15 1.22386 15 1.5V14.5C15 14.7761 14.7761 15 14.5 15H1.5C1.22386 15 1 14.7761 1 14.5V1.5C1 1.22386 1.22386 1 1.5 1H14.5ZM2 14H14V2H2V14Z" fill="currentColor"/>`,
   stop: `<rect x="5" y="5" width="10" height="10" fill="currentColor"/>`,
   status: `<path d="M2 10V18H18V10M2 10V2H18V10M2 10H18M5 6H9M5 14H9" stroke="currentColor"/>`,
   "status-active": `<path d="M18 2H2V10H18V2Z" fill="currentColor" fill-opacity="0.1"/>

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 }))
             }
           }}
         >

package/src/styles/base.css

@@ -23,6 +23,7 @@
   5. Use the user's configured `sans` font-feature-settings by default.
   6. Use the user's configured `sans` font-variation-settings by default.
   7. Disable tap highlights on iOS.
+  8. Avoid one-word last lines in all wrapped text. Chromium keeps the line count, so heights do not change.
 */
 
 html,
@@ -34,6 +35,7 @@ html,
   font-feature-settings: var(--font-family-sans--font-feature-settings, normal); /* 5 */
   font-variation-settings: var(--font-family-sans--font-variation-settings, normal); /* 6 */
   -webkit-tap-highlight-color: transparent; /* 7 */
+  text-wrap-style: pretty; /* 8 */
 }
 
 /*
@@ -111,6 +113,7 @@ strong {
   2. Use the user's configured `mono` font-feature-settings by default.
   3. Use the user's configured `mono` font-variation-settings by default.
   4. Correct the odd `em` font sizing in all browsers.
+  5. Keep code wrapping greedy so wrapped lines break where an editor would.
 */
 
 code,
@@ -121,6 +124,17 @@ pre {
   font-feature-settings: var(--font-family-mono--font-feature-settings, normal); /* 2 */
   font-variation-settings: var(--font-family-mono--font-variation-settings, normal); /* 3 */
   font-size: 1em; /* 4 */
+  text-wrap-style: auto; /* 5 */
+}
+
+/*
+  Keep earlier lines still while the user types.
+*/
+
+input,
+textarea,
+[contenteditable] {
+  text-wrap-style: stable;
 }
 
 /*

package/src/styles/tailwind/index.css

@@ -49,6 +49,9 @@
   --container-5xl: 64rem;
   --container-6xl: 72rem;
   --container-7xl: 80rem;
+  /* Shared by the session timeline, composer dock, and drop target so their edges stay aligned.
+     The composer dock's 12px gutter leaves the design's 720px composer. */
+  --container-session: 744px;
 
   --font-sans: var(--font-family-sans);
   --font-sans--font-feature-settings: var(--font-family-sans--font-feature-settings);