@opencode/ui 2.0.30 → 2.0.31

package/dist/context/dialog.d.ts

@@ -20,6 +20,7 @@ export declare function useDialogLayer(): {
 } | undefined;
 export declare function DialogProvider(props: ParentProps): JSX.Element;
 export declare function useDialog(): {
+    /** The top dialog that is open. One that has started closing no longer counts, though it waits to be disposed. */
     readonly active: Active | undefined;
     /**
      * id lets the caller close this dialog later rather than whichever is on top. Opening is deferred; once

package/package.json

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

package/src/components/animated-number.css

@@ -7,17 +7,23 @@
 
   [data-slot="animated-number-value"] {
     display: inline-flex;
-    flex-direction: row-reverse;
+    /* Digits keep numeric order in RTL documents. */
+    direction: ltr;
     align-items: baseline;
     justify-content: flex-end;
     line-height: inherit;
     width: var(--animated-number-width, 1ch);
     overflow: hidden;
+  }
+
+  [data-slot="animated-number-value"][data-resizing="true"] {
     transition: width var(--tool-motion-spring-ms, 560ms) var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
   }
 
   [data-slot="animated-number-digit"] {
     display: inline-grid;
+    /* Digits outside the width are clipped at the start edge, not squeezed. */
+    flex-shrink: 0;
     width: 1ch;
     height: 1em;
     line-height: 1em;
@@ -56,6 +62,11 @@
     line-height: 1em;
   }
 
+  [data-slot="animated-number-static"]::before,
+  [data-slot="animated-number-cell"]::before {
+    content: attr(data-digit);
+  }
+
   [data-slot="animated-number-digit"][data-animating="true"] [data-slot="animated-number-static"] {
     visibility: hidden;
   }
@@ -63,8 +74,10 @@
   [data-slot="animated-number-strip"] {
     display: inline-flex;
     flex-direction: column;
-    margin-top: calc(var(--animated-number-offset, 10) * -1em);
-    transition-property: margin-top;
+    /* Not transform: a composited roll lands on whole pixels, then the digit shifts as it settles. */
+    position: relative;
+    top: calc(var(--animated-number-offset, 10) * -1em);
+    transition-property: top;
     transition-duration: var(--animated-number-duration, 560ms);
     transition-timing-function: var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
   }
