tembro 2.0.6 → 2.1.1

package/packages/cli/vendor/src/components/navigation/nav-tabs.tsx

@@ -1,6 +1,7 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
+import * as React from "react"
+
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { cn } from "@/lib/utils"
 
 export type NavTabItem = {
   label: React.ReactNode
@@ -24,37 +25,45 @@ const sizeClassName = {
   lg: "h-11 px-5 text-base",
 }
 
-function NavTabs({ items, value, onValueChange, size = "default", fullWidth = false, className, ...props }: NavTabsProps) {
-  return (
-    <div data-slot="nav-tabs" className={cn("inline-flex rounded-[var(--radius-xl)] border border-border/80 bg-muted/45 p-1", fullWidth && "w-full", className)} {...props}>
-      {items.map((item) => {
-        const active = item.value === value
-        const content = (
+function NavTabs({ items, value, onValueChange, size = "default", fullWidth = false, className, ...props }: NavTabsProps) {
+  return (
+    <Tabs
+      value={value}
+      onValueChange={(nextValue) => onValueChange?.(String(nextValue))}
+      data-slot="nav-tabs"
+      className={cn("min-w-0", fullWidth && "w-full", className)}
+      {...props}
+    >
+      <TabsList data-slot="nav-tabs-list" variant="pills" overflow="scroll" className={cn(fullWidth && "w-full")}>
+      {items.map((item) => {
+        const active = item.value === value
+        const content = (
           <>
             {item.icon ? <span className="[&_svg]:size-4">{item.icon}</span> : null}
             <span className="truncate">{item.label}</span>
           </>
         )
 
-        const itemClassName = cn(
-          "inline-flex items-center justify-center gap-2 rounded-[calc(var(--radius-xl)-4px)] font-medium text-muted-foreground transition hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
-          sizeClassName[size],
-          fullWidth && "flex-1",
-          active && "bg-background text-foreground shadow-sm"
-        )
-
-        return item.href ? (
-          <a key={item.value} href={item.href} aria-current={active ? "page" : undefined} className={itemClassName}>
-            {content}
-          </a>
-        ) : (
-          <button key={item.value} type="button" disabled={item.disabled} className={itemClassName} onClick={() => onValueChange?.(item.value)}>
-            {content}
-          </button>
-        )
-      })}
-    </div>
-  )
-}
+        const itemClassName = cn(
+          "min-w-0 disabled:pointer-events-none disabled:opacity-50",
+          sizeClassName[size],
+          fullWidth && "flex-1",
+          active && "bg-background text-foreground shadow-sm"
+        )
+
+        return item.href ? (
+          <TabsTrigger key={item.value} value={item.value} render={<a href={item.href} aria-current={active ? "page" : undefined} className={itemClassName} />}>
+            {content}
+          </TabsTrigger>
+        ) : (
+          <TabsTrigger key={item.value} value={item.value} disabled={item.disabled} className={itemClassName} onClick={() => onValueChange?.(item.value)}>
+            {content}
+          </TabsTrigger>
+        )
+      })}
+      </TabsList>
+    </Tabs>
+  )
+}
 
 export { NavTabs }

package/packages/cli/vendor/src/components/navigation/page-tabs.tsx

@@ -1,7 +1,8 @@
 import * as React from "react"
 
-import { Badge } from "@/components/ui/badge"
-import { cn } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { cn } from "@/lib/utils"
 
 export type PageTabItem<TValue extends string = string> = {
   value: TValue
@@ -30,40 +31,50 @@ function PageTabs<TValue extends string = string>({
   ...props
 }: PageTabsProps<TValue>) {
   const visibleItems = items.filter((item) => !item.hidden)
+  const handleValueChange = (nextValue: unknown) => {
+    const nextItem = visibleItems.find((item) => item.value === nextValue)
+    if (nextItem) {
+      onValueChange?.(nextItem.value, nextItem)
+    }
+  }
 
   return (
-    <div
+    <Tabs
+      value={value}
+      onValueChange={handleValueChange}
       data-slot="page-tabs"
       data-variant={variant}
       className={cn(
-        "flex min-w-0 flex-wrap gap-1.5 border-b border-border/70",
-        variant === "pills" && "rounded-full border border-border/75 bg-muted/22 p-1 shadow-[0_1px_0_rgba(255,255,255,0.04)]",
-        variant === "cards" && "gap-2 border-b-0",
-        variant !== "underline" && "border-b-0",
+        "min-w-0",
         className
       )}
       {...props}
     >
+      <TabsList
+        data-slot="page-tabs-list"
+        variant={variant === "underline" ? "underline" : "pills"}
+        overflow="scroll"
+        className={cn(
+          "w-full",
+          variant === "cards" && "gap-2 border-0 bg-transparent p-0 shadow-none"
+        )}
+      >
       {visibleItems.map((item) => {
         const active = item.value === value
         return (
-          <button
-            key={item.value}
-            type="button"
-            disabled={item.disabled}
-            data-slot="page-tab"
-            data-active={active || undefined}
+          <TabsTrigger
+            key={item.value}
+            disabled={item.disabled}
+            value={item.value}
+            data-slot="page-tab"
+            data-active={active || undefined}
             className={cn(
-              "inline-flex min-w-0 items-center gap-2 rounded-full px-3 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4",
+              "min-w-0 px-3 disabled:pointer-events-none disabled:opacity-50",
               size === "sm" ? "h-8" : "h-10",
-              variant === "underline" && "rounded-none border-b-2 border-transparent px-1 text-muted-foreground hover:text-foreground",
-              variant === "underline" && active && "border-primary text-foreground",
-              variant === "pills" && "text-muted-foreground hover:bg-background/72 hover:text-foreground",
-              variant === "pills" && active && "bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground",
+              variant === "underline" && "px-1",
               variant === "cards" && "rounded-[var(--radius-2xl)] border border-border/75 bg-card/96 text-muted-foreground shadow-sm ring-1 ring-foreground/4 hover:border-primary/28 hover:text-foreground",
               variant === "cards" && active && "border-primary/50 bg-primary/7 text-foreground"
             )}
-            onClick={() => onValueChange?.(item.value, item)}
           >
             {item.icon}
             <span className="truncate">{item.label}</span>
@@ -72,11 +83,12 @@ function PageTabs<TValue extends string = string>({
                 {item.badge}
               </Badge>
             )}
-          </button>
+          </TabsTrigger>
         )
       })}
-    </div>
-  )
-}
+      </TabsList>
+    </Tabs>
+  )
+}
 
 export { PageTabs }

package/packages/cli/vendor/src/components/navigation/pagination.tsx

@@ -20,15 +20,21 @@ export type PaginationLabels = {
   page?: (page: number) => string
 }
 
-export type PaginationProps = Omit<React.ComponentProps<"nav">, "onChange"> & {
-  page: number
-  pageCount: number
-  onPageChange: (page: number) => void
-  siblingCount?: number
-  showEdges?: boolean
-  disabled?: boolean
-  labels?: PaginationLabels
-}
+export type PaginationProps = Omit<React.ComponentProps<"nav">, "onChange"> & {
+  page: number
+  pageCount: number
+  onPageChange: (page: number) => void
+  siblingCount?: number
+  showEdges?: boolean
+  disabled?: boolean
+  labels?: PaginationLabels
+  compact?: boolean
+  totalCount?: number
+  pageSize?: number
+  pageSizeOptions?: number[]
+  onPageSizeChange?: (pageSize: number) => void
+  showSummary?: boolean
+}
 
 function range(start: number, end: number) {
   const length = Math.max(end - start + 1, 0)
@@ -71,11 +77,17 @@ function Pagination({
   pageCount,
   onPageChange,
   siblingCount = 1,
-  showEdges = true,
-  disabled = false,
-  labels,
-  ...props
-}: PaginationProps) {
+  showEdges = true,
+  disabled = false,
+  labels,
+  compact = false,
+  totalCount,
+  pageSize,
+  pageSizeOptions,
+  onPageSizeChange,
+  showSummary = false,
+  ...props
+}: PaginationProps) {
   const safePageCount = Math.max(pageCount, 1)
   const currentPage = Math.min(Math.max(page, 1), safePageCount)
   const items = getPaginationItems(currentPage, safePageCount, siblingCount)
@@ -88,21 +100,26 @@ function Pagination({
     }
   }
 
-  return (
+  return (
     <nav
       data-slot="pagination"
       aria-label="Pagination"
       className={cn(
-        "flex items-center justify-center gap-1 rounded-full border border-border/70 bg-background/76 p-1 shadow-none backdrop-blur",
+        "flex flex-wrap items-center justify-center gap-1 rounded-full border border-border/70 bg-background/76 p-1 shadow-none backdrop-blur",
         className
       )}
       {...props}
     >
-      {showEdges && (
-        <Button
+      {showSummary && totalCount !== undefined && pageSize ? (
+        <div className="px-2 text-xs text-muted-foreground">
+          {Math.min((currentPage - 1) * pageSize + 1, totalCount)}-{Math.min(currentPage * pageSize, totalCount)} of {totalCount}
+        </div>
+      ) : null}
+      {showEdges && (
+        <Button
           type="button"
-          variant="outline"
-          size="icon-sm"
+          variant="outline"
+          size={compact ? "icon-xs" : "icon-sm"}
           disabled={disabled || currentPage <= 1}
           aria-label={labels?.first ?? "First page"}
           onClick={() => goToPage(1)}
@@ -113,8 +130,8 @@ function Pagination({
 
       <Button
         type="button"
-        variant="outline"
-        size="icon-sm"
+        variant="outline"
+        size={compact ? "icon-xs" : "icon-sm"}
         disabled={disabled || currentPage <= 1}
         aria-label={labels?.previous ?? "Previous page"}
         onClick={() => goToPage(currentPage - 1)}
@@ -141,7 +158,7 @@ function Pagination({
             key={item}
             type="button"
             variant={item === currentPage ? "default" : "outline"}
-            size="icon-sm"
+            size={compact ? "icon-xs" : "icon-sm"}
             disabled={disabled}
             aria-current={item === currentPage ? "page" : undefined}
             aria-label={labels?.page?.(item) ?? `Page ${item}`}
@@ -155,8 +172,8 @@ function Pagination({
 
       <Button
         type="button"
-        variant="outline"
-        size="icon-sm"
+        variant="outline"
+        size={compact ? "icon-xs" : "icon-sm"}
         disabled={disabled || currentPage >= safePageCount}
         aria-label={labels?.next ?? "Next page"}
         onClick={() => goToPage(currentPage + 1)}
@@ -167,17 +184,34 @@ function Pagination({
       {showEdges && (
         <Button
           type="button"
-          variant="outline"
-          size="icon-sm"
+          variant="outline"
+          size={compact ? "icon-xs" : "icon-sm"}
           disabled={disabled || currentPage >= safePageCount}
           aria-label={labels?.last ?? "Last page"}
           onClick={() => goToPage(safePageCount)}
         >
           <ChevronLastIcon />
         </Button>
-      )}
-    </nav>
-  )
-}
+      )}
+      {pageSizeOptions && pageSize && onPageSizeChange ? (
+        <label className="ml-1 inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/90 px-3 py-1 text-xs text-muted-foreground">
+          <span>Rows</span>
+          <select
+            className="bg-transparent text-foreground outline-none"
+            value={pageSize}
+            onChange={(event) => onPageSizeChange(Number(event.target.value))}
+            disabled={disabled}
+          >
+            {pageSizeOptions.map((option) => (
+              <option key={option} value={option}>
+                {option}
+              </option>
+            ))}
+          </select>
+        </label>
+      ) : null}
+    </nav>
+  )
+}
 
 export { Pagination, getPaginationItems }

package/packages/cli/vendor/src/components/notifications/notification-center.tsx

@@ -11,11 +11,13 @@ export type NotificationItem = {
   description?: React.ReactNode
   time?: React.ReactNode
   read?: boolean
+  group?: React.ReactNode
 }
 
 export type NotificationCenterProps = React.ComponentProps<"div"> & {
   notifications: NotificationItem[]
   onMarkAllRead?: () => void
+  onClearAll?: () => void
   onNotificationClick?: (notification: NotificationItem) => void
   emptyLabel?: React.ReactNode
   title?: React.ReactNode
@@ -24,6 +26,7 @@ export type NotificationCenterProps = React.ComponentProps<"div"> & {
 function NotificationCenter({
   notifications,
   onMarkAllRead,
+  onClearAll,
   onNotificationClick,
   emptyLabel = "No new notifications",
   title = "Notifications",
@@ -31,6 +34,11 @@ function NotificationCenter({
   ...props
 }: NotificationCenterProps) {
   const unreadCount = notifications.filter((n) => !n.read).length
+  const groupedNotifications = notifications.reduce<Record<string, NotificationItem[]>>((accumulator, notification) => {
+    const key = String(notification.group ?? "Recent")
+    accumulator[key] = [...(accumulator[key] ?? []), notification]
+    return accumulator
+  }, {})
 
   return (
     <div data-slot="notification-center" className={className} {...props}>
@@ -60,16 +68,28 @@ function NotificationCenter({
                 {unreadCount > 0 ? `${unreadCount} unread update${unreadCount > 1 ? "s" : ""}` : "You're all caught up"}
               </span>
             </div>
-            {unreadCount > 0 && onMarkAllRead && (
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-8 rounded-full border border-[color:var(--aui-surface-border)] px-3 text-xs font-semibold text-muted-foreground hover:bg-[color:var(--aui-page-bg)] hover:text-foreground"
-                onClick={onMarkAllRead}
-              >
-                Mark all read
-              </Button>
-            )}
+            <div className="flex items-center gap-2">
+              {unreadCount > 0 && onMarkAllRead ? (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 rounded-full border border-[color:var(--aui-surface-border)] px-3 text-xs font-semibold text-muted-foreground hover:bg-[color:var(--aui-page-bg)] hover:text-foreground"
+                  onClick={onMarkAllRead}
+                >
+                  Mark all read
+                </Button>
+              ) : null}
+              {notifications.length > 0 && onClearAll ? (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 rounded-full border border-[color:var(--aui-surface-border)] px-3 text-xs font-semibold text-muted-foreground hover:bg-[color:var(--aui-page-bg)] hover:text-foreground"
+                  onClick={onClearAll}
+                >
+                  Clear all
+                </Button>
+              ) : null}
+            </div>
           </div>
           <div className="max-h-[400px] overflow-y-auto bg-[color:var(--aui-page-bg)] p-2">
             {notifications.length === 0 ? (
@@ -77,35 +97,40 @@ function NotificationCenter({
                 {emptyLabel}
               </div>
             ) : (
-              <div className="flex flex-col">
-                {notifications.map((notification) => (
-                  <button
-                    key={notification.id}
-                    className={cn(
-                      "flex flex-col gap-1 rounded-2xl border border-transparent px-4 py-3 text-left transition hover:border-[color:var(--aui-surface-border)] hover:bg-[color:var(--aui-control-bg)]",
-                      !notification.read && "border-[color:color-mix(in_srgb,var(--aui-brand-strong)_16%,var(--aui-surface-border))] bg-[color:color-mix(in_srgb,var(--aui-brand-strong)_8%,var(--aui-control-bg))]"
-                    )}
-                    onClick={() => onNotificationClick?.(notification)}
-                  >
-                    <div className="flex w-full items-start justify-between gap-2">
-                      <span className="text-sm font-semibold leading-tight text-foreground">
-                        {notification.title}
-                      </span>
-                      {!notification.read && (
-                        <span className="mt-1 flex size-2 shrink-0 rounded-full bg-[color:var(--aui-brand-strong)] shadow-[0_0_0_4px_color-mix(in_srgb,var(--aui-brand-strong)_14%,transparent)]" />
-                      )}
-                    </div>
-                    {notification.description && (
-                      <span className="line-clamp-2 text-xs leading-5 text-muted-foreground">
-                        {notification.description}
-                      </span>
-                    )}
-                    {notification.time && (
-                      <span className="mt-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground/80">
-                        {notification.time}
-                      </span>
-                    )}
-                  </button>
+              <div className="flex flex-col gap-3">
+                {Object.entries(groupedNotifications).map(([group, groupItems]) => (
+                  <div key={group} className="grid gap-2">
+                    <div className="px-2 pt-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">{group}</div>
+                    {groupItems.map((notification) => (
+                      <button
+                        key={notification.id}
+                        className={cn(
+                          "flex flex-col gap-1 rounded-2xl border border-transparent px-4 py-3 text-left transition hover:border-[color:var(--aui-surface-border)] hover:bg-[color:var(--aui-control-bg)]",
+                          !notification.read && "border-[color:color-mix(in_srgb,var(--aui-brand-strong)_16%,var(--aui-surface-border))] bg-[color:color-mix(in_srgb,var(--aui-brand-strong)_8%,var(--aui-control-bg))]"
+                        )}
+                        onClick={() => onNotificationClick?.(notification)}
+                      >
+                        <div className="flex w-full items-start justify-between gap-2">
+                          <span className="text-sm font-semibold leading-tight text-foreground">
+                            {notification.title}
+                          </span>
+                          {!notification.read && (
+                            <span className="mt-1 flex size-2 shrink-0 rounded-full bg-[color:var(--aui-brand-strong)] shadow-[0_0_0_4px_color-mix(in_srgb,var(--aui-brand-strong)_14%,transparent)]" />
+                          )}
+                        </div>
+                        {notification.description && (
+                          <span className="line-clamp-2 text-xs leading-5 text-muted-foreground">
+                            {notification.description}
+                          </span>
+                        )}
+                        {notification.time && (
+                          <span className="mt-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground/80">
+                            {notification.time}
+                          </span>
+                        )}
+                      </button>
+                    ))}
+                  </div>
                 ))}
               </div>
             )}

package/packages/cli/vendor/src/components/notifications/toast.tsx

@@ -6,15 +6,16 @@ import { cn } from "@/lib/utils"
 
 export type ToastTone = "default" | "success" | "info" | "warning" | "danger" | "loading"
 
-export type ToastItem = {
+export type ToastItem = {
   id: string
   title?: React.ReactNode
   description?: React.ReactNode
   tone?: ToastTone
   action?: React.ReactNode
   duration?: number
-  dismissible?: boolean
-}
+  dismissible?: boolean
+  group?: React.ReactNode
+}
 
 export type CreateToastInput = Omit<ToastItem, "id"> & {
   id?: string
@@ -39,8 +40,8 @@ export type ToastContextValue = {
   warning: (toast: ToastShortcutInput) => string
   error: (toast: ToastShortcutInput) => string
   loading: (toast: ToastShortcutInput) => string
-  promise: <TData>(promise: Promise<TData>, messages: ToastPromiseMessages<TData>) => Promise<TData>
-}
+  promise: <TData>(promise: Promise<TData>, messages: ToastPromiseMessages<TData>) => Promise<TData>
+}
 
 const ToastContext = React.createContext<ToastContextValue | null>(null)
 
@@ -187,17 +188,17 @@ function ToastProvider({
   return (
     <ToastContext.Provider value={value}>
       {children}
-      <div
-        data-slot="toast-viewport"
-        className={cn("fixed z-[100] flex w-[min(100%-2rem,24rem)] flex-col gap-2", positionClassName[position])}
-      >
-        {toasts.map((toast) => (
-          <ToastCard key={toast.id} toast={toast} pauseOnHover={pauseOnHover} onDismiss={dismissToast} />
-        ))}
-      </div>
-    </ToastContext.Provider>
-  )
-}
+      <div
+        data-slot="toast-viewport"
+        className={cn("fixed z-[100] flex w-[min(100%-2rem,24rem)] flex-col gap-2", positionClassName[position])}
+      >
+        {toasts.map((toast) => (
+          <ToastCard key={toast.id} toast={toast} pauseOnHover={pauseOnHover} onDismiss={dismissToast} />
+        ))}
+      </div>
+    </ToastContext.Provider>
+  )
+}
 
 function ToastCard({
   toast,
@@ -231,11 +232,12 @@ function ToastCard({
       onMouseLeave={() => setHovered(false)}
     >
       <div className="mt-0.5 shrink-0">{toneIcon[tone]}</div>
-      <div className="min-w-0 flex-1 space-y-1">
-        {toast.title && <div className="text-sm font-medium leading-none">{toast.title}</div>}
-        {toast.description && <div className="text-sm text-muted-foreground">{toast.description}</div>}
-        {toast.action && <div className="pt-1">{toast.action}</div>}
-      </div>
+      <div className="min-w-0 flex-1 space-y-1">
+        {toast.group ? <div className="text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">{toast.group}</div> : null}
+        {toast.title && <div className="text-sm font-medium leading-none">{toast.title}</div>}
+        {toast.description && <div className="text-sm text-muted-foreground">{toast.description}</div>}
+        {toast.action && <div className="pt-1">{toast.action}</div>}
+      </div>
       {toast.dismissible !== false && (
         <Button type="button" variant="ghost" size="icon-xs" onClick={() => onDismiss(toast.id)}>
           <XIcon />

package/packages/cli/vendor/src/components/overlay/alert-dialog.tsx

@@ -174,7 +174,7 @@ function AlertDialog({
             type="button"
             variant={actionTone === "destructive" ? "destructive" : "default"}
             loading={resolvedLoading}
-            disabled={!canConfirm && !resolvedLoading}
+            disabled={!canConfirm || resolvedLoading}
             onClick={() => void handleAction()}
             {...actionButtonProps}
           >