@gram-ai/elements 1.25.2 → 1.26.1

package/src/plugins/generative-ui/ui/accordion.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import * as React from 'react'
+import { ChevronDownIcon } from 'lucide-react'
+import { Accordion as AccordionPrimitive } from 'radix-ui'
+
+import { cn } from '@/lib/utils'
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('border-b last:border-b-0', className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'text-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn('pt-0 pb-4', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/plugins/generative-ui/ui/action-button.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import * as React from 'react'
+import { Button, buttonVariants } from './button'
+import type { VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+import { useToolExecution } from '@/contexts/ToolExecutionContext'
+
+export interface ActionButtonProps
+  extends
+    Omit<React.ComponentProps<'button'>, 'onClick'>,
+    VariantProps<typeof buttonVariants> {
+  label: string
+  /** Tool name to invoke when clicked (matches LLM prompt) */
+  action: string
+  args?: Record<string, unknown>
+}
+
+export function ActionButton({
+  label,
+  action,
+  args,
+  variant = 'default',
+  size = 'default',
+  className,
+  disabled,
+  ...props
+}: ActionButtonProps) {
+  const { executeTool, isToolAvailable } = useToolExecution()
+  const [isLoading, setIsLoading] = React.useState(false)
+
+  const toolAvailable = isToolAvailable(action)
+
+  const [error, setError] = React.useState<string | null>(null)
+
+  const handleClick = React.useCallback(async () => {
+    if (!toolAvailable || isLoading) return
+
+    setIsLoading(true)
+    setError(null)
+    try {
+      const result = await executeTool(action, args ?? {})
+      if (!result.success && result.error) {
+        setError(result.error)
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error')
+    } finally {
+      setIsLoading(false)
+    }
+  }, [action, args, executeTool, isLoading, toolAvailable])
+
+  return (
+    <div className="inline-flex flex-col gap-1">
+      <Button
+        variant={error ? 'destructive' : variant}
+        size={size}
+        className={cn(className)}
+        onClick={handleClick}
+        disabled={disabled || isLoading || !toolAvailable}
+        {...props}
+      >
+        {isLoading ? 'Loading...' : label}
+      </Button>
+      {error && <span className="text-destructive text-xs">{error}</span>}
+    </div>
+  )
+}

package/src/plugins/generative-ui/ui/alert-wrapper.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import * as React from 'react'
+import { Alert, AlertTitle, AlertDescription } from './alert'
+
+export interface AlertWrapperProps {
+  title: string
+  description?: string
+  variant?: 'default' | 'destructive'
+}
+
+/**
+ * Alert wrapper that takes title and description as props.
+ */
+export function AlertWrapper({
+  title,
+  description,
+  variant = 'default',
+}: AlertWrapperProps) {
+  return (
+    <Alert variant={variant}>
+      <AlertTitle>{title}</AlertTitle>
+      {description && <AlertDescription>{description}</AlertDescription>}
+    </Alert>
+  )
+}

package/src/plugins/generative-ui/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

package/src/plugins/generative-ui/ui/avatar-wrapper.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import * as React from 'react'
+import { Avatar, AvatarImage, AvatarFallback } from './avatar'
+
+export interface AvatarWrapperProps {
+  src?: string
+  alt?: string
+  fallback: string
+}
+
+/**
+ * Avatar wrapper that takes src, alt, and fallback as props.
+ */
+export function AvatarWrapper({ src, alt, fallback }: AvatarWrapperProps) {
+  return (
+    <Avatar>
+      {src && <AvatarImage src={src} alt={alt} />}
+      <AvatarFallback>{fallback}</AvatarFallback>
+    </Avatar>
+  )
+}

package/src/plugins/generative-ui/ui/avatar.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import * as React from 'react'
+import { Avatar as AvatarPrimitive } from 'radix-ui'
+
+import { cn } from '@/lib/utils'
+
+function Avatar({
+  className,
+  size = 'default',
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: 'default' | 'sm' | 'lg'
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        'group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn('aspect-square size-full', className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        'bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none',
+        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
+        'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
+        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        '*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        'bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+}

package/src/plugins/generative-ui/ui/badge.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { Slot } from 'radix-ui'
+
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        /** Matches LLM prompt variant */
+        success:
+          'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100',
+        /** Matches LLM prompt variant */
+        warning:
+          'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-100',
+        /** Matches LLM prompt variant */
+        error: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100',
+        destructive:
+          'bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+interface BadgeProps
+  extends React.ComponentProps<'span'>, VariantProps<typeof badgeVariants> {
+  asChild?: boolean
+  /** Content text (matches LLM prompt) - rendered as children */
+  content?: string
+}
+
+function Badge({
+  className,
+  variant = 'default',
+  asChild = false,
+  content,
+  children,
+  ...props
+}: BadgeProps) {
+  const Comp = asChild ? Slot.Root : 'span'
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    >
+      {content ?? children}
+    </Comp>
+  )
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export { Badge, badgeVariants }

package/src/plugins/generative-ui/ui/button-wrapper.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import * as React from 'react'
+import { Button } from './button'
+
+export interface ButtonWrapperProps {
+  label: string
+  variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost'
+  size?: 'default' | 'sm' | 'lg' | 'icon'
+  disabled?: boolean
+  /** Backend action to trigger (future use) */
+  action?: string
+  /** Parameters for the action (future use) */
+  actionParams?: Record<string, unknown>
+}
+
+/**
+ * Button wrapper that takes label as a prop.
+ * The action/actionParams props are for future backend integration.
+ */
+export function ButtonWrapper({
+  label,
+  variant = 'default',
+  size = 'default',
+  disabled = false,
+}: ButtonWrapperProps) {
+  return (
+    <Button variant={variant} size={size} disabled={disabled}>
+      {label}
+    </Button>
+  )
+}

package/src/plugins/generative-ui/ui/button.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { Slot } from 'radix-ui'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export { Button, buttonVariants }

package/src/plugins/generative-ui/ui/card-wrapper.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+export interface CardWrapperProps extends React.ComponentProps<'div'> {
+  title?: string
+}
+
+/**
+ * CardWrapper is a frameless container for generative UI content.
+ * It has no border or shadow since it's rendered inside MacOSWindowFrame.
+ * Children are spaced using flex gap for proper composition.
+ */
+export function CardWrapper({
+  title,
+  className,
+  children,
+  ...props
+}: CardWrapperProps) {
+  return (
+    <div
+      data-slot="card-wrapper"
+      className={cn(
+        'bg-card text-card-foreground flex flex-col gap-6 p-6',
+        className
+      )}
+      {...props}
+    >
+      {title && (
+        <div className="text-foreground text-lg leading-none font-semibold">
+          {title}
+        </div>
+      )}
+      <div className="flex flex-col gap-6">{children}</div>
+    </div>
+  )
+}

package/src/plugins/generative-ui/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn('leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('px-6', className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/plugins/generative-ui/ui/checkbox-wrapper.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import * as React from 'react'
+import { Checkbox } from './checkbox'
+import { Label } from './label'
+
+export interface CheckboxWrapperProps {
+  label?: string
+  /** Path for form state management (future use) */
+  valuePath: string
+  defaultChecked?: boolean
+}
+
+/**
+ * Checkbox wrapper that adds label support.
+ */
+export function CheckboxWrapper({
+  label,
+  valuePath,
+  defaultChecked,
+}: CheckboxWrapperProps) {
+  const id = React.useId()
+
+  return (
+    <div className="flex items-center gap-2">
+      <Checkbox
+        id={id}
+        name={valuePath}
+        defaultChecked={defaultChecked}
+        data-value-path={valuePath}
+      />
+      {label && (
+        <Label htmlFor={id} className="cursor-pointer">
+          {label}
+        </Label>
+      )}
+    </div>
+  )
+}