tembro 3.1.1 → 3.1.6

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

@@ -1,5 +1,4 @@
 export * from './action-menu'
 export * from './copy-button'
-export * from './copy-field'
 export * from './button-group'
 export * from './quick-action-grid'

package/packages/cli/vendor/src/components/actions/public.ts

@@ -1,5 +1,4 @@
 export * from "./action-menu"
 export * from "./button-group"
 export * from "./copy-button"
-export * from "./copy-field"
 export * from "./quick-action-grid"

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

@@ -1,4 +1,2 @@
-export * from './charts'
-export * from './kpi'
-export * from './progress-ring'
-export * from './horizontal-bar-chart'
+export * from './charts'
+export * from './progress-circle'

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

@@ -0,0 +1,7 @@
+import { ProgressRing, type ProgressRingProps } from "@/components/charts/progress-ring"
+
+export type ProgressCircleProps = ProgressRingProps
+
+const ProgressCircle = ProgressRing
+
+export { ProgressCircle }

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

@@ -1,32 +1,7 @@
 import { DataTableShowcase, dataTableMock } from "@/showcase/premium/data-table"
-import {
-  DataTablePartShowcase,
-  dataTableActionsColumnMock,
-  dataTablePaginationMock,
-  dataTableRowActionsMock,
-  dataTableSavedFiltersMock,
-  dataTableSelectColumnMock,
-  dataTableToolbarMock,
-} from "@/showcase/premium/data-table-parts"
 
 import type { ComponentDemoBundle } from "@/showcase/premium/types"
 
-function createPartBundle(
-  slug: "data-table-pagination" | "data-table-toolbar" | "data-table-row-actions" | "data-table-actions-column" | "data-table-select-column" | "data-table-saved-filters",
-  mock: ComponentDemoBundle["mock"]
-): ComponentDemoBundle {
-  return {
-    mock,
-    Showcase: (props) => <DataTablePartShowcase {...props} slug={slug} />,
-  }
-}
-
 export const dataTableShowcaseDemoRegistry: Record<string, ComponentDemoBundle> = {
   "data-table": { mock: dataTableMock, Showcase: DataTableShowcase },
-  "data-table-pagination": createPartBundle("data-table-pagination", dataTablePaginationMock),
-  "data-table-toolbar": createPartBundle("data-table-toolbar", dataTableToolbarMock),
-  "data-table-row-actions": createPartBundle("data-table-row-actions", dataTableRowActionsMock),
-  "data-table-actions-column": createPartBundle("data-table-actions-column", dataTableActionsColumnMock),
-  "data-table-select-column": createPartBundle("data-table-select-column", dataTableSelectColumnMock),
-  "data-table-saved-filters": createPartBundle("data-table-saved-filters", dataTableSavedFiltersMock),
 }

package/packages/cli/vendor/src/components/data-table/public.ts

@@ -1,6 +1 @@
 export * from "./data-table"
-export * from "./data-table-pagination"
-export * from "./data-table-bulk-actions"
-export * from "./data-table-column-visibility-menu"
-export * from "./data-table-sortable-header"
-export * from "./data-table-view-presets"

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

@@ -3,13 +3,8 @@ import { component, createShowcaseDemoRegistry } from "@/showcase/create-demo"
 export const displayShowcaseDemoRegistry = createShowcaseDemoRegistry([
   component("description-list", "DescriptionList", "display", "Structured key-value details for entity, invoice and profile pages."),
   component("progress", "Progress", "display", "Linear progress with label, value formatter, tone and indeterminate state."),
-  component("progress-circle", "ProgressCircle", "display", "Compact circular progress for sidebars and status cards."),
   component("timeline", "Timeline", "display", "Vertical or horizontal event stream for workflow history."),
   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("notification-center", "NotificationCenter", "display", "Compact activity and notifications stream."),
-  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."),
 ])

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

@@ -1,25 +1,19 @@
 export * from "./description-list"
