tembro 1.0.0

package/packages/cli/vendor/src/components/data-table/table-import-button.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+import { UploadIcon } from "lucide-react"
+
+import { Button, type ButtonProps } from "@/components/ui/button"
+
+export type TableImportButtonProps = Omit<ButtonProps, "onChange" | "onClick"> & {
+  accept?: string
+  multiple?: boolean
+  label?: React.ReactNode
+  inputName?: string
+  onFilesSelect?: (files: File[]) => void
+  onFileSelect?: (file: File) => void
+}
+
+function TableImportButton({ accept = ".csv,.xlsx,.xls", multiple = false, label = "Import", inputName, onFilesSelect, onFileSelect, disabled, children, ...props }: TableImportButtonProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  return (
+    <>
+      <Button type="button" variant="outline" size="sm" disabled={disabled} onClick={() => inputRef.current?.click()} {...props}>
+        <UploadIcon data-icon="inline-start" />
+        {children ?? label}
+      </Button>
+      <input
+        ref={inputRef}
+        name={inputName}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        disabled={disabled}
+        className="sr-only"
+        onChange={(event) => {
+          const files = Array.from(event.currentTarget.files ?? [])
+          onFilesSelect?.(files)
+          if (files[0]) onFileSelect?.(files[0])
+          event.currentTarget.value = ""
+        }}
+      />
+    </>
+  )
+}
+
+export { TableImportButton }

package/packages/cli/vendor/src/components/display/activity-feed.tsx

