tembro 2.0.4 → 2.0.6

package/packages/cli/vendor/src/components/actions/action-menu.tsx

@@ -2,97 +2,133 @@ import * as React from "react"
 import { Loader2Icon, MoreHorizontalIcon } from "lucide-react"
 
 import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuItemDescription,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 import { cn, stopInteractivePropagation } from "@/lib/utils"
 
-export type ActionMenuItem = {
-  key: string
-  label: React.ReactNode
-  icon?: React.ReactNode
+export type ActionMenuItem = {
+  key: string
+  label: React.ReactNode
+  section?: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
   shortcut?: React.ReactNode
   disabled?: boolean
   loading?: boolean
-  destructive?: boolean
-  hidden?: boolean
-  onSelect?: () => void | Promise<void>
-}
+  destructive?: boolean
+  hidden?: boolean
+  keepOpen?: boolean
+  onSelect?: () => void | Promise<void>
+}
 
-export type ActionMenuProps = {
-  actions: ActionMenuItem[]
-  label?: React.ReactNode
-  trigger?: React.ReactElement
-  align?: "start" | "center" | "end"
-  side?: "top" | "right" | "bottom" | "left"
-  sideOffset?: number
-  disabled?: boolean
-  contentClassName?: string
-  triggerClassName?: string
-  emptyLabel?: React.ReactNode
-}
+export type ActionMenuProps = {
+  actions: ActionMenuItem[]
+  label?: React.ReactNode
+  trigger?: React.ReactElement
+  align?: "start" | "center" | "end"
+  side?: "top" | "right" | "bottom" | "left"
+  sideOffset?: number
+  disabled?: boolean
+  triggerVariant?: React.ComponentProps<typeof Button>["variant"]
+  triggerSize?: React.ComponentProps<typeof Button>["size"]
+  showChevron?: boolean
+  closeOnSelect?: boolean
+  contentClassName?: string
+  triggerClassName?: string
+  itemClassName?: string
+  emptyLabel?: React.ReactNode
+  menuWidth?: number | string
+  loadingLabel?: React.ReactNode
+  persistIconSpace?: boolean
+}
 
 function ActionMenu({
   actions,
   label,
   trigger,
-  align = "end",
-  side = "bottom",
-  sideOffset = 4,
-  disabled = false,
-  contentClassName,
-  triggerClassName,
-  emptyLabel = "No actions",
+  align = "end",
+  side = "bottom",
+  sideOffset = 4,
+  disabled = false,
+  triggerVariant = "ghost",
+  triggerSize = "icon-sm",
+  showChevron = false,
+  closeOnSelect = true,
+  contentClassName,
+  triggerClassName,
+  itemClassName,
+  emptyLabel = "No actions",
+  menuWidth,
+  loadingLabel = "Working...",
+  persistIconSpace = true,
 }: ActionMenuProps) {
   const visibleActions = actions.filter((action) => !action.hidden)
   const [loadingKey, setLoadingKey] = React.useState<string | null>(null)
+  const [open, setOpen] = React.useState(false)
+  const lastInvokedActionKeyRef = React.useRef<string | null>(null)
 
   const handleSelect = async (action: ActionMenuItem) => {
-    if (action.disabled || action.loading || loadingKey) return
-
-    try {
-      setLoadingKey(action.key)
-      await action.onSelect?.()
-    } finally {
-      setLoadingKey(null)
-    }
-  }
-
-  return (
-    <DropdownMenu>
+    if (action.disabled || action.loading || loadingKey) return
+
+    try {
+      setLoadingKey(action.key)
+      await action.onSelect?.()
+      if (closeOnSelect && !action.keepOpen) setOpen(false)
+    } finally {
+      setLoadingKey(null)
+    }
+  }
+
+  const triggerAction = (action: ActionMenuItem) => {
+    if (lastInvokedActionKeyRef.current === action.key) return
+    lastInvokedActionKeyRef.current = action.key
+    queueMicrotask(() => {
+      if (lastInvokedActionKeyRef.current === action.key) {
+        lastInvokedActionKeyRef.current = null
+      }
+    })
+    void handleSelect(action)
+  }
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
       <DropdownMenuTrigger
         render={
           trigger ?? (
             <Button
               type="button"
-              variant="ghost"
-              size="icon-sm"
+              variant={triggerVariant}
+              size={triggerSize}
               disabled={disabled}
               className={cn(
-                "rounded-full border border-transparent text-muted-foreground hover:border-border/70 hover:bg-muted/50 hover:text-foreground",
+                "rounded-full border border-transparent text-muted-foreground shadow-none transition-[background-color,border-color,color,box-shadow] hover:border-border/70 hover:bg-accent hover:text-foreground focus-visible:border-[color:var(--aui-focus-ring,var(--ring))] focus-visible:shadow-[0_0_0_3px_var(--aui-focus-ring-soft,transparent)]",
                 triggerClassName
               )}
-              onClick={stopInteractivePropagation}
               onMouseDown={stopInteractivePropagation}
               onDoubleClick={stopInteractivePropagation}
             />
           )
         }
       >
-        {!trigger && <MoreHorizontalIcon />}
-        <span className="sr-only">Open actions</span>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        align={align}
-        side={side}
-        sideOffset={sideOffset}
-        className={cn("min-w-40", contentClassName)}
-      >
+        {!trigger && <MoreHorizontalIcon />}
+        {!trigger && showChevron && <span className="text-[10px] font-medium uppercase tracking-[0.18em]">Menu</span>}
+        <span className="sr-only">Open actions</span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+        className={cn("min-w-48 rounded-[var(--aui-card-radius,var(--radius-lg))]", contentClassName)}
+        style={menuWidth ? { width: typeof menuWidth === "number" ? `${menuWidth}px` : menuWidth } : undefined}
+      >
         {label && <DropdownMenuLabel>{label}</DropdownMenuLabel>}
         {label && visibleActions.length > 0 && <DropdownMenuSeparator />}
 
@@ -100,30 +136,60 @@ function ActionMenu({
           <DropdownMenuItem disabled>{emptyLabel}</DropdownMenuItem>
         )}
 
-        {visibleActions.map((action) => {
-          const isLoading = action.loading || loadingKey === action.key
-
-          return (
-            <DropdownMenuItem
-              key={action.key}
-              disabled={action.disabled || isLoading}
-              variant={action.destructive ? "destructive" : "default"}
-              onClick={(event) => {
-                stopInteractivePropagation(event)
-                void handleSelect(action)
-              }}
-              onMouseDown={stopInteractivePropagation}
-              onDoubleClick={stopInteractivePropagation}
-            >
-              {isLoading ? <Loader2Icon className="animate-spin" /> : action.icon}
-              <span className="min-w-0 flex-1 truncate">{action.label}</span>
-              {action.shortcut && (
-                <span className="ml-auto text-[11px] tracking-[0.14em] text-muted-foreground">{action.shortcut}</span>
-              )}
-            </DropdownMenuItem>
+        {visibleActions.map((action, index) => {
+          const isLoading = action.loading || loadingKey === action.key
+          const previousSection = index > 0 ? visibleActions[index - 1]?.section : undefined
+          const shouldRenderSection = Boolean(action.section && action.section !== previousSection)
+
+          return (
+            <React.Fragment key={action.key}>
+              {shouldRenderSection ? (
+                <>
+                  {index > 0 ? <DropdownMenuSeparator /> : null}
+                  <DropdownMenuLabel>{action.section}</DropdownMenuLabel>
+                </>
+              ) : null}
+              <DropdownMenuItem
+                disabled={action.disabled || isLoading}
+                variant={action.destructive ? "destructive" : "default"}
+                closeOnSelect={closeOnSelect && !action.keepOpen}
+                className={cn(
+                  "min-h-11 items-start gap-3 rounded-[calc(var(--radius-md)+1px)] border border-transparent py-2.5 transition-[background-color,color,border-color,box-shadow] data-[highlighted]:shadow-[inset_0_0_0_1px_color-mix(in_oklch,var(--primary),transparent_76%)] data-[disabled]:opacity-45",
+                  itemClassName
+                )}
+                onSelect={(event) => {
+                  if (action.keepOpen || !closeOnSelect) {
+                    event.preventDefault()
+                  }
+                  stopInteractivePropagation(event)
+                  triggerAction(action)
+                }}
+                onClick={(event) => {
+                  stopInteractivePropagation(event)
+                  triggerAction(action)
+                }}
+                onMouseDown={stopInteractivePropagation}
+                onDoubleClick={stopInteractivePropagation}
+              >
+                <span className={cn("mt-0.5 flex size-5 shrink-0 items-center justify-center text-muted-foreground", !persistIconSpace && !isLoading && !action.icon && "hidden")}>
+                  {isLoading ? <Loader2Icon className="size-4 animate-spin" /> : action.icon}
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate">{action.label}</span>
+                  {action.description ? (
+                    <DropdownMenuItemDescription className="mt-0.5 truncate">
+                      {isLoading ? loadingLabel : action.description}
+                    </DropdownMenuItemDescription>
+                  ) : null}
+                </span>
+                {action.shortcut && (
+                  <DropdownMenuShortcut>{action.shortcut}</DropdownMenuShortcut>
+                )}
+              </DropdownMenuItem>
+            </React.Fragment>
           )
-        })}
-      </DropdownMenuContent>
+        })}
+      </DropdownMenuContent>
     </DropdownMenu>
   )
 }

