tembro 2.0.6 → 2.1.0

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

@@ -1,5 +1,6 @@
-import * as React from "react"
-
+import * as React from "react"
+import { XIcon } from "lucide-react"
+
 import { cn, stopInteractivePropagation } from "@/lib/utils"
 
 export type TagTone = "neutral" | "info" | "success" | "warning" | "danger"
@@ -8,10 +9,11 @@ export type TagSize = "sm" | "default" | "lg"
 export type TagProps = React.ComponentProps<"span"> & {
   tone?: TagTone
   size?: TagSize
-  removable?: boolean
-  selected?: boolean
-  onRemove?: () => void
-}
+  removable?: boolean
+  selected?: boolean
+  onRemove?: () => void
+  removeLabel?: string
+}
 
 export type TagGroupProps = React.ComponentProps<"div"> & {
   gap?: "sm" | "default" | "lg"
@@ -31,29 +33,45 @@ const sizeClassName: Record<TagSize, string> = {
   lg: "h-8 px-3 text-sm",
 }
 
-function Tag({ tone = "neutral", size = "default", removable, selected, onRemove, className, children, ...props }: TagProps) {
+function Tag({ tone = "neutral", size = "default", removable, selected, onRemove, removeLabel = "Remove tag", className, children, onKeyDown, ...props }: TagProps) {
+  const handleRemove = (event: React.SyntheticEvent) => {
+    stopInteractivePropagation(event)
+    onRemove?.()
+  }
+
   return (
-    <span
-      data-slot="tag"
-      data-tone={tone}
-      data-selected={selected ? "true" : undefined}
-      className={cn("inline-flex items-center gap-1 rounded-full border font-medium transition-colors", toneClassName[tone], sizeClassName[size], selected && "ring-2 ring-ring ring-offset-1", className)}
-      {...props}
-    >
+    <span
+      data-slot="tag"
+      data-tone={tone}
+      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",
+        toneClassName[tone],
+        sizeClassName[size],
+        selected && "ring-2 ring-ring ring-offset-1",
+        className
+      )}
+      onKeyDown={(event) => {
+        if (removable && (event.key === "Backspace" || event.key === "Delete")) {
+          event.preventDefault()
+          onRemove?.()
+        }
+        onKeyDown?.(event)
+      }}
+      {...props}
+    >
       <span>{children}</span>
       {removable && (
         <button
           type="button"
-          aria-label="Remove tag"
-          className="-mr-1 inline-flex size-4 items-center justify-center rounded-full hover:bg-black/10 dark:hover:bg-white/10"
-          onClick={(event) => {
-            stopInteractivePropagation(event)
-            onRemove?.()
-          }}
+          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"
+          onClick={handleRemove}
           onMouseDown={stopInteractivePropagation}
           onDoubleClick={stopInteractivePropagation}
         >
-          ×
+          <XIcon className="size-3" />
         </button>
       )}
     </span>

package/packages/cli/vendor/src/components/display/tree-view.tsx

@@ -1,77 +1,190 @@
-import * as React from "react"
-import { ChevronRightIcon } from "lucide-react"
+import * as React from "react"
+import { ChevronRightIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-export type TreeViewItem = {
-  key: string
-  label: React.ReactNode
-  icon?: React.ReactNode
-  extra?: React.ReactNode
-  children?: TreeViewItem[]
-  disabled?: boolean
-}
-
+export type TreeViewItem = {
+  key: string
+  label: React.ReactNode
+  searchText?: string
+  icon?: React.ReactNode
+  extra?: React.ReactNode
+  children?: TreeViewItem[]
+  loading?: boolean
+  disabled?: boolean
+}
+
 export type TreeViewProps = Omit<React.ComponentProps<"div">, "onSelect"> & {
   items: TreeViewItem[]
   defaultExpandedKeys?: string[]
   expandedKeys?: string[]
-  onExpandedKeysChange?: (keys: string[]) => void
-  selectedKey?: string
-  onSelect?: (item: TreeViewItem) => void
-}
-
-function TreeView({ items, defaultExpandedKeys = [], expandedKeys, onExpandedKeysChange, selectedKey, onSelect, className, ...props }: TreeViewProps) {
-  const [internalExpandedKeys, setInternalExpandedKeys] = React.useState(defaultExpandedKeys)
-  const currentExpandedKeys = expandedKeys ?? internalExpandedKeys
-
-  const setExpandedKeys = (nextKeys: string[]) => {
-    if (expandedKeys === undefined) setInternalExpandedKeys(nextKeys)
-    onExpandedKeysChange?.(nextKeys)
-  }
-
-  const toggle = (key: string) => {
-    setExpandedKeys(currentExpandedKeys.includes(key) ? currentExpandedKeys.filter((item) => item !== key) : [...currentExpandedKeys, key])
-  }
-
-  return (
-    <div data-slot="tree-view" role="tree" className={cn("grid gap-1 text-sm", className)} {...props}>
-      {items.map((item) => (
-        <TreeViewNode
-          key={item.key}
-          item={item}
-          level={1}
-          expandedKeys={currentExpandedKeys}
-          selectedKey={selectedKey}
-          onToggle={toggle}
-          onSelect={onSelect}
-        />
-      ))}
-    </div>
-  )
-}
+  onExpandedKeysChange?: (keys: string[]) => void
+  selectedKey?: string
+  onSelect?: (item: TreeViewItem) => void
+  checkedKeys?: string[]
+  defaultCheckedKeys?: string[]
+  onCheckedKeysChange?: (keys: string[]) => void
+  checkable?: boolean
+  searchQuery?: string
+  onLoadChildren?: (item: TreeViewItem) => void | Promise<void>
+}
+
+function TreeView({
+  items,
+  defaultExpandedKeys = [],
+  expandedKeys,
+  onExpandedKeysChange,
+  selectedKey,
+  onSelect,
+  checkedKeys,
+  defaultCheckedKeys = [],
+  onCheckedKeysChange,
+  checkable = false,
+  searchQuery,
+  onLoadChildren,
+  className,
+  ...props
+}: TreeViewProps) {
+  const [internalExpandedKeys, setInternalExpandedKeys] = React.useState(defaultExpandedKeys)
+  const [internalCheckedKeys, setInternalCheckedKeys] = React.useState(defaultCheckedKeys)
+  const currentExpandedKeys = expandedKeys ?? internalExpandedKeys
+  const currentCheckedKeys = checkedKeys ?? internalCheckedKeys
+  const query = searchQuery?.trim().toLowerCase()
+
+  const setExpandedKeys = React.useCallback((nextKeys: string[]) => {
+    if (expandedKeys === undefined) setInternalExpandedKeys(nextKeys)
+    onExpandedKeysChange?.(nextKeys)
+  }, [expandedKeys, onExpandedKeysChange])
+
+  const setCheckedKeyState = (key: string, checked: boolean) => {
+    const nextKeys = checked
+      ? [...new Set([...currentCheckedKeys, key])]
+      : currentCheckedKeys.filter((item) => item !== key)
+    if (checkedKeys === undefined) setInternalCheckedKeys(nextKeys)
+    onCheckedKeysChange?.(nextKeys)
+  }
+
+  const toggle = React.useCallback((key: string) => {
+    setExpandedKeys(currentExpandedKeys.includes(key) ? currentExpandedKeys.filter((item) => item !== key) : [...currentExpandedKeys, key])
+  }, [currentExpandedKeys, setExpandedKeys])
+
+  const visibleKeys = React.useMemo(() => flattenVisibleTreeKeys(items, currentExpandedKeys, query), [items, currentExpandedKeys, query])
+
+  return (
+    <div
+      data-slot="tree-view"
+      role="tree"
+      className={cn("grid gap-1 text-sm", className)}
+      onKeyDown={(event) => {
+        const activeKey = (event.target as HTMLElement).dataset.treeNodeKey
+        if (!activeKey) return
+        const activeIndex = visibleKeys.indexOf(activeKey)
+        const focusKey = (key: string | undefined) => {
+          if (!key) return
+          const escapedKey = key.replace(/\\/g, "\\\\").replace(/"/g, '\\"')
+          event.currentTarget.querySelector<HTMLElement>(`[data-tree-node-key="${escapedKey}"]`)?.focus()
+        }
+
+        if (event.key === "ArrowDown") {
+          event.preventDefault()
+          focusKey(visibleKeys[Math.min(activeIndex + 1, visibleKeys.length - 1)])
+        } else if (event.key === "ArrowUp") {
+          event.preventDefault()
+          focusKey(visibleKeys[Math.max(activeIndex - 1, 0)])
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault()
+          if (!currentExpandedKeys.includes(activeKey)) toggle(activeKey)
+        } else if (event.key === "ArrowLeft") {
+          event.preventDefault()
+          if (currentExpandedKeys.includes(activeKey)) toggle(activeKey)
+        }
+        props.onKeyDown?.(event)
+      }}
+      {...props}
+    >
+      {items.map((item) => (
+        <TreeViewNode
+          key={item.key}
+          item={item}
+          level={1}
+          expandedKeys={currentExpandedKeys}
+          selectedKey={selectedKey}
+          onToggle={toggle}
+          onSelect={onSelect}
+          checkedKeys={currentCheckedKeys}
+          onCheckedChange={setCheckedKeyState}
+          checkable={checkable}
+          searchQuery={query}
+          onLoadChildren={onLoadChildren}
+        />
+      ))}
+    </div>
+  )
+}
+
+function flattenVisibleTreeKeys(items: TreeViewItem[], expandedKeys: string[], searchQuery?: string): string[] {
+  return items.flatMap((item) => {
+    if (!matchesTreeSearch(item, searchQuery)) return []
+    return [item.key, ...(item.children && expandedKeys.includes(item.key) ? flattenVisibleTreeKeys(item.children, expandedKeys, searchQuery) : [])]
+  })
+}
+
+function getTreeItemSearchText(item: TreeViewItem) {
+  return item.searchText ?? (typeof item.label === "string" ? item.label : item.key)
+}
+
+function matchesTreeSearch(item: TreeViewItem, searchQuery?: string): boolean {
+  if (!searchQuery) return true
+  return getTreeItemSearchText(item).toLowerCase().includes(searchQuery) || Boolean(item.children?.some((child) => matchesTreeSearch(child, searchQuery)))
+}
+
+function renderHighlightedLabel(label: React.ReactNode, searchQuery?: string) {
+  if (!searchQuery || typeof label !== "string") return label
+  const index = label.toLowerCase().indexOf(searchQuery)
+  if (index < 0) return label
+  return (
+    <>
+      {label.slice(0, index)}
+      <mark className="rounded bg-primary/15 px-0.5 text-foreground">{label.slice(index, index + searchQuery.length)}</mark>
+      {label.slice(index + searchQuery.length)}
+    </>
+  )
+}
 
 function TreeViewNode({
   item,
   level,
   expandedKeys,
   selectedKey,
-  onToggle,
-  onSelect,
-}: {
-  item: TreeViewItem
-  level: number
-  expandedKeys: string[]
-  selectedKey?: string
-  onToggle: (key: string) => void
-  onSelect?: (item: TreeViewItem) => void
-}) {
-  const hasChildren = Boolean(item.children?.length)
-  const expanded = expandedKeys.includes(item.key)
-  const selected = selectedKey === item.key
-
-  return (
-    <div data-slot="tree-node" role="treeitem" aria-expanded={hasChildren ? expanded : undefined} aria-selected={selected || undefined}>
+  onToggle,
+  onSelect,
+  checkedKeys,
+  onCheckedChange,
+  checkable,
+  searchQuery,
+  onLoadChildren,
+}: {
+  item: TreeViewItem
+  level: number
+  expandedKeys: string[]
+  selectedKey?: string
+  onToggle: (key: string) => void
+  onSelect?: (item: TreeViewItem) => void
+  checkedKeys: string[]
+  onCheckedChange: (key: string, checked: boolean) => void
+  checkable: boolean
+  searchQuery?: string
+  onLoadChildren?: (item: TreeViewItem) => void | Promise<void>
+}) {
+  if (!matchesTreeSearch(item, searchQuery)) return null
+
+  const hasChildren = Boolean(item.children?.length) || Boolean(onLoadChildren)
+  const expanded = expandedKeys.includes(item.key)
+  const selected = selectedKey === item.key
+  const checked = checkedKeys.includes(item.key)
+
+  return (
+    <div data-slot="tree-node" role="treeitem" aria-expanded={hasChildren ? expanded : undefined} aria-selected={selected || undefined}>
       <div
         className={cn(
           "flex items-center gap-1 rounded-md px-2 py-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
@@ -80,34 +193,58 @@ function TreeViewNode({
         )}
         style={{ paddingLeft: `${level * 0.75}rem` }}
       >
-        <button
-          type="button"
-          aria-label={expanded ? "Collapse" : "Expand"}
-          className={cn("flex size-5 items-center justify-center rounded-sm", !hasChildren && "invisible")}
-          onClick={() => onToggle(item.key)}
-        >
-          <ChevronRightIcon className={cn("size-4 transition-transform", expanded && "rotate-90")} />
-        </button>
-        {item.icon}
-        <button type="button" className="min-w-0 flex-1 truncate text-left" onClick={() => onSelect?.(item)}>
-          {item.label}
-        </button>
-        {item.extra}
-      </div>
-      {hasChildren && expanded && (
-        <div role="group" className="grid gap-1">
-          {item.children?.map((child) => (
+        <button
+          type="button"
+          aria-label={expanded ? "Collapse" : "Expand"}
+          className={cn("flex size-5 items-center justify-center rounded-sm", !hasChildren && "invisible")}
+          onClick={() => {
+            if (!expanded && !item.children?.length) void onLoadChildren?.(item)
+            onToggle(item.key)
+          }}
+        >
+          <ChevronRightIcon className={cn("size-4 transition-transform", expanded && "rotate-90")} />
+        </button>
+        {checkable && (
+          <input
+            type="checkbox"
+            className="size-4 rounded border-border accent-primary"
+            checked={checked}
+            disabled={item.disabled}
+            aria-label={`Select ${getTreeItemSearchText(item)}`}
+            onChange={(event) => onCheckedChange(item.key, event.currentTarget.checked)}
+          />
+        )}
+        {item.icon}
+        <button
+          type="button"
+          data-tree-node-key={item.key}
+          className="min-w-0 flex-1 truncate rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+          disabled={item.disabled}
+          onClick={() => onSelect?.(item)}
+        >
+          {renderHighlightedLabel(item.label, searchQuery)}
+        </button>
+        {item.loading ? <span className="text-xs text-muted-foreground">Loading...</span> : item.extra}
+      </div>
+      {hasChildren && expanded && (
+        <div role="group" className="grid gap-1">
+          {item.children?.map((child) => (
             <TreeViewNode
               key={child.key}
               item={child}
               level={level + 1}
               expandedKeys={expandedKeys}
-              selectedKey={selectedKey}
-              onToggle={onToggle}
-              onSelect={onSelect}
-            />
-          ))}
-        </div>
+              selectedKey={selectedKey}
+              onToggle={onToggle}
+              onSelect={onSelect}
+              checkedKeys={checkedKeys}
+              onCheckedChange={onCheckedChange}
+              checkable={checkable}
+              searchQuery={searchQuery}
+              onLoadChildren={onLoadChildren}
+            />
+          ))}
+        </div>
       )}
     </div>
   )

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

@@ -2,6 +2,7 @@ import * as React from "react"
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { DeltaBadge } from "@/components/display/delta-badge"
+import { Sparkline } from "@/components/charts/charts"
 import { cn } from "@/lib/utils"
 
 export type TrendCardProps = React.ComponentProps<typeof Card> & {
@@ -25,45 +26,6 @@ function TrendCard({
   className,
   ...props
 }: TrendCardProps) {
-  // Simple SVG sparkline generator
-  const renderSparkline = () => {
-    if (!sparkline || sparkline.length < 2) return null
-
-    const min = Math.min(...sparkline)
-    const max = Math.max(...sparkline)
-    const range = max - min || 1
-    
-    const points = sparkline.map((val, i) => {
-      const x = (i / (sparkline.length - 1)) * 100
-      const y = 100 - ((val - min) / range) * 100
-      return `${x},${y}`
-    }).join(" ")
-
-    const strokeColor =
-      trend === "up"
-        ? "var(--aui-success,var(--primary))"
-        : trend === "down"
-          ? "var(--destructive)"
-          : "var(--muted-foreground)"
-
-    return (
-      <div className="absolute bottom-0 left-0 right-0 h-12 overflow-hidden opacity-20 pointer-events-none">
-        <svg viewBox="0 0 100 100" preserveAspectRatio="none" className="w-full h-full stroke-2">
-          <polyline
-            points={points}
-            fill="none"
-            stroke={strokeColor}
-            vectorEffect="non-scaling-stroke"
-          />
-          <polygon
-            points={`0,100 ${points} 100,100`}
-            fill={`color-mix(in srgb, ${strokeColor} 20%, transparent)`}
-          />
-        </svg>
-      </div>
-    )
-  }
-
   return (
     <Card data-slot="trend-card" className={cn("relative overflow-hidden", className)} {...props}>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
@@ -83,7 +45,11 @@ function TrendCard({
           </p>
         )}
       </CardContent>
-      {renderSparkline()}
+      {sparkline && sparkline.length > 1 ? (
+        <div className="px-6 pb-4">
+          <Sparkline values={sparkline} positive={trend !== "down"} />
+        </div>
+      ) : null}
     </Card>
   )
 }

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

@@ -16,6 +16,7 @@ export type AlertProps = React.ComponentProps<"div"> & {
   dismissible?: boolean
   dismissLabel?: string
   onDismiss?: () => void
+  actionsAlign?: "start" | "end"
 }
 
 const alertToneClassName: Record<AlertTone, Record<NonNullable<AlertProps["variant"]>, string>> = {
@@ -78,6 +79,7 @@ function Alert({
   dismissible = false,
   dismissLabel = "Dismiss alert",
   onDismiss,
+  actionsAlign = "end",
   className,
   children,
   ...props
@@ -113,7 +115,7 @@ function Alert({
         )}
       </div>
       {(action || dismissible) ? (
-        <div data-slot="alert-action" className="flex shrink-0 items-start gap-2">
+        <div data-slot="alert-action" className={cn("flex shrink-0 items-start gap-2", actionsAlign === "start" && "order-[-1] mr-2")}>
           {action}
           {dismissible ? (
             <button

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

@@ -3,20 +3,24 @@ import { Loader2Icon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-export type LoadingStateProps = React.ComponentProps<"div"> & {
-  label?: React.ReactNode
-  description?: React.ReactNode
-  icon?: React.ReactNode
-}
-
-function LoadingState({
-  className,
-  label = "Loading...",
-  description,
-  icon,
-  ...props
-}: LoadingStateProps) {
-  return (
+export type LoadingStateProps = React.ComponentProps<"div"> & {
+  label?: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  variant?: "spinner" | "skeleton" | "progress"
+  progress?: number
+}
+
+function LoadingState({
+  className,
+  label = "Loading...",
+  description,
+  icon,
+  variant = "spinner",
+  progress,
+  ...props
+}: LoadingStateProps) {
+  return (
     <div
       data-slot="loading-state"
       className={cn(
@@ -25,12 +29,24 @@ function LoadingState({
       )}
       {...props}
     >
-      <div className="flex size-12 items-center justify-center rounded-full border border-border/70 bg-background/92 shadow-[0_1px_0_rgba(255,255,255,0.08)]">
-        {icon ?? <Loader2Icon className="size-5 animate-spin" />}
-      </div>
+      {variant === "skeleton" ? (
+        <div className="grid gap-3">
+          <div className="h-4 w-32 animate-pulse rounded bg-muted" />
+          <div className="h-24 w-64 animate-pulse rounded-[min(var(--radius-xl),16px)] bg-muted/70" />
+        </div>
+      ) : (
+        <div className="flex size-12 items-center justify-center rounded-full border border-border/70 bg-background/92 shadow-[0_1px_0_rgba(255,255,255,0.08)]">
+          {icon ?? <Loader2Icon className="size-5 animate-spin" />}
+        </div>
+      )}
       <div className="grid gap-1.5">
         {label && <div className="text-base font-semibold tracking-tight text-foreground">{label}</div>}
         {description && <p className="max-w-sm text-sm leading-6">{description}</p>}
+        {variant === "progress" && typeof progress === "number" ? (
+          <div className="mx-auto mt-2 h-2 w-full max-w-xs overflow-hidden rounded-full bg-muted/80">
+            <div className="h-full rounded-full bg-primary" style={{ width: `${Math.min(Math.max(progress, 0), 100)}%` }} />
+          </div>
+        ) : null}
       </div>
     </div>
   )

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

@@ -11,9 +11,10 @@ export type PageStateProps = Omit<React.ComponentProps<"div">, "title"> & {
   title?: React.ReactNode
   description?: React.ReactNode
   icon?: React.ReactNode
-  action?: React.ReactNode
-  compact?: boolean
-}
+  action?: React.ReactNode
+  extra?: React.ReactNode
+  compact?: boolean
+}
 
 function defaultPageStateIcon(tone: PageStateTone) {
   switch (tone) {
@@ -30,7 +31,7 @@ function defaultPageStateIcon(tone: PageStateTone) {
   }
 }
 
-function PageState({ tone = "empty", title, description, icon, action, compact = false, className, ...props }: PageStateProps) {
+function PageState({ tone = "empty", title, description, icon, action, extra, compact = false, className, ...props }: PageStateProps) {
   return (
     <div
       data-slot="page-state"
@@ -49,10 +50,10 @@ function PageState({ tone = "empty", title, description, icon, action, compact =
         {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>
-      {action && <div>{action}</div>}
+      {(action || extra) ? <div className="flex flex-wrap items-center justify-center gap-2">{action}{extra}</div> : null}
     </div>
-  )
-}
+  )
+}
 
 export type InlineStateProps = Omit<PageStateProps, "compact"> & {
   retryLabel?: React.ReactNode