@gram-ai/elements 1.27.4 → 1.27.6

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

@@ -1,43 +1,43 @@
-'use client'
+"use client";
 
-import * as React from 'react'
+import * as React from "react";
 import {
   Accordion as AccordionPrimitive,
   AccordionItem as AccordionItemPrimitive,
   AccordionTrigger,
   AccordionContent,
-} from './accordion'
+} from "./accordion";
 
 export interface AccordionWrapperProps {
-  type?: 'single' | 'multiple'
-  children?: React.ReactNode
+  type?: "single" | "multiple";
+  children?: React.ReactNode;
 }
 
 /**
  * Accordion wrapper that adapts the compound Accordion to the catalog's props-based API.
  */
 export function AccordionWrapper({
-  type = 'single',
+  type = "single",
   children,
 }: AccordionWrapperProps) {
   // Type assertion needed because Radix types are complex
   const AccordionRoot = AccordionPrimitive as React.FC<{
-    type: 'single' | 'multiple'
-    collapsible?: boolean
-    children?: React.ReactNode
-  }>
+    type: "single" | "multiple";
+    collapsible?: boolean;
+    children?: React.ReactNode;
+  }>;
 
   return (
-    <AccordionRoot type={type} collapsible={type === 'single'}>
+    <AccordionRoot type={type} collapsible={type === "single"}>
       {children}
     </AccordionRoot>
-  )
+  );
 }
 
 export interface AccordionItemWrapperProps {
-  value: string
-  title: string
-  children?: React.ReactNode
+  value: string;
+  title: string;
+  children?: React.ReactNode;
 }
 
 /**
@@ -53,5 +53,5 @@ export function AccordionItemWrapper({
       <AccordionTrigger>{title}</AccordionTrigger>
       <AccordionContent>{children}</AccordionContent>
     </AccordionItemPrimitive>
-  )
+  );
 }

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

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

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

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

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

@@ -1,12 +1,12 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import { Alert, AlertTitle, AlertDescription } from './alert'
+import * as React from "react";
+import { Alert, AlertTitle, AlertDescription } from "./alert";
 
 export interface AlertWrapperProps {
-  title: string
-  description?: string
-  variant?: 'default' | 'destructive'
+  title: string;
+  description?: string;
+  variant?: "default" | "destructive";
 }
 
 /**
@@ -15,12 +15,12 @@ export interface AlertWrapperProps {
 export function AlertWrapper({
   title,
   description,
-  variant = 'default',
+  variant = "default",
 }: AlertWrapperProps) {
   return (
     <Alert variant={variant}>
       <AlertTitle>{title}</AlertTitle>
       {description && <AlertDescription>{description}</AlertDescription>}
     </Alert>
-  )
+  );
 }

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

@@ -1,29 +1,29 @@
-import * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from '@/lib/utils'
+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',
+  "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',
+        default: "bg-card text-card-foreground",
         destructive:
-          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: "default",
     },
-  }
-)
+  },
+);
 
 function Alert({
   className,
   variant,
   ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
   return (
     <div
       data-slot="alert"
@@ -31,36 +31,36 @@ function Alert({
       className={cn(alertVariants({ variant }), className)}
       {...props}
     />
-  )
+  );
 }
 
-function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+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
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDescription({
   className,
   ...props
-}: React.ComponentProps<'div'>) {
+}: 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
+        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };

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

@@ -1,12 +1,12 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import { Avatar, AvatarImage, AvatarFallback } from './avatar'
+import * as React from "react";
+import { Avatar, AvatarImage, AvatarFallback } from "./avatar";
 
 export interface AvatarWrapperProps {
-  src?: string
-  alt?: string
-  fallback: string
+  src?: string;
+  alt?: string;
+  fallback: string;
 }
 
 /**
@@ -18,5 +18,5 @@ export function AvatarWrapper({ src, alt, fallback }: AvatarWrapperProps) {
       {src && <AvatarImage src={src} alt={alt} />}
       <AvatarFallback>{fallback}</AvatarFallback>
     </Avatar>
-  )
+  );
 }

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

@@ -1,28 +1,28 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import { Avatar as AvatarPrimitive } from 'radix-ui'
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "radix-ui";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/lib/utils";
 
 function Avatar({
   className,
-  size = 'default',
+  size = "default",
   ...props
 }: React.ComponentProps<typeof AvatarPrimitive.Root> & {
-  size?: 'default' | 'sm' | 'lg'
+  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
+        "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({
@@ -32,10 +32,10 @@ function AvatarImage({
   return (
     <AvatarPrimitive.Image
       data-slot="avatar-image"
-      className={cn('aspect-square size-full', className)}
+      className={cn("aspect-square size-full", className)}
       {...props}
     />
-  )
+  );
 }
 
 function AvatarFallback({
@@ -46,57 +46,57 @@ function AvatarFallback({
     <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
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
+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
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background 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'>) {
+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
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AvatarGroupCount({
   className,
   ...props
-}: React.ComponentProps<'div'>) {
+}: 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
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background 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 {
@@ -106,4 +106,4 @@ export {
   AvatarBadge,
   AvatarGroup,
   AvatarGroupCount,
-}
+};

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

@@ -1,53 +1,53 @@
-import * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { Slot } from 'radix-ui'
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
 
-import { cn } from '@/lib/utils'
+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',
+  "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',
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
         secondary:
-          'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+          "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',
+          "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',
+          "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',
+        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',
+          "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',
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: "default",
     },
-  }
-)
+  },
+);
 
 interface BadgeProps
-  extends React.ComponentProps<'span'>, VariantProps<typeof badgeVariants> {
-  asChild?: boolean
+  extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {
+  asChild?: boolean;
   /** Content text (matches LLM prompt) - rendered as children */
-  content?: string
+  content?: string;
 }
 
 function Badge({
   className,
-  variant = 'default',
+  variant = "default",
   asChild = false,
   content,
   children,
   ...props
 }: BadgeProps) {
-  const Comp = asChild ? Slot.Root : 'span'
+  const Comp = asChild ? Slot.Root : "span";
 
   return (
     <Comp
@@ -58,8 +58,8 @@ function Badge({
     >
       {content ?? children}
     </Comp>
-  )
+  );
 }
 
 // eslint-disable-next-line react-refresh/only-export-components
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

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

@@ -1,17 +1,17 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import { Button } from './button'
+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
+  label: string;
+  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost";
+  size?: "default" | "sm" | "lg" | "icon";
+  disabled?: boolean;
   /** Backend action to trigger (future use) */
-  action?: string
+  action?: string;
   /** Parameters for the action (future use) */
-  actionParams?: Record<string, unknown>
+  actionParams?: Record<string, unknown>;
 }
 
 /**
@@ -20,13 +20,13 @@ export interface ButtonWrapperProps {
  */
 export function ButtonWrapper({
   label,
-  variant = 'default',
-  size = 'default',
+  variant = "default",
+  size = "default",
   disabled = false,
 }: ButtonWrapperProps) {
   return (
     <Button variant={variant} size={size} disabled={disabled}>
       {label}
     </Button>
-  )
+  );
 }