@gram-ai/elements 1.27.4 → 1.27.5

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>
-  )
-}
+  );
+};

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";