tembro 2.0.4 → 2.0.6

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

@@ -3,31 +3,63 @@ 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 type CodeBlockProps = React.ComponentProps<"div"> & {
+  code: string
+  language?: string
+  title?: React.ReactNode
+  showCopy?: boolean
+  wrap?: boolean
+  lineNumbers?: boolean
+  maxHeight?: number | string
+}
+
+function CodeBlock({
+  code,
+  language,
+  title,
+  showCopy = true,
+  wrap = false,
+  lineNumbers = false,
+  maxHeight,
+  className,
+  ...props
+}: CodeBlockProps) {
+  const lines = React.useMemo(() => code.split("\n"), [code])
+
+  return (
+    <div
+      data-slot="code-block"
+      className={cn("overflow-hidden rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card", className)}
+      {...props}
+    >
+      {(title || language || showCopy) && (
+        <div className="flex items-center justify-between gap-3 border-b border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_72%)] 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 leading-6", wrap && "whitespace-pre-wrap break-words")}
+        style={maxHeight ? { maxHeight, overflowY: "auto" } : undefined}
+      >
+        {lineNumbers ? (
+          <code className="grid">
+            {lines.map((line, index) => (
+              <span key={`${index}-${line}`} className="grid grid-cols-[auto_1fr] gap-4">
+                <span className="select-none text-right text-xs text-muted-foreground/75">{index + 1}</span>
+                <span>{line || " "}</span>
+              </span>
+            ))}
+          </code>
+        ) : (
+          <code>{code}</code>
+        )}
+      </pre>
+    </div>
+  )
+}
 
 export { CodeBlock }

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

@@ -1,8 +1,6 @@
 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"