package/packages/cli/vendor/src/components/actions/button-group.tsx

@@ -6,40 +6,148 @@ import { cn } from "@/lib/utils"
 type ButtonProps = React.ComponentProps<typeof Button>
 
 export type ButtonGroupItem = Omit<ButtonProps, "children"> & {
-  key: string
-  label: React.ReactNode
-}
-
-export type ButtonGroupProps = React.ComponentProps<"div"> & {
-  items?: ButtonGroupItem[]
-  attached?: boolean
-  size?: ButtonProps["size"]
-  variant?: ButtonProps["variant"]
-}
+  key: string
+  label: React.ReactNode
+  description?: React.ReactNode
+}
 
-function ButtonGroup({ items, attached = true, size = "sm", variant = "outline", className, children, ...props }: ButtonGroupProps) {
-  return (
-    <div
-      data-slot="button-group"
-      role="group"
-      className={cn("inline-flex items-center", !attached && "gap-2", className)}
-      {...props}
-    >
-      {items?.map(({ key, label, className: itemClassName, size: itemSize, variant: itemVariant, ...item }) => (
-        <Button
-          key={key}
-          size={itemSize ?? size}
-          variant={itemVariant ?? variant}
-          className={cn(
-            attached && "rounded-none first:rounded-l-md last:rounded-r-md -ml-px first:ml-0",
-            itemClassName
-          )}
-          {...item}
-        >
-          {label}
-        </Button>
-      ))}
-      {children}
+export type ButtonGroupProps = React.ComponentProps<"div"> & {
+  items?: ButtonGroupItem[]
+  attached?: boolean
+  size?: ButtonProps["size"]
+  variant?: ButtonProps["variant"]
+  activeVariant?: ButtonProps["variant"]
+  orientation?: "horizontal" | "vertical"
+  fullWidth?: boolean
+  allowDeselect?: boolean
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+}
+
+function ButtonGroup({
+  items,
+  attached = true,
+  size = "sm",
+  variant = "outline",
+  activeVariant = "default",
+  orientation = "horizontal",
+  fullWidth = false,
+  allowDeselect = false,
+  value,
+  defaultValue,
+  onValueChange,
+  className,
+  children,
+  ...props
+}: ButtonGroupProps) {
+  const isVertical = orientation === "vertical"
+  const isControlled = value !== undefined
+  const [internalValue, setInternalValue] = React.useState(defaultValue)
+  const currentValue = isControlled ? value : internalValue
+  const groupId = React.useId()
+  const itemRefs = React.useRef<Array<HTMLButtonElement | null>>([])
+
+  const updateValue = (nextValue: string) => {
+    const resolvedValue = allowDeselect && currentValue === nextValue ? "" : nextValue
+    if (!isControlled) setInternalValue(resolvedValue)
+    onValueChange?.(resolvedValue)
+  }
+
+  return (
+    <div
+      data-slot="button-group"
+      role="group"
+      data-orientation={orientation}
+      aria-orientation={orientation}
+      className={cn(
+        "inline-flex",
+        isVertical ? "flex-col" : "items-center",
+        fullWidth && "w-full",
+        attached
+          ? "overflow-hidden rounded-[var(--aui-control-radius,var(--radius-md))] border border-[color:var(--aui-control-border,var(--border))] bg-[color:var(--aui-control-surface,var(--background))] shadow-[var(--aui-control-shadow,none)]"
+          : "gap-2",
+        className
+      )}
+      {...props}
+    >
+      {items?.map(({ key, label, description, className: itemClassName, size: itemSize, variant: itemVariant, onClick, "aria-label": itemAriaLabel, ...item }, index) => {
+        const selected = currentValue === key
+        const descriptionId = description ? `${groupId}-${key}-description` : undefined
+        const resolvedAriaLabel = itemAriaLabel ?? (description && typeof label === "string" ? label : undefined)
+
+        return (
+        <Button
+          key={key}
+          ref={(node) => {
+            itemRefs.current[index] = node
+          }}
+          size={itemSize ?? size}
+          variant={itemVariant ?? (selected ? activeVariant : variant)}
+          aria-label={resolvedAriaLabel}
+          aria-pressed={selected || undefined}
+          aria-describedby={descriptionId}
+          tabIndex={selected || (!currentValue && index === 0) ? 0 : -1}
+          data-selected={selected || undefined}
+          className={cn(
+            attached &&
+              cn(
+                "relative rounded-none border-0 shadow-none first:ml-0 data-[selected=true]:shadow-none",
+                fullWidth && "flex-1",
+                isVertical
+                  ? "w-full border-t border-[color:var(--aui-control-border,var(--border))] first:border-t-0"
+                  : "border-l border-[color:var(--aui-control-border,var(--border))] first:border-l-0"
+              ),
+            description && "h-auto min-h-9 py-2",
+            itemClassName
+          )}
+          onClick={(event) => {
+            updateValue(key)
+            onClick?.(event)
+          }}
+          onKeyDown={(event) => {
+            const itemCount = items?.length ?? 0
+            if (!itemCount) return
+
+            const moveFocus = (nextIndex: number) => {
+              const boundedIndex = (nextIndex + itemCount) % itemCount
+              itemRefs.current[boundedIndex]?.focus()
+            }
+
+            if (event.key === "ArrowRight" && !isVertical) {
+              event.preventDefault()
+              moveFocus(index + 1)
+            } else if (event.key === "ArrowLeft" && !isVertical) {
+              event.preventDefault()
+              moveFocus(index - 1)
+            } else if (event.key === "ArrowDown" && isVertical) {
+              event.preventDefault()
+              moveFocus(index + 1)
+            } else if (event.key === "ArrowUp" && isVertical) {
+              event.preventDefault()
+              moveFocus(index - 1)
+            } else if (event.key === "Home") {
+              event.preventDefault()
+              moveFocus(0)
+            } else if (event.key === "End") {
+              event.preventDefault()
+              moveFocus(itemCount - 1)
+            }
+          }}
+          {...item}
+        >
+          {description ? (
+            <span className="flex min-w-0 flex-col items-start text-left">
+              <span>{label}</span>
+              <span aria-hidden="true" className="truncate text-[11px] font-medium opacity-80">{description}</span>
+              <span id={descriptionId} className="sr-only">{description}</span>
+            </span>
+          ) : (
+            label
+          )}
+        </Button>
+      )})}
+      {children}
     </div>
   )
 }

package/packages/cli/vendor/src/components/actions/copy-button.tsx

@@ -4,15 +4,16 @@ import { CheckIcon, CopyIcon } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { stopInteractivePropagation } from "@/lib/utils"
 
-export type CopyButtonProps = Omit<React.ComponentProps<typeof Button>, "onClick"> & {
-  value: string
-  copiedLabel?: React.ReactNode
-  copyLabel?: React.ReactNode
-  copiedTimeout?: number
-  onCopied?: (value: string) => void
-  onCopyError?: (error: unknown) => void
-  showIcon?: boolean
-}
+export type CopyButtonProps = Omit<React.ComponentProps<typeof Button>, "onClick"> & {
+  value: string
+  copiedLabel?: React.ReactNode
+  copyLabel?: React.ReactNode
+  copiedTimeout?: number
+  onCopied?: (value: string) => void
+  onCopyError?: (error: unknown) => void
+  showIcon?: boolean
+  copiedVariant?: React.ComponentProps<typeof Button>["variant"]
+}
 
 async function copyToClipboard(value: string) {
   if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
@@ -43,13 +44,15 @@ function CopyButton({
   value,
   copiedLabel = "Copied",
   copyLabel = "Copy",
-  copiedTimeout = 1600,
-  onCopied,
-  onCopyError,
-  showIcon = true,
-  disabled,
-  children,
-  type = "button",
+  copiedTimeout = 1600,
+  onCopied,
+  onCopyError,
+  showIcon = true,
+  copiedVariant,
+  variant,
+  disabled,
+  children,
+  type = "button",
   ...props
 }: CopyButtonProps) {
   const [copied, setCopied] = React.useState(false)
@@ -84,10 +87,12 @@ function CopyButton({
       data-slot="copy-button"
       data-copied={copied || undefined}
       type={type}
+      variant={copied ? (copiedVariant ?? "secondary") : variant}
       disabled={disabled || !value}
       onClick={handleButtonClick}
       onMouseDown={stopInteractivePropagation}
       onDoubleClick={stopInteractivePropagation}
+      aria-live="polite"
       {...props}
     >
       {showIcon && (copied ? <CheckIcon data-icon="inline-start" /> : <CopyIcon data-icon="inline-start" />)}