@gram-ai/elements 1.27.4 → 1.27.6

package/src/plugins/components/PluginLoadingState.tsx

@@ -1,12 +1,12 @@
-'use client'
+"use client";
 
-import { cn } from '@/lib/utils'
-import { FC } from 'react'
-import { MacOSWindowFrame } from './MacOSWindowFrame'
+import { cn } from "@/lib/utils";
+import { FC } from "react";
+import { MacOSWindowFrame } from "./MacOSWindowFrame";
 
 interface PluginLoadingStateProps {
-  text: string
-  className?: string
+  text: string;
+  className?: string;
 }
 
 /**
@@ -21,11 +21,11 @@ export const PluginLoadingState: FC<PluginLoadingStateProps> = ({
     <MacOSWindowFrame className={className}>
       <div
         className={cn(
-          'bg-background relative flex min-h-[400px] items-center justify-center'
+          "relative flex min-h-[400px] items-center justify-center bg-background",
         )}
       >
-        <span className="shimmer text-muted-foreground text-sm">{text}</span>
+        <span className="shimmer text-sm text-muted-foreground">{text}</span>
       </div>
     </MacOSWindowFrame>
-  )
-}
+  );
+};

package/src/plugins/components/index.ts

@@ -1 +1 @@
-export { PluginLoadingState } from './PluginLoadingState'
+export { PluginLoadingState } from "./PluginLoadingState";

package/src/plugins/generative-ui/catalog.ts

@@ -1,5 +1,5 @@
-import { createCatalog } from '@json-render/core'
-import { z } from 'zod'
+import { createCatalog } from "@json-render/core";
+import { z } from "zod";
 
 /**
  * Generative UI Catalog
@@ -8,31 +8,31 @@ import { z } from 'zod'
  * Components map to shadcn/ui primitives in the ui/ directory.
  */
 export const catalog = createCatalog({
-  name: 'generative-ui',
+  name: "generative-ui",
   components: {
     // Layout
     Stack: {
       props: z.object({
-        direction: z.enum(['horizontal', 'vertical']).optional(),
-        gap: z.enum(['sm', 'md', 'lg']).optional(),
-        align: z.enum(['start', 'center', 'end', 'stretch']).optional(),
+        direction: z.enum(["horizontal", "vertical"]).optional(),
+        gap: z.enum(["sm", "md", "lg"]).optional(),
+        align: z.enum(["start", "center", "end", "stretch"]).optional(),
         justify: z
-          .enum(['start', 'center', 'end', 'between', 'around'])
+          .enum(["start", "center", "end", "between", "around"])
           .optional(),
         className: z.string().optional(),
       }),
       hasChildren: true,
-      description: 'Flex layout container for arranging child elements',
+      description: "Flex layout container for arranging child elements",
     },
 
     Grid: {
       props: z.object({
         columns: z.number().optional(),
-        gap: z.enum(['sm', 'md', 'lg']).optional(),
+        gap: z.enum(["sm", "md", "lg"]).optional(),
         className: z.string().optional(),
       }),
       hasChildren: true,
-      description: 'Grid layout for arranging items in columns',
+      description: "Grid layout for arranging items in columns",
     },
 
     Card: {
@@ -41,17 +41,17 @@ export const catalog = createCatalog({
         className: z.string().optional(),
       }),
       hasChildren: true,
-      description: 'Container with optional title, border and padding',
+      description: "Container with optional title, border and padding",
     },
 
     // Typography
     Text: {
       props: z.object({
         content: z.string(),
-        variant: z.enum(['heading', 'body', 'caption', 'code']).optional(),
+        variant: z.enum(["heading", "body", "caption", "code"]).optional(),
         className: z.string().optional(),
       }),
-      description: 'Text content with styling variants',
+      description: "Text content with styling variants",
     },
 
     // Data Display
@@ -59,11 +59,11 @@ export const catalog = createCatalog({
       props: z.object({
         label: z.string(),
         value: z.union([z.string(), z.number()]),
-        format: z.enum(['number', 'currency', 'percent']).optional(),
+        format: z.enum(["number", "currency", "percent"]).optional(),
         className: z.string().optional(),
       }),
       description:
-        'Display a key metric with label and formatted value (e.g., revenue, users)',
+        "Display a key metric with label and formatted value (e.g., revenue, users)",
     },
 
     Badge: {
@@ -71,18 +71,18 @@ export const catalog = createCatalog({
         content: z.string().optional(),
         variant: z
           .enum([
-            'default',
-            'secondary',
-            'destructive',
-            'outline',
-            'success',
-            'warning',
+            "default",
+            "secondary",
+            "destructive",
+            "outline",
+            "success",
+            "warning",
           ])
           .optional(),
         className: z.string().optional(),
       }),
       hasChildren: true,
-      description: 'Status badge or tag for categorization',
+      description: "Status badge or tag for categorization",
     },
 
     Progress: {
@@ -91,7 +91,7 @@ export const catalog = createCatalog({
         max: z.number().optional(),
         className: z.string().optional(),
       }),
-      description: 'Progress bar showing completion percentage',
+      description: "Progress bar showing completion percentage",
     },
 
     Table: {
@@ -100,7 +100,7 @@ export const catalog = createCatalog({
         rows: z.array(z.array(z.union([z.string(), z.number()]))),
         className: z.string().optional(),
       }),
-      description: 'Data table with headers and rows',
+      description: "Data table with headers and rows",
     },
 
     List: {
@@ -109,7 +109,7 @@ export const catalog = createCatalog({
         ordered: z.boolean().optional(),
         className: z.string().optional(),
       }),
-      description: 'Ordered or unordered list of items',
+      description: "Ordered or unordered list of items",
     },
 
     // Feedback
@@ -117,36 +117,36 @@ export const catalog = createCatalog({
       props: z.object({
         title: z.string(),
         description: z.string().optional(),
-        variant: z.enum(['default', 'destructive']).optional(),
+        variant: z.enum(["default", "destructive"]).optional(),
       }),
-      description: 'Alert message for important information or errors',
+      description: "Alert message for important information or errors",
     },
 
     // Structure
     Separator: {
       props: z.object({
-        orientation: z.enum(['horizontal', 'vertical']).optional(),
+        orientation: z.enum(["horizontal", "vertical"]).optional(),
         className: z.string().optional(),
       }),
-      description: 'Visual divider between content sections',
+      description: "Visual divider between content sections",
     },
 
     Divider: {
       props: z.object({
-        orientation: z.enum(['horizontal', 'vertical']).optional(),
+        orientation: z.enum(["horizontal", "vertical"]).optional(),
         className: z.string().optional(),
       }),
       description:
-        'Visual divider between content sections (alias for Separator)',
+        "Visual divider between content sections (alias for Separator)",
     },
 
     // Interactive
     Accordion: {
       props: z.object({
-        type: z.enum(['single', 'multiple']).optional(),
+        type: z.enum(["single", "multiple"]).optional(),
       }),
       hasChildren: true,
-      description: 'Collapsible accordion container',
+      description: "Collapsible accordion container",
     },
 
     AccordionItem: {
@@ -155,7 +155,7 @@ export const catalog = createCatalog({
         title: z.string(),
       }),
       hasChildren: true,
-      description: 'Individual accordion item with trigger and content',
+      description: "Individual accordion item with trigger and content",
     },
 
     Tabs: {
@@ -165,11 +165,11 @@ export const catalog = createCatalog({
           z.object({
             value: z.string(),
             label: z.string(),
-          })
+          }),
         ),
       }),
       hasChildren: true,
-      description: 'Tabbed content container',
+      description: "Tabbed content container",
     },
 
     TabContent: {
@@ -177,7 +177,7 @@ export const catalog = createCatalog({
         value: z.string(),
       }),
       hasChildren: true,
-      description: 'Content panel for a specific tab',
+      description: "Content panel for a specific tab",
     },
 
     // Actions
@@ -185,15 +185,15 @@ export const catalog = createCatalog({
       props: z.object({
         label: z.string(),
         variant: z
-          .enum(['default', 'secondary', 'destructive', 'outline', 'ghost'])
+          .enum(["default", "secondary", "destructive", "outline", "ghost"])
           .optional(),
-        size: z.enum(['default', 'sm', 'lg', 'icon']).optional(),
+        size: z.enum(["default", "sm", "lg", "icon"]).optional(),
         disabled: z.boolean().optional(),
         action: z.string().optional(),
         actionParams: z.record(z.string(), z.unknown()).optional(),
       }),
       description:
-        'Clickable button that can trigger actions. Use action/actionParams to call backend functions.',
+        "Clickable button that can trigger actions. Use action/actionParams to call backend functions.",
     },
 
     ActionButton: {
@@ -202,13 +202,13 @@ export const catalog = createCatalog({
         action: z.string(),
         args: z.record(z.string(), z.unknown()).optional(),
         variant: z
-          .enum(['default', 'secondary', 'destructive', 'outline', 'ghost'])
+          .enum(["default", "secondary", "destructive", "outline", "ghost"])
           .optional(),
-        size: z.enum(['default', 'sm', 'lg', 'icon']).optional(),
+        size: z.enum(["default", "sm", "lg", "icon"]).optional(),
         className: z.string().optional(),
       }),
       description:
-        'Button that triggers a frontend tool call directly without LLM roundtrip',
+        "Button that triggers a frontend tool call directly without LLM roundtrip",
     },
 
     // Form Elements
@@ -216,10 +216,10 @@ export const catalog = createCatalog({
       props: z.object({
         label: z.string().optional(),
         placeholder: z.string().optional(),
-        type: z.enum(['text', 'email', 'password', 'number', 'tel']).optional(),
+        type: z.enum(["text", "email", "password", "number", "tel"]).optional(),
         valuePath: z.string(),
       }),
-      description: 'Text input field with optional label',
+      description: "Text input field with optional label",
     },
 
     Checkbox: {
@@ -228,7 +228,7 @@ export const catalog = createCatalog({
         valuePath: z.string(),
         defaultChecked: z.boolean().optional(),
       }),
-      description: 'Checkbox input with label',
+      description: "Checkbox input with label",
     },
 
     Select: {
@@ -239,10 +239,10 @@ export const catalog = createCatalog({
           z.object({
             value: z.string(),
             label: z.string(),
-          })
+          }),
         ),
       }),
-      description: 'Dropdown select input',
+      description: "Dropdown select input",
     },
 
     // Display
@@ -252,7 +252,7 @@ export const catalog = createCatalog({
         alt: z.string().optional(),
         fallback: z.string(),
       }),
-      description: 'User avatar with image and fallback initials',
+      description: "User avatar with image and fallback initials",
     },
 
     Skeleton: {
@@ -261,17 +261,17 @@ export const catalog = createCatalog({
         height: z.string().optional(),
         className: z.string().optional(),
       }),
-      description: 'Loading placeholder skeleton',
+      description: "Loading placeholder skeleton",
     },
   },