+import { StatCard } from "@/components/layout/stat-card"
 
 export type ComparisonCardItem = {
   label: React.ReactNode
@@ -11,50 +9,26 @@ export type ComparisonCardItem = {
   trend?: "up" | "down" | "neutral"
 }
 
-export type ComparisonCardProps = React.ComponentProps<typeof Card> & {
+export type ComparisonCardProps = Omit<React.ComponentProps<typeof StatCard>, "comparisonItems" | "comparisonColumns"> & {
   title?: React.ReactNode
   items: ComparisonCardItem[]
   columns?: 2 | 3 | 4
 }
 
-function ComparisonCard({
-  title,
-  items,
-  columns = 2,
-  className,
-  ...props
-}: ComparisonCardProps) {
+function ComparisonCard({ title, items, columns = 2, ...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>
+    <StatCard
+      data-slot="comparison-card"
+      title={title}
+      comparisonColumns={columns}
+      comparisonItems={items.map((item) => ({
+        label: item.label,
+        value: item.value,
+        change: item.change,
+        trend: item.trend === "up" ? "success" : item.trend === "down" ? "danger" : "neutral",
+      }))}
+      {...props}
+    />
   )
 }
 

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

@@ -1,75 +1,144 @@
 import * as React from "react"
-import { AlertTriangleIcon, CheckCircle2Icon, Loader2Icon, SearchXIcon } from "lucide-react"
+import { AlertTriangleIcon, CheckCircle2Icon, Loader2Icon, SearchXIcon, XIcon } 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 DataStateStatus = "idle" | "loading" | "empty" | "error" | "success"
+export type DataStateVariant = "card" | "plain" | "inline"
+export type DataStateTone = "default" | "muted" | "success" | "warning" | "danger" | "info"
 
-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
-}
+export type DataStateProps = Omit<React.ComponentProps<typeof Card>, "content" | "title" | "description" | "variant" | "tone"> & {
+  status: DataStateStatus
+  title?: React.ReactNode
+  description?: React.ReactNode
+  badge?: React.ReactNode
+  actions?: React.ReactNode
+  footer?: React.ReactNode
+  icon?: React.ReactNode
+  tone?: DataStateTone
+  variant?: DataStateVariant
+  compact?: boolean
+  align?: "start" | "center"
+  query?: React.ReactNode
+  children?: React.ReactNode
+  retryLabel?: React.ReactNode
+  onRetry?: () => void
+  clearLabel?: React.ReactNode
+  onClear?: () => void
+}
 
-const defaultContent: Record<DataStateStatus, { title: string; description: string; icon: React.ReactNode }> = {
+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 /> },
-}
+}
+
+const toneClassName: Record<DataStateTone, string> = {
+  default: "text-muted-foreground",
+  muted: "text-muted-foreground",
+  success: "text-emerald-600 dark:text-emerald-400",
+  warning: "text-amber-600 dark:text-amber-400",
+  danger: "text-destructive",
+  info: "text-blue-600 dark:text-blue-400",
+}
 
 function DataState({
   status,
-  title,
-  description,
-  actions,
-  icon,
-  compact = false,
-  children,
-  retryLabel = "Retry",
-  onRetry,
-  className,
-  ...props
-}: DataStateProps) {
-  const content = defaultContent[status]
-
+  title,
+  description,
+  badge,
+  actions,
+  footer,
+  icon,
+  tone,
+  variant = "card",
+  compact = false,
+  align = "center",
+  query,
+  children,
+  retryLabel = "Retry",
+  onRetry,
+  clearLabel = "Clear",
+  onClear,
+  className,
+  ...props
+}: DataStateProps) {
+  const content = defaultContent[status]
+  const resolvedTone = tone ?? (status === "error" ? "danger" : status === "success" ? "success" : "default")
+  const isPlain = variant === "plain" || variant === "inline"
+  const body = (
+    <div
+      className={cn(
+        "flex flex-col justify-center",
+        align === "center" ? "items-center text-center" : "items-start text-left",
+        compact || variant === "inline" ? "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 shadow-[0_1px_0_rgba(255,255,255,0.05)] [&_svg]:size-5",
+          toneClassName[resolvedTone],
+          compact || variant === "inline" ? "size-9" : "size-12"
+        )}
+      >
+        {icon ?? content.icon}
+      </div>
+      <div className={cn("flex flex-wrap items-center gap-2", align === "center" ? "justify-center" : "justify-start")}>
+        <div className={cn("font-semibold tracking-tight text-foreground", compact ? "text-sm" : "text-base")}>{title ?? content.title}</div>
+        {badge}
+      </div>
+      <p className="mt-1 max-w-md text-sm text-muted-foreground">{description ?? content.description}</p>
+      {query && (
+        <div className="mt-3 max-w-full rounded-md border border-border/70 bg-muted/45 px-2.5 py-1 text-sm text-muted-foreground">
+          {query}
+        </div>
+      )}
+      {children && <div className="mt-4 w-full">{children}</div>}
+      {(actions || onRetry || onClear) && (
+        <div className={cn("mt-4 flex flex-wrap gap-2", align === "center" ? "justify-center" : "justify-start")}>
+          {onRetry && <Button size="sm" variant={status === "error" ? "default" : "outline"} onClick={onRetry}>{retryLabel}</Button>}
+          {onClear && (
+            <Button size="sm" variant="ghost" onClick={onClear}>
+              <XIcon data-icon="inline-start" />
+              {clearLabel}
+            </Button>
+          )}
+          {actions}
+        </div>
+      )}
+      {footer ? <div className="mt-4 w-full">{footer}</div> : null}
+    </div>
+  )
+
+  if (isPlain) {
+    return (
+      <div
+        data-slot="data-state"
+        data-status={status}
+        data-variant={variant}
+        className={cn(variant === "inline" ? "rounded-lg border border-border/70 bg-muted/20" : "min-w-0", className)}
+        {...props}
+      >
+        {body}
+      </div>
+    )
+  }
+
   return (
     <Card
       data-slot="data-state"
       data-status={status}
+      data-variant={variant}
       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>
-  )
-}
+      <CardContent className="p-0">{body}</CardContent>
+    </Card>
+  )
+}
 
 export { DataState }

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