@@ -0,0 +1,97 @@
+import * as React from "react"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+export type ActivityFeedItem = {
+  id: string
+  title: React.ReactNode
+  description?: React.ReactNode
+  time?: React.ReactNode
+  icon?: React.ReactNode
+  tone?: "default" | "success" | "warning" | "danger" | "info" | "muted"
+  actions?: React.ReactNode
+  hidden?: boolean
+  className?: string
+}
+
+export type ActivityFeedProps = React.ComponentProps<typeof Card> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
+  items: ActivityFeedItem[]
+  empty?: React.ReactNode
+  compact?: boolean
+  contentClassName?: string
+  itemClassName?: string
+}
+
+const toneDotClassName: Record<NonNullable<ActivityFeedItem["tone"]>, string> = {
+  default: "bg-primary",
+  success: "bg-emerald-500",
+  warning: "bg-amber-500",
+  danger: "bg-destructive",
+  info: "bg-blue-500",
+  muted: "bg-muted-foreground",
+}
+
+function ActivityFeed({
+  className,
+  title,
+  description,
+  actions,
+  items,
+  empty = "No activity yet.",
+  compact = false,
+  contentClassName,
+  itemClassName,
+  ...props
+}: ActivityFeedProps) {
+  const visibleItems = items.filter((item) => !item.hidden)
+  const hasHeader = Boolean(title || description || actions)
+
+  return (
+    <Card data-slot="activity-feed" className={cn("min-w-0", className)} {...props}>
+      {hasHeader && (
+        <CardHeader>
+          <div className="flex min-w-0 items-start justify-between gap-3">
+            <div className="min-w-0 space-y-1">
+              {title && <CardTitle>{title}</CardTitle>}
+              {description && <CardDescription>{description}</CardDescription>}
+            </div>
+            {actions && <div className="shrink-0">{actions}</div>}
+          </div>
+        </CardHeader>
+      )}
+
+      <CardContent className={cn("grid gap-0", contentClassName)}>
+        {visibleItems.length === 0 ? (
+          <div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">{empty}</div>
+        ) : (
+          visibleItems.map((item, index) => (
+            <div
+              key={item.id}
+              data-slot="activity-feed-item"
+              className={cn("relative flex gap-3 pb-4 last:pb-0", compact && "gap-2 pb-3", itemClassName, item.className)}
+            >
+              {index < visibleItems.length - 1 && <div className="absolute left-3 top-7 h-[calc(100%-1.75rem)] w-px bg-border" />}
+              <div className="relative z-10 mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border bg-background">
+                {item.icon ?? <span className={cn("size-2 rounded-full", toneDotClassName[item.tone ?? "default"])} />}
+              </div>
+              <div className="min-w-0 flex-1 space-y-1">
+                <div className="flex min-w-0 items-start justify-between gap-2">
+                  <div className="min-w-0 text-sm font-medium leading-5 text-foreground">{item.title}</div>
+                  {item.time && <div className="shrink-0 text-xs text-muted-foreground">{item.time}</div>}
+                </div>
+                {item.description && <div className="text-sm leading-5 text-muted-foreground">{item.description}</div>}
+                {item.actions && <div className="pt-1">{item.actions}</div>}
+              </div>
+            </div>
+          ))
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+export { ActivityFeed }

package/packages/cli/vendor/src/components/display/aspect-ratio.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type AspectRatioProps = React.ComponentProps<"div"> & {
+  ratio?: number
+}
+
+function AspectRatio({ ratio = 16 / 9, className, style, children, ...props }: AspectRatioProps) {
+  return (
+    <div
+      data-slot="aspect-ratio"
+      className={cn("relative w-full overflow-hidden", className)}
+      style={{ aspectRatio: String(ratio), ...style }}
+      {...props}
+    >
+      <div className="absolute inset-0">{children}</div>
+    </div>
+  )
+}
+
+export { AspectRatio }

package/packages/cli/vendor/src/components/display/avatar.tsx

@@ -0,0 +1,131 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type AvatarSize = "xs" | "sm" | "default" | "lg" | "xl"
+export type AvatarShape = "circle" | "rounded" | "square"
+
+export type AvatarProps = React.ComponentProps<"span"> & {
+  src?: string
+  alt?: string
+  name?: string
+  fallback?: React.ReactNode
+  size?: AvatarSize
+  shape?: AvatarShape
+  status?: "online" | "offline" | "busy" | "away"
+}
+
+export type AvatarGroupItem = AvatarProps & {
+  key: string
+}
+
+export type AvatarGroupProps = React.ComponentProps<"div"> & {
+  items: AvatarGroupItem[]
+  max?: number
+  size?: AvatarSize
+  shape?: AvatarShape
+  stacked?: boolean
+  overflowLabel?: (count: number) => React.ReactNode
+}
+
+const sizeClassName: Record<AvatarSize, string> = {
+  xs: "size-6 text-[10px]",
+  sm: "size-8 text-xs",
+  default: "size-10 text-sm",
+  lg: "size-12 text-base",
+  xl: "size-16 text-lg",
+}
+
+const shapeClassName: Record<AvatarShape, string> = {
+  circle: "rounded-full",
+  rounded: "rounded-xl",
+  square: "rounded-md",
+}
+
+const statusClassName = {
+  online: "bg-emerald-500",
+  offline: "bg-muted-foreground",
+  busy: "bg-destructive",
+  away: "bg-amber-500",
+}
+
+function getInitials(name?: string) {
+  if (!name) return "?"
+  const words = name.trim().split(/\s+/).filter(Boolean)
+  if (!words.length) return "?"
+  return words.slice(0, 2).map((word) => word[0]?.toUpperCase()).join("")
+}
+
+function Avatar({
+  src,
+  alt,
+  name,
+  fallback,
+  size = "default",
+  shape = "circle",
+  status,
+  className,
+  ...props
+}: AvatarProps) {
+  const [imageError, setImageError] = React.useState(false)
+  const showImage = Boolean(src && !imageError)
+
+  return (
+    <span
+      data-slot="avatar"
+      data-size={size}
+      data-shape={shape}
+      className={cn("relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden border bg-muted font-medium text-muted-foreground", sizeClassName[size], shapeClassName[shape], className)}
+      {...props}
+    >
+      {showImage ? (
+        <img src={src} alt={alt ?? name ?? "Avatar"} className="size-full object-cover" onError={() => setImageError(true)} />
+      ) : (
+        <span data-slot="avatar-fallback">{fallback ?? getInitials(name)}</span>
+      )}
+      {status && (
+        <span
+          data-slot="avatar-status"
+          data-status={status}
+          className={cn("absolute bottom-0 right-0 size-2.5 rounded-full border-2 border-background", size === "xs" && "size-2", size === "xl" && "size-3.5", statusClassName[status])}
+        />
+      )}
+    </span>
+  )
+}
+
+function AvatarGroup({
+  items,
+  max = 5,
+  size = "default",
+  shape = "circle",
+  stacked = true,
+  overflowLabel = (count) => `+${count}`,
+  className,
+  ...props
+}: AvatarGroupProps) {
+  const visibleItems = items.slice(0, max)
+  const overflowCount = Math.max(items.length - max, 0)
+
+  return (
+      <div data-slot="avatar-group" className={cn("flex items-center", stacked ? "-space-x-2" : "gap-2", className)} {...props}>
+      {visibleItems.map((item) => {
+        const { key: itemKey, ...avatarProps } = item
+        return (
+          <Avatar
+            key={itemKey}
+            size={item.size ?? size}
+            shape={item.shape ?? shape}
+            className={cn(stacked && "ring-2 ring-background", item.className)}
+            {...avatarProps}
+          />
+        )
+      })}
+      {overflowCount > 0 && (
+        <Avatar size={size} shape={shape} fallback={overflowLabel(overflowCount)} className={cn(stacked && "ring-2 ring-background")} />
+      )}
+    </div>
+  )
+}
+
+export { Avatar, AvatarGroup }

package/packages/cli/vendor/src/components/display/carousel.tsx

@@ -0,0 +1,123 @@
+import * as React from "react"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type CarouselProps = React.ComponentProps<"div"> & {
+  index?: number
+  defaultIndex?: number
+  onIndexChange?: (index: number) => void
+  loop?: boolean
+  showDots?: boolean
+  showArrows?: boolean
+  keyboard?: boolean
+  previousLabel?: string
+  nextLabel?: string
+}
+
+export type CarouselItemProps = React.ComponentProps<"div">
+
+function clampIndex(index: number, length: number, loop: boolean) {
+  if (length <= 0) return 0
+  if (loop) return ((index % length) + length) % length
+  return Math.min(Math.max(index, 0), length - 1)
+}
+
+function Carousel({
+  index,
+  defaultIndex = 0,
+  onIndexChange,
+  loop = false,
+  showDots = true,
+  showArrows = true,
+  keyboard = true,
+  previousLabel = "Previous slide",
+  nextLabel = "Next slide",
+  className,
+  children,
+  ...props
+}: CarouselProps) {
+  const items = React.Children.toArray(children)
+  const [internalIndex, setInternalIndex] = React.useState(defaultIndex)
+  const controlled = index !== undefined
+  const activeIndex = clampIndex(controlled ? index : internalIndex, items.length, loop)
+
+  function setActiveIndex(nextIndex: number) {
+    const resolvedIndex = clampIndex(nextIndex, items.length, loop)
+    if (!controlled) setInternalIndex(resolvedIndex)
+    onIndexChange?.(resolvedIndex)
+  }
+
+  const canGoPrevious = loop || activeIndex > 0
+  const canGoNext = loop || activeIndex < items.length - 1
+
+  return (
+    <div
+      data-slot="carousel"
+      className={cn("grid gap-3", className)}
+      onKeyDown={(event) => {
+        if (!keyboard || items.length <= 1) return
+        if (event.key === "ArrowLeft" && canGoPrevious) {
+          event.preventDefault()
+          setActiveIndex(activeIndex - 1)
+        }
+        if (event.key === "ArrowRight" && canGoNext) {
+          event.preventDefault()
+          setActiveIndex(activeIndex + 1)
+        }
+      }}
+      {...props}
+    >
+      <div className="relative overflow-hidden rounded-xl border bg-card">
+        {items[activeIndex]}
+        {showArrows && items.length > 1 ? (
+          <>
+            <Button
+              type="button"
+              variant="secondary"
+              size="icon-sm"
+              className="absolute left-3 top-3"
+              disabled={!canGoPrevious}
+              aria-label={previousLabel}
+              onClick={() => setActiveIndex(activeIndex - 1)}
+            >
+              <ChevronLeftIcon />
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              size="icon-sm"
+              className="absolute right-3 top-3"
+              disabled={!canGoNext}
+              aria-label={nextLabel}
+              onClick={() => setActiveIndex(activeIndex + 1)}
+            >
+              <ChevronRightIcon />
+            </Button>
+          </>
+        ) : null}
+      </div>
+      {showDots && items.length > 1 && (
+        <div className="flex items-center justify-center gap-2">
+          {items.map((_, itemIndex) => (
+            <button
+              key={itemIndex}
+              type="button"
+              aria-label={`Go to slide ${itemIndex + 1}`}
+              aria-pressed={itemIndex === activeIndex}
+              className={cn("size-2.5 rounded-full bg-muted-foreground/30 transition-colors", itemIndex === activeIndex && "bg-primary")}
+              onClick={() => setActiveIndex(itemIndex)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: CarouselItemProps) {
+  return <div data-slot="carousel-item" className={cn("p-4", className)} {...props} />
+}
+
+export { Carousel, CarouselItem }

package/packages/cli/vendor/src/components/display/code-block.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+
+import { CopyButton } from "@/components/actions/copy-button"
+import { cn } from "@/lib/utils"
+
+export type CodeBlockProps = React.ComponentProps<"div"> & {
+  code: string
+  language?: string
+  title?: React.ReactNode
+  showCopy?: boolean
+  wrap?: boolean
+}
+
+function CodeBlock({ code, language, title, showCopy = true, wrap = false, className, ...props }: CodeBlockProps) {
+  return (
+    <div data-slot="code-block" className={cn("overflow-hidden rounded-lg border bg-card", className)} {...props}>
+      {(title || language || showCopy) && (
+        <div className="flex items-center justify-between gap-3 border-b px-3 py-2 text-xs text-muted-foreground">
+          <div className="flex min-w-0 items-center gap-2">
+            {title && <span className="truncate font-medium text-foreground">{title}</span>}
+            {language && <span className="rounded bg-muted px-1.5 py-0.5 font-mono">{language}</span>}
+          </div>
+          {showCopy && <CopyButton value={code} size="sm" variant="ghost" copyLabel="Copy" copiedLabel="Copied" />}
+        </div>
+      )}
+      <pre className={cn("overflow-x-auto p-3 text-sm", wrap && "whitespace-pre-wrap break-words")}>
+        <code>{code}</code>
+      </pre>
+    </div>
+  )
+}
+
+export { CodeBlock }

package/packages/cli/vendor/src/components/display/comparison-card.tsx

@@ -0,0 +1,61 @@
+import * as React from "react"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { DeltaBadge } from "@/components/display/delta-badge"
+import { cn } from "@/lib/utils"
+
+export type ComparisonCardItem = {
+  label: React.ReactNode
+  value: React.ReactNode
+  change?: React.ReactNode
+  trend?: "up" | "down" | "neutral"
+}
+
+export type ComparisonCardProps = React.ComponentProps<typeof Card> & {
+  title?: React.ReactNode
+  items: ComparisonCardItem[]
+  columns?: 2 | 3 | 4
+}
+
+function ComparisonCard({
+  title,
+  items,
+  columns = 2,
+  className,
+  ...props
+}: ComparisonCardProps) {
+  return (
+    <Card data-slot="comparison-card" className={className} {...props}>
+      {title && (
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-medium">{title}</CardTitle>
+        </CardHeader>
+      )}
+      <CardContent className={cn(title ? "pt-0" : "")}>
+        <div
+          className={cn(
+            "grid gap-4",
+            columns === 2 && "grid-cols-2",
+            columns === 3 && "grid-cols-3",
+            columns === 4 && "grid-cols-2 sm:grid-cols-4",
+            !title && "pt-6"
+          )}
+        >
+          {items.map((item, index) => (
+            <div key={index} className="flex flex-col gap-1">
+              <span className="text-xs text-muted-foreground">{item.label}</span>
+              <div className="flex items-baseline gap-1.5">
+                <span className="text-lg font-semibold leading-none">{item.value}</span>
+                {item.change && (
+                  <DeltaBadge size="sm" value={item.change} trend={item.trend} />
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export { ComparisonCard }

package/packages/cli/vendor/src/components/display/data-list.tsx

@@ -0,0 +1,97 @@
+import * as React from "react"
+import { ChevronRightIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type DataListItem = {
+  key: string
+  label: React.ReactNode
+  value?: React.ReactNode
+  description?: React.ReactNode
+  meta?: React.ReactNode
+  icon?: React.ReactNode
+  href?: string
+  disabled?: boolean
+  onClick?: () => void
+}
+
+export type DataListProps = React.ComponentProps<"div"> & {
+  items: DataListItem[]
+  density?: "compact" | "default" | "comfortable"
+  showDividers?: boolean
+}
+
+const densityClassNames = {
+  compact: "px-3 py-2",
+  default: "px-4 py-3",
+  comfortable: "px-5 py-4",
+}
+
+function DataList({ items, density = "default", showDividers = true, className, ...props }: DataListProps) {
+  return (
+    <div
+      data-slot="data-list"
+      className={cn("overflow-hidden rounded-[var(--aui-card-radius,var(--radius-xl))] border bg-card text-card-foreground", className)}
+      {...props}
+    >
+      {items.map((item) => (
+        <DataListRow key={item.key} item={item} density={density} showDivider={showDividers} />
+      ))}
+    </div>
+  )
+}
+
+export type DataListRowProps = React.ComponentProps<"div"> & {
+  item: DataListItem
+  density?: DataListProps["density"]
+  showDivider?: boolean
+}
+
+function DataListRow({ item, density = "default", showDivider = true, className, ...props }: DataListRowProps) {
+  const interactive = Boolean(item.href || item.onClick)
+  const rowClassName = cn(
+    "group flex min-w-0 items-center gap-3 bg-card text-sm transition-colors",
+    densityClassNames[density],
+    showDivider && "border-b last:border-b-0",
+    interactive && !item.disabled && "cursor-pointer hover:bg-muted/55",
+    item.disabled && "pointer-events-none opacity-55",
+    className
+  )
+  const content = (
+    <>
+      {item.icon && <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">{item.icon}</div>}
+      <div className="min-w-0 flex-1">
+        <div className="flex min-w-0 items-center gap-2">
+          <div className="truncate font-medium text-foreground">{item.label}</div>
+          {item.meta && <div className="shrink-0 text-xs text-muted-foreground">{item.meta}</div>}
+        </div>
+        {item.description && <div className="mt-0.5 line-clamp-2 text-xs leading-5 text-muted-foreground">{item.description}</div>}
+      </div>
+      {item.value && <div className="shrink-0 text-right font-medium text-foreground">{item.value}</div>}
+      {interactive && <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5" />}
+    </>
+  )
+
+  if (item.href) {
+    return (
+      <a data-slot="data-list-row" href={item.href} className={rowClassName} {...(props as React.ComponentProps<"a">)}>
+        {content}
+      </a>
+    )
+  }
+
+  return (
+    <div
+      data-slot="data-list-row"
+      role={interactive ? "button" : undefined}
+      tabIndex={interactive && !item.disabled ? 0 : undefined}
+      className={rowClassName}
+      onClick={item.onClick}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export { DataList, DataListRow }

package/packages/cli/vendor/src/components/display/data-state.tsx

@@ -0,0 +1,75 @@
+import * as React from "react"
+import { AlertTriangleIcon, CheckCircle2Icon, Loader2Icon, SearchXIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+export type DataStateStatus = "idle" | "loading" | "empty" | "error" | "success"
+
+export type DataStateProps = React.ComponentProps<typeof Card> & {
+  status: DataStateStatus
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
+  icon?: React.ReactNode
+  compact?: boolean
+  children?: React.ReactNode
+  retryLabel?: React.ReactNode
+  onRetry?: () => void
+}
+
+const defaultContent: Record<DataStateStatus, { title: string; description: string; icon: React.ReactNode }> = {
+  idle: { title: "Ready", description: "No action has started yet.", icon: <CheckCircle2Icon /> },
+  loading: { title: "Loading", description: "Please wait while data is being prepared.", icon: <Loader2Icon className="animate-spin" /> },
+  empty: { title: "No data", description: "There is nothing to show yet.", icon: <SearchXIcon /> },
+  error: { title: "Something went wrong", description: "Try again or check the request.", icon: <AlertTriangleIcon /> },
+  success: { title: "Ready", description: "Data loaded successfully.", icon: <CheckCircle2Icon /> },
+}
+
+function DataState({
+  status,
+  title,
+  description,
+  actions,
+  icon,
+  compact = false,
+  children,
+  retryLabel = "Retry",
+  onRetry,
+  className,
+  ...props
+}: DataStateProps) {
+  const content = defaultContent[status]
+
+  return (
+    <Card
+      data-slot="data-state"
+      data-status={status}
+      className={cn("min-w-0 border-border/75 bg-card/96 shadow-sm ring-1 ring-foreground/4", className)}
+      {...props}
+    >
+      <CardContent className={cn("flex flex-col items-center justify-center text-center", compact ? "p-4" : "min-h-52 p-8")}>
+        <div
+          className={cn(
+            "mb-3 flex items-center justify-center rounded-full border border-border/70 bg-muted/45 text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.05)] [&_svg]:size-5",
+            compact ? "size-9" : "size-12"
+          )}
+        >
+          {icon ?? content.icon}
+        </div>
+        <div className={cn("font-semibold tracking-tight text-foreground", compact ? "text-sm" : "text-base")}>{title ?? content.title}</div>
+        <p className="mt-1 max-w-md text-sm text-muted-foreground">{description ?? content.description}</p>
+        {children && <div className="mt-4 w-full">{children}</div>}
+        {(actions || onRetry) && (
+          <div className="mt-4 flex flex-wrap justify-center gap-2">
+            {onRetry && <Button size="sm" variant={status === "error" ? "default" : "outline"} onClick={onRetry}>{retryLabel}</Button>}
+            {actions}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+export { DataState }