@gram-ai/elements 1.27.3 → 1.27.5

package/src/lib/utils.ts

@@ -1,16 +1,16 @@
-import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
 
 export function assertNever(value: unknown): never {
-  throw new Error(`Unexpected value: ${value}`)
+  throw new Error(`Unexpected value: ${value}`);
 }
 
 export function assert(condition: unknown, message: string): asserts condition {
   if (!condition) {
-    throw new Error(message)
+    throw new Error(message);
   }
 }

package/src/lib.d.ts

@@ -1 +1 @@
-type FIXME<T, S extends string> = (T & S) | T
+type FIXME<T, S extends string> = (T & S) | T;

package/src/plugins/README.md

@@ -19,19 +19,19 @@ A plugin is defined by the following TypeScript interface:
 ```typescript
 interface Plugin {
   // The language identifier for the code fence (e.g., "vega", "mermaid", "d3")
-  language: string
+  language: string;
 
   // Instructions for the LLM on how to use this plugin
-  prompt: string
+  prompt: string;
 
   // Your custom React component that renders the code block
-  SyntaxHighlighter: ComponentType<SyntaxHighlighterProps>
+  SyntaxHighlighter: ComponentType<SyntaxHighlighterProps>;
 
   // Optional: Custom header component for the code block
-  CodeHeader?: ComponentType<CodeHeaderProps> | null
+  CodeHeader?: ComponentType<CodeHeaderProps> | null;
 
   // Optional: Whether to override existing plugins with the same language
-  overrideExisting?: boolean
+  overrideExisting?: boolean;
 }
 ```
 

package/src/plugins/chart/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";
 
 /**
  * Data point schema - common structure for all chart types
@@ -8,7 +8,7 @@ const dataPointSchema = z.object({
   label: z.string(),
   value: z.number(),
   color: z.string().optional(),
-})
+});
 
 /**
  * Multi-series data point for line/area charts
@@ -17,7 +17,7 @@ const seriesDataPointSchema = z
   .object({
     label: z.string(),
   })
-  .catchall(z.number())
+  .catchall(z.number());
 
 /**
  * Chart Catalog
@@ -26,19 +26,19 @@ const seriesDataPointSchema = z
  * Uses Recharts under the hood for rendering.
  */
 export const chartCatalog = createCatalog({
-  name: 'chart',
+  name: "chart",
   components: {
     BarChart: {
       props: z.object({
         title: z.string().optional(),
         data: z.array(dataPointSchema),
-        layout: z.enum(['vertical', 'horizontal']).optional(),
+        layout: z.enum(["vertical", "horizontal"]).optional(),
         showGrid: z.boolean().optional(),
         showLegend: z.boolean().optional(),
         className: z.string().optional(),
       }),
       description:
-        'Bar chart for comparing categorical data. Use vertical for few categories, horizontal for many or long labels.',
+        "Bar chart for comparing categorical data. Use vertical for few categories, horizontal for many or long labels.",
     },
 
     LineChart: {
@@ -53,7 +53,7 @@ export const chartCatalog = createCatalog({
         className: z.string().optional(),
       }),
       description:
-        'Line chart for showing trends over time or continuous data. Supports multiple series.',
+        "Line chart for showing trends over time or continuous data. Supports multiple series.",
     },
 
     AreaChart: {
@@ -67,7 +67,7 @@ export const chartCatalog = createCatalog({
         className: z.string().optional(),
       }),
       description:
-        'Area chart for showing volume/magnitude over time. Use stacked for part-to-whole relationships.',
+        "Area chart for showing volume/magnitude over time. Use stacked for part-to-whole relationships.",
     },
 
     PieChart: {
@@ -79,7 +79,7 @@ export const chartCatalog = createCatalog({
         className: z.string().optional(),
       }),
       description:
-        'Pie chart for showing proportions of a whole. Best for 2-6 categories.',
+        "Pie chart for showing proportions of a whole. Best for 2-6 categories.",
     },
 
     DonutChart: {
@@ -93,7 +93,7 @@ export const chartCatalog = createCatalog({
         className: z.string().optional(),
       }),
       description:
-        'Donut chart (pie with center hole). Good for showing a key metric in the center.',
+        "Donut chart (pie with center hole). Good for showing a key metric in the center.",
     },
 
     ScatterChart: {
@@ -106,7 +106,7 @@ export const chartCatalog = createCatalog({
             label: z.string().optional(),
             size: z.number().optional(),
             color: z.string().optional(),
-          })
+          }),
         ),
         xLabel: z.string().optional(),
         yLabel: z.string().optional(),
@@ -114,7 +114,7 @@ export const chartCatalog = createCatalog({
         className: z.string().optional(),
       }),
       description:
-        'Scatter plot for showing correlation between two variables.',
+        "Scatter plot for showing correlation between two variables.",
     },
 
     RadarChart: {
@@ -125,17 +125,17 @@ export const chartCatalog = createCatalog({
         className: z.string().optional(),
       }),
       description:
-        'Radar/spider chart for comparing multiple attributes. Best for 3-8 dimensions.',
+        "Radar/spider chart for comparing multiple attributes. Best for 3-8 dimensions.",
     },
   },
