tembro 6.1.0 → 6.1.1

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

@@ -0,0 +1,146 @@
+"use client"
+
+import * as React from "react"
+import { ExternalLinkIcon, LocateFixedIcon, MapPinIcon, MinusIcon, PlusIcon } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type MapMarker = {
+  key: string
+  label: React.ReactNode
+  latitude: number
+  longitude: number
+  description?: React.ReactNode
+  tone?: "neutral" | "info" | "success" | "warning" | "danger" | "muted"
+}
+
+export type MapViewProps = React.ComponentProps<"section"> & {
+  center?: { latitude: number; longitude: number }
+  zoom?: number
+  markers?: MapMarker[]
+  title?: React.ReactNode
+  description?: React.ReactNode
+  height?: number | string
+  showMarkerList?: boolean
+  showControls?: boolean
+  iframeTitle?: string
+  mapUrl?: string
+  onMarkerSelect?: (marker: MapMarker) => void
+  selectedMarkerKey?: string
+  defaultSelectedMarkerKey?: string
+}
+
+function clampZoom(value: number) {
+  return Math.max(1, Math.min(19, value))
+}
+
+function toCoordinate(value: number) {
+  return Number.isFinite(value) ? value : 0
+}
+
+function getOpenStreetMapEmbedUrl(center: { latitude: number; longitude: number }, zoom: number, selected?: MapMarker) {
+  const lat = toCoordinate(selected?.latitude ?? center.latitude)
+  const lon = toCoordinate(selected?.longitude ?? center.longitude)
+  const delta = 0.012 * (20 - clampZoom(zoom))
+  const bbox = [lon - delta, lat - delta, lon + delta, lat + delta].map((value) => value.toFixed(6)).join("%2C")
+  return `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${lat.toFixed(6)}%2C${lon.toFixed(6)}`
+}
+
+function getOpenStreetMapUrl(center: { latitude: number; longitude: number }, zoom: number, selected?: MapMarker) {
+  const lat = toCoordinate(selected?.latitude ?? center.latitude)
+  const lon = toCoordinate(selected?.longitude ?? center.longitude)
+  return `https://www.openstreetmap.org/?mlat=${lat.toFixed(6)}&mlon=${lon.toFixed(6)}#map=${clampZoom(zoom)}/${lat.toFixed(6)}/${lon.toFixed(6)}`
+}
+
+function MapView({
+  center = { latitude: 41.311081, longitude: 69.240562 },
+  zoom = 13,
+  markers = [],
+  title = "Map",
+  description,
+  height = 420,
+  showMarkerList = true,
+  showControls = true,
+  iframeTitle = "Interactive map",
+  mapUrl,
+  onMarkerSelect,
+  selectedMarkerKey,
+  defaultSelectedMarkerKey,
+  className,
+  ...props
+}: MapViewProps) {
+  const [internalZoom, setInternalZoom] = React.useState(clampZoom(zoom))
+  const [internalSelectedKey, setInternalSelectedKey] = React.useState(defaultSelectedMarkerKey ?? markers[0]?.key)
+  const activeKey = selectedMarkerKey ?? internalSelectedKey
+  const selectedMarker = markers.find((marker) => marker.key === activeKey)
+  const resolvedUrl = mapUrl ?? getOpenStreetMapEmbedUrl(center, internalZoom, selectedMarker)
+  const externalUrl = getOpenStreetMapUrl(center, internalZoom, selectedMarker)
+
+  React.useEffect(() => {
+    setInternalZoom(clampZoom(zoom))
+  }, [zoom])
+
+  const selectMarker = (marker: MapMarker) => {
+    if (selectedMarkerKey === undefined) setInternalSelectedKey(marker.key)
+    onMarkerSelect?.(marker)
+  }
+
+  return (
+    <section data-slot="map-view" className={cn("grid min-w-0 gap-3 rounded-lg border bg-card p-3 shadow-sm", className)} {...props}>
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
+          {title ? <h3 className="text-base font-semibold tracking-tight">{title}</h3> : null}
+          {description ? <p className="mt-1 text-sm text-muted-foreground">{description}</p> : null}
+        </div>
+        {showControls ? (
+          <div className="flex items-center gap-1">
+            <Button type="button" size="icon-sm" variant="outline" iconOnly aria-label="Zoom out" onClick={() => setInternalZoom((value) => clampZoom(value - 1))}><MinusIcon /></Button>
+            <Badge variant="outline" tone="muted">{internalZoom}x</Badge>
+            <Button type="button" size="icon-sm" variant="outline" iconOnly aria-label="Zoom in" onClick={() => setInternalZoom((value) => clampZoom(value + 1))}><PlusIcon /></Button>
+            <Button type="button" size="icon-sm" variant="outline" iconOnly aria-label="Open in OpenStreetMap" onClick={() => window.open(externalUrl, "_blank", "noopener,noreferrer")}><ExternalLinkIcon /></Button>
+          </div>
+        ) : null}
+      </div>
+
+      <div className={cn("grid gap-3", showMarkerList && markers.length ? "lg:grid-cols-[minmax(0,1fr)_18rem]" : "")}>
+        <div className="relative overflow-hidden rounded-lg border bg-muted" style={{ height }}>
+          <iframe title={iframeTitle} src={resolvedUrl} className="absolute inset-0 size-full border-0" loading="lazy" referrerPolicy="no-referrer-when-downgrade" />
+          {selectedMarker ? (
+            <div className="absolute left-3 top-3 max-w-[calc(100%-1.5rem)] rounded-lg border bg-background/95 p-3 text-sm shadow-lg backdrop-blur">
+              <div className="flex items-center gap-2 font-medium"><LocateFixedIcon className="size-4 text-primary" />{selectedMarker.label}</div>
+              {selectedMarker.description ? <p className="mt-1 text-xs text-muted-foreground">{selectedMarker.description}</p> : null}
+            </div>
+          ) : null}
+        </div>
+
+        {showMarkerList && markers.length ? (
+          <div data-slot="map-marker-list" className="grid content-start gap-2">
+            {markers.map((marker) => {
+              const selected = marker.key === activeKey
+              return (
+                <button
+                  key={marker.key}
+                  type="button"
+                  aria-pressed={selected}
+                  className="grid gap-1 rounded-lg border bg-background p-3 text-left text-sm outline-none transition hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-ring aria-pressed:border-primary aria-pressed:bg-primary/5"
+                  onClick={() => selectMarker(marker)}
+                >
+                  <span className="flex items-center justify-between gap-2">
+                    <span className="flex min-w-0 items-center gap-2 font-medium"><MapPinIcon className="size-4 shrink-0 text-primary" /><span className="truncate">{marker.label}</span></span>
+                    <Badge size="sm" tone={marker.tone ?? "muted"} showDot>{selected ? "selected" : "marker"}</Badge>
+                  </span>
+                  {marker.description ? <span className="text-xs text-muted-foreground">{marker.description}</span> : null}
+                  <span className="text-[11px] text-muted-foreground">{marker.latitude.toFixed(4)}, {marker.longitude.toFixed(4)}</span>
+                </button>
+              )
+            })}
+          </div>
+        ) : null}
+      </div>
+    </section>
+  )
+}
+
+export { MapView }

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/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"}