tembro 1.0.0

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

@@ -0,0 +1,44 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type AnchorNavItem = {
+  key: string
+  label: React.ReactNode
+  href: string
+  active?: boolean
+  disabled?: boolean
+}
+
+export type AnchorNavProps = React.ComponentProps<"nav"> & {
+  items: AnchorNavItem[]
+  orientation?: "vertical" | "horizontal"
+  title?: React.ReactNode
+}
+
+function AnchorNav({ items, orientation = "vertical", title, className, ...props }: AnchorNavProps) {
+  return (
+    <nav data-slot="anchor-nav" className={cn("grid gap-2 text-sm", orientation === "horizontal" && "flex flex-wrap", className)} {...props}>
+      {title && <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{title}</div>}
+      <div className={cn("grid gap-1", orientation === "horizontal" && "flex flex-wrap")}> 
+        {items.map((item) => (
+          <a
+            key={item.key}
+            href={item.disabled ? undefined : item.href}
+            aria-current={item.active ? "location" : undefined}
+            aria-disabled={item.disabled || undefined}
+            className={cn(
+              "rounded-md px-2 py-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+              item.active && "bg-muted text-foreground",
+              item.disabled && "pointer-events-none opacity-50"
+            )}
+          >
+            {item.label}
+          </a>
+        ))}
+      </div>
+    </nav>
+  )
+}
+
+export { AnchorNav }

package/packages/cli/vendor/src/components/navigation/command-bar.tsx