@@ -8,12 +8,8 @@ export const displayShowcaseDemoRegistry = createShowcaseDemoRegistry([
   component("status-dot", "StatusDot", "display", "Tiny live status indicator with optional pulse animation."),
   component("user-card", "UserCard", "display", "User summary row with avatar, metadata and actions."),
   component("delta-badge", "DeltaBadge", "display", "Compact positive, negative, and risk deltas for metric summaries."),
-  component("entity-header", "EntityHeader", "display", "Top summary row for a customer, invoice, or workspace."),
   component("notification-center", "NotificationCenter", "display", "Compact activity and notifications stream."),
-  component("entity-card", "EntityCard", "display", "Structured summary card with title, meta, state and actions."),
-  component("file-card", "FileCard", "display", "Compact file summary with state and actions."),
   component("data-list", "DataList", "display", "Readable title and description rows for compact operational lists."),
   component("status-legend", "StatusLegend", "display", "Explain status meaning and counts in a compact legend."),
   component("trend-card", "TrendCard", "display", "Metric summary card with trend context."),
-  component("comparison-card", "ComparisonCard", "display", "Compare current and previous values in one compact card."),
 ])

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

@@ -2,13 +2,10 @@ export * from "./description-list"
 export * from "./data-list"
 export * from "./activity-feed"
 export * from "./avatar"
-export * from "./entity-header"
 export * from "./descriptions"
 export * from "./kanban"
 export * from "./code-block"
 export * from "./data-state"
-export * from "./entity-card"
-export * from "./file-card"
 export * from "./list"
 export * from "./metric-grid"
 export * from "./progress"

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

@@ -38,7 +38,7 @@ export type InfoCardRenderContext = {
   footer?: React.ReactNode
 }
 
