@gram-ai/elements 1.27.4 → 1.27.6

package/src/plugins/chart/ui/line-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 {
   LineChart as RechartsLineChart,
   Line,
@@ -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,38 +26,38 @@ 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 LineChartProps {
-  title?: string
-  data: SeriesDataPoint[]
-  series?: string[]
-  showGrid?: boolean
-  showLegend?: boolean
-  showDots?: boolean
-  curved?: boolean
-  className?: string
+  title?: string;
+  data: SeriesDataPoint[];
+  series?: string[];
+  showGrid?: boolean;
+  showLegend?: boolean;
+  showDots?: boolean;
+  curved?: boolean;
+  className?: string;
 }
 
 export const LineChart: FC<LineChartProps> = ({
@@ -72,16 +72,16 @@ export const LineChart: FC<LineChartProps> = ({
 }) => {
   // 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%">
@@ -97,28 +97,28 @@ export const LineChart: FC<LineChartProps> = ({
             )}
             <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>
                 )}
               />
             )}
             {seriesKeys.map((key, index) => (
               <Line
                 key={key}
-                type={curved ? 'monotone' : 'linear'}
+                type={curved ? "monotone" : "linear"}
                 dataKey={key}
                 stroke={COLORS[index % COLORS.length]}
                 strokeWidth={2}
@@ -131,5 +131,5 @@ export const LineChart: FC<LineChartProps> = ({
         </ResponsiveContainer>
       </div>
     </div>
-  )
-}
+  );
+};

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

@@ -1,7 +1,7 @@
-'use client'
+"use client";
 
-import { cn } from '@/lib/utils'
-import { FC } from 'react'
+import { cn } from "@/lib/utils";
+import { FC } from "react";
 import {
   PieChart as RechartsPieChart,
   Pie,
@@ -10,42 +10,42 @@ import {
   Legend,
   ResponsiveContainer,
   TooltipProps,
-} from 'recharts'
+} from "recharts";
 
 const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
-  if (!active || !payload || payload.length === 0) return null
-  const entry = payload[0]
+  if (!active || !payload || payload.length === 0) return null;
+  const entry = payload[0];
   return (
-    <div className="bg-background text-foreground border-border rounded-md border px-2 py-1 text-xs shadow-sm">
+    <div className="rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground shadow-sm">
       <span className="font-medium">
-        {typeof entry?.value === 'number'
+        {typeof entry?.value === "number"
           ? entry.value.toLocaleString()
           : entry?.value}
       </span>
     </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 DataPoint {
-  label: string
-  value: number
-  color?: string
+  label: string;
+  value: number;
+  color?: string;
 }
 
 export interface PieChartProps {
-  title?: string
-  data: DataPoint[]
-  showLabels?: boolean
-  showLegend?: boolean
-  className?: string
+  title?: string;
+  data: DataPoint[];
+  showLabels?: boolean;
+  showLegend?: boolean;
+  className?: string;
 }
 
 export const PieChart: FC<PieChartProps> = ({
@@ -60,12 +60,12 @@ export const PieChart: FC<PieChartProps> = ({
     name: d.label,
     value: d.value,
     color: d.color,
-  }))
+  }));
 
   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-[320px] w-full">
         <ResponsiveContainer width="100%" height="100%">
@@ -90,33 +90,33 @@ export const PieChart: FC<PieChartProps> = ({
                       midAngle,
                       outerRadius,
                     }: {
-                      name?: string
-                      percent?: number
-                      cx?: number
-                      cy?: number
-                      midAngle?: number
-                      outerRadius?: number
+                      name?: string;
+                      percent?: number;
+                      cx?: number;
+                      cy?: number;
+                      midAngle?: number;
+                      outerRadius?: number;
                     }) => {
-                      const RADIAN = Math.PI / 180
-                      const radius = (outerRadius ?? 80) + 25
+                      const RADIAN = Math.PI / 180;
+                      const radius = (outerRadius ?? 80) + 25;
                       const x =
                         (cx ?? 0) +
-                        radius * Math.cos(-((midAngle ?? 0) * RADIAN))
+                        radius * Math.cos(-((midAngle ?? 0) * RADIAN));
                       const y =
                         (cy ?? 0) +
-                        radius * Math.sin(-((midAngle ?? 0) * RADIAN))
+                        radius * Math.sin(-((midAngle ?? 0) * RADIAN));
                       return (
                         <text
                           x={x}
                           y={y}
                           fill="var(--foreground)"
-                          textAnchor={x > (cx ?? 0) ? 'start' : 'end'}
+                          textAnchor={x > (cx ?? 0) ? "start" : "end"}
                           dominantBaseline="central"
                           fontSize={12}
                         >
-                          {`${name ?? ''} (${((percent ?? 0) * 100).toFixed(0)}%)`}
+                          {`${name ?? ""} (${((percent ?? 0) * 100).toFixed(0)}%)`}
                         </text>
-                      )
+                      );
                     }
                   : undefined
               }
