@marimo-team/islands 0.23.15-dev35 → 0.23.15-dev37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.15-dev35",
+  "version": "0.23.15-dev37",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/ui/toast.tsx

@@ -34,7 +34,7 @@ const VARIANT_CLASSES = {
 type ToastVariant = keyof typeof VARIANT_CLASSES;
 
 const toastVariants = cva(
-  "data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full",
+  "data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-start justify-between gap-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full",
   {
     variants: {
       variant: VARIANT_CLASSES,
@@ -117,10 +117,18 @@ ToastTitle.displayName = ToastPrimitives.Title.displayName;
 const ToastDescription = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Description>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
+>(({ className, onPointerDown, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
-    className={cn("text-sm opacity-90", className)}
+    className={cn(
+      "max-h-48 overflow-auto text-sm opacity-90 whitespace-pre-wrap wrap-break-word select-text cursor-text",
+      className,
+    )}
+    // Keep swipe-to-dismiss from fighting text selection / scroll.
+    onPointerDown={(event) => {
+      event.stopPropagation();
+      onPointerDown?.(event);
+    }}
     {...props}
   />
 ));

package/src/components/ui/toaster.tsx

@@ -1,5 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+import { useRef } from "react";
+import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { useToast } from "@/components/ui/use-toast";
+import { cn } from "@/utils/cn";
 import {
   Toast,
   ToastClose,
@@ -14,17 +18,69 @@ export const Toaster = () => {
 
   return (
     <ToastProvider>
-      {toasts.map(({ id, title, description, action, ...props }) => (
-        <Toast key={id} {...props}>
-          <div className="grid gap-1">
-            {title && <ToastTitle>{title}</ToastTitle>}
-            {description && <ToastDescription>{description}</ToastDescription>}
-          </div>
-          {action}
-          <ToastClose />
-        </Toast>
+      {toasts.map(({ id, title, description, action, variant, ...props }) => (
+        <ToastItem
+          key={id}
+          toastTitle={title}
+          toastDescription={description}
+          action={action}
+          variant={variant}
+          {...props}
+        />
       ))}
       <ToastViewport />
     </ToastProvider>
   );
 };
+
+type ToastItemProps = Omit<
+  ComponentPropsWithoutRef<typeof Toast>,
+  "title" | "children"
+> & {
+  toastTitle?: ReactNode;
+  toastDescription?: ReactNode;
+  action?: ReactElement;
+};
+
+const ToastItem = ({
+  toastTitle,
+  toastDescription,
+  action,
+  variant,
+  ...props
+}: ToastItemProps) => {
+  const descriptionRef = useRef<HTMLDivElement>(null);
+  // Show copy button for danger toasts without action, typically used for errors.
+  const showCopy = Boolean(toastDescription) && !action && variant === "danger";
+
+  return (
+    <Toast variant={variant} {...props}>
+      <div className="grid min-w-0 flex-1 gap-1">
+        {toastTitle && <ToastTitle>{toastTitle}</ToastTitle>}
+        {toastDescription && (
+          <ToastDescription ref={descriptionRef}>
+            {toastDescription}
+          </ToastDescription>
+        )}
+      </div>
+      {action}
+      {showCopy && (
+        <CopyClipboardIcon
+          tooltip="Copy error"
+          ariaLabel="Copy error"
+          className="h-4 w-4"
+          buttonClassName={cn(
+            "absolute right-8 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity",
+            "hover:text-foreground focus:opacity-100 focus:outline-hidden group-hover:opacity-100",
+            "group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-500 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600",
+          )}
+          value={() =>
+            descriptionRef.current?.innerText ??
+            (typeof toastDescription === "string" ? toastDescription : "")
+          }
+        />
+      )}
+      <ToastClose />
+    </Toast>
+  );
+};