tembro 1.0.0

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

@@ -0,0 +1,50 @@
+import * as React from "react"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, type CardProps } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+export type KeyValueCardItem = {
+  key: string
+  label: React.ReactNode
+  value: React.ReactNode
+  description?: React.ReactNode
+}
+
+export type KeyValueCardProps = Omit<CardProps, "children"> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  items: KeyValueCardItem[]
+  columns?: 1 | 2
+}
+
+function KeyValueCard({ title, description, items, columns = 1, className, ...props }: KeyValueCardProps) {
+  return (
+    <Card data-slot="key-value-card" className={className} {...props}>
+      {(title || description) && (
+        <CardHeader>
+          {title && <CardTitle>{title}</CardTitle>}
+          {description && <CardDescription>{description}</CardDescription>}
+        </CardHeader>
+      )}
+      <CardContent>
+        <dl
+          className={cn(
+            "grid gap-3",
+            columns === 1 && "grid-cols-1",
+            columns === 2 && "grid-cols-1 sm:grid-cols-2"
+          )}
+        >
+          {items.map((item) => (
+            <div key={item.key} data-slot="key-value-card-item" className="min-w-0 rounded-lg border bg-muted/25 p-3">
+              <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{item.label}</dt>
+              <dd className="mt-1 break-words text-sm font-semibold text-foreground">{item.value}</dd>
+              {item.description && <dd className="mt-1 text-xs leading-5 text-muted-foreground">{item.description}</dd>}
+            </div>
+          ))}
+        </dl>
+      </CardContent>
+    </Card>
+  )
+}
+
+export { KeyValueCard }

package/packages/cli/vendor/src/components/display/keyboard-shortcut.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type KeyboardShortcutProps = React.ComponentProps<"kbd"> & {
+  keys?: React.ReactNode[]
+  separator?: React.ReactNode
+}
+
+function KeyboardShortcut({ keys, separator = "+", className, children, ...props }: KeyboardShortcutProps) {
+  const content = keys?.length
+    ? keys.map((key, index) => (
+        <React.Fragment key={index}>
+          {index > 0 && <span className="text-muted-foreground">{separator}</span>}
+          <span>{key}</span>
+        </React.Fragment>
+      ))
+    : children
+
+  return (
+    <kbd
+      data-slot="keyboard-shortcut"
+      className={cn("inline-flex items-center gap-1 rounded border bg-muted px-1.5 py-0.5 font-mono text-[11px] font-medium text-muted-foreground", className)}
+      {...props}
+    >
+      {content}
+    </kbd>
+  )
+}
+
+export { KeyboardShortcut }

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