-export * from "./data-list"
-export * from "./activity-feed"
+export * from "./activity-feed"
 export * from "./avatar"
-export * from "./descriptions"
 export * from "./kanban"
 export * from "./code-block"
 export * from "./data-state"
 export * from "./list"
-export * from "./metric-grid"
 export * from "./progress"
-export * from "./progress-circle"
-export * from "./property-grid"
-export * from "./result"
-export * from "./statistic"
-export * from "./status-dot"
-export * from "./status-legend"
-export * from "./timeline"
-export * from "./tree-view"
-export * from "./user-card"
-export * from "./trend-card"
-export * from "./comparison-card"
-export * from "./delta-badge"
-export * from "./info-card"
-export * from "./virtual-list"
+export * from "./statistic"
+export * from "./status-dot"
+export * from "./status-legend"
+export * from "./timeline"
+export * from "./tree-view"
+export * from "./info-card"
+export * from "./virtual-list"
+export * from "./qr-code"
+export * from "./carousel"
+export * from "./tag"
+export * from "./typography"

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

@@ -55,23 +55,23 @@ export type InfoCardProps = Omit<React.ComponentProps<typeof Card>, "title" | "c
   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 variantClassName: Record<InfoCardVariant, string> = {
+  default: "",
+  outline: "",
+  elevated: "",
+  ghost: "",
 }
 
 const densityClassName: Record<InfoCardDensity, string> = {
-  compact: "p-3",
-  default: "p-4",
-  comfortable: "p-5",
+  compact: "",
+  default: "",
+  comfortable: "",
 }
 
 const titleClassName: Record<InfoCardSize, string> = {
-  sm: "text-sm",
-  md: "text-base",
-  lg: "text-lg",
+  sm: "",
+  md: "",
+  lg: "",
 }
 
 function InfoCard({
@@ -113,12 +113,21 @@ function InfoCard({
       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",
+      data-loading={loading || undefined}
+      data-info-variant={variant}
+      data-info-size={size}
+      data-info-density={resolvedDensity}
+      data-orientation={orientation}
+      variant={variant}
+      size={size === "md" ? "default" : size}
+      density={resolvedDensity}
+      interactive={clickable}
+      selected={selected}
+      disabled={disabled}
+      className={cn(
+        "overflow-hidden",
+        variantClassName[variant],
+        orientation === "horizontal" && "flex",
         className,
         classNames?.root
       )}
@@ -126,7 +135,7 @@ function InfoCard({
       {...props}
     >
       {loading ? (
-        <div className={cn("grid gap-3", densityClassName[resolvedDensity])}>
+        <div data-slot="info-card-loading" className="grid gap-3">
           <Skeleton className="h-5 w-1/2" />
           <SkeletonText rows={3} />
         </div>
@@ -137,15 +146,14 @@ function InfoCard({
               <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",
+                  orientation === "horizontal" ? "w-40 shrink-0" : "aspect-video",
                   classNames?.media
                 )}
               >
                 {media}
               </div>
             ))}
-          <div data-slot="info-card-body" className={cn("grid min-w-0 flex-1 gap-3", densityClassName[resolvedDensity], classNames?.body)}>
+          <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">
@@ -153,7 +161,7 @@ function InfoCard({
                     <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)]",
+                        "flex shrink-0 items-center justify-center",
                         classNames?.icon
                       )}
                     >
@@ -161,12 +169,12 @@ function InfoCard({
                     </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>}
+                    {eyebrow && <div data-slot="info-card-eyebrow" className={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>}
+                      {title && <div data-slot="info-card-title" className={cn("truncate", 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>}
+                    {description && <div data-slot="info-card-description" className={cn("line-clamp-2", classNames?.description)}>{description}</div>}
                   </div>
                 </div>
                 {actions && (
@@ -182,9 +190,9 @@ function InfoCard({
                 )}
               </div>
             )}
-            {meta && <div data-slot="info-card-meta" className={cn("text-xs text-muted-foreground", classNames?.meta)}>{meta}</div>}
+            {meta && <div data-slot="info-card-meta" className={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>)}
+            {footer && (renderFooter?.(ctx) ?? <div data-slot="info-card-footer" className={classNames?.footer}>{footer}</div>)}
           </div>
         </>
       )}

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

@@ -0,0 +1,101 @@
+"use client"
+
+import * as React from "react"
+import type { QRCodeErrorCorrectionLevel } from "qrcode"
+
+import { cn } from "@/lib/utils"
+
+export type QRCodeProps = Omit<React.ComponentProps<"div">, "children"> & {
+  value: string
+  src?: string
+  alt?: string
+  size?: number
+  margin?: number
+  errorCorrectionLevel?: QRCodeErrorCorrectionLevel
+  foreground?: string
+  background?: string
+  loadingFallback?: React.ReactNode
+  errorFallback?: React.ReactNode
+  onError?: (error: Error) => void
+}
+
+function QRCode({
+  value,
+  src,
+  alt,
+  size = 160,
+  margin = 2,
+  errorCorrectionLevel = "M",
+  foreground = "#111827",
+  background = "#ffffff",
+  loadingFallback = "Generating QR code...",
+  errorFallback = "QR code could not be generated.",
+  onError,
+  className,
+  ...props
+}: QRCodeProps) {
+  const [svg, setSvg] = React.useState("")
+  const [error, setError] = React.useState<Error | null>(null)
+
+  React.useEffect(() => {
+    if (src) return
+    let active = true
+    setSvg("")
+    setError(null)
+
+    import("qrcode")
+      .then((module) => {
+        const moduleValue = module as typeof import("qrcode") & { default?: typeof import("qrcode") }
+        const encoder = moduleValue.default?.toString ? moduleValue.default : moduleValue
+        return encoder.toString(value, {
+          type: "svg",
+          width: size,
+          margin,
+          errorCorrectionLevel,
+          color: { dark: foreground, light: background },
+        })
+      })
+      .then((nextSvg) => {
+        if (active) setSvg(nextSvg)
+      })
+      .catch((reason: unknown) => {
+        if (!active) return
+        const nextError = reason instanceof Error ? reason : new Error("QR code generation failed")
+        setError(nextError)
+        onError?.(nextError)
+      })
+
+    return () => {
+      active = false
+    }
+  }, [background, errorCorrectionLevel, foreground, margin, onError, size, src, value])
+
+  return (
+    <div
+      data-slot="qr-code"
+      data-state={error ? "error" : src || svg ? "ready" : "loading"}
+      className={cn("inline-grid place-items-center", className)}
+      style={{ width: size, height: size }}
+      {...props}
+    >
+      {src ? (
+        <img src={src} alt={alt ?? value} width={size} height={size} className="size-full object-contain" />
+      ) : error ? (
+        <div role="alert" className="p-3 text-center text-xs text-destructive">{errorFallback}</div>
+      ) : svg ? (
+        <div
+          role="img"
+          aria-label={alt ?? `QR code for ${value}`}
+          className="size-full [&>svg]:size-full"
+          dangerouslySetInnerHTML={{ __html: svg }}
+        />
+      ) : (
+        <div role="status" className="p-3 text-center text-xs text-muted-foreground">{loadingFallback}</div>
+      )}
+    </div>
+  )
+}
+
+const QRCodeSvg = QRCode
+
+export { QRCode, QRCodeSvg }

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

@@ -21,24 +21,26 @@ function Statistic({ label, value, prefix, suffix, description, trend = "neutral
   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">
+    <div data-slot="statistic" data-loading={loading || undefined} data-trend={trend} aria-busy={loading || undefined} className={cn("grid gap-1", className)} {...props}>
+      <div data-slot="statistic-label" className="text-sm text-muted-foreground">{label}</div>
+      <div data-slot="statistic-value-row" className="flex flex-wrap items-baseline gap-1.5">
         {loading ? (
-          <div className="h-8 w-28 animate-pulse rounded-md bg-muted" />
+          <div data-slot="statistic-skeleton" 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>}
+            {prefix && <span data-slot="statistic-prefix" className="text-base text-muted-foreground">{prefix}</span>}
+            <span data-slot="statistic-value" className="text-2xl font-semibold tracking-tight">{value}</span>
+            {suffix && <span data-slot="statistic-suffix" 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">
+        <div data-slot="statistic-meta" className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
           {change && (
             <span
-              className={cn(
+              data-slot="statistic-change"
+              data-trend={trend}
+              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",
@@ -49,7 +51,7 @@ function Statistic({ label, value, prefix, suffix, description, trend = "neutral
               {change}
             </span>
           )}
-          {description && <span>{description}</span>}
+          {description && <span data-slot="statistic-description">{description}</span>}
         </div>
       )}
     </div>
@@ -63,9 +65,9 @@ export type StatisticCardProps = React.ComponentProps<typeof Card> & StatisticPr
 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">
+      <CardHeader data-slot="statistic-card-header" className="flex flex-row items-center justify-between gap-3 pb-2">
         <CardTitle className="text-sm font-medium text-muted-foreground">{label}</CardTitle>
-        {action}
+        {action ? <div data-slot="statistic-card-action">{action}</div> : null}
       </CardHeader>
       <CardContent>
         <Statistic

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

@@ -19,13 +19,18 @@ export type TagGroupProps = React.ComponentProps<"div"> & {
   gap?: "sm" | "default" | "lg"
 }
 
-const toneClassName: Record<TagTone, string> = {
-  neutral: "border-border bg-muted text-foreground",
-  info: "border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-900 dark:bg-sky-950 dark:text-sky-300",
-  success: "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-300",
-  warning: "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-300",
-  danger: "border-red-200 bg-red-50 text-red-700 dark:border-red-900 dark:bg-red-950 dark:text-red-300",
-}
+const toneClassName: Record<TagTone, string> = {
+  neutral:
+    "border-[color:color-mix(in_oklch,var(--border),var(--foreground)_8%)] bg-[color:color-mix(in_oklch,var(--muted),var(--background)_18%)] text-foreground",
+  info:
+    "border-[color:color-mix(in_oklch,var(--aui-info,var(--primary)),transparent_62%)] bg-[color:color-mix(in_oklch,var(--aui-info,var(--primary)),transparent_84%)] text-[color:color-mix(in_oklch,var(--aui-info,var(--primary)),black_18%)] dark:text-[color:color-mix(in_oklch,var(--aui-info,var(--primary)),white_46%)]",
+  success:
+    "border-[color:color-mix(in_oklch,var(--aui-success,var(--primary)),transparent_58%)] bg-[color:color-mix(in_oklch,var(--aui-success,var(--primary)),transparent_82%)] text-[color:color-mix(in_oklch,var(--aui-success,var(--primary)),black_16%)] dark:text-[color:color-mix(in_oklch,var(--aui-success,var(--primary)),white_42%)]",
+  warning:
+    "border-[color:color-mix(in_oklch,var(--aui-warning,var(--primary)),transparent_52%)] bg-[color:color-mix(in_oklch,var(--aui-warning,var(--primary)),transparent_76%)] text-[color:color-mix(in_oklch,var(--aui-warning-foreground,var(--foreground)),black_6%)] dark:text-[color:color-mix(in_oklch,var(--aui-warning,var(--primary)),white_32%)]",
+  danger:
+    "border-[color:color-mix(in_oklch,var(--destructive),transparent_58%)] bg-[color:color-mix(in_oklch,var(--destructive),transparent_82%)] text-[color:color-mix(in_oklch,var(--destructive),black_16%)] dark:text-[color:color-mix(in_oklch,var(--destructive),white_40%)]",
+}
 
 const sizeClassName: Record<TagSize, string> = {
   sm: "h-6 px-2 text-xs",
@@ -43,13 +48,15 @@ function Tag({ tone = "neutral", size = "default", removable, selected, onRemove
     <span
       data-slot="tag"
       data-tone={tone}
+      data-size={size}
+      data-removable={removable || undefined}
       data-selected={selected ? "true" : undefined}
       tabIndex={removable ? 0 : props.tabIndex}
       className={cn(
-        "inline-flex items-center gap-1.5 rounded-full border font-medium transition-colors outline-none focus-visible:ring-3 focus-visible:ring-ring/35",
+        "inline-flex max-w-full items-center gap-1.5 rounded-full border font-medium shadow-[inset_0_1px_0_color-mix(in_oklch,white,transparent_40%)] transition-[background-color,border-color,color,box-shadow] outline-none focus-visible:ring-3 focus-visible:ring-ring/35",
         toneClassName[tone],
         sizeClassName[size],
-        selected && "ring-2 ring-ring ring-offset-1",
+        selected && "border-[color:var(--aui-control-border-strong,var(--ring))] ring-2 ring-ring/45 ring-offset-1",
         className
       )}
       onKeyDown={(event) => {
@@ -61,12 +68,12 @@ function Tag({ tone = "neutral", size = "default", removable, selected, onRemove
       }}
       {...props}
     >
-      <span>{children}</span>
+      <span className="min-w-0 truncate">{children}</span>
       {removable && (
         <button
           type="button"
           aria-label={removeLabel}
-          className="-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full opacity-80 transition hover:bg-black/10 hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current/35 dark:hover:bg-white/10"
+          className="-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full bg-[color:color-mix(in_oklch,currentColor,transparent_90%)] opacity-80 transition hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/35"
           onClick={handleRemove}
           onMouseDown={stopInteractivePropagation}
           onDoubleClick={stopInteractivePropagation}

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

@@ -1,7 +1,5 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
-
 export type TextProps = React.ComponentProps<"p"> & {
   muted?: boolean
   size?: "sm" | "default" | "lg"
@@ -11,33 +9,33 @@ export type HeadingProps = React.ComponentProps<"h2"> & {
   level?: 1 | 2 | 3 | 4
 }
 
-function Text({ muted, size = "default", className, ...props }: TextProps) {
-  return <p className={cn(size === "sm" && "text-sm", size === "lg" && "text-lg", muted && "text-muted-foreground", className)} {...props} />
-}
+function Text({ muted, size = "default", className, ...props }: TextProps) {
+  return <p data-slot="text" data-size={size} data-muted={muted || undefined} className={className} {...props} />
+}
 
 function Heading({ level = 2, className, ...props }: HeadingProps) {
   const Component = `h${level}` as "h1" | "h2" | "h3" | "h4"
-  return <Component className={cn("font-semibold tracking-tight", level === 1 && "text-4xl", level === 2 && "text-3xl", level === 3 && "text-2xl", level === 4 && "text-xl", className)} {...props} />
-}
+  return <Component data-slot="heading" data-level={level} className={className} {...props} />
+}
 
 function Blockquote({ className, ...props }: React.ComponentProps<"blockquote">) {
-  return <blockquote className={cn("border-l-4 pl-4 italic text-muted-foreground", className)} {...props} />
-}
+  return <blockquote data-slot="blockquote" className={className} {...props} />
+}
 
 function Mark({ className, ...props }: React.ComponentProps<"mark">) {
-  return <mark className={cn("rounded bg-amber-100 px-1 py-0.5 text-amber-950 dark:bg-amber-900 dark:text-amber-100", className)} {...props} />
-}
+  return <mark data-slot="mark" className={className} {...props} />
+}
 
 function Spoiler({ className, children, ...props }: React.ComponentProps<"details">) {
   return (
-    <details className={cn("rounded-lg border bg-card p-3", className)} {...props}>
+    <details data-slot="spoiler" className={className} {...props}>
       {children}
     </details>
   )
 }
 
 function SpoilerSummary({ className, ...props }: React.ComponentProps<"summary">) {
-  return <summary className={cn("cursor-pointer font-medium", className)} {...props} />
-}
+  return <summary data-slot="spoiler-summary" className={className} {...props} />
+}
 
 export { Blockquote, Heading, Mark, Spoiler, SpoilerSummary, Text }

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

@@ -9,18 +9,20 @@ export type VirtualListRange = {
   visibleItems: VirtualItem[]
 }
 
-export type VirtualListRenderContext = {
-  index: number
-  virtualItem: VirtualItem
-}
-
-export type VirtualListProps<TItem> = Omit<
-  React.ComponentProps<"div">,
-  "children"
-> & {
-  items: TItem[]
-  renderItem: (item: TItem, context: VirtualListRenderContext) => React.ReactNode
-  getItemKey?: (item: TItem, index: number) => React.Key
+export type VirtualListRenderContext = {
+  index: number
+  virtualItem: VirtualItem
+}
+
+export type VirtualListItemKey = string | number
+
+export type VirtualListProps<TItem> = Omit<
+  React.ComponentProps<"div">,
+  "children"
+> & {
+  items: TItem[]
+  renderItem: (item: TItem, context: VirtualListRenderContext) => React.ReactNode
+  getItemKey?: (item: TItem, index: number) => VirtualListItemKey
   estimateSize?: number | ((index: number) => number)
   overscan?: number
   height?: number | string
@@ -36,10 +38,10 @@ function createInitialVirtualItems(
   count: number,
   viewportHeight: number,
   overscan: number,
-  gap: number,
-  estimateSize: (index: number) => number,
-  getItemKey: (index: number) => React.Key
-) {
+  gap: number,
+  estimateSize: (index: number) => number,
+  getItemKey: (index: number) => VirtualListItemKey
+) {
   const items: VirtualItem[] = []
   let start = 0
   const targetHeight = viewportHeight + overscan * estimateSize(0)

package/packages/cli/vendor/src/components/feedback/page-state.tsx

@@ -35,7 +35,11 @@ function PageState({ tone = "empty", title, description, icon, action, extra, co
   return (
     <div
       data-slot="page-state"
+      data-tone={tone}
+      data-compact={compact || undefined}
       role={tone === "error" ? "alert" : "status"}
+      aria-live={tone === "error" ? "assertive" : "polite"}
+      aria-busy={tone === "loading" || undefined}
       className={cn(
         "flex flex-col items-center justify-center rounded-[var(--radius-3xl)] border border-border/75 bg-card/96 text-center shadow-sm ring-1 ring-foreground/4",
         compact ? "gap-2 p-6" : "min-h-72 gap-4 p-10",
@@ -43,14 +47,14 @@ function PageState({ tone = "empty", title, description, icon, action, extra, co
       )}
       {...props}
     >
-      <div className="flex size-14 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)]">
+      <div data-slot="page-state-icon" className="flex size-14 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)]">
         {icon ?? defaultPageStateIcon(tone)}
       </div>
-      <div className="grid gap-1">
-        {title && <div className="text-base font-semibold tracking-tight text-foreground">{title}</div>}
-        {description && <div className="max-w-md text-sm leading-6 text-muted-foreground">{description}</div>}
+      <div data-slot="page-state-content" className="grid gap-1">
+        {title && <div data-slot="page-state-title" className="text-base font-semibold tracking-tight text-foreground">{title}</div>}
+        {description && <div data-slot="page-state-description" className="max-w-md text-sm leading-6 text-muted-foreground">{description}</div>}
       </div>
-      {(action || extra) ? <div className="flex flex-wrap items-center justify-center gap-2">{action}{extra}</div> : null}
+      {(action || extra) ? <div data-slot="page-state-actions" className="flex flex-wrap items-center justify-center gap-2">{action}{extra}</div> : null}
     </div>
   )
 }