tembro 1.0.0

package/packages/cli/vendor/src/components/display/skeleton-form.tsx

@@ -0,0 +1,51 @@
+import * as React from "react"
+import { Skeleton } from "@/components/ui/skeleton"
+import { cn } from "@/lib/utils"
+
+export type SkeletonFormProps = React.ComponentProps<"div"> & {
+  fields?: number
+  showTitle?: boolean
+  showActions?: boolean
+  columns?: 1 | 2
+}
+
+function SkeletonForm({
+  fields = 4,
+  showTitle = true,
+  showActions = true,
+  columns = 1,
+  className,
+  ...props
+}: SkeletonFormProps) {
+  return (
+    <div data-slot="skeleton-form" className={cn("w-full space-y-6", className)} {...props}>
+      {showTitle && (
+        <div className="space-y-2 border-b pb-4">
+          <Skeleton className="h-6 w-1/3" />
+          <Skeleton className="h-4 w-1/2" />
+        </div>
+      )}
+      
+      <div className={cn(
+        "grid gap-6",
+        columns === 2 && "sm:grid-cols-2"
+      )}>
+        {Array.from({ length: fields }).map((_, i) => (
+          <div key={i} className="space-y-2">
+            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-10 w-full" />
+          </div>
+        ))}
+      </div>
+
+      {showActions && (
+        <div className="flex justify-end gap-2 pt-4">
+          <Skeleton className="h-10 w-24" />
+          <Skeleton className="h-10 w-24" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { SkeletonForm }

package/packages/cli/vendor/src/components/display/skeleton-table.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Skeleton } from "@/components/ui/skeleton"
+import { cn } from "@/lib/utils"
+
+export type SkeletonTableProps = React.ComponentProps<"div"> & {
+  rows?: number
+  columns?: number
+  showHeader?: boolean
+  showToolbar?: boolean
+}
+
+function SkeletonTable({
+  rows = 5,
+  columns = 4,
+  showHeader = true,
+  showToolbar = false,
+  className,
+  ...props
+}: SkeletonTableProps) {
+  return (
+    <div data-slot="skeleton-table" className={cn("w-full space-y-4", className)} {...props}>
+      {showToolbar && (
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-8 w-[250px]" />
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-8 w-[100px]" />
+            <Skeleton className="h-8 w-[80px]" />
+          </div>
+        </div>
+      )}
+      <div className="rounded-md border">
+        {showHeader && (
+          <div className="border-b bg-muted/50">
+            <div className="flex px-4 py-3">
+              {Array.from({ length: columns }).map((_, i) => (
+                <div key={i} className="flex-1 pr-4">
+                  <Skeleton className="h-4 w-24" />
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+        <div className="divide-y">
+          {Array.from({ length: rows }).map((_, rowIndex) => (
+            <div key={rowIndex} className="flex px-4 py-3">
+              {Array.from({ length: columns }).map((_, colIndex) => (
+                <div key={colIndex} className="flex-1 pr-4">
+                  <Skeleton className={cn("h-4", colIndex === 0 ? "w-full max-w-[200px]" : "w-1/2")} />
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export { SkeletonTable }

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

@@ -0,0 +1,215 @@
+import * as React from "react"
+
+import { Card } from "@/components/ui/card"
+import { Skeleton, SkeletonText } from "@/components/ui/skeleton"
+import { cn, stopInteractivePropagation } from "@/lib/utils"
+
+export type InfoCardVariant = "default" | "outline" | "elevated" | "ghost"
+export type InfoCardSize = "sm" | "md" | "lg"
+export type InfoCardDensity = "compact" | "default" | "comfortable"
+export type InfoCardOrientation = "vertical" | "horizontal"
+
+export type InfoCardClassNames = {
+  root?: string
+  media?: string
+  header?: string
+  icon?: string
+  body?: string
+  eyebrow?: string
+  title?: string
+  description?: string
+  content?: string
+  footer?: string
+  actions?: string
+  meta?: string
+  status?: string
+}
+
+export type InfoCardRenderContext = {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  eyebrow?: React.ReactNode
+  media?: React.ReactNode
+  icon?: React.ReactNode
+  status?: React.ReactNode
+  actions?: React.ReactNode
+  meta?: React.ReactNode
+  content?: React.ReactNode
+  footer?: React.ReactNode
+}
+
+export type InfoCardProps = Omit<React.ComponentProps<typeof Card>, "title" | "content" | "size"> & InfoCardRenderContext & {
+  orientation?: InfoCardOrientation
+  variant?: InfoCardVariant
+  size?: InfoCardSize
+  density?: InfoCardDensity
+  compact?: boolean
+  loading?: boolean
+  disabled?: boolean
+  selected?: boolean
+  interactive?: boolean
+  classNames?: InfoCardClassNames
+  renderHeader?: (ctx: InfoCardRenderContext) => React.ReactNode
+  renderMedia?: (ctx: InfoCardRenderContext) => React.ReactNode
+  renderContent?: (ctx: InfoCardRenderContext) => React.ReactNode
+  renderFooter?: (ctx: InfoCardRenderContext) => React.ReactNode
+}
+
+const variantClassName: Record<InfoCardVariant, string> = {
+  default: "border border-border/70 bg-card/96 shadow-sm ring-1 ring-foreground/4",
+  outline: "border border-border/75 bg-card/96 shadow-sm ring-1 ring-foreground/4",
+  elevated: "border border-border/75 bg-card/98 shadow-[0_24px_80px_rgba(15,23,42,0.12)] ring-1 ring-foreground/4",
+  ghost: "border-transparent bg-transparent shadow-none",
+}
+
+const densityClassName: Record<InfoCardDensity, string> = {
+  compact: "p-3",
+  default: "p-4",
+  comfortable: "p-5",
+}
+
+const titleClassName: Record<InfoCardSize, string> = {
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+}
+
+function InfoCard({
+  eyebrow,
+  title,
+  description,
+  media,
+  icon,
+  status,
+  actions,
+  meta,
+  content,
+  footer,
+  orientation = "vertical",
+  variant = "outline",
+  size = "md",
+  density,
+  compact,
+  loading = false,
+  disabled = false,
+  selected = false,
+  interactive,
+  className,
+  classNames,
+  renderHeader,
+  renderMedia,
+  renderContent,
+  renderFooter,
+  children,
+  onClick,
+  ...props
+}: InfoCardProps) {
+  const ctx: InfoCardRenderContext = { eyebrow, title, description, media, icon, status, actions, meta, content, footer }
+  const clickable = Boolean(onClick || interactive)
+  const resolvedDensity = compact ? "compact" : density ?? "default"
+
+  return (
+    <Card
+      data-slot="info-card"
+      data-selected={selected || undefined}
+      data-disabled={disabled || undefined}
+      data-loading={loading || undefined}
+      className={cn(
+        "overflow-hidden transition-colors data-[selected=true]:border-primary data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-55",
+        variantClassName[variant],
+        clickable && "cursor-pointer hover:bg-muted/35",
+        orientation === "horizontal" && "flex",
+        className,
+        classNames?.root
+      )}
+      onClick={disabled ? undefined : onClick}
+      {...props}
+    >
+      {loading ? (
+        <div className={cn("grid gap-3", densityClassName[resolvedDensity])}>
+          <Skeleton className="h-5 w-1/2" />
+          <SkeletonText rows={3} />
+        </div>
+      ) : (
+        <>
+          {media &&
+            (renderMedia?.(ctx) ?? (
+              <div
+                data-slot="info-card-media"
+                className={cn(
+                  "bg-muted/50",
+                  orientation === "horizontal" ? "w-40 shrink-0 border-r border-border/70" : "aspect-video border-b border-border/70",
+                  classNames?.media
+                )}
+              >
+                {media}
+              </div>
+            ))}
+          <div data-slot="info-card-body" className={cn("grid min-w-0 flex-1 gap-3", densityClassName[resolvedDensity], classNames?.body)}>
+            {renderHeader?.(ctx) ?? (
+              <div data-slot="info-card-header" className={cn("flex items-start justify-between gap-3", classNames?.header)}>
+                <div className="flex min-w-0 items-start gap-3">
+                  {icon && (
+                    <div
+                      data-slot="info-card-icon"
+                      className={cn(
+                        "flex size-9 shrink-0 items-center justify-center rounded-[min(var(--radius-xl),16px)] border border-border/70 bg-muted/45 text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.05)]",
+                        classNames?.icon
+                      )}
+                    >
+                      {icon}
+                    </div>
+                  )}
+                  <div className="grid min-w-0 gap-1">
+                    {eyebrow && <div data-slot="info-card-eyebrow" className={cn("text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground", classNames?.eyebrow)}>{eyebrow}</div>}
+                    <div className="flex flex-wrap items-center gap-2">
+                      {title && <div data-slot="info-card-title" className={cn("truncate font-semibold tracking-tight text-foreground", titleClassName[size], classNames?.title)}>{title}</div>}
+                      {status && <div data-slot="info-card-status" className={classNames?.status}>{status}</div>}
+                    </div>
+                    {description && <div data-slot="info-card-description" className={cn("line-clamp-2 text-sm text-muted-foreground", classNames?.description)}>{description}</div>}
+                  </div>
+                </div>
+                {actions && (
+                  <div
+                    data-slot="info-card-actions"
+                    className={cn("shrink-0", classNames?.actions)}
+                    onClick={stopInteractivePropagation}
+                    onMouseDown={stopInteractivePropagation}
+                    onDoubleClick={stopInteractivePropagation}
+                  >
+                    {actions}
+                  </div>
+                )}
+              </div>
+            )}
+            {meta && <div data-slot="info-card-meta" className={cn("text-xs text-muted-foreground", classNames?.meta)}>{meta}</div>}
+            {(content || children) && (renderContent?.(ctx) ?? <div data-slot="info-card-content" className={classNames?.content}>{content ?? children}</div>)}
+            {footer && (renderFooter?.(ctx) ?? <div data-slot="info-card-footer" className={cn("border-t pt-3 text-sm text-muted-foreground", classNames?.footer)}>{footer}</div>)}
+          </div>
+        </>
+      )}
+    </Card>
+  )
+}
+
+/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+export type SmartCardVariant = InfoCardVariant
+/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+export type SmartCardSize = InfoCardSize
+/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+export type SmartCardDensity = InfoCardDensity
+/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+export type SmartCardOrientation = InfoCardOrientation
+/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+export type SmartCardClassNames = InfoCardClassNames
+/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+export type SmartCardRenderContext = InfoCardRenderContext
+/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+export type SmartCardProps = InfoCardProps
+
+/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+function SmartCard(props: SmartCardProps) {
+  return <InfoCard {...props} />
+}
+
+export { InfoCard, SmartCard }

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

@@ -0,0 +1,107 @@
+import * as React from "react"
+import { ArrowDownIcon, ArrowUpIcon } from "lucide-react"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+export type StatisticTrend = "up" | "down" | "neutral"
+
+export type StatisticProps = React.ComponentProps<"div"> & {
+  label: React.ReactNode
+  value: React.ReactNode
+  prefix?: React.ReactNode
+  suffix?: React.ReactNode
+  description?: React.ReactNode
+  trend?: StatisticTrend
+  change?: React.ReactNode
+  loading?: boolean
+}
+
+function Statistic({ label, value, prefix, suffix, description, trend = "neutral", change, loading = false, className, ...props }: StatisticProps) {
+  const trendIcon = trend === "up" ? <ArrowUpIcon className="size-3" /> : trend === "down" ? <ArrowDownIcon className="size-3" /> : null
+
+  return (
+    <div data-slot="statistic" className={cn("grid gap-1", className)} {...props}>
+      <div className="text-sm text-muted-foreground">{label}</div>
+      <div className="flex flex-wrap items-baseline gap-1.5">
+        {loading ? (
+          <div className="h-8 w-28 animate-pulse rounded-md bg-muted" />
+        ) : (
+          <>
+            {prefix && <span className="text-base text-muted-foreground">{prefix}</span>}
+            <span className="text-2xl font-semibold tracking-tight">{value}</span>
+            {suffix && <span className="text-sm text-muted-foreground">{suffix}</span>}
+          </>
+        )}
+      </div>
+      {(description || change) && (
+        <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+          {change && (
+            <span
+              className={cn(
+                "inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 font-medium",
+                trend === "up" && "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+                trend === "down" && "bg-destructive/10 text-destructive",
+                trend === "neutral" && "bg-muted text-muted-foreground"
+              )}
+            >
+              {trendIcon}
+              {change}
+            </span>
+          )}
+          {description && <span>{description}</span>}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export type StatisticCardProps = React.ComponentProps<typeof Card> & StatisticProps & {
+  action?: React.ReactNode
+}
+
+function StatisticCard({ action, label, value, prefix, suffix, description, trend, change, loading, className, ...props }: StatisticCardProps) {
+  return (
+    <Card data-slot="statistic-card" className={className} {...props}>
+      <CardHeader className="flex flex-row items-center justify-between gap-3 pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">{label}</CardTitle>
+        {action}
+      </CardHeader>
+      <CardContent>
+        <Statistic
+          label={<span className="sr-only">{label}</span>}
+          value={value}
+          prefix={prefix}
+          suffix={suffix}
+          description={description}
+          trend={trend}
+          change={change}
+          loading={loading}
+        />
+      </CardContent>
+    </Card>
+  )
+}
+
+export type StatisticGridProps = React.ComponentProps<"div"> & {
+  columns?: 1 | 2 | 3 | 4
+}
+
+function StatisticGrid({ columns = 4, className, ...props }: StatisticGridProps) {
+  return (
+    <div
+      data-slot="statistic-grid"
+      className={cn(
+        "grid gap-4",
+        columns === 1 && "grid-cols-1",
+        columns === 2 && "grid-cols-1 sm:grid-cols-2",
+        columns === 3 && "grid-cols-1 sm:grid-cols-2 xl:grid-cols-3",
+        columns === 4 && "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Statistic, StatisticCard, StatisticGrid }

package/packages/cli/vendor/src/components/display/status-dot.tsx

@@ -0,0 +1,45 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type StatusDotTone = "neutral" | "info" | "success" | "warning" | "danger" | "muted"
+
+export type StatusDotProps = React.ComponentProps<"span"> & {
+  tone?: StatusDotTone
+  pulse?: boolean
+  label?: React.ReactNode
+  size?: "sm" | "default" | "lg"
+}
+
+const toneClassName: Record<StatusDotTone, string> = {
+  neutral: "bg-foreground",
+  info: "bg-blue-500",
+  success: "bg-emerald-500",
+  warning: "bg-amber-500",
+  danger: "bg-destructive",
+  muted: "bg-muted-foreground",
+}
+
+const sizeClassName = {
+  sm: "size-1.5",
+  default: "size-2",
+  lg: "size-2.5",
+}
+
+function StatusDot({ className, tone = "neutral", pulse = false, label, size = "default", ...props }: StatusDotProps) {
+  const dot = (
+    <span className="relative inline-flex shrink-0 items-center justify-center">
+      {pulse ? <span className={cn("absolute inline-flex size-full animate-ping rounded-full opacity-35", toneClassName[tone])} /> : null}
+      <span data-slot="status-dot-indicator" className={cn("relative rounded-full", sizeClassName[size], toneClassName[tone])} />
+    </span>
+  )
+
+  return (
+    <span data-slot="status-dot" className={cn("inline-flex items-center gap-2 text-sm text-muted-foreground", className)} {...props}>
+      {dot}
+      {label ? <span data-slot="status-dot-label">{label}</span> : null}
+    </span>
+  )
+}
+
+export { StatusDot }

package/packages/cli/vendor/src/components/display/status-legend.tsx

@@ -0,0 +1,124 @@
+import * as React from "react"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+export type StatusLegendTone = "default" | "success" | "warning" | "danger" | "info" | "muted"
+export type StatusLegendOrientation = "vertical" | "horizontal" | "grid"
+
+export type StatusLegendItem = {
+  key: string
+  label: React.ReactNode
+  description?: React.ReactNode
+  count?: React.ReactNode
+  tone?: StatusLegendTone
+  icon?: React.ReactNode
+  hidden?: boolean
+  className?: string
+}
+
+export type StatusLegendProps = React.ComponentProps<typeof Card> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
+  items: StatusLegendItem[]
+  orientation?: StatusLegendOrientation
+  compact?: boolean
+  showCounts?: boolean
+  contentClassName?: string
+  itemClassName?: string
+}
+
+const dotClassName: Record<StatusLegendTone, string> = {
+  default: "bg-primary",
+  success: "bg-emerald-500",
+  warning: "bg-amber-500",
+  danger: "bg-destructive",
+  info: "bg-blue-500",
+  muted: "bg-muted-foreground",
+}
+
+function StatusLegend({
+  title,
+  description,
+  actions,
+  items,
+  orientation = "vertical",
+  compact = false,
+  showCounts = true,
+  contentClassName,
+  itemClassName,
+  className,
+  ...props
+}: StatusLegendProps) {
+  const visibleItems = items.filter((item) => !item.hidden)
+  const hasHeader = Boolean(title || description || actions)
+
+  return (
+    <Card
+      data-slot="status-legend"
+      className={cn(
+        "min-w-0 border-[color:var(--aui-surface-border)] bg-[color:color-mix(in_srgb,var(--aui-page-bg)_92%,white_8%)] shadow-sm dark:bg-[color:color-mix(in_srgb,var(--aui-page-bg)_96%,black_4%)]",
+        className
+      )}
+      {...props}
+    >
+      {hasHeader && (
+        <CardHeader className={cn("pb-3", compact && "p-4 pb-2")}>
+          <div className="flex min-w-0 items-start justify-between gap-3">
+            <div className="min-w-0 space-y-1">
+              {title && <CardTitle className="text-base tracking-tight">{title}</CardTitle>}
+              {description && <CardDescription className="leading-6">{description}</CardDescription>}
+            </div>
+            {actions && <div className="shrink-0">{actions}</div>}
+          </div>
+        </CardHeader>
+      )}
+
+      <CardContent
+        className={cn(
+          "gap-3",
+          orientation === "vertical" && "grid",
+          orientation === "horizontal" && "flex flex-wrap",
+          orientation === "grid" && "grid sm:grid-cols-2",
+          compact ? "p-4 pt-2" : "pt-0",
+          contentClassName
+        )}
+      >
+        {visibleItems.map((item) => (
+          <div
+            key={item.key}
+            data-slot="status-legend-item"
+            data-tone={item.tone ?? "default"}
+            className={cn(
+              "flex min-w-0 items-start justify-between gap-3 rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] p-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.35)] transition hover:border-[color:color-mix(in_srgb,var(--aui-brand-strong)_26%,var(--aui-surface-border))]",
+              compact && "p-2.5",
+              itemClassName,
+              item.className
+            )}
+          >
+            <div className="flex min-w-0 items-start gap-2">
+              {item.icon ? (
+                <span className="mt-0.5 inline-flex size-8 shrink-0 items-center justify-center rounded-xl bg-[color:var(--aui-page-bg)] text-muted-foreground [&_svg]:size-4">{item.icon}</span>
+              ) : (
+                <span className={cn("mt-1.5 size-2.5 shrink-0 rounded-full shadow-[0_0_0_4px_color-mix(in_srgb,var(--aui-page-bg)_72%,transparent)]", dotClassName[item.tone ?? "default"])} />
+              )}
+              <div className="min-w-0 space-y-0.5">
+                <div className="truncate text-sm font-medium text-foreground">{item.label}</div>
+                {item.description && <div className="text-xs leading-5 text-muted-foreground">{item.description}</div>}
+              </div>
+            </div>
+            {showCounts && item.count !== undefined && (
+              <Badge variant="secondary" className="shrink-0 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] px-2.5 py-1 shadow-sm">
+                {item.count}
+              </Badge>
+            )}
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export { StatusLegend }

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

@@ -0,0 +1,52 @@
+import * as React from "react"
+import { XIcon } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+export type TagListItem = {
+  key: string
+  label: React.ReactNode
+  variant?: React.ComponentProps<typeof Badge>["variant"]
+  disabled?: boolean
+}
+
+export type TagListProps = React.ComponentProps<"div"> & {
+  items: TagListItem[]
+  max?: number
+  removable?: boolean
+  onRemove?: (item: TagListItem) => void
+  overflowLabel?: (count: number) => React.ReactNode
+}
+
+function TagList({ items, max, removable = false, onRemove, overflowLabel = (count) => `+${count}`, className, ...props }: TagListProps) {
+  const visibleItems = typeof max === "number" ? items.slice(0, max) : items
+  const overflowCount = typeof max === "number" ? Math.max(items.length - max, 0) : 0
+
+  return (
+    <div data-slot="tag-list" className={cn("flex flex-wrap items-center gap-1.5", className)} {...props}>
+      {visibleItems.map((item) => (
+        <Badge
+          key={item.key}
+          variant={item.variant}
+          className={cn("gap-1", item.disabled && "opacity-55")}
+        >
+          <span>{item.label}</span>
+          {removable && !item.disabled && (
+            <button
+              type="button"
+              aria-label="Remove tag"
+              className="rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              onClick={() => onRemove?.(item)}
+            >
+              <XIcon className="size-3" />
+            </button>
+          )}
+        </Badge>
+      ))}
+      {overflowCount > 0 && <Badge variant="outline">{overflowLabel(overflowCount)}</Badge>}
+    </div>
+  )
+}
+
+export { TagList }