@@ -134,9 +134,9 @@ export const PieChart: FC<PieChartProps> = ({
             {showLegend && (
               <Legend
                 verticalAlign="bottom"
-                wrapperStyle={{ color: 'var(--foreground)', paddingTop: 20 }}
+                wrapperStyle={{ color: "var(--foreground)", paddingTop: 20 }}
                 formatter={(value) => (
-                  <span style={{ color: 'var(--foreground)' }}>{value}</span>
+                  <span style={{ color: "var(--foreground)" }}>{value}</span>
                 )}
               />
             )}
@@ -144,5 +144,5 @@ export const PieChart: FC<PieChartProps> = ({
         </ResponsiveContainer>
       </div>
     </div>
-  )
-}
+  );
+};

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

@@ -1,7 +1,7 @@
-'use client'
+"use client";
 
-import { cn } from '@/lib/utils'
-import { FC } from 'react'
+import { cn } from "@/lib/utils";
+import { FC } from "react";
 import {
   RadarChart as RechartsRadarChart,
   Radar,
@@ -12,41 +12,41 @@ import {
   Legend,
   ResponsiveContainer,
   TooltipProps,
-} from 'recharts'
+} from "recharts";
 
 const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
-  if (!active || !payload || payload.length === 0) return null
-  const entry = payload[0]
+  if (!active || !payload || payload.length === 0) return null;
+  const entry = payload[0];
   return (
-    <div className="bg-background text-foreground border-border rounded-md border px-2 py-1 text-xs shadow-sm">
+    <div className="rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground shadow-sm">
       <span className="font-medium">
-        {typeof entry?.value === 'number'
+        {typeof entry?.value === "number"
           ? entry.value.toLocaleString()
           : entry?.value}
       </span>
     </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 DataPoint {
-  label: string
-  value: number
-  color?: string
+  label: string;
+  value: number;
+  color?: string;
 }
 
 export interface RadarChartProps {
-  title?: string
-  data: DataPoint[]
-  showLegend?: boolean
-  className?: string
+  title?: string;
+  data: DataPoint[];
+  showLegend?: boolean;
+  className?: string;
 }
 
 export const RadarChart: FC<RadarChartProps> = ({
@@ -56,12 +56,12 @@ export const RadarChart: FC<RadarChartProps> = ({
   className,
 }) => {
   // Transform data for Recharts (uses 'subject' for labels)
-  const chartData = data.map((d) => ({ subject: d.label, value: d.value }))
+  const chartData = data.map((d) => ({ subject: d.label, value: d.value }));
 
   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%">
@@ -74,18 +74,18 @@ export const RadarChart: FC<RadarChartProps> = ({
             <PolarGrid stroke="var(--border)" />
             <PolarAngleAxis
               dataKey="subject"
-              tick={{ fill: 'var(--foreground)', fontSize: 12 }}
+              tick={{ fill: "var(--foreground)", fontSize: 12 }}
             />
             <PolarRadiusAxis
-              tick={{ fill: 'var(--foreground)', fontSize: 10 }}
-              axisLine={{ stroke: 'var(--border)' }}
+              tick={{ fill: "var(--foreground)", fontSize: 10 }}
+              axisLine={{ stroke: "var(--border)" }}
             />
             <Tooltip content={<CustomTooltip />} />
             {showLegend && (
               <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>
                 )}
               />
             )}
@@ -101,5 +101,5 @@ export const RadarChart: FC<RadarChartProps> = ({
         </ResponsiveContainer>
       </div>
     </div>
-  )
-}
+  );
+};

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

@@ -1,7 +1,7 @@
-'use client'
+"use client";
 
-import { cn } from '@/lib/utils'
-import { FC } from 'react'
+import { cn } from "@/lib/utils";
+import { FC } from "react";
 import {
   ScatterChart as RechartsScatterChart,
   Scatter,
@@ -13,43 +13,43 @@ import {
   ZAxis,
   Cell,
   TooltipProps,
-} from 'recharts'
+} from "recharts";
 
 interface ScatterDataPoint {
-  x: number
-  y: number
-  label?: string
-  size?: number
-  color?: string
+  x: number;
+  y: number;
+  label?: string;
+  size?: number;
+  color?: string;
 }
 
 const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
-  if (!active || !payload || payload.length === 0) return null
-  const point = payload[0]?.payload as ScatterDataPoint | undefined
+  if (!active || !payload || payload.length === 0) return null;
+  const point = payload[0]?.payload as ScatterDataPoint | undefined;
   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">
       {point?.label && <div className="font-medium">{point.label}</div>}
       <div>x: {point?.x?.toLocaleString()}</div>
       <div>y: {point?.y?.toLocaleString()}</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)",
+];
 
 export interface ScatterChartProps {
-  title?: string
-  data: ScatterDataPoint[]
-  xLabel?: string
-  yLabel?: string
-  showGrid?: boolean
-  className?: string
+  title?: string;
+  data: ScatterDataPoint[];
+  xLabel?: string;
+  yLabel?: string;
+  showGrid?: boolean;
+  className?: string;
 }
 
 export const ScatterChart: FC<ScatterChartProps> = ({
@@ -61,12 +61,12 @@ export const ScatterChart: FC<ScatterChartProps> = ({
   className,
 }) => {
   // Check if we have size data for bubble chart effect
-  const hasSizeData = data.some((d) => d.size !== undefined)
+  const hasSizeData = data.some((d) => d.size !== undefined);
 
   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%">
@@ -82,17 +82,17 @@ export const ScatterChart: FC<ScatterChartProps> = ({
             <XAxis
               type="number"
               dataKey="x"
-              name={xLabel || 'x'}
-              tick={{ fill: 'var(--foreground)', fontSize: 12 }}
-              axisLine={{ stroke: 'var(--border)' }}
-              tickLine={{ stroke: 'var(--border)' }}
+              name={xLabel || "x"}
+              tick={{ fill: "var(--foreground)", fontSize: 12 }}
+              axisLine={{ stroke: "var(--border)" }}
+              tickLine={{ stroke: "var(--border)" }}
               label={
                 xLabel
                   ? {
                       value: xLabel,
-                      position: 'bottom',
+                      position: "bottom",
                       offset: -5,
-                      fill: 'var(--foreground)',
+                      fill: "var(--foreground)",
                     }
                   : undefined
               }
@@ -100,17 +100,17 @@ export const ScatterChart: FC<ScatterChartProps> = ({
             <YAxis
               type="number"
               dataKey="y"
-              name={yLabel || 'y'}
-              tick={{ fill: 'var(--foreground)', fontSize: 12 }}
-              axisLine={{ stroke: 'var(--border)' }}
-              tickLine={{ stroke: 'var(--border)' }}
+              name={yLabel || "y"}
+              tick={{ fill: "var(--foreground)", fontSize: 12 }}
+              axisLine={{ stroke: "var(--border)" }}
+              tickLine={{ stroke: "var(--border)" }}
               label={
                 yLabel
                   ? {
                       value: yLabel,
                       angle: -90,
-                      position: 'left',
-                      fill: 'var(--foreground)',
+                      position: "left",
+                      fill: "var(--foreground)",
                     }
                   : undefined
               }
@@ -128,5 +128,5 @@ export const ScatterChart: FC<ScatterChartProps> = ({
         </ResponsiveContainer>
       </div>
     </div>
-  )
-}
+  );
+};

package/src/plugins/components/MacOSWindowFrame.tsx

@@ -1,14 +1,14 @@
-'use client'
+"use client";
 
-import { useRadius } from '@/hooks/useRadius'
-import { cn } from '@/lib/utils'
-import { FC, ReactNode } from 'react'
+import { useRadius } from "@/hooks/useRadius";
+import { cn } from "@/lib/utils";
+import { FC, ReactNode } from "react";
 
 interface MacOSWindowFrameProps {
-  children: ReactNode
-  className?: string
+  children: ReactNode;
+  className?: string;
   /** Optional title to display in the title bar */
-  title?: string
+  title?: string;
 }
 
 /**
@@ -20,20 +20,20 @@ export const MacOSWindowFrame: FC<MacOSWindowFrameProps> = ({
   className,
   title,
 }) => {
-  const r = useRadius()
+  const r = useRadius();
 
   return (
     <div className="@container my-4 w-full first:mt-0">
       <div
         className={cn(
           // after:hidden prevents assistant-ui from showing its default code block loading indicator
-          'border-border w-full overflow-hidden border after:hidden @sm:max-w-md @md:max-w-lg @lg:max-w-xl @xl:max-w-2xl',
-          r('lg'),
-          className
+          "w-full overflow-hidden border border-border after:hidden @sm:max-w-md @md:max-w-lg @lg:max-w-xl @xl:max-w-2xl",
+          r("lg"),
+          className,
         )}
       >
         {/* Title bar */}
-        <div className="border-border bg-muted/50 flex h-8 items-center gap-2 border-b px-3">
+        <div className="flex h-8 items-center gap-2 border-b border-border bg-muted/50 px-3">
           {/* Traffic lights */}
           <div className="flex items-center gap-1.5">
             <div className="size-3 rounded-full bg-[#FF5F57]" />
@@ -42,7 +42,7 @@ export const MacOSWindowFrame: FC<MacOSWindowFrameProps> = ({
           </div>
           {/* Title */}
           {title && (
-            <span className="text-muted-foreground flex-1 text-center text-xs font-medium">
+            <span className="flex-1 text-center text-xs font-medium text-muted-foreground">
               {title}
             </span>
           )}
@@ -51,5 +51,5 @@ export const MacOSWindowFrame: FC<MacOSWindowFrameProps> = ({
         {children}
       </div>
     </div>
-  )
-}
+  );
+};