tembro 6.0.3 → 6.1.1

package/packages/cli/vendor/src/components/modern/media-player.tsx

@@ -0,0 +1,182 @@
+"use client"
+
+import * as React from "react"
+import { MaximizeIcon, PauseIcon, PlayIcon, RotateCcwIcon, Volume1Icon, Volume2Icon, VolumeXIcon } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type MediaTrack = {
+  src: string
+  kind?: React.TrackHTMLAttributes<HTMLTrackElement>["kind"]
+  srcLang?: string
+  label?: string
+  default?: boolean
+}
+
+export type MediaPlayerProps = Omit<React.ComponentProps<"video">, "controls" | "children" | "onTimeUpdate" | "onVolumeChange"> & {
+  src: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  tracks?: MediaTrack[]
+  actions?: React.ReactNode
+  aspectRatio?: "video" | "square" | "wide" | string
+  showMeta?: boolean
+  onTimeChange?: (time: number, duration: number) => void
+  onVolumeValueChange?: (volume: number, muted: boolean) => void
+}
+
+function formatTime(seconds: number) {
+  if (!Number.isFinite(seconds) || seconds < 0) return "0:00"
+  const minutes = Math.floor(seconds / 60)
+  const rest = Math.floor(seconds % 60).toString().padStart(2, "0")
+  return `${minutes}:${rest}`
+}
+
+function getAspectRatioClassName(value: NonNullable<MediaPlayerProps["aspectRatio"]>) {
+  if (value === "video") return "aspect-video"
+  if (value === "square") return "aspect-square"
+  if (value === "wide") return "aspect-[21/9]"
+  return ""
+}
+
+function MediaPlayer({
+  src,
+  title,
+  description,
+  tracks = [],
+  actions,
+  aspectRatio = "video",
+  showMeta = true,
+  poster,
+  autoPlay,
+  muted: mutedProp,
+  loop,
+  playsInline = true,
+  preload = "metadata",
+  onTimeChange,
+  onVolumeValueChange,
+  className,
+  ...props
+}: MediaPlayerProps) {
+  const ref = React.useRef<HTMLVideoElement>(null)
+  const [playing, setPlaying] = React.useState(Boolean(autoPlay))
+  const [duration, setDuration] = React.useState(0)
+  const [time, setTime] = React.useState(0)
+  const [volume, setVolume] = React.useState(1)
+  const [muted, setMuted] = React.useState(Boolean(mutedProp))
+  const [ready, setReady] = React.useState(false)
+
+  const syncFromElement = React.useCallback(() => {
+    const element = ref.current
+    if (!element) return
+    setPlaying(!element.paused)
+    setDuration(element.duration || 0)
+    setTime(element.currentTime || 0)
+    setVolume(element.volume)
+    setMuted(element.muted)
+    onTimeChange?.(element.currentTime || 0, element.duration || 0)
+  }, [onTimeChange])
+
+  const togglePlaying = async () => {
+    const element = ref.current
+    if (!element) return
+    if (element.paused) await element.play()
+    else element.pause()
+    syncFromElement()
+  }
+
+  const seek = (value: number) => {
+    const element = ref.current
+    if (!element) return
+    element.currentTime = value
+    setTime(value)
+    onTimeChange?.(value, duration)
+  }
+
+  const updateVolume = (nextVolume: number) => {
+    const element = ref.current
+    const safeVolume = Math.max(0, Math.min(1, nextVolume))
+    if (element) {
+      element.volume = safeVolume
+      element.muted = safeVolume === 0 ? true : muted
+    }
+    setVolume(safeVolume)
+    const nextMuted = safeVolume === 0 ? true : muted
+    setMuted(nextMuted)
+    onVolumeValueChange?.(safeVolume, nextMuted)
+  }
+
+  const toggleMuted = () => {
+    const element = ref.current
+    const nextMuted = !muted
+    if (element) element.muted = nextMuted
+    setMuted(nextMuted)
+    onVolumeValueChange?.(volume, nextMuted)
+  }
+
+  const VolumeIcon = muted || volume === 0 ? VolumeXIcon : volume < 0.6 ? Volume1Icon : Volume2Icon
+
+  return (
+    <section data-slot="media-player" className={cn("overflow-hidden rounded-lg border bg-card shadow-sm", className)}>
+      <div className={cn("relative bg-black", getAspectRatioClassName(aspectRatio))} style={!["video", "square", "wide"].includes(String(aspectRatio)) ? { aspectRatio: String(aspectRatio) } : undefined}>
+        <video
+          ref={ref}
+          src={src}
+          poster={poster}
+          autoPlay={autoPlay}
+          muted={muted}
+          loop={loop}
+          playsInline={playsInline}
+          preload={preload}
+          className="size-full object-cover"
+          onLoadedMetadata={() => { setReady(true); syncFromElement() }}
+          onPlay={() => setPlaying(true)}
+          onPause={() => setPlaying(false)}
+          onTimeUpdate={syncFromElement}
+          onVolumeChange={syncFromElement}
+          {...props}
+        >
+          {tracks.map((track) => <track key={`${track.src}-${track.srcLang ?? ""}`} {...track} />)}
+        </video>
+        <button type="button" aria-label={playing ? "Pause media" : "Play media"} className="absolute inset-0 grid place-items-center bg-black/0 text-white opacity-0 transition hover:bg-black/20 hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" onClick={() => void togglePlaying()}>
+          <span className="grid size-14 place-items-center rounded-full bg-black/55 backdrop-blur">{playing ? <PauseIcon className="size-6" /> : <PlayIcon className="size-6 translate-x-0.5" />}</span>
+        </button>
+      </div>
+
+      <div className="grid gap-3 p-3">
+        {showMeta && (title || description || actions) ? (
+          <div className="flex flex-wrap items-start justify-between gap-3">
+            <div className="min-w-0">
+              {title ? <h3 className="truncate text-sm font-semibold">{title}</h3> : null}
+              {description ? <p className="mt-1 text-xs text-muted-foreground">{description}</p> : null}
+            </div>
+            <div className="flex items-center gap-2">
+              {!ready ? <Badge tone="muted" variant="soft">loading</Badge> : null}
+              {actions}
+            </div>
+          </div>
+        ) : null}
+
+        <div className="grid gap-2">
+          <input aria-label="Media progress" type="range" min={0} max={duration || 0} step={0.1} value={Math.min(time, duration || time)} onChange={(event) => seek(Number(event.target.value))} className="h-2 w-full cursor-pointer accent-primary" />
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <div className="flex items-center gap-1">
+              <Button type="button" size="icon-sm" variant="outline" iconOnly aria-label={playing ? "Pause" : "Play"} onClick={() => void togglePlaying()}>{playing ? <PauseIcon /> : <PlayIcon />}</Button>
+              <Button type="button" size="icon-sm" variant="ghost" iconOnly aria-label="Restart" onClick={() => seek(0)}><RotateCcwIcon /></Button>
+              <span className="min-w-20 text-xs tabular-nums text-muted-foreground">{formatTime(time)} / {formatTime(duration)}</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button type="button" size="icon-sm" variant="ghost" iconOnly aria-label={muted ? "Unmute" : "Mute"} onClick={toggleMuted}><VolumeIcon /></Button>
+              <input aria-label="Volume" type="range" min={0} max={1} step={0.01} value={muted ? 0 : volume} onChange={(event) => updateVolume(Number(event.target.value))} className="h-2 w-24 cursor-pointer accent-primary" />
+              <Button type="button" size="icon-sm" variant="ghost" iconOnly aria-label="Fullscreen" onClick={() => ref.current?.requestFullscreen?.()}><MaximizeIcon /></Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export { MediaPlayer }

package/packages/cli/vendor/src/components/modern/resizable-panel.tsx

@@ -123,7 +123,7 @@ function ResizablePanelGroup({ direction = "horizontal", className, children, ..
         ref={groupRef}
         data-slot="resizable-panel-group"
         data-direction={direction}
-        className={cn("flex gap-2", direction === "horizontal" ? "flex-row items-stretch" : "flex-col", className)}
+        className={cn("flex", direction === "horizontal" ? "flex-row items-stretch" : "flex-col", className)}
         {...props}
       >
         {processedChildren}
@@ -140,7 +140,7 @@ function ResizablePanel({ className, style, defaultSize, minSize: _minSize, ...p
   return (
     <div
       data-slot="resizable-panel"
-      className={cn("min-h-24 overflow-auto rounded-lg border bg-card p-3", className)}
+      className={cn("min-h-24 min-w-0 overflow-auto rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card p-3 shadow-[var(--aui-card-shadow,0_10px_24px_rgba(15,23,42,0.07))]", className)}
       style={{ flexBasis: `${basis}%`, flexGrow: 0, flexShrink: 0, ...style }}
       {...props}
     />
@@ -157,9 +157,10 @@ function ResizableHandle({ className, ...props }: ResizableHandleProps) {
       type="button"
       data-slot="resizable-handle"
       aria-label="Resize panels"
+      aria-orientation={context?.direction ?? "horizontal"}
       className={cn(
-        "relative flex shrink-0 items-center justify-center rounded-full border border-border/70 bg-background/85 text-muted-foreground shadow-sm transition-colors hover:border-ring/45 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        context?.direction === "horizontal" ? "w-3 cursor-col-resize" : "h-3 cursor-row-resize",
+        "group relative flex shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+        context?.direction === "horizontal" ? "w-4 cursor-col-resize px-1" : "h-4 cursor-row-resize py-1",
         className
       )}
       onPointerDown={(event) => {
@@ -206,7 +207,16 @@ function ResizableHandle({ className, ...props }: ResizableHandleProps) {
       }}
       {...props}
     >
-      <GripVerticalIcon className={cn("size-3", context?.direction === "vertical" && "rotate-90")} />
+      <span
+        aria-hidden="true"
+        className={cn(
+          "absolute rounded-full bg-border transition-colors group-hover:bg-ring/55",
+          context?.direction === "horizontal" ? "inset-y-2 left-1/2 w-px -translate-x-1/2" : "inset-x-2 top-1/2 h-px -translate-y-1/2"
+        )}
+      />
+      <span className="relative grid size-5 place-items-center rounded-full border border-border/75 bg-background shadow-sm transition-colors group-hover:border-ring/45">
+        <GripVerticalIcon className={cn("size-3", context?.direction === "vertical" && "rotate-90")} />
+      </span>
     </button>
   )
 }

package/packages/cli/vendor/src/components/modern/spreadsheet.tsx

@@ -0,0 +1,155 @@
+"use client"
+
+import * as React from "react"
+import { PlusIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type SpreadsheetColumn = {
+  key: string
+  label: React.ReactNode
+  width?: number | string
+  align?: "left" | "center" | "right"
+  readOnly?: boolean
+  formatter?: (value: string, row: SpreadsheetRow) => React.ReactNode
+}
+
+export type SpreadsheetRow = {
+  key: string
+  cells: Record<string, string>
+  readOnly?: boolean
+}
+
+export type SpreadsheetSelection = {
+  rowKey: string
+  columnKey: string
+}
+
+export type SpreadsheetProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+  columns: SpreadsheetColumn[]
+  rows?: SpreadsheetRow[]
+  defaultRows?: SpreadsheetRow[]
+  onRowsChange?: (rows: SpreadsheetRow[], selection?: SpreadsheetSelection) => void
+  onCellChange?: (value: string, selection: SpreadsheetSelection, rows: SpreadsheetRow[]) => void
+  selectedCell?: SpreadsheetSelection
+  defaultSelectedCell?: SpreadsheetSelection
+  onSelectedCellChange?: (selection: SpreadsheetSelection) => void
+  readOnly?: boolean
+  showRowNumbers?: boolean
+  showAddRow?: boolean
+  addRowLabel?: React.ReactNode
+  empty?: React.ReactNode
+}
+
+function alignClassName(align: SpreadsheetColumn["align"]) {
+  if (align === "center") return "text-center"
+  if (align === "right") return "text-right"
+  return "text-left"
+}
+
+function createEmptyRow(columns: SpreadsheetColumn[], index: number): SpreadsheetRow {
+  return {
+    key: `row-${Date.now()}-${index}`,
+    cells: Object.fromEntries(columns.map((column) => [column.key, ""])),
+  }
+}
+
+function Spreadsheet({
+  columns,
+  rows: rowsProp,
+  defaultRows = [],
+  onRowsChange,
+  onCellChange,
+  selectedCell,
+  defaultSelectedCell,
+  onSelectedCellChange,
+  readOnly = false,
+  showRowNumbers = true,
+  showAddRow = true,
+  addRowLabel = "Add row",
+  empty = "No rows yet.",
+  className,
+  ...props
+}: SpreadsheetProps) {
+  const [internalRows, setInternalRows] = React.useState(defaultRows)
+  const [internalSelectedCell, setInternalSelectedCell] = React.useState<SpreadsheetSelection | undefined>(defaultSelectedCell)
+  const rows = rowsProp ?? internalRows
+  const activeCell = selectedCell ?? internalSelectedCell
+
+  const commitRows = (nextRows: SpreadsheetRow[], selection?: SpreadsheetSelection) => {
+    if (rowsProp === undefined) setInternalRows(nextRows)
+    onRowsChange?.(nextRows, selection)
+  }
+
+  const selectCell = (selection: SpreadsheetSelection) => {
+    if (selectedCell === undefined) setInternalSelectedCell(selection)
+    onSelectedCellChange?.(selection)
+  }
+
+  const updateCell = (selection: SpreadsheetSelection, value: string) => {
+    const nextRows = rows.map((row) => row.key === selection.rowKey ? { ...row, cells: { ...row.cells, [selection.columnKey]: value } } : row)
+    commitRows(nextRows, selection)
+    onCellChange?.(value, selection, nextRows)
+  }
+
+  const addRow = () => {
+    const nextRows = [...rows, createEmptyRow(columns, rows.length + 1)]
+    commitRows(nextRows)
+  }
+
+  return (
+    <div data-slot="spreadsheet" className={cn("grid min-w-0 gap-3 rounded-lg border bg-card p-3 shadow-sm", className)} {...props}>
+      <div className="overflow-auto rounded-lg border">
+        <table className="w-full min-w-[48rem] border-collapse text-sm">
+          <thead className="sticky top-0 z-10 bg-muted/80 backdrop-blur">
+            <tr>
+              {showRowNumbers ? <th className="w-12 border-b border-r px-3 py-2 text-left text-xs font-medium text-muted-foreground">#</th> : null}
+              {columns.map((column) => (
+                <th key={column.key} className={cn("border-b border-r px-3 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground last:border-r-0", alignClassName(column.align))} style={{ width: column.width }}>
+                  {column.label}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.length ? rows.map((row, rowIndex) => (
+              <tr key={row.key} data-readonly={row.readOnly || undefined} className="odd:bg-background even:bg-muted/18">
+                {showRowNumbers ? <th className="border-r px-3 py-1.5 text-left text-xs font-medium text-muted-foreground">{rowIndex + 1}</th> : null}
+                {columns.map((column) => {
+                  const selection = { rowKey: row.key, columnKey: column.key }
+                  const selected = activeCell?.rowKey === row.key && activeCell.columnKey === column.key
+                  const value = row.cells[column.key] ?? ""
+                  const cellReadOnly = readOnly || row.readOnly || column.readOnly
+                  return (
+                    <td key={column.key} data-selected={selected || undefined} className="border-r border-t p-0 last:border-r-0 data-[selected=true]:ring-2 data-[selected=true]:ring-inset data-[selected=true]:ring-primary/55">
+                      {cellReadOnly && column.formatter ? (
+                        <div className={cn("min-h-10 px-3 py-2", alignClassName(column.align))}>{column.formatter(value, row)}</div>
+                      ) : (
+                        <input
+                          aria-label={`${String(column.label)} row ${rowIndex + 1}`}
+                          value={value}
+                          readOnly={cellReadOnly}
+                          className={cn("h-10 w-full bg-transparent px-3 outline-none transition focus:bg-background read-only:cursor-default", alignClassName(column.align))}
+                          onFocus={() => selectCell(selection)}
+                          onChange={(event) => updateCell(selection, event.target.value)}
+                        />
+                      )}
+                    </td>
+                  )
+                })}
+              </tr>
+            )) : (
+              <tr>
+                <td colSpan={columns.length + (showRowNumbers ? 1 : 0)} className="h-32 text-center text-sm text-muted-foreground">{empty}</td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+      {showAddRow && !readOnly ? <Button type="button" className="w-fit" variant="outline" size="sm" leftIcon={<PlusIcon />} onClick={addRow}>{addRowLabel}</Button> : null}
+    </div>
+  )
+}
+
+export { Spreadsheet }

package/packages/cli/vendor/src/components/navigation/pagination.tsx

@@ -105,13 +105,13 @@ function Pagination({
       data-slot="pagination"
       aria-label="Pagination"
       className={cn(
-        "flex flex-wrap items-center justify-center gap-1 rounded-full border border-border/70 bg-background/76 p-1 shadow-none backdrop-blur",
+        "flex flex-wrap items-center justify-center gap-1.5 rounded-[var(--radius-lg)] border border-border/72 bg-background/84 p-1.5 shadow-[0_1px_2px_rgba(15,23,42,0.04)] backdrop-blur",
         className
       )}
       {...props}
     >
       {showSummary && totalCount !== undefined && pageSize ? (
-        <div className="px-2 text-xs text-muted-foreground">
+        <div className="mr-1 rounded-[var(--radius-md)] bg-muted/55 px-2.5 py-1.5 text-xs font-medium text-muted-foreground">
           {Math.min((currentPage - 1) * pageSize + 1, totalCount)}-{Math.min(currentPage * pageSize, totalCount)} of {totalCount}
         </div>
       ) : null}
@@ -163,7 +163,11 @@ function Pagination({
             aria-current={item === currentPage ? "page" : undefined}
             aria-label={labels?.page?.(item) ?? `Page ${item}`}
             onClick={() => goToPage(item)}
-            className={cn(item !== currentPage && "border-border/70 bg-background/80 shadow-none")}
+            className={cn(
+              "tabular-nums",
+              item === currentPage && "shadow-[0_8px_20px_rgba(15,23,42,0.14)]",
+              item !== currentPage && "border-border/70 bg-background/80 shadow-none hover:bg-muted/70"
+            )}
           >
             {item}
           </Button>
@@ -194,10 +198,10 @@ function Pagination({
         </Button>
       )}
       {pageSizeOptions && pageSize && onPageSizeChange ? (
-        <label className="ml-1 inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/90 px-3 py-1 text-xs text-muted-foreground">
+        <label className="ml-1 inline-flex h-9 items-center gap-2 rounded-[var(--radius-md)] border border-border/70 bg-background/90 px-3 text-xs font-medium text-muted-foreground">
           <span>Rows</span>
           <select
-            className="bg-transparent text-foreground outline-none"
+            className="rounded-sm bg-transparent text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
             value={pageSize}
             onChange={(event) => onPageSizeChange(Number(event.target.value))}
             disabled={disabled}

package/packages/cli/vendor/src/components/notifications/action-toast.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { RotateCcwIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { useToast, type CreateToastInput, type ToastShortcutInput } from "@/components/notifications/toast"
+
+export type ActionToastOptions = Omit<CreateToastInput, "action"> & {
+  actionLabel?: React.ReactNode
+  onAction?: () => void
+  undoLabel?: React.ReactNode
+  onUndo?: () => void
+}
+
+export type ActionToastButtonProps = React.ComponentProps<typeof Button> & {
+  toast: ActionToastOptions
+}
+
+function ActionToastButton({ toast, children, onClick, ...props }: ActionToastButtonProps) {
+  const toaster = useToast()
+
+  return (
+    <Button
+      {...props}
+      onClick={(event) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        showActionToast(toaster, toast)
+      }}
+    >
+      {children}
+    </Button>
+  )
+}
+
+function ActionToastUndoButton({ onUndo, label = "Undo" }: { onUndo?: () => void; label?: React.ReactNode }) {
+  return (
+    <Button type="button" size="sm" variant="outline" leftIcon={<RotateCcwIcon className="size-3.5" />} onClick={onUndo}>
+      {label}
+    </Button>
+  )
+}
+
+function showActionToast(
+  toaster: ReturnType<typeof useToast>,
+  {
+    actionLabel = "Action",
+    onAction,
+    undoLabel,
+    onUndo,
+    ...toast
+  }: ActionToastOptions
+) {
+  const action = onUndo ? (
+    <ActionToastUndoButton onUndo={onUndo} label={undoLabel} />
+  ) : onAction ? (
+    <Button type="button" size="sm" variant="outline" onClick={onAction}>{actionLabel}</Button>
+  ) : undefined
+
+  return toaster.addToast({ ...toast, action })
+}
+
+function useActionToast() {
+  const toaster = useToast()
+
+  return React.useCallback(
+    (toast: ActionToastOptions | ToastShortcutInput) => {
+      if (typeof toast === "object" && toast !== null && !React.isValidElement(toast) && !Array.isArray(toast)) {
+        return showActionToast(toaster, toast as ActionToastOptions)
+      }
+      return toaster.info(toast)
+    },
+    [toaster]
+  )
+}
+
+export { ActionToastButton, showActionToast, useActionToast }

package/packages/cli/vendor/src/components/notifications/index.ts

@@ -1,2 +1,3 @@
-export * from "./toast"
+export * from "./toast"
 export * from "./notification-center"
+export * from "./action-toast"

package/packages/cli/vendor/src/components/notifications/toast.tsx

@@ -1,7 +1,8 @@
 "use client"
 
-import * as React from "react"
-import { AlertCircleIcon, CheckCircle2Icon, InfoIcon, Loader2Icon, TriangleAlertIcon, XIcon } from "lucide-react"
+import * as React from "react"
+import { createPortal } from "react-dom"
+import { AlertCircleIcon, CheckCircle2Icon, InfoIcon, Loader2Icon, TriangleAlertIcon, XIcon } from "lucide-react"
 
 import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
@@ -108,7 +109,12 @@ function ToastProvider({
   pauseOnHover = true,
   position = "top-right",
 }: ToastProviderProps) {
-  const [toasts, setToasts] = React.useState<ToastItem[]>([])
+  const [toasts, setToasts] = React.useState<ToastItem[]>([])
+  const [portalTarget, setPortalTarget] = React.useState<HTMLElement | null>(null)
+
+  React.useEffect(() => {
+    setPortalTarget(document.body)
+  }, [])
 
   const dismissToast = React.useCallback((id: string) => {
     setToasts((current) => current.filter((toast) => toast.id !== id))
@@ -187,17 +193,21 @@ function ToastProvider({
     [addToast, clearToasts, dismissToast, error, info, loading, promise, success, toasts, updateToast, warning]
   )
 
-  return (
-    <ToastContext.Provider value={value}>
-      {children}
+  const viewport = (
       <div
         data-slot="toast-viewport"
-        className={cn("fixed z-[100] flex w-[min(100%-2rem,24rem)] flex-col gap-2", positionClassName[position])}
+        className={cn("fixed z-[100] flex w-[min(calc(100vw-2rem),24rem)] flex-col gap-2 pointer-events-none", positionClassName[position])}
       >
         {toasts.map((toast) => (
           <ToastCard key={toast.id} toast={toast} pauseOnHover={pauseOnHover} onDismiss={dismissToast} />
         ))}
       </div>
+  )
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      {portalTarget ? createPortal(viewport, portalTarget) : null}
     </ToastContext.Provider>
   )
 }
@@ -225,9 +235,9 @@ function ToastCard({
 
   return (
     <div
-      data-slot="toast"
-      data-tone={tone}
-      className={cn("flex gap-3 rounded-lg border p-3 shadow-lg backdrop-blur", toneClassName[tone])}
+      data-slot="toast"
+      data-tone={tone}
+      className={cn("pointer-events-auto flex gap-3 rounded-lg border p-3 shadow-lg backdrop-blur", toneClassName[tone])}
       role="status"
       aria-live="polite"
       onMouseEnter={() => setHovered(true)}

package/packages/cli/vendor/src/components/overlay/alert-dialog.tsx

@@ -167,11 +167,9 @@ function AlertDialog({
           </div>
         ) : null}
         <DialogFooter>
-          <DialogClose render={() => (
-            <Button type="button" variant={cancelVariant} disabled={resolvedLoading} {...cancelButtonProps}>
-              {cancelLabel}
-            </Button>
-          )} />
+          <DialogClose render={<Button type="button" variant={cancelVariant} disabled={resolvedLoading} {...cancelButtonProps} />}>
+            {cancelLabel}
+          </DialogClose>
           <Button
             type="button"
             variant={actionTone === "destructive" ? "destructive" : "default"}