-})
+});
 
 export type ChartCatalogComponentProps = typeof chartCatalog 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/chart/chart.test.ts

@@ -1,66 +1,66 @@
-import { describe, it, expect } from 'vitest'
-import { parse, View, Warn } from 'vega'
-import { expressionInterpreter } from 'vega-interpreter'
+import { describe, it, expect } from "vitest";
+import { parse, View, Warn } from "vega";
+import { expressionInterpreter } from "vega-interpreter";
 
-describe('ChartRenderer CSP compliance', () => {
-  it('renders a chart using vega-interpreter without eval', async () => {
+describe("ChartRenderer CSP compliance", () => {
+  it("renders a chart using vega-interpreter without eval", async () => {
     const spec = {
-      $schema: 'https://vega.github.io/schema/vega/v5.json',
+      $schema: "https://vega.github.io/schema/vega/v5.json",
       width: 400,
       height: 200,
       data: [
         {
-          name: 'table',
+          name: "table",
           values: [
-            { category: 'A', amount: 28 },
-            { category: 'B', amount: 55 },
+            { category: "A", amount: 28 },
+            { category: "B", amount: 55 },
           ],
         },
       ],
       marks: [
         {
-          type: 'rect',
-          from: { data: 'table' },
+          type: "rect",
+          from: { data: "table" },
           encode: {
             enter: {
-              x: { scale: 'xscale', field: 'category' },
-              width: { scale: 'xscale', band: 1 },
-              y: { scale: 'yscale', field: 'amount' },
-              y2: { scale: 'yscale', value: 0 },
+              x: { scale: "xscale", field: "category" },
+              width: { scale: "xscale", band: 1 },
+              y: { scale: "yscale", field: "amount" },
+              y2: { scale: "yscale", value: 0 },
             },
           },
         },
       ],
       scales: [
         {
-          name: 'xscale',
-          type: 'band',
-          domain: { data: 'table', field: 'category' },
-          range: 'width',
+          name: "xscale",
+          type: "band",
+          domain: { data: "table", field: "category" },
+          range: "width",
         },
         {
-          name: 'yscale',
-          domain: { data: 'table', field: 'amount' },
-          range: 'height',
+          name: "yscale",
+          domain: { data: "table", field: "amount" },
+          range: "height",
         },
       ],
-    }
+    };
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const runtime = parse(spec as any, undefined, { ast: true })
+    const runtime = parse(spec as any, undefined, { ast: true });
 
     // This is the key - using expr: vegaInterpreter means no eval() is called
     const view = new View(runtime, {
-      renderer: 'none',
+      renderer: "none",
       logLevel: Warn,
       expr: expressionInterpreter,
-    })
+    });
 
-    await view.runAsync()
+    await view.runAsync();
 
     // If we get here without error, CSP compliance works
-    expect(view.data('table')).toHaveLength(2)
+    expect(view.data("table")).toHaveLength(2);
 
-    view.finalize()
-  })
-})
+    view.finalize();
+  });
+});

package/src/plugins/chart/component.tsx

@@ -1,13 +1,13 @@
-'use client'
+"use client";
 
