@opencode/ui 2.0.7 → 2.0.9

package/dist/feedback/toast/description.d.ts

@@ -0,0 +1,4 @@
+export declare const toastDescriptionLimit = 2000;
+export declare function boundToastDescription<T extends {
+    description?: string;
+}>(options: T): T;

package/dist/feedback/toast/toast.d.ts

@@ -31,6 +31,8 @@ export declare const toaster: {
     }) => JSX.Element, options?: {
         duration?: number;
         persistent?: boolean;
+        /** Reactive value the toast's height depends on; sonner re-measures when it changes. */
+        resize?: () => unknown;
     }): number;
     dismiss(toastId?: number): string | number | undefined;
 };

package/dist/i18n/en.d.ts

@@ -133,6 +133,8 @@ declare const source: {
     "ui.promptInput.dropFiles.pdf": string;
     "ui.promptInput.dropFiles.imagePdf": string;
     "ui.promptInput.removeAttachment": string;
+    "ui.promptInput.cancelUpload": string;
+    "ui.promptInput.uploading": string;
     "ui.promptInput.label": string;
     "ui.promptInput.placeholder.shell": string;
     "ui.promptInput.placeholder.normal": string;

package/package.json

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

package/src/components/scroll-view.tsx

@@ -1,4 +1,4 @@
-import { createEffect, mergeProps, onCleanup, onMount, Show, splitProps, type ComponentProps } from "solid-js"
+import { createEffect, mergeProps, on, onCleanup, onMount, Show, splitProps, type ComponentProps } from "solid-js"
 import { Portal } from "solid-js/web"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { createStore } from "solid-js/store"
@@ -236,18 +236,22 @@ export function ScrollView(props: ScrollViewProps) {
       local.viewportRef(viewportRef)
     }
 
+    // The observer reports every target once when it starts observing (including a thumb mount that
+    // appears later), after layout. Measuring here as well would force a synchronous layout per
+    // ScrollView while the page is still rendering.
     createResizeObserver(
       () => [viewportRef, viewportRef.firstElementChild, thumbMount()].filter(Boolean) as HTMLElement[],
       updateThumb,
     )
-
-    updateThumb()
   })
 
-  createEffect(() => {
-    thumbMount()
-    updateThumb()
-  })
+  // Inputs that change the thumb without resizing anything: re-measure on change, but leave the
+  // first measurement to the observer.
+  createEffect(
+    on([() => local.verticalScrollAdjustment, vertical, horizontal, thumbMount], () => updateThumb(), {
+      defer: true,
+    }),
+  )
 
   createEffect(() => {
     if (!horizontal() || !viewportRef) return

package/src/feedback/toast/description.ts

@@ -0,0 +1,9 @@
+// A toast shows a few lines; the rest of a long description would only be retained (in the dedupe
+// key, the active-toast registry and the toaster's store) for as long as the toast lives. Server
+// errors have carried a whole data URL here.
+export const toastDescriptionLimit = 2000
+
+export function boundToastDescription<T extends { description?: string }>(options: T): T {
+  if (!options.description || options.description.length <= toastDescriptionLimit) return options
+  return { ...options, description: `${options.description.slice(0, toastDescriptionLimit)}…` }
+}

package/src/feedback/toast/toast.css

@@ -79,6 +79,15 @@
     grid-column: 2;
   }
 
+  /* Custom toasts render no close button, so their content takes the whole width. */
+  &:not(:has(> [data-close-button])) > [data-content] {
+    grid-column: 1 / -1;
+  }
+
+  [data-description]:empty {
+    display: none;
+  }
+
   > [data-close-button] {
     grid-column: 2;
     grid-row: 1;

package/src/feedback/toast/toast.tsx

@@ -1,4 +1,5 @@
 import { Toaster, toast, type ToasterProps } from "solid-sonner"
+import { boundToastDescription } from "./description"
 import { isRTL } from "@kobalte/core/i18n"
 import type { ComponentProps, JSX } from "solid-js"
 import { createContext, onCleanup, onMount, splitProps, useContext } from "solid-js"
@@ -140,13 +141,30 @@ export const Toast = Object.assign(ToastRoot, {
 let toastV2Id = 0
 
 export const toaster = {
-  show(render: (props: { toastId: number }) => JSX.Element, options?: { duration?: number; persistent?: boolean }) {
+  show(
+    render: (props: { toastId: number }) => JSX.Element,
+    options?: {
+      duration?: number
+      persistent?: boolean
+      /** Reactive value the toast's height depends on; sonner re-measures when it changes. */
+      resize?: () => unknown
+    },
+  ) {
     const toastId = --toastV2Id
     toast.custom((id) => render({ toastId: Number(id) }), {
       id: toastId,
       className: "toast-v2",
       duration: options?.persistent ? Number.POSITIVE_INFINITY : options?.duration,
       unstyled: true,
+      // Sonner only re-measures on title/description changes, so a function-valued description is
+      // the hook for a custom toast whose height depends on reactive state. It renders nothing;
+      // toast.css collapses the empty description element.
+      description: options?.resize
+        ? (): JSX.Element => {
+            options.resize?.()
+            return undefined
+          }
+        : undefined,
     })
     return toastId
   },
@@ -188,7 +206,7 @@ const activeToastByKey = new Map<string, ActiveToast>()
 const activeToastById = new Map<number, ActiveToast>()
 
 export function showToast(options: ToastOptions | string) {
-  const opts: ToastOptions = typeof options === "string" ? { description: options } : options
+  const opts = boundToastDescription(typeof options === "string" ? { description: options } : options)
   const key = JSON.stringify({
     title: opts.title,
     description: opts.description,

package/src/i18n/en.ts

@@ -147,6 +147,8 @@ const source = {
   "ui.promptInput.dropFiles.pdf": "Drop PDFs or files to add",
   "ui.promptInput.dropFiles.imagePdf": "Drop images, PDFs, or files to add",
   "ui.promptInput.removeAttachment": "Remove attachment",
+  "ui.promptInput.cancelUpload": "Cancel upload",
+  "ui.promptInput.uploading": "{{percent}}%",
   "ui.promptInput.label": "Prompt",
   "ui.promptInput.placeholder.shell": "Enter shell command…",
   "ui.promptInput.placeholder.normal": "Ask anything, {{slash}} for commands, {{at}} for context…",