-export type InfoCardProps = Omit<React.ComponentProps<typeof Card>, "title" | "content" | "size"> & InfoCardRenderContext & {
+export type InfoCardProps = Omit<React.ComponentProps<typeof Card>, "title" | "content" | "size" | "orientation"> & InfoCardRenderContext & {
   orientation?: InfoCardOrientation
   variant?: InfoCardVariant
   size?: InfoCardSize

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

@@ -18,7 +18,7 @@ export type StatusLegendItem = {
   className?: string
 }
 
-export type StatusLegendProps = React.ComponentProps<typeof Card> & {
+export type StatusLegendProps = Omit<React.ComponentProps<typeof Card>, "orientation"> & {
   title?: React.ReactNode
   description?: React.ReactNode
   actions?: React.ReactNode

package/packages/cli/vendor/src/components/feedback/alert.tsx

@@ -5,21 +5,46 @@ import { cn } from "@/lib/utils"
 
 export type AlertTone = "info" | "success" | "warning" | "destructive" | "muted"
 
-export type AlertProps = React.ComponentProps<"div"> & {
-  tone?: AlertTone
-  title?: React.ReactNode
-  description?: React.ReactNode
-  icon?: React.ReactNode
-  action?: React.ReactNode
-}
-
-const alertToneClassName: Record<AlertTone, string> = {
-  info: "border-primary/25 bg-primary/5 text-foreground",
-  success: "border-emerald-500/25 bg-emerald-500/10 text-foreground",
-  warning: "border-amber-500/30 bg-amber-500/10 text-foreground",
-  destructive: "border-destructive/30 bg-destructive/10 text-foreground",
-  muted: "border-border bg-muted/50 text-foreground",
-}
+export type AlertProps = React.ComponentProps<"div"> & {
+  tone?: AlertTone
+  variant?: "soft" | "outline" | "solid"
+  size?: "sm" | "md"
+  title?: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  action?: React.ReactNode
+  dismissible?: boolean
+  dismissLabel?: string
+  onDismiss?: () => void
+}
+
+const alertToneClassName: Record<AlertTone, Record<NonNullable<AlertProps["variant"]>, string>> = {
+  info: {
+    soft: "border-primary/25 bg-primary/5 text-foreground",
+    outline: "border-primary/35 bg-background text-foreground",
+    solid: "border-primary bg-primary text-primary-foreground",
+  },
+  success: {
+    soft: "border-emerald-500/25 bg-emerald-500/10 text-foreground",
+    outline: "border-emerald-500/35 bg-background text-foreground",
+    solid: "border-emerald-600 bg-emerald-600 text-white",
+  },
+  warning: {
+    soft: "border-amber-500/30 bg-amber-500/10 text-foreground",
+    outline: "border-amber-500/35 bg-background text-foreground",
+    solid: "border-amber-500 bg-amber-500 text-amber-950",
+  },
+  destructive: {
+    soft: "border-destructive/30 bg-destructive/10 text-foreground",
+    outline: "border-destructive/35 bg-background text-foreground",
+    solid: "border-destructive bg-destructive text-destructive-foreground",
+  },
+  muted: {
+    soft: "border-border bg-muted/50 text-foreground",
+    outline: "border-border bg-background text-foreground",
+    solid: "border-border bg-foreground text-background",
+  },
+}
 
 const alertIconClassName: Record<AlertTone, string> = {
   info: "text-primary",
@@ -42,14 +67,29 @@ function defaultIcon(tone: AlertTone) {
   }
 }
 
-function Alert({ tone = "info", title, description, icon, action, className, children, ...props }: AlertProps) {
+function Alert({
+  tone = "info",
+  variant = "soft",
+  size = "md",
+  title,
+  description,
+  icon,
+  action,
+  dismissible = false,
+  dismissLabel = "Dismiss alert",
+  onDismiss,
+  className,
+  children,
+  ...props
+}: AlertProps) {
   return (
     <div
       data-slot="alert"
+      data-size={size}
       role={tone === "destructive" || tone === "warning" ? "alert" : "status"}
       className={cn(
-        "flex gap-3 rounded-[var(--radius-2xl)] border p-4 text-sm shadow-[0_1px_0_rgba(255,255,255,0.05)]",
-        alertToneClassName[tone],
+        "flex gap-3 rounded-[var(--aui-card-radius,var(--radius-xl))] border p-4 text-sm shadow-[var(--aui-card-shadow,var(--aui-control-shadow,0_1px_0_rgba(255,255,255,0.05)))] data-[size=sm]:p-3",
+        alertToneClassName[tone][variant],
         className
       )}
       {...props}
@@ -58,22 +98,40 @@ function Alert({ tone = "info", title, description, icon, action, className, chi
         data-slot="alert-icon"
         className={cn(
           "mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full border border-current/10 bg-background/55",
+          variant === "solid" && "bg-white/12 text-current",
           alertIconClassName[tone]
         )}
       >
         {icon ?? defaultIcon(tone)}
       </div>
       <div className="min-w-0 flex-1 space-y-1">
-        {title && <div data-slot="alert-title" className="font-medium leading-none">{title}</div>}
-        {(description || children) && (
-          <div data-slot="alert-description" className="text-muted-foreground">
-            {description ?? children}
-          </div>
-        )}
+        {title && <div data-slot="alert-title" className="font-medium leading-none">{title}</div>}
+        {(description || children) && (
+          <div data-slot="alert-description" className={cn("text-muted-foreground", variant === "solid" && "text-current/88")}>
+            {description ?? children}
+          </div>
+        )}
       </div>
-      {action && <div data-slot="alert-action" className="shrink-0">{action}</div>}
-    </div>
-  )
-}
+      {(action || dismissible) ? (
+        <div data-slot="alert-action" className="flex shrink-0 items-start gap-2">
+          {action}
+          {dismissible ? (
+            <button
+              type="button"
+              aria-label={dismissLabel}
+              className={cn(
+                "inline-flex size-8 items-center justify-center rounded-full border border-current/10 bg-background/45 text-current transition-opacity hover:opacity-90",
+                variant === "solid" && "bg-white/12"
+              )}
+              onClick={onDismiss}
+            >
+              <span aria-hidden="true">×</span>
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  )
+}
 
 export { Alert }

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

@@ -1,5 +1,3 @@
 export * from "./alert"
-export * from "./empty-state"
 export * from "./loading-state"
 export * from "./page-state"
-export * from "./empty-search-state"

package/packages/cli/vendor/src/components/filters/demo.tsx

@@ -2,6 +2,5 @@ import { component, createShowcaseDemoRegistry } from "@/showcase/create-demo"
 
 export const filtersShowcaseDemoRegistry = createShowcaseDemoRegistry([
   component("filter-bar", "FilterBar", "actions", "Search, filters, active-count and reset actions in one toolbar."),
-  component("filter-chips", "FilterChips", "actions", "Inline active filter summaries with clear and remove actions."),
   component("data-table-saved-filters", "SavedFilterSelect", "actions", "Saved filter chips and quick view controls."),
 ])