-import { useDensity } from '@/hooks/useDensity'
-import { cn } from '@/lib/utils'
-import { isJsonRenderTree, type JsonRenderNode } from '@/lib/generative-ui'
-import { SyntaxHighlighterProps } from '@assistant-ui/react-markdown'
-import { AlertCircleIcon } from 'lucide-react'
-import { FC, useMemo } from 'react'
-import { MacOSWindowFrame } from '../components/MacOSWindowFrame'
-import { PluginLoadingState } from '../components/PluginLoadingState'
+import { useDensity } from "@/hooks/useDensity";
+import { cn } from "@/lib/utils";
+import { isJsonRenderTree, type JsonRenderNode } from "@/lib/generative-ui";
+import { SyntaxHighlighterProps } from "@assistant-ui/react-markdown";
+import { AlertCircleIcon } from "lucide-react";
+import { FC, useMemo } from "react";
+import { MacOSWindowFrame } from "../components/MacOSWindowFrame";
+import { PluginLoadingState } from "../components/PluginLoadingState";
 
 // Import all chart components
 import {
@@ -18,17 +18,17 @@ import {
   DonutChart,
   ScatterChart,
   RadarChart,
-} from './ui'
+} from "./ui";
 
 const loadingMessages = [
-  'Rendering chart...',
-  'Visualizing data...',
-  'Building chart...',
-  'Processing data...',
-]
+  "Rendering chart...",
+  "Visualizing data...",
+  "Building chart...",
+  "Processing data...",
+];
 
 function getRandomLoadingMessage() {
-  return loadingMessages[Math.floor(Math.random() * loadingMessages.length)]
+  return loadingMessages[Math.floor(Math.random() * loadingMessages.length)];
 }
 
 /**
@@ -43,61 +43,61 @@ const chartComponents: Record<string, FC<any>> = {
   DonutChart,
   ScatterChart,
   RadarChart,
-}
+};
 
 /**
  * Render a chart node from json-render tree
  */
 function renderChartNode(node: JsonRenderNode): React.ReactNode {
-  const Component = chartComponents[node.type]
+  const Component = chartComponents[node.type];
 
   if (!Component) {
     return (
-      <div className="text-muted-foreground flex items-center gap-2 text-sm">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
         <AlertCircleIcon className="size-4" />
         <span>Unknown chart type: {node.type}</span>
       </div>
-    )
+    );
   }
 
-  return <Component {...(node.props ?? {})} />
+  return <Component {...(node.props ?? {})} />;
 }
 
 export const ChartRenderer: FC<SyntaxHighlighterProps> = ({ code }) => {
-  const d = useDensity()
+  const d = useDensity();
 
   // 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 (!isJsonRenderTree(parsed)) {
-        return null
+        return null;
       }
-      return parsed
+      return parsed;
     } catch {
       // JSON is incomplete (still streaming) - return null to show loading state
-      return null
+      return null;
     }
-  }, [code])
+  }, [code]);
 
   // Memoize the loading message so it doesn't change on every render
-  const loadingMessage = useMemo(() => getRandomLoadingMessage(), [])
+  const loadingMessage = useMemo(() => getRandomLoadingMessage(), []);
 
   // Show loading shimmer while JSON is incomplete/streaming
   if (!content) {
-    return <PluginLoadingState text={loadingMessage} />
+    return <PluginLoadingState text={loadingMessage} />;
   }
 
   // Render with macOS-style window frame
   return (
     <MacOSWindowFrame>
-      <div className={cn('bg-card w-full', d('p-lg'))}>
+      <div className={cn("w-full bg-card", d("p-lg"))}>
         {renderChartNode(content)}
       </div>
     </MacOSWindowFrame>
-  )
-}
+  );
+};

package/src/plugins/chart/index.ts

@@ -1,11 +1,11 @@
-import { Plugin } from '@/types/plugins'
-import { ChartRenderer } from './component'
+import { Plugin } from "@/types/plugins";
+import { ChartRenderer } from "./component";
 
 /**
  * This plugin renders charts using json-render format.
  */
 export const chart: Plugin = {
-  language: 'chart',
+  language: "chart",
   prompt: `WHEN TO USE CHARTS:
 Create charts to visualize numerical data when it helps users understand patterns, trends, or comparisons. Use the 'chart' code block format.
 
@@ -158,4 +158,4 @@ CONTENT GUIDELINES:
 - Focus on what the data means, not how it's displayed`,
   Component: ChartRenderer,
   Header: undefined,
-}
+};

package/src/plugins/chart/ui/area-chart.tsx

@@ -1,7 +1,7 @@
-'use client'
+"use client";
 
-import { cn } from '@/lib/utils'
-import { FC, useMemo } from 'react'
+import { cn } from "@/lib/utils";
+import { FC, useMemo } from "react";
 import {
   AreaChart as RechartsAreaChart,
   Area,
@@ -12,12 +12,12 @@ import {
   Legend,
   ResponsiveContainer,
   TooltipProps,
-} from 'recharts'
+} from "recharts";
 
 const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
