tembro 6.0.3 → 6.1.1

package/packages/cli/vendor/src/components/overlay/drawer.tsx

@@ -14,13 +14,15 @@ import { cn } from "@/lib/utils"
 
 export type DrawerSide = "left" | "right" | "top" | "bottom"
 export type DrawerWidth = "sm" | "md" | "lg" | "xl" | "full"
-
+export type DrawerDensity = "compact" | "default" | "comfortable"
+
 export type DrawerProps = Omit<React.ComponentProps<typeof Dialog>, "children"> & {
   trigger?: React.ReactNode
   title?: React.ReactNode
   description?: React.ReactNode
   side?: DrawerSide
   width?: DrawerWidth
+  density?: DrawerDensity
   footer?: React.ReactNode
   headerClassName?: string
   bodyClassName?: string
@@ -29,12 +31,12 @@ export type DrawerProps = Omit<React.ComponentProps<typeof Dialog>, "children">
   showCloseButton?: boolean
   children?: React.ReactNode
 }
-
+
 const sideClassName: Record<DrawerSide, string> = {
-  right: "left-auto right-0 top-0 h-dvh max-h-dvh w-full translate-x-0 translate-y-0 rounded-none rounded-l-[var(--radius-3xl)] data-open:slide-in-from-right data-closed:slide-out-to-right",
-  left: "left-0 top-0 h-dvh max-h-dvh w-full translate-x-0 translate-y-0 rounded-none rounded-r-[var(--radius-3xl)] data-open:slide-in-from-left data-closed:slide-out-to-left",
-  top: "left-0 top-0 h-auto max-h-[85dvh] w-full max-w-none translate-x-0 translate-y-0 rounded-none rounded-b-[var(--radius-3xl)] data-open:slide-in-from-top data-closed:slide-out-to-top",
-  bottom: "bottom-0 left-0 top-auto h-auto max-h-[85dvh] w-full max-w-none translate-x-0 translate-y-0 rounded-none rounded-t-[var(--radius-3xl)] data-open:slide-in-from-bottom data-closed:slide-out-to-bottom",
+  right: "!left-auto !right-0 !top-0 !h-dvh !max-h-dvh !w-full !translate-x-0 !translate-y-0 rounded-none rounded-l-[var(--radius-3xl)] data-open:slide-in-from-right data-closed:slide-out-to-right",
+  left: "!left-0 !top-0 !h-dvh !max-h-dvh !w-full !translate-x-0 !translate-y-0 rounded-none rounded-r-[var(--radius-3xl)] data-open:slide-in-from-left data-closed:slide-out-to-left",
+  top: "!left-0 !top-0 !h-auto !max-h-[85dvh] !w-full !max-w-none !translate-x-0 !translate-y-0 rounded-none rounded-b-[var(--radius-3xl)] data-open:slide-in-from-top data-closed:slide-out-to-top",
+  bottom: "!bottom-0 !left-0 !top-auto !h-auto !max-h-[85dvh] !w-full !max-w-none !translate-x-0 !translate-y-0 rounded-none rounded-t-[var(--radius-3xl)] data-open:slide-in-from-bottom data-closed:slide-out-to-bottom",
 }
 
 const widthClassName: Record<DrawerWidth, string> = {
@@ -44,13 +46,20 @@ const widthClassName: Record<DrawerWidth, string> = {
   xl: "sm:max-w-2xl",
   full: "max-w-none sm:max-w-[min(100vw,72rem)]",
 }
-
-function Drawer({
+
+const densityClassName: Record<DrawerDensity, { header: string; body: string; footer: string }> = {
+  compact: { header: "p-4", body: "p-4", footer: "p-4" },
+  default: { header: "p-5", body: "p-5", footer: "p-5" },
+  comfortable: { header: "p-6", body: "p-6", footer: "p-6" },
+}
+
+function Drawer({
   trigger,
   title,
   description,
   side = "right",
   width = "lg",
+  density = "default",
   footer,
   headerClassName,
   bodyClassName,
@@ -65,21 +74,23 @@ function Drawer({
       {trigger ? <DialogTrigger render={trigger as React.ReactElement} /> : null}
       <DialogContent
         size="full"
+        surface="plain"
         showCloseButton={showCloseButton}
         data-side={side}
         data-width={width}
+        data-density={density}
         className={cn("fixed grid grid-rows-[auto_minmax(0,1fr)_auto] gap-0 overscroll-contain p-0", sideClassName[side], (side === "left" || side === "right") && widthClassName[width], contentClassName)}
       >
         {(title || description) && (
-          <DialogHeader className={cn("border-b border-border/70 p-6", headerClassName)}>
+          <DialogHeader className={cn("border-b border-border/70 bg-background/95 backdrop-blur", densityClassName[density].header, headerClassName)}>
             {title ? <DialogTitle>{title}</DialogTitle> : null}
             {description ? <DialogDescription>{description}</DialogDescription> : null}
           </DialogHeader>
         )}
-        <div data-slot="drawer-body" className={cn("min-h-0 flex-1 overflow-y-auto p-6", bodyClassName)}>
+        <div data-slot="drawer-body" className={cn("min-h-0 flex-1 overflow-y-auto bg-background", densityClassName[density].body, bodyClassName)}>
           {children}
         </div>
-        {footer ? <div data-slot="drawer-footer" className={cn("border-t border-border/70 p-5", footerClassName)}>{footer}</div> : null}
+        {footer ? <div data-slot="drawer-footer" className={cn("border-t border-border/70 bg-background/95 backdrop-blur", densityClassName[density].footer, footerClassName)}>{footer}</div> : null}
       </DialogContent>
     </Dialog>
   )

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

@@ -1 +1,2 @@
 export * from "./empty-state"
+export * from "./permissions-matrix"

package/packages/cli/vendor/src/components/patterns/permissions-matrix.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+
+import { Checkbox } from "@/components/ui/checkbox"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { cn } from "@/lib/utils"
+
+export type PermissionMatrixRole = {
+  key: string
+  label: React.ReactNode
+}
+
+export type PermissionMatrixPermission = {
+  key: string
+  label: React.ReactNode
+  description?: React.ReactNode
+}
+
+export type PermissionMatrixValue = Record<string, string[]>
+
+export type PermissionsMatrixProps = React.ComponentProps<"div"> & {
+  roles: PermissionMatrixRole[]
+  permissions: PermissionMatrixPermission[]
+  value?: PermissionMatrixValue
+  onValueChange?: (value: PermissionMatrixValue) => void
+}
+
+function PermissionsMatrix({ roles, permissions, value = {}, onValueChange, className, ...props }: PermissionsMatrixProps) {
+  const toggle = (permissionKey: string, roleKey: string) => {
+    const current = value[permissionKey] ?? []
+    const next = current.includes(roleKey) ? current.filter((item) => item !== roleKey) : [...current, roleKey]
+    onValueChange?.({ ...value, [permissionKey]: next })
+  }
+
+  return (
+    <div data-slot="permissions-matrix" className={cn("overflow-hidden rounded-lg border", className)} {...props}>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Permission</TableHead>
+            {roles.map((role) => <TableHead key={role.key} className="text-center">{role.label}</TableHead>)}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {permissions.map((permission) => (
+            <TableRow key={permission.key}>
+              <TableCell>
+                <span className="grid gap-0.5">
+                  <span className="font-medium">{permission.label}</span>
+                  {permission.description ? <span className="text-xs text-muted-foreground">{permission.description}</span> : null}
+                </span>
+              </TableCell>
+              {roles.map((role) => (
+                <TableCell key={role.key} className="text-center">
+                  <Checkbox
+                    aria-label={`${permission.label} for ${role.label}`}
+                    checked={(value[permission.key] ?? []).includes(role.key)}
+                    onCheckedChange={() => toggle(permission.key, role.key)}
+                  />
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
+
+export { PermissionsMatrix }

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

@@ -1 +1,2 @@
 export * from "./empty-state"
+export * from "./permissions-matrix"

package/packages/cli/vendor/src/components/ui/checkbox/index.tsx

@@ -60,6 +60,8 @@ const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
     const dataState = currentChecked === "indeterminate" ? "indeterminate" : currentChecked ? "checked" : "unchecked"
 
     const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+      event.preventDefault()
+      event.stopPropagation()
       const nextChecked = getNextCheckedState(currentChecked, allowIndeterminate)
 
       if (!isControlled) {
@@ -98,7 +100,7 @@ const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
           disabled={disabled}
           aria-invalid={invalid || undefined}
           className={cn(
-            "peer flex shrink-0 items-center justify-center rounded-[10px] border border-input/88 bg-background text-primary-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.10)] outline-none transition-[background-color,border-color,box-shadow,color,transform] hover:border-ring/30 hover:bg-background focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/25 data-[size=sm]:size-4 data-[size=md]:size-5 data-[size=lg]:size-6 data-[state=checked]:border-primary/28 data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_10px_24px_color-mix(in_oklch,var(--primary),transparent_82%)] data-[state=indeterminate]:border-primary/28 data-[state=indeterminate]:bg-primary data-[state=indeterminate]:shadow-[0_10px_24px_color-mix(in_oklch,var(--primary),transparent_82%)] dark:border-white/12 dark:bg-white/[0.04] dark:hover:bg-white/[0.08]",
+            "peer flex shrink-0 items-center justify-center rounded-[10px] border border-input/88 bg-background text-primary-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.10)] outline-none transition-[background-color,border-color,box-shadow,color,transform] hover:border-ring/30 hover:bg-background focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/25 data-[size=sm]:size-4 data-[size=md]:size-5 data-[size=lg]:size-6 data-[state=checked]:border-primary/28 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:shadow-[0_10px_24px_color-mix(in_oklch,var(--primary),transparent_82%)] data-[state=indeterminate]:border-primary/28 data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:shadow-[0_10px_24px_color-mix(in_oklch,var(--primary),transparent_82%)] dark:data-[state=unchecked]:border-white/12 dark:data-[state=unchecked]:bg-white/[0.04] dark:data-[state=unchecked]:hover:bg-white/[0.08] [&_svg]:stroke-[2.6]",
             className
           )}
           onClick={handleClick}

package/packages/cli/vendor/src/components/ui/dialog/index.tsx

@@ -47,7 +47,7 @@ function DialogOverlay({
     <DialogPrimitive.Backdrop
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 isolate z-50 duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 isolate z-50 bg-black/45 backdrop-blur-[2px] duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 dark:bg-black/62",
         className
       )}
       {...props}
@@ -73,7 +73,7 @@ function DialogContent({
         role="dialog"
         aria-modal="true"
         className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid max-h-[min(92vh,calc(100dvh-2rem))] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 grid-rows-[auto_minmax(0,1fr)_auto] gap-5 overflow-hidden overscroll-contain duration-100 outline-none data-[surface=plain]:overflow-visible data-[size=xs]:sm:max-w-sm data-[size=sm]:sm:max-w-md data-[size=md]:sm:max-w-lg data-[size=lg]:sm:max-w-2xl data-[size=xl]:sm:max-w-4xl data-[size=full]:h-[min(92vh,56rem)] data-[size=full]:max-w-[min(96vw,84rem)] data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "fixed top-1/2 left-1/2 z-50 grid max-h-[min(92vh,calc(100dvh-2rem))] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 grid-rows-[auto_minmax(0,1fr)_auto] gap-5 overflow-hidden overscroll-contain rounded-[var(--aui-card-radius,var(--radius-xl))] border border-border/78 bg-background p-6 text-foreground shadow-[0_32px_90px_rgba(15,23,42,0.24)] duration-100 outline-none data-[surface=plain]:overflow-visible data-[surface=plain]:border-0 data-[surface=plain]:bg-transparent data-[surface=plain]:p-0 data-[surface=plain]:shadow-none data-[size=xs]:sm:max-w-sm data-[size=sm]:sm:max-w-md data-[size=md]:sm:max-w-lg data-[size=lg]:sm:max-w-2xl data-[size=xl]:sm:max-w-4xl data-[size=full]:h-[min(92vh,56rem)] data-[size=full]:max-w-[min(96vw,84rem)] data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
@@ -148,7 +148,7 @@ function DialogTitle({ className, ...props }: DialogTitleProps) {
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={className}
+      className={cn("text-lg font-semibold tracking-tight text-foreground", className)}
       {...props}
     />
   )
@@ -161,7 +161,7 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={className}
+      className={cn("mt-1 text-sm leading-6 text-muted-foreground", className)}
       {...props}
     />
   )

package/packages/cli/vendor/src/components/ui/dropdown-menu/index.tsx

@@ -38,7 +38,7 @@ export type DropdownMenuShortcutProps = React.ComponentProps<"span">
 export type DropdownMenuItemDescriptionProps = React.ComponentProps<"span">
 
 const menuItemClassName =
-  "relative group/dropdown-menu-item [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+  "relative group/dropdown-menu-item flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-[var(--radius-md)] px-2.5 py-2 text-sm text-popover-foreground outline-none transition-[background-color,color] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[inset=true]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:data-[highlighted]:bg-destructive/10 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
 
 function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
   return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
@@ -76,7 +76,7 @@ function DropdownMenuContent({
       >
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
-          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-56 origin-(--transform-origin) overflow-x-hidden overflow-y-auto duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className)}
+          className={cn("z-50 max-h-[min(var(--available-height),24rem)] w-(--anchor-width) min-w-56 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--aui-card-radius,var(--radius-lg))] border border-border/78 bg-popover p-1 text-popover-foreground shadow-[0_18px_50px_rgba(15,23,42,0.18)] outline-none backdrop-blur duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className)}
           {...props}
         />
       </MenuPrimitive.Positioner>
@@ -97,7 +97,7 @@ function DropdownMenuLabel({
     <div
       data-slot="dropdown-menu-label"
       data-inset={inset}
-      className={className}
+      className={cn("px-2.5 py-1.5 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground data-[inset=true]:pl-8", className)}
       {...props}
     />
   )
@@ -118,6 +118,7 @@ function DropdownMenuItem({
       data-variant={variant}
       className={cn(
         menuItemClassName,
+        "pl-8 pr-8",
         className
       )}
       onSelect={(event) => {
@@ -147,6 +148,7 @@ function DropdownMenuSubTrigger({
       data-inset={inset}
       className={cn(
         menuItemClassName,
+        "pl-8",
         className
       )}
       {...props}
@@ -204,14 +206,11 @@ function DropdownMenuCheckboxItem({
       }}
       {...props}
     >
-      <span
-        data-slot="dropdown-menu-checkbox-item-indicator"
-      >
-        <MenuPrimitive.CheckboxItemIndicator>
-          <CheckIcon
-          />
-        </MenuPrimitive.CheckboxItemIndicator>
-      </span>
+      <span data-slot="dropdown-menu-checkbox-item-indicator" className="absolute left-2 grid size-4 place-items-center">
+        <MenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon className="size-4" />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
       {children}
     </MenuPrimitive.CheckboxItem>
   )
@@ -250,14 +249,11 @@ function DropdownMenuRadioItem({
       }}
       {...props}
     >
-      <span
-        data-slot="dropdown-menu-radio-item-indicator"
-      >
-        <MenuPrimitive.RadioItemIndicator>
-          <CheckIcon
-          />
-        </MenuPrimitive.RadioItemIndicator>
-      </span>
+      <span data-slot="dropdown-menu-radio-item-indicator" className="absolute left-2 grid size-4 place-items-center">
+        <MenuPrimitive.RadioItemIndicator>
+          <CheckIcon className="size-4" />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
       {children}
     </MenuPrimitive.RadioItem>
   )
@@ -270,7 +266,7 @@ function DropdownMenuSeparator({
   return (
     <MenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={className}
+      className={cn("-mx-1 my-1 h-px bg-border/72", className)}
       {...props}
     />
   )
@@ -283,7 +279,7 @@ function DropdownMenuShortcut({
   return (
     <span
       data-slot="dropdown-menu-shortcut"
-      className={className}
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
       {...props}
     />
   )
@@ -296,7 +292,7 @@ function DropdownMenuItemDescription({
   return (
     <span
       data-slot="dropdown-menu-item-description"
-      className={className}
+      className={cn("block text-xs leading-5 text-muted-foreground group-data-[highlighted]/dropdown-menu-item:text-accent-foreground/75", className)}
       {...props}
     />
   )

package/packages/cli/vendor/src/components/ui/popover/index.tsx

@@ -46,7 +46,7 @@ function PopoverContent({
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(
-            "z-50 flex max-h-[min(var(--available-height),calc(100dvh-1rem))] w-[min(var(--anchor-width),20rem)] min-w-60 max-w-[calc(100vw-1rem)] origin-(--transform-origin) flex-col gap-3 overflow-y-auto rounded-[var(--radius-lg)] border border-border bg-popover text-popover-foreground shadow-lg outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "z-50 flex max-h-[min(var(--available-height),calc(100dvh-1rem))] w-[min(var(--anchor-width),20rem)] min-w-60 max-w-[calc(100vw-1rem)] origin-(--transform-origin) flex-col gap-3 overflow-y-auto rounded-[var(--aui-card-radius,var(--radius-lg))] border border-border/78 bg-popover p-3 text-popover-foreground shadow-[0_18px_50px_rgba(15,23,42,0.18)] outline-hidden backdrop-blur duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
@@ -60,7 +60,7 @@ function PopoverHeader({ className, ...props }: PopoverHeaderProps) {
   return (
     <div
       data-slot="popover-header"
-      className={className}
+      className={cn("grid gap-1", className)}
       {...props}
     />
   )
@@ -70,7 +70,7 @@ function PopoverTitle({ className, ...props }: PopoverTitleProps) {
   return (
     <PopoverPrimitive.Title
       data-slot="popover-title"
-      className={className}
+      className={cn("text-sm font-semibold text-foreground", className)}
       {...props}
     />
   )
@@ -83,7 +83,7 @@ function PopoverDescription({
   return (
     <PopoverPrimitive.Description
       data-slot="popover-description"
-      className={className}
+      className={cn("text-sm leading-6 text-muted-foreground", className)}
       {...props}
     />
   )

package/packages/cli/vendor/src/components/ui/tabs/index.tsx

@@ -25,7 +25,9 @@ const TabsList = React.forwardRef<
       data-variant={variant}
       data-overflow={overflow}
       className={cn(
-        "inline-flex max-w-full items-center justify-start",
+        "inline-flex max-w-full items-center justify-start gap-1 rounded-[var(--radius-lg)] border border-border/72 bg-muted/45 p-1",
+        variant === "underline" && "gap-4 rounded-none border-x-0 border-t-0 bg-transparent p-0",
+        variant === "compact" && "rounded-[var(--radius-md)] p-0.5",
         overflow === "scroll" && "overflow-x-auto overflow-y-hidden overscroll-x-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
         overflow === "wrap" && "flex-wrap",
         className
@@ -44,7 +46,10 @@ const TabsTrigger = React.forwardRef<
       data-slot="tabs-trigger"
       data-variant={variant}
       className={cn(
-        "inline-flex shrink-0 items-center justify-center whitespace-nowrap disabled:pointer-events-none",
+        "inline-flex h-9 shrink-0 items-center justify-center whitespace-nowrap rounded-[var(--radius-md)] px-3 text-sm font-medium text-muted-foreground outline-none transition-[background-color,border-color,color,box-shadow] hover:bg-background/72 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[selected]:bg-background data-[selected]:text-foreground data-[selected]:shadow-sm",
+        variant === "pills" && "rounded-full px-4 data-[selected]:bg-primary data-[selected]:text-primary-foreground",
+        variant === "underline" && "h-10 rounded-none border-b-2 border-transparent bg-transparent px-0 shadow-none hover:bg-transparent data-[selected]:border-primary data-[selected]:bg-transparent data-[selected]:shadow-none",
+        variant === "compact" && "h-8 rounded-[calc(var(--radius-md)-2px)] px-2.5 text-xs",
         className
       )}
     {...props}
@@ -59,7 +64,7 @@ const TabsContent = React.forwardRef<
     <BaseTabs.Panel
       ref={ref}
       data-slot="tabs-content"
-      className={className}
+      className={cn("mt-3 outline-none focus-visible:ring-2 focus-visible:ring-ring", className)}
     {...props}
   />
 ))

package/packages/cli/vendor/src/components/ui/toggle-group/index.tsx

@@ -35,8 +35,8 @@ function ToggleGroup<TValue extends string = string>({
       orientation={orientation}
       className={cn(
         "inline-flex items-center gap-1 rounded-[var(--radius-lg)]",
-        variant === "default" && "border border-border bg-muted/60 p-1",
-        variant === "outline" && "gap-0 overflow-hidden rounded-[var(--radius-lg)] border border-border",
+        variant === "default" && "border border-border/72 bg-muted/45 p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]",
+        variant === "outline" && "gap-0 overflow-hidden rounded-[var(--radius-lg)] border border-border/78 bg-background",
         orientation === "vertical" && "flex-col items-stretch",
         className
       )}
@@ -57,11 +57,11 @@ function ToggleGroupItem<TValue extends string = string>({
       data-variant={variant}
       data-size={size}
       className={cn(
-        "inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium outline-none transition-[background-color,color,border-color,box-shadow] disabled:pointer-events-none disabled:opacity-50 data-[pressed]:text-foreground focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-4 [&_svg]:shrink-0",
+        "inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium outline-none transition-[background-color,color,border-color,box-shadow,transform] disabled:pointer-events-none disabled:opacity-50 data-[pressed]:text-foreground focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-4 [&_svg]:shrink-0",
         sizeClassName[size],
-        variant === "default" && "rounded-[calc(var(--radius-md)-1px)] text-muted-foreground hover:bg-background/70 data-[pressed]:bg-background data-[pressed]:shadow-sm",
-        variant === "outline" && "-m-px border border-border text-muted-foreground hover:bg-muted/60 data-[pressed]:bg-muted data-[pressed]:shadow-inner first:rounded-l-[var(--radius-md)] last:rounded-r-[var(--radius-md)]",
-        variant === "ghost" && "rounded-[var(--radius-md)] text-muted-foreground hover:bg-muted/70 data-[pressed]:bg-muted",
+        variant === "default" && "rounded-[calc(var(--radius-md)-1px)] text-muted-foreground hover:bg-background/70 hover:text-foreground data-[pressed]:-translate-y-px data-[pressed]:bg-background data-[pressed]:shadow-sm",
+        variant === "outline" && "-m-px border border-border/78 text-muted-foreground hover:bg-muted/60 hover:text-foreground data-[pressed]:bg-primary data-[pressed]:text-primary-foreground data-[pressed]:shadow-inner first:rounded-l-[var(--radius-md)] last:rounded-r-[var(--radius-md)]",
+        variant === "ghost" && "rounded-[var(--radius-md)] text-muted-foreground hover:bg-muted/70 hover:text-foreground data-[pressed]:bg-accent data-[pressed]:text-accent-foreground",
         className
       )}
       {...props}

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

@@ -27,9 +27,7 @@ export * from './components/ui/kbd'
 export * from './components/ui/radio-group'
 export * from './components/ui/scroll-box'
 export * from './components/ui/right-click-menu'
-export * from './components/ui/number-field'
 export * from './components/ui/toggle-group'
-export * from './components/ui/toolbar'
 
 // Reusable groups
 export * from './components/actions/public'

package/packages/cli/vendor/src/public-component-surface.ts

@@ -16,9 +16,8 @@ export const documentedPublicComponentSurfaces: readonly PublicComponentSurfaceE
   { slug: "checkbox", registryName: "checkbox", surface: "documented" },
   { slug: "switch", registryName: "switch", surface: "documented" },
   { slug: "radio-group", registryName: "radio-group", surface: "documented" },
-  { slug: "number-field", registryName: "number-field", surface: "documented" },
+  { slug: "multi-select", registryName: "multi-select", surface: "documented" },
   { slug: "toggle-group", registryName: "toggle-group", surface: "documented" },
-  { slug: "toolbar", registryName: "toolbar", surface: "documented" },
   { slug: "overlay", registryName: "dialog", surface: "documented" },
   { slug: "dropdown-menu", registryName: "dropdown-menu", surface: "documented" },
   { slug: "popover", registryName: "popover", surface: "documented" },
@@ -34,11 +33,14 @@ export const documentedPublicComponentSurfaces: readonly PublicComponentSurfaceE
   { slug: "alert", registryName: "alert", surface: "documented" },
   { slug: "toast", registryName: "toast", surface: "documented" },
   { slug: "notification-center", registryName: "notification-center", surface: "documented" },
+  { slug: "action-toast", registryName: "action-toast", surface: "documented" },
   { slug: "bar-chart", registryName: "charts", surface: "documented" },
+  { slug: "chart-card", registryName: "chart-card", surface: "documented" },
   { slug: "sidebar", registryName: "sidebar", surface: "documented" },
   { slug: "breadcrumbs", registryName: "breadcrumbs", surface: "documented" },
   { slug: "workspace-layout", registryName: "workspace-layout", surface: "documented" },
   { slug: "state-view", registryName: "state-view", surface: "documented" },
+  { slug: "async-boundary", registryName: "async-boundary", surface: "documented" },
   { slug: "file-upload", registryName: "file-upload", surface: "documented" },
   { slug: "progress", registryName: "progress", surface: "documented" },
   { slug: "accordion", registryName: "accordion", surface: "documented" },
@@ -47,6 +49,7 @@ export const documentedPublicComponentSurfaces: readonly PublicComponentSurfaceE
   { slug: "skeleton", registryName: "skeleton", surface: "documented" },
   { slug: "spinner", registryName: "spinner", surface: "documented" },
   { slug: "command-palette", registryName: "command-palette", surface: "documented" },
+  { slug: "advanced-command-menu", registryName: "advanced-command-menu", surface: "documented" },
   { slug: "inline-editable", registryName: "inline-editable", surface: "documented" },
   { slug: "avatar", registryName: "avatar", surface: "documented" },
   { slug: "code-block", registryName: "code-block", surface: "documented" },
@@ -55,26 +58,32 @@ export const documentedPublicComponentSurfaces: readonly PublicComponentSurfaceE
   { slug: "chat", registryName: "chat", surface: "documented" },
   { slug: "list", registryName: "list", surface: "documented" },
   { slug: "description-list", registryName: "description-list", surface: "documented" },
-  { slug: "statistic", registryName: "statistic", surface: "documented" },
   { slug: "tree-view", registryName: "tree-view", surface: "documented" },
   { slug: "copy-button", registryName: "copy-button", surface: "documented" },
   { slug: "section", registryName: "section", surface: "documented" },
   { slug: "empty-state", registryName: "empty-state", surface: "documented" },
+  { slug: "permissions-matrix", registryName: "permissions-matrix", surface: "documented" },
   { slug: "calendar-scheduler", registryName: "calendar-scheduler", surface: "documented" },
+  { slug: "calendar-range-scheduler", registryName: "calendar-range-scheduler", surface: "documented" },
   { slug: "dual-list-picker", registryName: "dual-list-picker", surface: "documented" },
   { slug: "resizable-panel", registryName: "resizable-panel", surface: "documented" },
+  { slug: "file-manager", registryName: "file-manager", surface: "documented" },
+  { slug: "map", registryName: "map", surface: "documented" },
+  { slug: "media-player", registryName: "media-player", surface: "documented" },
+  { slug: "spreadsheet", registryName: "spreadsheet", surface: "documented" },
   { slug: "tag", registryName: "tag", surface: "documented" },
   { slug: "carousel", registryName: "carousel", surface: "documented" },
   { slug: "typography", registryName: "typography", surface: "documented" },
   { slug: "json-input", registryName: "json-input", surface: "documented" },
   { slug: "time-picker", registryName: "time-picker", surface: "documented" },
+  { slug: "date-time-picker", registryName: "date-time-picker", surface: "documented" },
   { slug: "sortable-list", registryName: "sortable-list", surface: "documented" },
   { slug: "virtual-list", registryName: "virtual-list", surface: "documented" },
   { slug: "color-picker", registryName: "color-picker", surface: "documented" },
   { slug: "signature-pad", registryName: "signature-pad", surface: "documented" },
   { slug: "qr-code", registryName: "qr-code", surface: "documented" },
   { slug: "rich-text-editor", registryName: "rich-text-editor", surface: "documented" },
-  { slug: "image-cropper", registryName: "image-cropper", surface: "documented" },
+  { slug: "data-grid", registryName: "data-grid", surface: "documented" },
 ] as const
 
 export const standalonePublicComponentSurfaces: readonly PublicComponentSurfaceEntry[] = [] as const

package/packages/cli/vendor/templates/showcase/src/showcase/data/registry.ts

@@ -53,7 +53,6 @@ export const registryGroups: RegistryGroup[] = [
       component("scroll-box", "stable", "src/components/ui/scroll-box"),
       component("right-click-menu", "stable", "src/components/ui/right-click-menu"),
       component("toggle-group", "preview", "src/components/ui/toggle-group"),
-      component("toolbar", "preview", "src/components/ui/toolbar"),
       component("collapse", "preview", "src/components/ui/collapse"),
       component("command", "preview", "src/components/ui/command"),
       component("divider", "preview", "src/components/ui/divider"),
@@ -82,7 +81,6 @@ export const registryGroups: RegistryGroup[] = [
       component("inline-editable", "preview", "src/components/inputs/inline-editable.tsx"),
       component("json-input", "preview", "src/components/inputs/json-input.tsx"),
       component("time-picker", "preview", "src/components/inputs/time-picker.tsx"),
-      component("number-field", "preview", "src/components/ui/number-field"),
     ],
   },
   {
@@ -112,8 +110,6 @@ export const registryGroups: RegistryGroup[] = [
       component("kanban", "preview", "src/components/display/kanban.tsx"),
       component("list", "preview", "src/components/display/list.tsx"),
       component("progress", "stable", "src/components/display/progress.tsx"),
-      component("info-card", "stable", "src/components/display/info-card.tsx"),
-      component("statistic", "preview", "src/components/display/statistic.tsx"),
       component("status-dot", "preview", "src/components/display/status-dot.tsx"),
       component("status-legend", "preview", "src/components/display/status-legend.tsx"),
       component("timeline", "stable", "src/components/display/timeline.tsx"),
@@ -167,7 +163,9 @@ export const registryGroups: RegistryGroup[] = [
       component("dual-list-picker", "preview", "src/components/modern/dual-list-picker.tsx"),
       component("resizable-panel", "preview", "src/components/modern/resizable-panel.tsx"),
       component("rich-text-editor", "preview", "src/components/modern/rich-text-editor.tsx"),
-      component("image-cropper", "preview", "src/components/modern/image-cropper.tsx"),
+      component("map", "preview", "src/components/modern/map.tsx"),
+      component("media-player", "preview", "src/components/modern/media-player.tsx"),
+      component("spreadsheet", "preview", "src/components/modern/spreadsheet.tsx"),
     ],
   },
   {
@@ -180,7 +178,6 @@ export const registryGroups: RegistryGroup[] = [
   {
     name: "filters",
     components: [
-      component("filter-bar", "stable", "src/components/filters/filter-bar.tsx"),
       component("saved-filter-select", "preview", "src/components/filters/saved-filter-select.tsx"),
     ],
   },
@@ -219,6 +216,9 @@ export const componentRows: ComponentRow[] = [
   { id: "cmp-006", component: "wizard", category: "wizard", status: "Review", props: 12 },
   { id: "cmp-007", component: "button", category: "ui", status: "Ready", props: 9 },
   { id: "cmp-008", component: "input", category: "ui", status: "Ready", props: 11 },
+  { id: "cmp-009", component: "map", category: "modern", status: "Testing", props: 13 },
+  { id: "cmp-010", component: "media-player", category: "modern", status: "Testing", props: 12 },
+  { id: "cmp-011", component: "spreadsheet", category: "modern", status: "Testing", props: 13 },
 ]
 
 export const wizardSteps = [

package/packages/cli/vendor/templates/showcase/src/showcase/layout/HeroSection.tsx

@@ -1,11 +1,18 @@
 import { PlusIcon, SettingsIcon } from "lucide-react"
 
 import { CopyButton } from "@/components/actions/copy-button"
-import { StatisticCard, StatisticGrid } from "@/components/display/statistic"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
 import { moduleCount, registryGroups } from "@/showcase/data/registry"
 
+const metrics = [
+  { label: "Registry components", value: moduleCount, change: "visible below", description: "tembro add <name>" },
+  { label: "Local source files", value: "152", change: "with hooks/lib", description: "installed by CLI" },
+  { label: "Categories", value: registryGroups.length, change: "all shown", description: "actions to wizard" },
+  { label: "Build", value: "Pass", change: "doctor pass", description: "tembro@6.1.1" },
+]
+
 export function HeroSection() {
   return (
     <section className="border-b bg-card">
@@ -25,16 +32,24 @@ export function HeroSection() {
           <div className="flex flex-wrap gap-2">
             <Button leftIcon={<PlusIcon className="size-4" />}>Create</Button>
             <Button variant="outline" leftIcon={<SettingsIcon className="size-4" />}>Settings</Button>
-            <CopyButton value="npx tembro@6.0.3 list --json">Copy list command</CopyButton>
+            <CopyButton value="npx tembro@6.1.1 list --json">Copy list command</CopyButton>
           </div>
         </div>
 
-        <StatisticGrid columns={4} className="mt-8">
-          <StatisticCard label="Registry components" value={moduleCount} change="visible below" trend="up" description="tembro add <name>" />
-          <StatisticCard label="Local source files" value="152" change="with hooks/lib" trend="up" description="installed by CLI" />
-          <StatisticCard label="Categories" value={registryGroups.length} change="all shown" trend="up" description="actions to wizard" />
-          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@6.0.3" />
-        </StatisticGrid>
+        <div className="mt-8 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+          {metrics.map((metric) => (
+            <Card key={metric.label}>
+              <CardContent className="p-4">
+                <p className="text-sm text-muted-foreground">{metric.label}</p>
+                <p className="mt-5 text-2xl font-semibold tracking-tight">{metric.value}</p>
+                <div className="mt-2 flex flex-wrap items-center gap-2 text-xs">
+                  <Badge tone="success" variant="soft">{metric.change}</Badge>
+                  <span className="text-muted-foreground">{metric.description}</span>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
       </div>
     </section>
   )

package/packages/cli/vendor/templates/showcase/src/showcase/layout/WorkbenchSidebar.tsx

@@ -72,7 +72,7 @@ export function WorkbenchSidebar({ selectedKey, onSelect }: WorkbenchSidebarProp
           }),
         ]}
         footerAccount={{
-          label: "tembro@6.0.3",
+          label: "tembro@6.1.1",
           description: `${moduleCount} registry components`,
         }}
         activeIndicator="bar"