@opencode/ui 2.0.7 → 2.0.8

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.8",
   "type": "module",
   "license": "MIT",
   "repository": {

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

@@ -140,13 +140,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
   },

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…",