tembro 2.0.4 → 2.0.5

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

@@ -3,28 +3,39 @@ import * as React from "react"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { cn } from "@/lib/utils"
 
-export type ActivityFeedItem = {
+export type ActivityFeedItem = {
   id: string
   title: React.ReactNode
   description?: React.ReactNode
   time?: React.ReactNode
   icon?: React.ReactNode
   tone?: "default" | "success" | "warning" | "danger" | "info" | "muted"
-  actions?: React.ReactNode
-  hidden?: boolean
-  className?: string
-}
+  actions?: React.ReactNode
+  meta?: React.ReactNode
+  badge?: React.ReactNode
+  unread?: boolean
+  hidden?: boolean
+  interactive?: boolean
+  href?: string
+  target?: React.ComponentProps<"a">["target"]
+  rel?: React.ComponentProps<"a">["rel"]
+  onSelect?: () => void
+  className?: string
+}
 
-export type ActivityFeedProps = React.ComponentProps<typeof Card> & {
+export type ActivityFeedProps = React.ComponentProps<typeof Card> & {
   title?: React.ReactNode
   description?: React.ReactNode
   actions?: React.ReactNode
   items: ActivityFeedItem[]
   empty?: React.ReactNode
-  compact?: boolean
-  contentClassName?: string
-  itemClassName?: string
-}
+  compact?: boolean
+  density?: "comfortable" | "compact"
+  showConnector?: boolean
+  connectorClassName?: string
+  contentClassName?: string
+  itemClassName?: string
+}
 
 const toneDotClassName: Record<NonNullable<ActivityFeedItem["tone"]>, string> = {
   default: "bg-primary",
@@ -41,14 +52,18 @@ function ActivityFeed({
   description,
   actions,
   items,
-  empty = "No activity yet.",
-  compact = false,
-  contentClassName,
-  itemClassName,
-  ...props
-}: ActivityFeedProps) {
-  const visibleItems = items.filter((item) => !item.hidden)
-  const hasHeader = Boolean(title || description || actions)
+  empty = "No activity yet.",
+  compact = false,
+  density,
+  showConnector = true,
+  connectorClassName,
+  contentClassName,
+  itemClassName,
+  ...props
+}: ActivityFeedProps) {
+  const visibleItems = items.filter((item) => !item.hidden)
+  const hasHeader = Boolean(title || description || actions)
+  const isCompact = density ? density === "compact" : compact
 
   return (
     <Card data-slot="activity-feed" className={cn("min-w-0", className)} {...props}>
@@ -68,28 +83,71 @@ function ActivityFeed({
         {visibleItems.length === 0 ? (
           <div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">{empty}</div>
         ) : (
-          visibleItems.map((item, index) => (
-            <div
-              key={item.id}
-              data-slot="activity-feed-item"
-              className={cn("relative flex gap-3 pb-4 last:pb-0", compact && "gap-2 pb-3", itemClassName, item.className)}
-            >
-              {index < visibleItems.length - 1 && <div className="absolute left-3 top-7 h-[calc(100%-1.75rem)] w-px bg-border" />}
-              <div className="relative z-10 mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border bg-background">
-                {item.icon ?? <span className={cn("size-2 rounded-full", toneDotClassName[item.tone ?? "default"])} />}
-              </div>
-              <div className="min-w-0 flex-1 space-y-1">
-                <div className="flex min-w-0 items-start justify-between gap-2">
-                  <div className="min-w-0 text-sm font-medium leading-5 text-foreground">{item.title}</div>
-                  {item.time && <div className="shrink-0 text-xs text-muted-foreground">{item.time}</div>}
-                </div>
-                {item.description && <div className="text-sm leading-5 text-muted-foreground">{item.description}</div>}
-                {item.actions && <div className="pt-1">{item.actions}</div>}
-              </div>
-            </div>
-          ))
-        )}
-      </CardContent>
+          visibleItems.map((item, index) => {
+            const isInteractive = item.interactive ?? Boolean(item.href || item.onSelect)
+            const content = (
+              <>
+                <div className={cn(
+                  "relative z-10 mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border bg-background",
+                  item.unread && "border-primary/45 bg-primary/8 shadow-[0_0_0_3px_color-mix(in_oklch,var(--primary),transparent_88%)]"
+                )}>
+                  {item.icon ?? <span className={cn("size-2 rounded-full", toneDotClassName[item.tone ?? "default"])} />}
+                </div>
+                <div className="min-w-0 flex-1 space-y-1">
+                  <div className="flex min-w-0 items-start justify-between gap-2">
+                    <div className="min-w-0 space-y-1">
+                      <div className="min-w-0 text-sm font-medium leading-5 text-foreground">{item.title}</div>
+                      {item.meta && <div className="text-xs text-muted-foreground">{item.meta}</div>}
+                    </div>
+                    <div className="flex shrink-0 items-center gap-2">
+                      {item.badge}
+                      {item.time && <div className="text-xs text-muted-foreground">{item.time}</div>}
+                    </div>
+                  </div>
+                  {item.description && <div className="text-sm leading-5 text-muted-foreground">{item.description}</div>}
+                  {item.actions && <div className="pt-1">{item.actions}</div>}
+                </div>
+              </>
+            )
+
+            return (
+            <div
+              key={item.id}
+              data-slot="activity-feed-item"
+              className={cn("relative flex gap-3 pb-4 last:pb-0", isCompact && "gap-2 pb-3", itemClassName, item.className)}
+            >
+              {showConnector && index < visibleItems.length - 1 && (
+                <div className={cn("absolute left-3 top-7 h-[calc(100%-1.75rem)] w-px bg-border", connectorClassName)} />
+              )}
+              {item.href ? (
+                <a
+                  href={item.href}
+                  target={item.target}
+                  rel={item.rel}
+                  className={cn(
+                    "flex min-w-0 flex-1 gap-3 rounded-[var(--radius-lg)] px-2 py-1.5 transition-[background-color,border-color,box-shadow]",
+                    isInteractive && "hover:bg-muted/35 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+                  )}
+                >
+                  {content}
+                </a>
+              ) : isInteractive ? (
+                <button
+                  type="button"
+                  className="flex min-w-0 flex-1 gap-3 rounded-[var(--radius-lg)] px-2 py-1.5 text-left transition-[background-color,border-color,box-shadow] hover:bg-muted/35 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+                  onClick={item.onSelect}
+                >
+                  {content}
+                </button>
+              ) : (
+                <div className="flex min-w-0 flex-1 gap-3 px-2 py-1.5">
+                  {content}
+                </div>
+              )}
+            </div>
+          )})
+        )}
+      </CardContent>
     </Card>
   )
 }

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

@@ -16,6 +16,15 @@ export type CarouselProps = React.ComponentProps<"div"> & {
   ariaLabel?: string
   previousLabel?: string
   nextLabel?: string
+  swipeThreshold?: number
+  autoplay?: boolean
+  autoplayInterval?: number
+  pauseOnHover?: boolean
+  stopAutoplayOnInteraction?: boolean
+  showPlaybackControl?: boolean
+  playLabel?: string
+  pauseLabel?: string
+  onAutoplayChange?: (playing: boolean) => void
 }
 
 export type CarouselItemProps = React.ComponentProps<"div">
@@ -38,24 +47,80 @@ function Carousel({
   ariaLabel = "Carousel",
   previousLabel = "Previous slide",
   nextLabel = "Next slide",
+  swipeThreshold = 44,
+  autoplay = false,
+  autoplayInterval = 4500,
+  pauseOnHover = true,
+  stopAutoplayOnInteraction = true,
+  showPlaybackControl = false,
+  playLabel = "Start autoplay",
+  pauseLabel = "Pause autoplay",
+  onAutoplayChange,
   className,
   children,
   ...props
 }: CarouselProps) {
   const items = React.Children.toArray(children)
   const [internalIndex, setInternalIndex] = React.useState(defaultIndex)
+  const touchStartXRef = React.useRef<number | null>(null)
+  const [isHovered, setIsHovered] = React.useState(false)
+  const [autoplayStopped, setAutoplayStopped] = React.useState(false)
+  const [autoplayEnabled, setAutoplayEnabled] = React.useState(autoplay)
   const controlled = index !== undefined
   const activeIndex = clampIndex(controlled ? index : internalIndex, items.length, loop)
 
-  function setActiveIndex(nextIndex: number) {
+  React.useEffect(() => {
+    setAutoplayEnabled(autoplay)
+  }, [autoplay])
+
+  function setActiveIndex(nextIndex: number, reason: "manual" | "autoplay" = "manual") {
     const resolvedIndex = clampIndex(nextIndex, items.length, loop)
     if (!controlled) setInternalIndex(resolvedIndex)
+    if (reason === "manual" && stopAutoplayOnInteraction) {
+      setAutoplayStopped(true)
+      if (autoplayEnabled) {
+        setAutoplayEnabled(false)
+        onAutoplayChange?.(false)
+      }
+    }
     onIndexChange?.(resolvedIndex)
   }
 
   const canGoPrevious = loop || activeIndex > 0
   const canGoNext = loop || activeIndex < items.length - 1
 
+  const handleTouchStart: React.TouchEventHandler<HTMLDivElement> = (event) => {
+    touchStartXRef.current = event.touches[0]?.clientX ?? null
+  }
+
+  const handleTouchEnd: React.TouchEventHandler<HTMLDivElement> = (event) => {
+    if (touchStartXRef.current == null || items.length <= 1) return
+    const endX = event.changedTouches[0]?.clientX ?? touchStartXRef.current
+    const deltaX = endX - touchStartXRef.current
+    touchStartXRef.current = null
+
+    if (Math.abs(deltaX) < swipeThreshold) return
+    if (deltaX > 0 && canGoPrevious) setActiveIndex(activeIndex - 1)
+    if (deltaX < 0 && canGoNext) setActiveIndex(activeIndex + 1)
+  }
+
+  React.useEffect(() => {
+    if (!autoplayEnabled || items.length <= 1 || autoplayStopped) return
+    if (pauseOnHover && isHovered) return
+
+    const timer = window.setInterval(() => {
+      if (!loop && activeIndex >= items.length - 1) {
+        setActiveIndex(0, "autoplay")
+        return
+      }
+      setActiveIndex(activeIndex + 1, "autoplay")
+    }, autoplayInterval)
+
+    return () => {
+      window.clearInterval(timer)
+    }
+  }, [activeIndex, autoplayEnabled, autoplayInterval, autoplayStopped, isHovered, items.length, loop, pauseOnHover])
+
   return (
     <div
       data-slot="carousel"
@@ -63,6 +128,7 @@ function Carousel({
       role="region"
       aria-roledescription="carousel"
       aria-label={ariaLabel}
+      tabIndex={keyboard ? 0 : undefined}
       className={cn("grid gap-3", className)}
       onKeyDown={(event) => {
         if (!keyboard || items.length <= 1) return
@@ -75,6 +141,10 @@ function Carousel({
           setActiveIndex(activeIndex + 1)
         }
       }}
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
       {...props}
     >
       <div className={cn(
@@ -113,7 +183,7 @@ function Carousel({
         ) : null}
       </div>
       {showDots && items.length > 1 && (
-        <div className="flex items-center justify-center gap-2" role="tablist" aria-label={`${ariaLabel} slides`}>
+        <div className="flex flex-wrap items-center justify-center gap-2" role="tablist" aria-label={`${ariaLabel} slides`}>
           {items.map((_, itemIndex) => (
             <button
               key={itemIndex}
@@ -128,6 +198,22 @@ function Carousel({
               onClick={() => setActiveIndex(itemIndex)}
             />
           ))}
+          {showPlaybackControl ? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="ml-2 rounded-full"
+              onClick={() => {
+                const nextPlaying = !autoplayEnabled
+                setAutoplayStopped(false)
+                setAutoplayEnabled(nextPlaying)
+                onAutoplayChange?.(nextPlaying)
+              }}
+            >
+              {autoplayEnabled ? pauseLabel : playLabel}
+            </Button>
+          ) : null}
         </div>
       )}
     </div>

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}
+    />
   )
 }