-  if (!active || !payload || payload.length === 0) return null
+  if (!active || !payload || payload.length === 0) return null;
   return (
-    <div className="bg-background text-foreground border-border rounded-md border px-2 py-1.5 text-xs shadow-sm">
+    <div className="rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground shadow-sm">
       {payload.map((entry, index) => (
         <div key={index} className="flex items-center gap-2">
           <span
@@ -26,37 +26,37 @@ const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
           />
           <span>{entry.name}:</span>
           <span className="font-medium">
-            {typeof entry.value === 'number'
+            {typeof entry.value === "number"
               ? entry.value.toLocaleString()
               : entry.value}
           </span>
         </div>
       ))}
     </div>
-  )
-}
+  );
+};
 
 const COLORS = [
-  'var(--chart-1)',
-  'var(--chart-2)',
-  'var(--chart-3)',
-  'var(--chart-4)',
-  'var(--chart-5)',
-]
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)",
+];
 
 interface SeriesDataPoint {
-  label: string
-  [key: string]: string | number
+  label: string;
+  [key: string]: string | number;
 }
 
 export interface AreaChartProps {
-  title?: string
-  data: SeriesDataPoint[]
-  series?: string[]
-  stacked?: boolean
-  showGrid?: boolean
-  showLegend?: boolean
-  className?: string
+  title?: string;
+  data: SeriesDataPoint[];
+  series?: string[];
+  stacked?: boolean;
+  showGrid?: boolean;
+  showLegend?: boolean;
+  className?: string;
 }
 
 export const AreaChart: FC<AreaChartProps> = ({
@@ -70,16 +70,16 @@ export const AreaChart: FC<AreaChartProps> = ({
 }) => {
   // Auto-detect series from data keys if not provided
   const seriesKeys = useMemo(() => {
-    if (series && series.length > 0) return series
-    if (data.length === 0) return []
-    const keys = Object.keys(data[0]).filter((k) => k !== 'label')
-    return keys
-  }, [data, series])
+    if (series && series.length > 0) return series;
+    if (data.length === 0) return [];
+    const keys = Object.keys(data[0]).filter((k) => k !== "label");
+    return keys;
+  }, [data, series]);
 
   return (
-    <div className={cn('flex flex-col gap-2', className)}>
+    <div className={cn("flex flex-col gap-2", className)}>
       {title && (
-        <h3 className="text-foreground text-sm font-medium">{title}</h3>
+        <h3 className="text-sm font-medium text-foreground">{title}</h3>
       )}
       <div className="h-[250px] w-full">
         <ResponsiveContainer width="100%" height="100%">
@@ -95,21 +95,21 @@ export const AreaChart: FC<AreaChartProps> = ({
             )}
             <XAxis
               dataKey="label"
-              tick={{ fill: 'var(--foreground)', fontSize: 12 }}
-              axisLine={{ stroke: 'var(--border)' }}
-              tickLine={{ stroke: 'var(--border)' }}
+              tick={{ fill: "var(--foreground)", fontSize: 12 }}
+              axisLine={{ stroke: "var(--border)" }}
+              tickLine={{ stroke: "var(--border)" }}
             />
             <YAxis
-              tick={{ fill: 'var(--foreground)', fontSize: 12 }}
-              axisLine={{ stroke: 'var(--border)' }}
-              tickLine={{ stroke: 'var(--border)' }}
+              tick={{ fill: "var(--foreground)", fontSize: 12 }}
+              axisLine={{ stroke: "var(--border)" }}
+              tickLine={{ stroke: "var(--border)" }}
             />
             <Tooltip content={<CustomTooltip />} />
             {showLegend && seriesKeys.length > 1 && (
               <Legend
-                wrapperStyle={{ color: 'var(--foreground)' }}
+                wrapperStyle={{ color: "var(--foreground)" }}
                 formatter={(value) => (
-                  <span style={{ color: 'var(--foreground)' }}>{value}</span>
+                  <span style={{ color: "var(--foreground)" }}>{value}</span>
                 )}
               />
             )}
@@ -118,7 +118,7 @@ export const AreaChart: FC<AreaChartProps> = ({
                 key={key}
                 type="monotone"
                 dataKey={key}
-                stackId={stacked ? 'stack' : undefined}
+                stackId={stacked ? "stack" : undefined}
                 stroke={COLORS[index % COLORS.length]}
                 fill={COLORS[index % COLORS.length]}
                 fillOpacity={0.3}
@@ -129,5 +129,5 @@ export const AreaChart: FC<AreaChartProps> = ({
         </ResponsiveContainer>
       </div>
     </div>
-  )
-}
+  );
+};