-})
+});
 
 export type CatalogComponentProps = typeof catalog extends {
-  components: infer C
+  components: infer C;
 }
   ? {
       [K in keyof C]: C[K] extends { props: infer P }
         ? z.infer<P extends z.ZodType ? P : never>
-        : never
+        : never;
     }
-  : never
+  : never;

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

@@ -1,139 +1,139 @@
-'use client'
+"use client";
 
-import { GenerativeUI } from '@/components/ui/generative-ui'
-import { cn } from '@/lib/utils'
-import { SyntaxHighlighterProps } from '@assistant-ui/react-markdown'
-import { FC, useEffect, useMemo, useState } from 'react'
-import { MacOSWindowFrame } from '../components/MacOSWindowFrame'
+import { GenerativeUI } from "@/components/ui/generative-ui";
+import { cn } from "@/lib/utils";
+import { SyntaxHighlighterProps } from "@assistant-ui/react-markdown";
+import { FC, useEffect, useMemo, useState } from "react";
+import { MacOSWindowFrame } from "../components/MacOSWindowFrame";
 
 const loadingMessages = [
   // Crafting & Creating
-  'Arranging pixels with care...',
-  'Brewing something beautiful...',
-  'Crafting your masterpiece...',
-  'Painting with data...',
-  'Weaving digital magic...',
-  'Assembling the good stuff...',
-  'Polishing the details...',
-  'Putting the finishing touches...',
+  "Arranging pixels with care...",
+  "Brewing something beautiful...",
+  "Crafting your masterpiece...",
+  "Painting with data...",
+  "Weaving digital magic...",
+  "Assembling the good stuff...",
+  "Polishing the details...",
+  "Putting the finishing touches...",
   // Cooking & Food
-  'Simmering the results...',
-  'Letting the data marinate...',
-  'Adding a pinch of style...',
-  'Fresh out of the oven soon...',
-  'Whisking up your view...',
+  "Simmering the results...",
+  "Letting the data marinate...",
+  "Adding a pinch of style...",
+  "Fresh out of the oven soon...",
+  "Whisking up your view...",
   // Nature & Growth
-  'Growing your garden of data...',
-  'Watching the seeds sprout...',
-  'Letting things bloom...',
-  'Nature is taking its course...',
+  "Growing your garden of data...",
+  "Watching the seeds sprout...",
+  "Letting things bloom...",
+  "Nature is taking its course...",
   // Space & Magic
-  'Consulting the stars...',
-  'Channeling cosmic energy...',
-  'Summoning the results...',
-  'Waving the magic wand...',
-  'Sprinkling some stardust...',
-  'Aligning the planets...',
+  "Consulting the stars...",
+  "Channeling cosmic energy...",
+  "Summoning the results...",
+  "Waving the magic wand...",
+  "Sprinkling some stardust...",
+  "Aligning the planets...",
   // Building & Engineering
-  'Tightening the bolts...',
-  'Connecting the dots...',
-  'Stacking the blocks...',
-  'Laying the foundation...',
-  'Raising the scaffolding...',
+  "Tightening the bolts...",
+  "Connecting the dots...",
+  "Stacking the blocks...",
+  "Laying the foundation...",
+  "Raising the scaffolding...",
   // Playful & Cute
-  'Herding the pixels...',
-  'Teaching data to dance...',
-  'Convincing bits to cooperate...',
-  'Giving electrons a pep talk...',
-  'Wrangling the numbers...',
-  'Coaxing the results out...',
-  'Almost there, pinky promise...',
-  'Good things take a moment...',
-  'Worth the wait...',
-  'Patience, grasshopper...',
-  'Hold tight...',
-  'Doing the thing...',
+  "Herding the pixels...",
+  "Teaching data to dance...",
+  "Convincing bits to cooperate...",
+  "Giving electrons a pep talk...",
+  "Wrangling the numbers...",
+  "Coaxing the results out...",
+  "Almost there, pinky promise...",
+  "Good things take a moment...",
+  "Worth the wait...",
+  "Patience, grasshopper...",
+  "Hold tight...",
+  "Doing the thing...",
   // Abstract & Poetic
-  'Folding space and time...',
-  'Untangling the threads...',
-  'Finding the signal...',
-  'Distilling the essence...',
-  'Turning chaos into order...',
-  'Making sense of it all...',
+  "Folding space and time...",
+  "Untangling the threads...",
+  "Finding the signal...",
+  "Distilling the essence...",
+  "Turning chaos into order...",
+  "Making sense of it all...",
   // Confident & Reassuring
-  'This is going to be good...',
+  "This is going to be good...",
   "You're gonna love this...",
-  'Something nice is coming...',
-  'Just a heartbeat away...',
-]
+  "Something nice is coming...",
+  "Just a heartbeat away...",
+];
 
 function getRandomStartIndex() {
-  return Math.floor(Math.random() * loadingMessages.length)
+  return Math.floor(Math.random() * loadingMessages.length);
 }
 
 const CyclingLoadingMessage: FC = () => {
-  const [index, setIndex] = useState(getRandomStartIndex)
-  const [isVisible, setIsVisible] = useState(true)
+  const [index, setIndex] = useState(getRandomStartIndex);
+  const [isVisible, setIsVisible] = useState(true);
 
   useEffect(() => {
-    let timeoutId: ReturnType<typeof setTimeout> | undefined
+    let timeoutId: ReturnType<typeof setTimeout> | undefined;
     const interval = setInterval(() => {
       // Fade out
-      setIsVisible(false)
+      setIsVisible(false);
 
       // After fade out, change message and fade in
       timeoutId = setTimeout(() => {
-        setIndex((prev) => (prev + 1) % loadingMessages.length)
-        setIsVisible(true)
-      }, 200)
-    }, 2000)
+        setIndex((prev) => (prev + 1) % loadingMessages.length);
+        setIsVisible(true);
+      }, 200);
+    }, 2000);
 
     return () => {
-      clearInterval(interval)
-      if (timeoutId) clearTimeout(timeoutId)
-    }
-  }, [])
+      clearInterval(interval);
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, []);
 
   return (
     <span
       className={cn(
-        'shimmer text-muted-foreground text-sm transition-opacity duration-200',
-        isVisible ? 'opacity-100' : 'opacity-0'
+        "shimmer text-sm text-muted-foreground transition-opacity duration-200",
+        isVisible ? "opacity-100" : "opacity-0",
       )}
     >
       {loadingMessages[index]}
     </span>
-  )
-}
+  );
+};
 
 export const GenerativeUIRenderer: FC<SyntaxHighlighterProps> = ({ code }) => {
   // Parse JSON - returns null if invalid (still streaming)
   const content = useMemo(() => {
-    const trimmedCode = code.trim()
-    if (!trimmedCode) return null
+    const trimmedCode = code.trim();
+    if (!trimmedCode) return null;
 
     try {
-      const parsed = JSON.parse(trimmedCode)
+      const parsed = JSON.parse(trimmedCode);
       // Validate it has a type field (basic json-render structure)
-      if (!parsed || typeof parsed !== 'object' || !('type' in parsed)) {
-        return null
+      if (!parsed || typeof parsed !== "object" || !("type" in parsed)) {
+        return null;
       }
-      return parsed
+      return parsed;
     } catch {
       // JSON is incomplete (still streaming) - return null to show loading state
-      return null
+      return null;
     }
-  }, [code])
+  }, [code]);
 
   // Show loading state while JSON is incomplete/streaming
   if (!content) {
     return (
       <MacOSWindowFrame>
-        <div className="bg-background flex min-h-[400px] items-center justify-center">
+        <div className="flex min-h-[400px] items-center justify-center bg-background">
           <CyclingLoadingMessage />
         </div>
       </MacOSWindowFrame>
-    )
+    );
   }
 
   // Render with macOS-style window frame
@@ -143,5 +143,5 @@ export const GenerativeUIRenderer: FC<SyntaxHighlighterProps> = ({ code }) => {
         <GenerativeUI content={content} />
       </div>
     </MacOSWindowFrame>
-  )
-}
+  );
+};

package/src/plugins/generative-ui/index.ts

@@ -1,12 +1,12 @@
-import { Plugin } from '@/types/plugins'
-import { GenerativeUIRenderer } from './component'
+import { Plugin } from "@/types/plugins";
+import { GenerativeUIRenderer } from "./component";
 
 /**
  * This plugin renders json-render UI trees as dynamic widgets.
  * Use the language identifier 'ui' or 'json-render' in code blocks.
  */
 export const generativeUI: Plugin = {
-  language: 'ui',
+  language: "ui",
   prompt: `Render structured data as visual UI using \`\`\`ui code blocks with valid JSON.
 
 Components:
@@ -29,4 +29,4 @@ Example: {"type":"Card","props":{"title":"Stats"},"children":[{"type":"Metric","
 Use for dashboards, tables, metrics from tool results. Skip for simple text or errors.`,
   Component: GenerativeUIRenderer,
   Header: undefined,
-}
+};