@@ -0,0 +1,34 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export type CommandBarProps = React.ComponentProps<"div"> & {
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  position?: "bottom" | "top"
+}
+
+function CommandBar({
+  open = true,
+  position = "bottom",
+  children,
+  className,
+  ...props
+}: CommandBarProps) {
+  if (!open) return null
+
+  return (
+    <div
+      data-slot="command-bar"
+      className={cn(
+        "fixed left-1/2 z-50 flex -translate-x-1/2 items-center gap-2 rounded-full border bg-background/95 px-4 py-2 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-background/60",
+        position === "bottom" ? "bottom-6" : "top-6",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export { CommandBar }

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

@@ -0,0 +1,9 @@
+import { component, createShowcaseDemoRegistry } from "@/showcase/create-demo"
+
+export const navigationShowcaseDemoRegistry = createShowcaseDemoRegistry([
+  component("pagination", "Pagination", "navigation", "Controlled page navigation with edge buttons and active state."),
+  component("nav-tabs", "NavTabs", "navigation", "Navigation tabs for switching related document sections."),
+  component("anchor-nav", "AnchorNav", "navigation", "Section jump navigation for long detail pages."),
+  component("page-tabs", "PageTabs", "navigation", "Top-level page tab strip for route-sized sections."),
+  component("stepper-tabs", "StepperTabs", "navigation", "Step-like tabs for setup and onboarding progress."),
+])

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

@@ -0,0 +1,6 @@
+export * from "./anchor-nav"
+export * from "./nav-tabs"
+export * from "./page-tabs"
+export * from "./pagination"
+export * from "./stepper-tabs"
+export * from "./command-bar"

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

@@ -0,0 +1,60 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type NavTabItem = {
+  label: React.ReactNode
+  value: string
+  href?: string
+  icon?: React.ReactNode
+  disabled?: boolean
+}
+
+export type NavTabsProps = React.ComponentProps<"div"> & {
+  items: NavTabItem[]
+  value?: string
+  onValueChange?: (value: string) => void
+  size?: "sm" | "default" | "lg"
+  fullWidth?: boolean
+}
+
+const sizeClassName = {
+  sm: "h-8 px-3 text-xs",
+  default: "h-10 px-4 text-sm",
+  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 = (
+          <>
+            {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>
+  )
+}
+
+export { NavTabs }

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

@@ -0,0 +1,82 @@
+import * as React from "react"
+
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+export type PageTabItem<TValue extends string = string> = {
+  value: TValue
+  label: React.ReactNode
+  icon?: React.ReactNode
+  badge?: React.ReactNode
+  disabled?: boolean
+  hidden?: boolean
+}
+
+export type PageTabsProps<TValue extends string = string> = React.ComponentProps<"div"> & {
+  value?: TValue
+  items: PageTabItem<TValue>[]
+  onValueChange?: (value: TValue, item: PageTabItem<TValue>) => void
+  variant?: "underline" | "pills" | "cards"
+  size?: "sm" | "default"
+}
+
+function PageTabs<TValue extends string = string>({
+  value,
+  items,
+  onValueChange,
+  variant = "underline",
+  size = "default",
+  className,
+  ...props
+}: PageTabsProps<TValue>) {
+  const visibleItems = items.filter((item) => !item.hidden)
+
+  return (
+    <div
+      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",
+        className
+      )}
+      {...props}
+    >
+      {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}
+            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",
+              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 === "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>
+            {item.badge !== undefined && (
+              <Badge variant={active && variant === "pills" ? "secondary" : "outline"} className="rounded-full">
+                {item.badge}
+              </Badge>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export { PageTabs }

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

@@ -0,0 +1,183 @@
+import * as React from "react"
+import {
+  ChevronFirstIcon,
+  ChevronLastIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type PaginationItem = number | "ellipsis"
+
+export type PaginationLabels = {
+  first?: string
+  previous?: string
+  next?: string
+  last?: string
+  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
+}
+
+function range(start: number, end: number) {
+  const length = Math.max(end - start + 1, 0)
+  return Array.from({ length }, (_, index) => index + start)
+}
+
+function getPaginationItems(
+  page: number,
+  pageCount: number,
+  siblingCount = 1
+): PaginationItem[] {
+  const totalPageNumbers = siblingCount * 2 + 5
+
+  if (pageCount <= totalPageNumbers) {
+    return range(1, pageCount)
+  }
+
+  const leftSiblingIndex = Math.max(page - siblingCount, 1)
+  const rightSiblingIndex = Math.min(page + siblingCount, pageCount)
+
+  const shouldShowLeftEllipsis = leftSiblingIndex > 2
+  const shouldShowRightEllipsis = rightSiblingIndex < pageCount - 1
+
+  if (!shouldShowLeftEllipsis && shouldShowRightEllipsis) {
+    const leftItemCount = siblingCount * 2 + 3
+    return [...range(1, leftItemCount), "ellipsis", pageCount]
+  }
+
+  if (shouldShowLeftEllipsis && !shouldShowRightEllipsis) {
+    const rightItemCount = siblingCount * 2 + 3
+    return [1, "ellipsis", ...range(pageCount - rightItemCount + 1, pageCount)]
+  }
+
+  return [1, "ellipsis", ...range(leftSiblingIndex, rightSiblingIndex), "ellipsis", pageCount]
+}
+
+function Pagination({
+  className,
+  page,
+  pageCount,
+  onPageChange,
+  siblingCount = 1,
+  showEdges = true,
+  disabled = false,
+  labels,
+  ...props
+}: PaginationProps) {
+  const safePageCount = Math.max(pageCount, 1)
+  const currentPage = Math.min(Math.max(page, 1), safePageCount)
+  const items = getPaginationItems(currentPage, safePageCount, siblingCount)
+
+  const goToPage = (nextPage: number) => {
+    const clampedPage = Math.min(Math.max(nextPage, 1), safePageCount)
+
+    if (clampedPage !== currentPage) {
+      onPageChange(clampedPage)
+    }
+  }
+
+  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",
+        className
+      )}
+      {...props}
+    >
+      {showEdges && (
+        <Button
+          type="button"
+          variant="outline"
+          size="icon-sm"
+          disabled={disabled || currentPage <= 1}
+          aria-label={labels?.first ?? "First page"}
+          onClick={() => goToPage(1)}
+        >
+          <ChevronFirstIcon />
+        </Button>
+      )}
+
+      <Button
+        type="button"
+        variant="outline"
+        size="icon-sm"
+        disabled={disabled || currentPage <= 1}
+        aria-label={labels?.previous ?? "Previous page"}
+        onClick={() => goToPage(currentPage - 1)}
+      >
+        <ChevronLeftIcon />
+      </Button>
+
+      {items.map((item, index) => {
+        if (item === "ellipsis") {
+          return (
+            <span
+              key={`ellipsis-${index}`}
+              data-slot="pagination-ellipsis"
+              className="flex size-8 items-center justify-center text-muted-foreground"
+            >
+              <MoreHorizontalIcon className="size-4" />
+              <span className="sr-only">More pages</span>
+            </span>
+          )
+        }
+
+        return (
+          <Button
+            key={item}
+            type="button"
+            variant={item === currentPage ? "default" : "outline"}
+            size="icon-sm"
+            disabled={disabled}
+            aria-current={item === currentPage ? "page" : undefined}
+            aria-label={labels?.page?.(item) ?? `Page ${item}`}
+            onClick={() => goToPage(item)}
+            className={cn(item !== currentPage && "border-border/70 bg-background/80 shadow-none")}
+          >
+            {item}
+          </Button>
+        )
+      })}
+
+      <Button
+        type="button"
+        variant="outline"
+        size="icon-sm"
+        disabled={disabled || currentPage >= safePageCount}
+        aria-label={labels?.next ?? "Next page"}
+        onClick={() => goToPage(currentPage + 1)}
+      >
+        <ChevronRightIcon />
+      </Button>
+
+      {showEdges && (
+        <Button
+          type="button"
+          variant="outline"
+          size="icon-sm"
+          disabled={disabled || currentPage >= safePageCount}
+          aria-label={labels?.last ?? "Last page"}
+          onClick={() => goToPage(safePageCount)}
+        >
+          <ChevronLastIcon />
+        </Button>
+      )}
+    </nav>
+  )
+}
+
+export { Pagination, getPaginationItems }

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

@@ -0,0 +1,67 @@
+import * as React from "react"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type StepperTabItem<TValue extends string = string> = {
+  value: TValue
+  label: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  completed?: boolean
+  disabled?: boolean
+  hidden?: boolean
+}
+
+export type StepperTabsProps<TValue extends string = string> = React.ComponentProps<"div"> & {
+  value?: TValue
+  items: StepperTabItem<TValue>[]
+  onValueChange?: (value: TValue, item: StepperTabItem<TValue>) => void
+  orientation?: "horizontal" | "vertical"
+  compact?: boolean
+}
+
+function StepperTabs<TValue extends string = string>({
+  value,
+  items,
+  onValueChange,
+  orientation = "horizontal",
+  compact = false,
+  className,
+  ...props
+}: StepperTabsProps<TValue>) {
+  const visibleItems = items.filter((item) => !item.hidden)
+
+  return (
+    <div data-slot="stepper-tabs" data-orientation={orientation} className={cn(orientation === "vertical" ? "grid gap-2" : "flex flex-wrap gap-2", className)} {...props}>
+      {visibleItems.map((item, index) => {
+        const active = item.value === value
+        const completed = item.completed
+        return (
+          <button
+            key={item.value}
+            type="button"
+            disabled={item.disabled}
+            data-slot="stepper-tab"
+            data-active={active || undefined}
+            data-completed={completed || undefined}
+            className={cn(
+              "group flex min-w-0 items-start gap-3 rounded-xl border bg-card text-left shadow-sm transition-colors hover:border-primary/40 disabled:pointer-events-none disabled:opacity-55",
+              compact ? "p-3" : "p-4",
+              active && "border-primary/60 bg-primary/5"
+            )}
+            onClick={() => onValueChange?.(item.value, item)}
+          >
+            <span className={cn("flex shrink-0 items-center justify-center rounded-full border bg-background text-xs font-semibold", compact ? "size-7" : "size-8", completed && "border-primary bg-primary text-primary-foreground", active && !completed && "border-primary text-primary")}>{completed ? <CheckIcon className="size-4" /> : item.icon ?? index + 1}</span>
+            <span className="min-w-0 space-y-0.5">
+              <span className="block truncate text-sm font-medium text-foreground">{item.label}</span>
+              {item.description && <span className="block text-xs leading-5 text-muted-foreground">{item.description}</span>}
+            </span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export { StepperTabs }

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

@@ -0,0 +1,2 @@
+export * from "./toast"
+export * from "./notification-center"

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

@@ -0,0 +1,119 @@
+import * as React from "react"
+import { BellIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
+
+export type NotificationItem = {
+  id: string
+  title: React.ReactNode
+  description?: React.ReactNode
+  time?: React.ReactNode
+  read?: boolean
+}
+
+export type NotificationCenterProps = React.ComponentProps<"div"> & {
+  notifications: NotificationItem[]
+  onMarkAllRead?: () => void
+  onNotificationClick?: (notification: NotificationItem) => void
+  emptyLabel?: React.ReactNode
+  title?: React.ReactNode
+}
+
+function NotificationCenter({
+  notifications,
+  onMarkAllRead,
+  onNotificationClick,
+  emptyLabel = "No new notifications",
+  title = "Notifications",
+  className,
+  ...props
+}: NotificationCenterProps) {
+  const unreadCount = notifications.filter((n) => !n.read).length
+
+  return (
+    <div data-slot="notification-center" className={className} {...props}>
+      <Popover>
+        <Button
+          render={<PopoverTrigger />}
+          variant="ghost"
+          size="icon"
+          className="relative rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] text-foreground shadow-sm hover:bg-[color:color-mix(in_srgb,var(--aui-control-bg)_82%,white_18%)]"
+        >
+          <BellIcon className="size-5" />
+          {unreadCount > 0 && (
+            <span className="absolute -right-1 -top-1 inline-flex min-w-5 items-center justify-center rounded-full bg-[color:var(--aui-brand-strong)] px-1.5 py-0.5 text-[10px] font-bold leading-none text-white shadow-[0_8px_20px_rgba(16,185,129,0.35)]">
+              {unreadCount}
+              <span className="sr-only">{unreadCount} unread notifications</span>
+            </span>
+          )}
+        </Button>
+        <PopoverContent
+          className="w-[24rem] overflow-hidden rounded-3xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] p-0 shadow-[0_24px_60px_rgba(15,23,42,0.18)]"
+          align="end"
+        >
+          <div className="flex items-center justify-between border-b border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] px-5 py-4">
+            <div className="grid gap-0.5">
+              <h4 className="font-semibold tracking-tight text-foreground">{title}</h4>
+              <span className="text-xs text-muted-foreground">
+                {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>
+          <div className="max-h-[400px] overflow-y-auto bg-[color:var(--aui-page-bg)] p-2">
+            {notifications.length === 0 ? (
+              <div className="rounded-2xl border border-dashed border-[color:var(--aui-surface-border)] px-6 py-10 text-center text-sm text-muted-foreground">
+                {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>
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+export { NotificationCenter }