@@ -0,0 +1,100 @@
+import * as React from "react"
+import { ChevronRightIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type ListItem = {
+  key: string
+  title: React.ReactNode
+  description?: React.ReactNode
+  avatar?: React.ReactNode
+  extra?: React.ReactNode
+  href?: string
+  disabled?: boolean
+  onClick?: () => void
+}
+
+export type ListProps = React.ComponentProps<"div"> & {
+  items?: ListItem[]
+  bordered?: boolean
+  split?: boolean
+  size?: "sm" | "md" | "lg"
+  renderItem?: (item: ListItem, index: number) => React.ReactNode
+}
+
+const itemPadding = {
+  sm: "px-3 py-2",
+  md: "px-4 py-3",
+  lg: "px-5 py-4",
+}
+
+function List({ items, bordered = true, split = true, size = "md", renderItem, className, children, ...props }: ListProps) {
+  return (
+    <div
+      data-slot="list"
+      className={cn("overflow-hidden bg-card", bordered && "rounded-lg border", className)}
+      {...props}
+    >
+      {items?.map((item, index) => renderItem?.(item, index) ?? <ListRow key={item.key} item={item} split={split} size={size} />)}
+      {children}
+    </div>
+  )
+}
+
+export type ListRowProps = React.ComponentProps<"div"> & {
+  item: ListItem
+  split?: boolean
+  size?: "sm" | "md" | "lg"
+}
+
+function ListRow({ item, split = true, size = "md", className, ...props }: ListRowProps) {
+  const clickable = Boolean(item.href || item.onClick)
+  const content = (
+    <>
+      {item.avatar && <div className="shrink-0">{item.avatar}</div>}
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-sm font-medium text-foreground">{item.title}</div>
+        {item.description && <div className="mt-0.5 line-clamp-2 text-sm text-muted-foreground">{item.description}</div>}
+      </div>
+      {item.extra && <div className="shrink-0 text-sm text-muted-foreground">{item.extra}</div>}
+      {clickable && <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground" />}
+    </>
+  )
+
+  const rowClassName = cn(
+    "flex items-center gap-3 bg-card transition-colors",
+    itemPadding[size],
+    split && "border-b last:border-b-0",
+    clickable && !item.disabled && "cursor-pointer hover:bg-muted/50",
+    item.disabled && "pointer-events-none opacity-55",
+    className
+  )
+
+  if (item.href) {
+    return (
+      <a
+        data-slot="list-row"
+        href={item.href}
+        className={rowClassName}
+        {...(props as React.ComponentProps<"a">)}
+      >
+        {content}
+      </a>
+    )
+  }
+
+  return (
+    <div
+      data-slot="list-row"
+      role={clickable ? "button" : undefined}
+      tabIndex={clickable && !item.disabled ? 0 : undefined}
+      className={rowClassName}
+      onClick={item.onClick}
+      {...(props as React.ComponentProps<"div">)}
+    >
+      {content}
+    </div>
+  )
+}
+
+export { List, ListRow }

package/packages/cli/vendor/src/components/display/metric-grid.tsx

@@ -0,0 +1,86 @@
+import * as React from "react"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+export type MetricTone = "default" | "success" | "warning" | "danger" | "info" | "muted"
+export type MetricGridColumn = 1 | 2 | 3 | 4
+
+export type MetricItem = {
+  key: string
+  label: React.ReactNode
+  value: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  trend?: React.ReactNode
+  tone?: MetricTone
+  hidden?: boolean
+  className?: string
+}
+
+export type MetricGridProps = React.ComponentProps<"div"> & {
+  items: MetricItem[]
+  columns?: MetricGridColumn
+  compact?: boolean
+  itemClassName?: string
+}
+
+const columnsClassName: Record<MetricGridColumn, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4",
+}
+
+const toneClassName: Record<MetricTone, string> = {
+  default: "",
+  success: "border-emerald-500/20 bg-emerald-500/5",
+  warning: "border-amber-500/20 bg-amber-500/5",
+  danger: "border-destructive/20 bg-destructive/5",
+  info: "border-blue-500/20 bg-blue-500/5",
+  muted: "bg-muted/40",
+}
+
+function MetricGrid({
+  className,
+  items,
+  columns = 4,
+  compact = false,
+  itemClassName,
+  ...props
+}: MetricGridProps) {
+  const visibleItems = items.filter((item) => !item.hidden)
+
+  return (
+    <div
+      data-slot="metric-grid"
+      className={cn("grid gap-3", columnsClassName[columns], className)}
+      {...props}
+    >
+      {visibleItems.map((item) => (
+        <Card
+          key={item.key}
+          data-slot="stat-card"
+          data-tone={item.tone ?? "default"}
+          className={cn("min-w-0 overflow-hidden", toneClassName[item.tone ?? "default"], itemClassName, item.className)}
+        >
+          <CardHeader className={cn("flex flex-row items-start justify-between gap-3 space-y-0", compact ? "p-3 pb-1" : "pb-2")}>
+            <div className="min-w-0 space-y-1">
+              <CardDescription className="truncate">{item.label}</CardDescription>
+              <CardTitle className={cn("truncate", compact ? "text-xl" : "text-2xl")}>{item.value}</CardTitle>
+            </div>
+            {item.icon && <div className="shrink-0 rounded-lg bg-muted p-2 text-muted-foreground [&_svg]:size-4">{item.icon}</div>}
+          </CardHeader>
+          {(item.description || item.trend) && (
+            <CardContent className={cn("flex min-w-0 items-center justify-between gap-2", compact ? "p-3 pt-1" : "pt-0")}>
+              {item.description && <div className="min-w-0 truncate text-xs text-muted-foreground">{item.description}</div>}
+              {item.trend && <div className="shrink-0 text-xs font-medium">{item.trend}</div>}
+            </CardContent>
+          )}
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+export { MetricGrid }

package/packages/cli/vendor/src/components/display/progress-circle.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type ProgressCircleProps = React.ComponentProps<"div"> & {
+  value?: number
+  max?: number
+  label?: React.ReactNode
+}
+
+function ProgressCircle({ value = 0, max = 100, label, className, ...props }: ProgressCircleProps) {
+  const percent = max > 0 ? Math.max(0, Math.min(100, Math.round((value / max) * 100))) : 0
+
+  return (
+    <div data-slot="progress-circle" className={cn("inline-flex items-center gap-3", className)} {...props}>
+      <span className="inline-flex size-14 items-center justify-center rounded-full border-4 border-muted bg-background text-xs font-semibold text-foreground">
+        {percent}%
+      </span>
+      {label ? <span className="text-sm text-muted-foreground">{label}</span> : null}
+    </div>
+  )
+}
+
+export { ProgressCircle }

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

@@ -0,0 +1,162 @@
+import * as React from "react"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+export type ProgressTone = "default" | "success" | "info" | "warning" | "danger" | "muted"
+export type ProgressSize = "sm" | "default" | "lg"
+
+export type ProgressProps = Omit<React.ComponentProps<"div">, "children"> & {
+  value?: number | null
+  max?: number
+  min?: number
+  label?: React.ReactNode
+  description?: React.ReactNode
+  showValue?: boolean
+  valueFormatter?: (value: number, percent: number) => React.ReactNode
+  tone?: ProgressTone
+  size?: ProgressSize
+  indeterminate?: boolean
+  trackClassName?: string
+  indicatorClassName?: string
+}
+
+export type ProgressCardProps = React.ComponentProps<typeof Card> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  value?: number | null
+  max?: number
+  min?: number
+  tone?: ProgressTone
+  size?: ProgressSize
+  showValue?: boolean
+  valueFormatter?: ProgressProps["valueFormatter"]
+  footer?: React.ReactNode
+  progressClassName?: string
+}
+
+const toneClassName: Record<ProgressTone, string> = {
+  default: "bg-primary",
+  success: "bg-emerald-500",
+  info: "bg-blue-500",
+  warning: "bg-amber-500",
+  danger: "bg-destructive",
+  muted: "bg-muted-foreground",
+}
+
+const sizeClassName: Record<ProgressSize, string> = {
+  sm: "h-1.5",
+  default: "h-2",
+  lg: "h-3",
+}
+
+function clampValue(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max)
+}
+
+function getProgressPercent(value: number | null | undefined, min: number, max: number) {
+  if (value === null || value === undefined || !Number.isFinite(value)) return 0
+  if (max <= min) return 0
+
+  return ((clampValue(value, min, max) - min) / (max - min)) * 100
+}
+
+function Progress({
+  value = 0,
+  min = 0,
+  max = 100,
+  label,
+  description,
+  showValue = false,
+  valueFormatter,
+  tone = "default",
+  size = "default",
+  indeterminate = false,
+  className,
+  trackClassName,
+  indicatorClassName,
+  ...props
+}: ProgressProps) {
+  const percent = getProgressPercent(value, min, max)
+  const resolvedValue = value ?? min
+
+  return (
+    <div data-slot="progress" className={cn("grid gap-1.5", className)} {...props}>
+      {(label || description || showValue) && (
+        <div className="flex min-w-0 items-start justify-between gap-3 text-sm">
+          <div className="min-w-0 space-y-0.5">
+            {label && <div className="font-medium leading-none">{label}</div>}
+            {description && <div className="text-xs text-muted-foreground">{description}</div>}
+          </div>
+          {showValue && (
+            <div className="shrink-0 text-xs font-medium text-muted-foreground">
+              {valueFormatter ? valueFormatter(resolvedValue, percent) : `${Math.round(percent)}%`}
+            </div>
+          )}
+        </div>
+      )}
+      <div
+        data-slot="progress-track"
+        className={cn("w-full overflow-hidden rounded-full bg-muted", sizeClassName[size], trackClassName)}
+        role="progressbar"
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={indeterminate ? undefined : resolvedValue}
+        aria-label={typeof label === "string" ? label : undefined}
+      >
+        <div
+          data-slot="progress-indicator"
+          data-indeterminate={indeterminate || undefined}
+          className={cn(
+            "h-full rounded-full transition-all data-[indeterminate=true]:w-1/3 data-[indeterminate=true]:animate-pulse",
+            toneClassName[tone],
+            indicatorClassName
+          )}
+          style={indeterminate ? undefined : { width: `${percent}%` }}
+        />
+      </div>
+    </div>
+  )
+}
+
+function ProgressCard({
+  title,
+  description,
+  value,
+  min,
+  max,
+  tone,
+  size,
+  showValue = true,
+  valueFormatter,
+  footer,
+  progressClassName,
+  className,
+  ...props
+}: ProgressCardProps) {
+  return (
+    <Card data-slot="progress-card" className={cn("min-w-0", className)} {...props}>
+      <CardHeader>
+        <div className="min-w-0 space-y-1">
+          {title && <CardTitle>{title}</CardTitle>}
+          {description && <CardDescription>{description}</CardDescription>}
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <Progress
+          value={value}
+          min={min}
+          max={max}
+          tone={tone}
+          size={size}
+          showValue={showValue}
+          valueFormatter={valueFormatter}
+          className={progressClassName}
+        />
+        {footer}
+      </CardContent>
+    </Card>
+  )
+}
+
+export { Progress, ProgressCard, getProgressPercent }

package/packages/cli/vendor/src/components/display/property-grid.tsx

@@ -0,0 +1,54 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type PropertyGridItem = {
+  key: string
+  label: React.ReactNode
+  value: React.ReactNode
+  description?: React.ReactNode
+  span?: 1 | 2 | 3 | 4
+}
+
+export type PropertyGridProps = React.ComponentProps<"div"> & {
+  items: PropertyGridItem[]
+  columns?: 1 | 2 | 3 | 4
+  bordered?: boolean
+}
+
+function PropertyGrid({ items, columns = 3, bordered = true, className, ...props }: PropertyGridProps) {
+  return (
+    <div
+      data-slot="property-grid"
+      className={cn(
+        "grid gap-3",
+        columns === 1 && "grid-cols-1",
+        columns === 2 && "grid-cols-1 sm:grid-cols-2",
+        columns === 3 && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+        columns === 4 && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+        className
+      )}
+      {...props}
+    >
+      {items.map((item) => (
+        <div
+          key={item.key}
+          data-slot="property-grid-item"
+          className={cn(
+            "min-w-0 rounded-lg bg-card p-3",
+            bordered && "border",
+            item.span === 2 && "sm:col-span-2",
+            item.span === 3 && "lg:col-span-3",
+            item.span === 4 && "lg:col-span-4"
+          )}
+        >
+          <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{item.label}</div>
+          <div className="mt-1 break-words text-sm font-medium text-foreground">{item.value}</div>
+          {item.description && <div className="mt-1 text-xs text-muted-foreground">{item.description}</div>}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export { PropertyGrid }

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

@@ -0,0 +1,70 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type QRCodeProps = React.ComponentProps<"div"> & {
+  value: string
+  src?: string
+  alt?: string
+  size?: number
+  cells?: number
+}
+
+function hashValue(value: string) {
+  let hash = 2166136261
+  for (let index = 0; index < value.length; index += 1) {
+    hash ^= value.charCodeAt(index)
+    hash = Math.imul(hash, 16777619)
+  }
+  return hash >>> 0
+}
+
+function shouldFillCell(row: number, col: number, seed: number) {
+  const finder = (row < 7 && col < 7) || (row < 7 && col > 20) || (row > 20 && col < 7)
+  if (finder) return false
+  const mixed = Math.imul(row + 17, 73856093) ^ Math.imul(col + 31, 19349663) ^ seed
+  return (mixed >>> 0) % 5 < 2
+}
+
+function FinderPattern({ x, y }: { x: number; y: number }) {
+  return (
+    <g>
+      <rect x={x} y={y} width="7" height="7" fill="currentColor" />
+      <rect x={x + 1} y={y + 1} width="5" height="5" fill="white" />
+      <rect x={x + 2} y={y + 2} width="3" height="3" fill="currentColor" />
+    </g>
+  )
+}
+
+function QRCodeSvg({ value, cells = 29, title }: { value: string; cells?: number; title?: string }) {
+  const seed = hashValue(value)
+  const viewBox = `0 0 ${cells} ${cells}`
+  const rows = Array.from({ length: cells }, (_, row) => row)
+  const cols = Array.from({ length: cells }, (_, col) => col)
+
+  return (
+    <svg role="img" aria-label={title ?? value} viewBox={viewBox} className="size-full text-foreground" shapeRendering="crispEdges">
+      <rect width={cells} height={cells} fill="white" />
+      <FinderPattern x={0} y={0} />
+      <FinderPattern x={cells - 7} y={0} />
+      <FinderPattern x={0} y={cells - 7} />
+      {rows.map((row) => cols.map((col) => shouldFillCell(row, col, seed) ? <rect key={`${row}-${col}`} x={col} y={row} width="1" height="1" fill="currentColor" /> : null))}
+    </svg>
+  )
+}
+
+function QRCode({ value, src, alt, size = 160, cells = 29, className, ...props }: QRCodeProps) {
+  return (
+    <div data-slot="qr-code" className={cn("inline-flex flex-col items-center gap-2 rounded-xl border bg-background p-3", className)} {...props}>
+      <div className="rounded-md bg-white p-2" style={{ width: size, height: size }}>
+        {src ? (
+          <img src={src} alt={alt ?? value} width={size} height={size} className="size-full rounded-sm object-contain" />
+        ) : (
+          <QRCodeSvg value={value} cells={cells} title={alt} />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export { QRCode, QRCodeSvg }

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

@@ -0,0 +1,90 @@
+import * as React from "react"
+import { AlertCircleIcon, CheckCircle2Icon, InfoIcon, ShieldAlertIcon, TriangleAlertIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type ResultStatus = "success" | "error" | "warning" | "info" | "not-found" | "forbidden" | "server-error"
+
+export type ResultProps = React.ComponentProps<"div"> & {
+  status?: ResultStatus
+  icon?: React.ReactNode
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
+  extra?: React.ReactNode
+  compact?: boolean
+  iconClassName?: string
+  titleClassName?: string
+  descriptionClassName?: string
+}
+
+const statusIcon: Record<ResultStatus, React.ReactNode> = {
+  success: <CheckCircle2Icon className="size-8" />,
+  error: <AlertCircleIcon className="size-8" />,
+  warning: <TriangleAlertIcon className="size-8" />,
+  info: <InfoIcon className="size-8" />,
+  "not-found": <InfoIcon className="size-8" />,
+  forbidden: <ShieldAlertIcon className="size-8" />,
+  "server-error": <AlertCircleIcon className="size-8" />,
+}
+
+const statusClassName: Record<ResultStatus, string> = {
+  success: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+  error: "bg-destructive/10 text-destructive",
+  warning: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+  info: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+  "not-found": "bg-muted text-muted-foreground",
+  forbidden: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+  "server-error": "bg-destructive/10 text-destructive",
+}
+
+const defaultTitle: Record<ResultStatus, React.ReactNode> = {
+  success: "Success",
+  error: "Something went wrong",
+  warning: "Check this action",
+  info: "Information",
+  "not-found": "Page not found",
+  forbidden: "Access forbidden",
+  "server-error": "Server error",
+}
+
+function Result({
+  status = "info",
+  icon,
+  title,
+  description,
+  actions,
+  extra,
+  compact = false,
+  iconClassName,
+  titleClassName,
+  descriptionClassName,
+  className,
+  ...props
+}: ResultProps) {
+  return (
+    <div
+      data-slot="result"
+      data-status={status}
+      className={cn("flex flex-col items-center justify-center text-center", compact ? "gap-3 p-4" : "gap-4 p-8", className)}
+      {...props}
+    >
+      <div className={cn("flex items-center justify-center rounded-full", compact ? "size-12" : "size-16", statusClassName[status], iconClassName)}>
+        {icon ?? statusIcon[status]}
+      </div>
+      <div className="max-w-lg space-y-2">
+        <h3 className={cn("font-semibold tracking-tight", compact ? "text-base" : "text-2xl", titleClassName)}>{title ?? defaultTitle[status]}</h3>
+        {description && <p className={cn("text-sm leading-6 text-muted-foreground", descriptionClassName)}>{description}</p>}
+      </div>
+      {actions && <div className="flex flex-wrap justify-center gap-2">{actions}</div>}
+      {extra && <div className="w-full max-w-2xl">{extra}</div>}
+    </div>
+  )
+}
+
+function ResultAction({ className, ...props }: React.ComponentProps<typeof Button>) {
+  return <Button className={cn("min-w-28", className)} {...props} />
+}
+
+export { Result, ResultAction }