@@ -76,7 +89,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  [data-component="animated-number"] [data-slot="animated-number-value"] {
+  [data-component="animated-number"] [data-slot="animated-number-value"][data-resizing] {
     transition-duration: 0ms;
   }
 

package/src/components/animated-number.tsx

@@ -1,4 +1,4 @@
-import { For, Index, createEffect, createMemo, on } from "solid-js"
+import { For, createEffect, createMemo, on } from "solid-js"
 import { createStore } from "solid-js/store"
 
 const TRACK = Array.from({ length: 30 }, (_, index) => index % 10)
@@ -26,6 +26,7 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
   const step = () => state.step
   const animating = () => state.animating
   let last = props.value
+  let strip: HTMLSpanElement | undefined
 
   createEffect(
     on(
@@ -34,15 +35,19 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
         const delta = spin(last, next, props.direction)
         last = next
 
-        if (!delta) {
-          setState("animating", false)
-          setState("step", next + 10)
+        // An unchanged digit keeps any roll it is in the middle of.
+        if (!delta) return
+
+        const target = step() + delta
+
+        // A detached digit never finishes a roll, and rapid changes can run off the track, so both settle at once.
+        if (!strip?.isConnected || target < 0 || target >= TRACK.length) {
+          setState({ animating: false, step: next + 10 })
 
           return
         }
 
-        setState("animating", true)
-        setState("step", (value) => value + delta)
+        setState({ animating: true, step: target })
       },
       { defer: true },
     ),
@@ -50,8 +55,9 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
 
   return (
     <span data-slot="animated-number-digit" data-animating={animating() ? "true" : "false"}>
-      <span data-slot="animated-number-static">{props.value}</span>
+      <span data-slot="animated-number-static" data-digit={props.value} />
       <span
+        ref={strip}
         data-slot="animated-number-strip"
         onTransitionEnd={() => {
           setState("animating", false)
@@ -62,7 +68,7 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
           "--animated-number-duration": `var(--tool-motion-odometer-ms, ${DURATION}ms)`,
         }}
       >
-        <For each={TRACK}>{(value) => <span data-slot="animated-number-cell">{value}</span>}</For>
+        <For each={TRACK}>{(value) => <span data-slot="animated-number-cell" data-digit={value} />}</For>
       </span>
     </span>
   )
@@ -75,13 +81,18 @@ export function AnimatedNumber(props: { value: number; class?: string }) {
     return Math.max(0, Math.round(props.value))
   })
 
-  const [state, setState] = createStore({
+  // A spare leading zero waits outside the clipped width to roll in. A digit that leaves stays until the width has
+  // shrunk past it, so it rolls to zero instead of vanishing.
+  const [state, setState] = createStore<{ value: number; direction: 1 | -1; places: number; resizing: boolean }>({
     value: target(),
-    direction: 1 as 1 | -1,
+    direction: 1,
+    places: String(target()).length + 1,
+    resizing: false,
   })
 
   const value = () => state.value
   const direction = () => state.direction
+  let box: HTMLSpanElement | undefined
 
   createEffect(
     on(
@@ -91,8 +102,22 @@ export function AnimatedNumber(props: { value: number; class?: string }) {
 
         if (next === current) return
 
-        setState("direction", next > current ? 1 : -1)
-        setState("value", next)
+        const digits = String(next).length
+
+        // A detached number cannot ease its width and would never hear it end, so it settles at once.
+        if (!box?.isConnected) {
+          setState({ direction: next > current ? 1 : -1, value: next, places: digits + 1, resizing: false })
+
+          return
+        }
+
+        // Only a change to the digit count eases the width, so a late font swap or zoom never animates it.
+        setState({
+          direction: next > current ? 1 : -1,
+          value: next,
+          places: Math.max(state.places, digits + 1),
+          resizing: state.resizing || digits !== String(current).length,
+        })
       },
       { defer: true },
     ),
@@ -100,22 +125,26 @@ export function AnimatedNumber(props: { value: number; class?: string }) {
 
   const label = createMemo(() => value().toString())
 
-  const digits = createMemo(() =>
-    Array.from(label(), (char) => {
-      const code = char.charCodeAt(0) - 48
-
-      if (code < 0 || code > 9) return 0
-
-      return code
-    }).reverse(),
-  )
-
-  const width = createMemo(() => `${digits().length}ch`)
+  // Place values, most significant first. Keying by place keeps each digit rolling as digits appear and leave.
+  const places = createMemo(() => Array.from({ length: state.places }, (_, index) => state.places - 1 - index))
 
   return (
-    <span data-component="animated-number" class={props.class} aria-label={label()}>
-      <span data-slot="animated-number-value" style={{ "--animated-number-width": width() }}>
-        <Index each={digits()}>{(digit) => <Digit value={digit()} direction={direction()} />}</Index>
+    <span data-component="animated-number" class={props.class}>
+      {/* The value is the only text: screen readers and copy read it once, in order. CSS draws the digits. */}
+      <span class="sr-only">{label()}</span>
+      <span
+        ref={box}
+        data-slot="animated-number-value"
+        data-resizing={state.resizing ? "true" : "false"}
+        aria-hidden="true"
+        style={{ "--animated-number-width": `${label().length}ch` }}
+        onTransitionEnd={(event) => {
+          if (event.target === event.currentTarget) setState({ places: label().length + 1, resizing: false })
+        }}
+      >
+        <For each={places()}>
+          {(place) => <Digit value={Math.floor(value() / 10 ** place) % 10} direction={direction()} />}
+        </For>
       </span>
     </span>
   )

package/src/context/dialog.tsx

@@ -47,6 +47,9 @@ function init() {
   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())
+  // The top dialog that stays open. A dialog without an exit animation leaves the DOM as soon as it starts closing, so
+  // it stops being the active dialog then, not when it is disposed.
+  const top = () => stack().findLast((item) => !exiting().has(item.id))
   const lock = { value: false }
   const state = { disposed: false }
 
@@ -161,7 +164,7 @@ function init() {
 
         return (
           <Kobalte
-            modal={stack().findLast((item) => !exiting().has(item.id))?.id === id}
+            modal={top()?.id === id}
             open={!closing()}
             onOpenChange={(open: boolean) => {
               if (!open) dismiss(id)
@@ -231,6 +234,7 @@ function init() {
 
   return {
     stack,
+    top,
     close,
     show,
     push,
@@ -302,8 +306,9 @@ export function useDialog() {
   }
 
   return {
+    /** The top dialog that is open. One that has started closing no longer counts, though it waits to be disposed. */
     get active() {
-      return ctx.stack().at(-1)
+      return ctx.top()
     },
     /**
      * id lets the caller close this dialog later rather than whichever is on top. Opening is deferred; once

package/src/navigation/tabs/tabs.css

@@ -271,7 +271,6 @@
 
   #terminal-panel &[data-variant="normal"][data-orientation="horizontal"] {
     [data-slot="tabs-list"] {
-      height: 52px;
       padding-inline-end: 12px;
       gap: 8px;
     }

package/src/styles/file-tree.css

@@ -134,59 +134,93 @@
   inset: 0;
 }
 
-[data-component="file-tree-v2"] [data-slot="file-tree-v2-change"] {
-  box-sizing: border-box;
+/* Every row ends in the change letter or a blank end that sticks inside the pane while long rows
+   scroll. It fades the label out over 16px like tab titles and redraws the row's rounded end, so a
+   row that runs past the pane edge looks like a row that fits. */
+[data-component="file-tree-v2"] :is([data-slot="file-tree-v2-change"], [data-slot="file-tree-v2-end"]) {
+  --file-tree-v2-end-inset: 8px;
+
   flex: none;
+  align-self: stretch;
   position: sticky;
-  inset-inline-end: 8px;
+  inset-inline-end: var(--file-tree-v2-end-inset);
   z-index: 1;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  font-size: 11px;
-  font-weight: 530;
-  line-height: 1;
-  letter-spacing: -0.04px;
-  text-align: center;
-  text-transform: uppercase;
-  font-variant-numeric: tabular-nums lining-nums;
-  font-feature-settings:
-    "tnum" on,
-    "lnum" on;
-  background:
-    linear-gradient(var(--file-tree-v2-row-overlay), var(--file-tree-v2-row-overlay)), var(--v2-background-bg-base);
 }
 
-[data-component="file-tree-v2"] [data-slot="file-tree-v2-change"]::before {
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-end"] {
+  --file-tree-v2-end-inset: 10px;
+}
+
+[data-component="file-tree-v2"] :is([data-slot="file-tree-v2-change"], [data-slot="file-tree-v2-end"])::before,
+[data-component="file-tree-v2"] :is([data-slot="file-tree-v2-change"], [data-slot="file-tree-v2-end"])::after {
   content: "";
   position: absolute;
   inset-block: 0;
+  pointer-events: none;
+}
+
+[data-component="file-tree-v2"] :is([data-slot="file-tree-v2-change"], [data-slot="file-tree-v2-end"])::before {
   inset-inline-end: 100%;
   width: 16px;
-  pointer-events: none;
   background:
     linear-gradient(to right, transparent, var(--file-tree-v2-row-overlay)),
     linear-gradient(to right, transparent, var(--v2-background-bg-base));
 }
 
-[data-component="file-tree-v2"]:dir(rtl) [data-slot="file-tree-v2-change"]::before {
+[data-component="file-tree-v2"]:dir(rtl)
+  :is([data-slot="file-tree-v2-change"], [data-slot="file-tree-v2-end"])::before {
   background:
     linear-gradient(to left, transparent, var(--file-tree-v2-row-overlay)),
     linear-gradient(to left, transparent, var(--v2-background-bg-base));
 }
 
-[data-component="file-tree-v2"] [data-slot="file-tree-v2-change"]::after {
-  content: "";
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: 100%;
-  width: 16px;
-  pointer-events: none;
+/* The row through its rounded end. The shadow paints the pane past it, outside its corners too. */
+[data-component="file-tree-v2"] :is([data-slot="file-tree-v2-change"], [data-slot="file-tree-v2-end"])::after {
+  inset-inline: 0 calc(-1 * var(--file-tree-v2-end-inset));
+  z-index: -1;
+  border-start-end-radius: 6px;
+  border-end-end-radius: 6px;
   background:
     linear-gradient(var(--file-tree-v2-row-overlay), var(--file-tree-v2-row-overlay)), var(--v2-background-bg-base);
+  box-shadow: 8px 0 0 6px var(--v2-background-bg-base);
+}
+
+[data-component="file-tree-v2"]:dir(rtl) :is([data-slot="file-tree-v2-change"], [data-slot="file-tree-v2-end"])::after {
+  box-shadow: -8px 0 0 6px var(--v2-background-bg-base);
+}
+
+@keyframes file-tree-v2-end-fade {
+  to {
+    opacity: 0;
+  }
+}
+
+/* Scrolled to the end, every label is whole, so the fade clears. */
+@supports (animation-timeline: scroll()) {
+  [data-component="file-tree-v2"] :is([data-slot="file-tree-v2-change"], [data-slot="file-tree-v2-end"])::before {
+    animation: file-tree-v2-end-fade linear both;
+    animation-timeline: scroll(nearest inline);
+    animation-range: calc(100% - 16px) 100%;
+  }
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-change"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  font-size: 11px;
+  font-weight: 530;
+  line-height: 1;
+  letter-spacing: -0.04px;
+  text-align: center;
+  text-transform: uppercase;
+  font-variant-numeric: tabular-nums lining-nums;
+  font-feature-settings:
+    "tnum" on,
+    "lnum" on;
 }
 
 [data-component="file-tree-v2"] [data-slot="file-tree-v2-change"][data-change="modified"] {