@coral-ai/charts 3.8.1 → 3.10.1

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactNode } from 'react';
 
 /**
@@ -32,24 +33,40 @@ type CoralChartSpec = {
 declare const CORAL_CHART_PALETTE: string[];
 declare function pickColor(index: number, palette?: readonly string[]): string;
 
-declare function ChartFrame({ title, children, }: {
+declare function ChartFrame({ title, actions, children, 
+/**
+ * `"inline"` (default): fixed-height body for in-conversation rendering.
+ * `"fill"`: body flexes to fill the parent — used by the overlay so the
+ * chart scales to whatever size the overlay container is sized to.
+ */
+variant, }: {
     title: string;
+    actions?: ReactNode;
     children: ReactNode;
+    variant?: "inline" | "fill";
 }): react_jsx_runtime.JSX.Element;
 
 type CoralBarChartProps = {
     spec: CoralChartSpec;
     /** Override the default palette. */
     colors?: readonly string[];
+    /** Right-aligned buttons rendered in the frame header (e.g. export / expand). */
+    actions?: react.ReactNode;
+    /** Forwarded to ChartFrame — `"fill"` makes the body flex to the parent. */
+    variant?: "inline" | "fill";
 };
-declare function CoralBarChart({ spec, colors, }: CoralBarChartProps): react_jsx_runtime.JSX.Element;
+declare function CoralBarChart({ spec, colors, actions, variant, }: CoralBarChartProps): react_jsx_runtime.JSX.Element;
 
 type CoralLineChartProps = {
     spec: CoralChartSpec;
     /** Override the default palette. */
     colors?: readonly string[];
+    /** Right-aligned buttons rendered in the frame header (e.g. export / expand). */
+    actions?: react.ReactNode;
+    /** Forwarded to ChartFrame — `"fill"` makes the body flex to the parent. */
+    variant?: "inline" | "fill";
 };
-declare function CoralLineChart({ spec, colors, }: CoralLineChartProps): react_jsx_runtime.JSX.Element;
+declare function CoralLineChart({ spec, colors, actions, variant, }: CoralLineChartProps): react_jsx_runtime.JSX.Element;
 
 type CoralChartProps = {
     spec: CoralChartSpec;

package/dist/index.js

@@ -1,8 +1,8 @@
 // src/palette.ts
 var CORAL_CHART_PALETTE = [
-  "#7287ff",
-  "#34c6a3",
-  "#f5a524",
+  "#6f91ff",
+  "#29e4c8",
+  "#ffdead",
   "#e85d75",
   "#9b6ad8",
   "#4ab8d9"
@@ -12,27 +12,63 @@ function pickColor(index, palette = CORAL_CHART_PALETTE) {
 }
 
 // src/ChartFrame.tsx
+import { tokens } from "@fluentui/react-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-var frameStyle = {
-  margin: "12px 0",
-  padding: 12,
-  border: "1px solid var(--colorNeutralStroke2, #e0e0e0)",
-  borderRadius: 8
+var baseFrameStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 4,
+  padding: 4,
+  borderRadius: tokens.borderRadiusXLarge,
+  backgroundColor: tokens.colorNeutralBackground2,
+  border: `1px solid ${tokens.colorNeutralStroke2}`
+};
+var titleRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "4px 4px 4px 8px",
+  gap: 8
 };
 var titleStyle = {
-  fontWeight: 600,
-  marginBottom: 8
+  fontFamily: tokens.fontFamilyBase,
+  fontSize: tokens.fontSizeBase300,
+  fontWeight: tokens.fontWeightSemibold,
+  lineHeight: tokens.lineHeightBase300,
+  color: tokens.colorNeutralForeground1
+};
+var actionsStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 4,
+  flexShrink: 0
 };
-var bodyStyle = {
+var baseBodyStyle = {
   width: "100%",
-  height: 240
+  padding: 12,
+  boxSizing: "border-box",
+  borderRadius: tokens.borderRadiusLarge,
+  backgroundColor: tokens.colorNeutralBackground3,
+  border: `1px solid ${tokens.colorNeutralStroke2}`
 };
 function ChartFrame({
   title,
-  children
+  actions,
+  children,
+  /**
+   * `"inline"` (default): fixed-height body for in-conversation rendering.
+   * `"fill"`: body flexes to fill the parent — used by the overlay so the
+   * chart scales to whatever size the overlay container is sized to.
+   */
+  variant = "inline"
 }) {
+  const frameStyle = variant === "fill" ? { ...baseFrameStyle, width: "100%", height: "100%" } : { ...baseFrameStyle, margin: "12px 0" };
+  const bodyStyle = variant === "fill" ? { ...baseBodyStyle, flex: 1, minHeight: 0 } : { ...baseBodyStyle, height: 320 };
   return /* @__PURE__ */ jsxs("div", { style: frameStyle, children: [
-    /* @__PURE__ */ jsx("div", { style: titleStyle, children: title }),
+    /* @__PURE__ */ jsxs("div", { style: titleRowStyle, children: [
+      /* @__PURE__ */ jsx("span", { style: titleStyle, children: title }),
+      actions && /* @__PURE__ */ jsx("div", { style: actionsStyle, children: actions })
+    ] }),
     /* @__PURE__ */ jsx("div", { style: bodyStyle, children })
   ] });
 }
@@ -41,30 +77,188 @@ function ChartFrame({
 import {
   Bar,
   BarChart,
-  CartesianGrid,
   Legend,
   ResponsiveContainer,
   Tooltip,
   XAxis,
   YAxis
 } from "recharts";
+
+// src/chartTheme.ts
+import { tokens as tokens4 } from "@fluentui/react-components";
+
+// src/CoralLegend.tsx
+import { tokens as tokens2 } from "@fluentui/react-components";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function CoralLegendContent(props) {
+  const { payload } = props;
+  if (!payload?.length) return null;
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: 12
+      },
+      children: payload.map((entry, i) => /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          style: { display: "flex", alignItems: "center", gap: 6 },
+          children: [
+            /* @__PURE__ */ jsx2(
+              "span",
+              {
+                style: {
+                  width: 12,
+                  height: 12,
+                  borderRadius: 4,
+                  backgroundColor: entry.color,
+                  flexShrink: 0
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "span",
+              {
+                style: {
+                  color: tokens2.colorNeutralForeground2,
+                  fontFamily: tokens2.fontFamilyBase,
+                  fontSize: tokens2.fontSizeBase200,
+                  lineHeight: tokens2.lineHeightBase200
+                },
+                children: entry.value
+              }
+            )
+          ]
+        },
+        `${entry.value}-${i}`
+      ))
+    }
+  );
+}
+
+// src/CoralTooltip.tsx
+import { tokens as tokens3 } from "@fluentui/react-components";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function CoralTooltipContent(props) {
+  const { active, payload, label } = props;
+  if (!active || !payload?.length) return null;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        padding: 16,
+        borderRadius: 12,
+        backgroundColor: tokens3.colorNeutralBackground2,
+        minWidth: 160
+      },
+      children: [
+        label != null && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              color: tokens3.colorNeutralForeground2,
+              fontFamily: tokens3.fontFamilyBase,
+              fontSize: tokens3.fontSizeBase200,
+              fontWeight: tokens3.fontWeightSemibold,
+              lineHeight: tokens3.lineHeightBase200
+            },
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: payload.map((entry, i) => /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: { display: "flex", alignItems: "center", gap: 6 },
+            children: [
+              /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  style: {
+                    width: 12,
+                    height: 12,
+                    borderRadius: 4,
+                    backgroundColor: entry.color,
+                    flexShrink: 0
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs3(
+                "span",
+                {
+                  style: {
+                    color: tokens3.colorNeutralForeground3,
+                    fontFamily: tokens3.fontFamilyBase,
+                    fontSize: tokens3.fontSizeBase200,
+                    lineHeight: tokens3.lineHeightBase200
+                  },
+                  children: [
+                    entry.name,
+                    ": ",
+                    entry.value
+                  ]
+                }
+              )
+            ]
+          },
+          `${entry.dataKey}-${i}`
+        )) })
+      ]
+    }
+  );
+}
+
+// src/chartTheme.ts
+var gridProps = {
+  strokeDasharray: "3 3",
+  stroke: tokens4.colorNeutralStroke2
+};
+var axisProps = {
+  axisLine: false,
+  tickLine: false,
+  tick: { fill: tokens4.colorNeutralForeground4, fontSize: 12 }
+};
+var legendProps = {
+  verticalAlign: "top",
+  align: "right",
+  layout: "horizontal",
+  content: CoralLegendContent,
+  wrapperStyle: {
+    paddingBottom: 28
+  }
+};
+var tooltipProps = {
+  content: CoralTooltipContent,
+  cursor: { fill: tokens4.colorNeutralBackground2Hover, opacity: 0.5 }
+};
+
+// src/CoralBarChart.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function CoralBarChart({
   spec,
-  colors = CORAL_CHART_PALETTE
+  colors = CORAL_CHART_PALETTE,
+  actions,
+  variant
 }) {
-  return /* @__PURE__ */ jsx2(ChartFrame, { title: spec.title, children: /* @__PURE__ */ jsx2(ResponsiveContainer, { children: /* @__PURE__ */ jsxs2(BarChart, { data: spec.data, children: [
-    /* @__PURE__ */ jsx2(CartesianGrid, { strokeDasharray: "3 3" }),
-    /* @__PURE__ */ jsx2(XAxis, { dataKey: spec.xKey }),
-    /* @__PURE__ */ jsx2(YAxis, {}),
-    /* @__PURE__ */ jsx2(Tooltip, {}),
-    /* @__PURE__ */ jsx2(Legend, {}),
-    spec.series.map((s, i) => /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4(ChartFrame, { title: spec.title, actions, variant, children: /* @__PURE__ */ jsx4(ResponsiveContainer, { children: /* @__PURE__ */ jsxs4(BarChart, { data: spec.data, children: [
+    /* @__PURE__ */ jsx4(XAxis, { dataKey: spec.xKey, ...axisProps }),
+    /* @__PURE__ */ jsx4(YAxis, { ...axisProps }),
+    /* @__PURE__ */ jsx4(Tooltip, { ...tooltipProps }),
+    /* @__PURE__ */ jsx4(Legend, { ...legendProps }),
+    spec.series.map((s, i) => /* @__PURE__ */ jsx4(
       Bar,
       {
         dataKey: s.dataKey,
         name: s.label,
-        fill: pickColor(i, colors)
+        fill: pickColor(i, colors),
+        radius: [4, 4, 0, 0]
       },
       s.dataKey
     ))
@@ -73,7 +267,6 @@ function CoralBarChart({
 
 // src/CoralLineChart.tsx
 import {
-  CartesianGrid as CartesianGrid2,
   Legend as Legend2,
   Line,
   LineChart,
@@ -82,18 +275,19 @@ import {
   XAxis as XAxis2,
   YAxis as YAxis2
 } from "recharts";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function CoralLineChart({
   spec,
-  colors = CORAL_CHART_PALETTE
+  colors = CORAL_CHART_PALETTE,
+  actions,
+  variant
 }) {
-  return /* @__PURE__ */ jsx3(ChartFrame, { title: spec.title, children: /* @__PURE__ */ jsx3(ResponsiveContainer2, { children: /* @__PURE__ */ jsxs3(LineChart, { data: spec.data, children: [
-    /* @__PURE__ */ jsx3(CartesianGrid2, { strokeDasharray: "3 3" }),
-    /* @__PURE__ */ jsx3(XAxis2, { dataKey: spec.xKey }),
-    /* @__PURE__ */ jsx3(YAxis2, {}),
-    /* @__PURE__ */ jsx3(Tooltip2, {}),
-    /* @__PURE__ */ jsx3(Legend2, {}),
-    spec.series.map((s, i) => /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5(ChartFrame, { title: spec.title, actions, variant, children: /* @__PURE__ */ jsx5(ResponsiveContainer2, { children: /* @__PURE__ */ jsxs5(LineChart, { data: spec.data, children: [
+    /* @__PURE__ */ jsx5(XAxis2, { dataKey: spec.xKey, ...axisProps }),
+    /* @__PURE__ */ jsx5(YAxis2, { ...axisProps }),
+    /* @__PURE__ */ jsx5(Tooltip2, { ...tooltipProps }),
+    /* @__PURE__ */ jsx5(Legend2, { ...legendProps }),
+    spec.series.map((s, i) => /* @__PURE__ */ jsx5(
       Line,
       {
         type: "monotone",
@@ -107,16 +301,159 @@ function CoralLineChart({
 }
 
 // src/CoralChart.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-function CoralChart({ spec, colors }) {
+import { useState } from "react";
+import { Button } from "@fluentui/react-components";
+import {
+  Dismiss,
+  FullScreenMaximize,
+  MicrosoftExcel
+} from "@coral-ai/bundleicons";
+import { Overlay } from "@coral-ai/react";
+
+// src/csvExport.ts
+function escapeCsvCell(value) {
+  if (value === null || value === void 0) return "";
+  const str = String(value);
+  if (/[",\r\n]/.test(str)) {
+    return `"${str.replace(/"/g, '""')}"`;
+  }
+  return str;
+}
+function chartSpecToCsv(spec) {
+  const headers = [spec.xKey, ...spec.series.map((s) => s.label)];
+  const rows = spec.data.map(
+    (row) => [row[spec.xKey], ...spec.series.map((s) => row[s.dataKey])].map(escapeCsvCell).join(",")
+  );
+  return [headers.map(escapeCsvCell).join(","), ...rows].join("\r\n");
+}
+function downloadChartCsv(spec) {
+  const csv = chartSpecToCsv(spec);
+  const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `${(spec.title || "chart").replace(/[^a-z0-9_\- ]+/gi, "_")}.csv`;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+}
+
+// src/CoralChart.tsx
+import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function ChartBody({ spec, colors, actions, variant }) {
   switch (spec.kind) {
     case "line":
-      return /* @__PURE__ */ jsx4(CoralLineChart, { spec, colors });
+      return /* @__PURE__ */ jsx6(
+        CoralLineChart,
+        {
+          spec,
+          colors,
+          actions,
+          variant
+        }
+      );
     case "bar":
     default:
-      return /* @__PURE__ */ jsx4(CoralBarChart, { spec, colors });
+      return /* @__PURE__ */ jsx6(
+        CoralBarChart,
+        {
+          spec,
+          colors,
+          actions,
+          variant
+        }
+      );
   }
 }
+function CoralChart({ spec, colors }) {
+  const [open, setOpen] = useState(false);
+  const exportCsv = () => downloadChartCsv(spec);
+  const inlineActions = /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx6(
+      Button,
+      {
+        appearance: "subtle",
+        size: "small",
+        icon: /* @__PURE__ */ jsx6(MicrosoftExcel, {}),
+        onClick: exportCsv,
+        title: "Download as CSV",
+        "aria-label": "Download as CSV"
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      Button,
+      {
+        appearance: "subtle",
+        size: "small",
+        icon: /* @__PURE__ */ jsx6(FullScreenMaximize, {}),
+        onClick: () => setOpen(true),
+        title: "Expand",
+        "aria-label": "Expand"
+      }
+    )
+  ] });
+  const overlayActions = /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx6(
+      Button,
+      {
+        appearance: "subtle",
+        size: "small",
+        icon: /* @__PURE__ */ jsx6(MicrosoftExcel, {}),
+        onClick: exportCsv,
+        title: "Download as CSV",
+        "aria-label": "Download as CSV"
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      Button,
+      {
+        appearance: "subtle",
+        size: "small",
+        icon: /* @__PURE__ */ jsx6(Dismiss, {}),
+        onClick: () => setOpen(false),
+        title: "Close",
+        "aria-label": "Close"
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx6(ChartBody, { spec, colors, actions: inlineActions }),
+    /* @__PURE__ */ jsx6(Overlay, { open, onClose: () => setOpen(false), children: /* @__PURE__ */ jsx6(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ jsx6(
+          "div",
+          {
+            style: {
+              width: "85%",
+              height: "85%",
+              maxWidth: 1600,
+              maxHeight: 900,
+              display: "flex"
+            },
+            children: /* @__PURE__ */ jsx6(
+              ChartBody,
+              {
+                spec,
+                colors,
+                actions: overlayActions,
+                variant: "fill"
+              }
+            )
+          }
+        )
+      }
+    ) })
+  ] });
+}
 export {
   CORAL_CHART_PALETTE,
   ChartFrame,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/palette.ts","../src/ChartFrame.tsx","../src/CoralBarChart.tsx","../src/CoralLineChart.tsx","../src/CoralChart.tsx"],"sourcesContent":["/**\n * Default color palette used by built-in chart components. Designed to read\n * cleanly against the Coral neutral surfaces in both light and dark themes.\n * Override by passing `colors` to any chart, or by editing this list to align\n * a project to a different brand palette.\n */\nexport const CORAL_CHART_PALETTE = [\n  \"#7287ff\",\n  \"#34c6a3\",\n  \"#f5a524\",\n  \"#e85d75\",\n  \"#9b6ad8\",\n  \"#4ab8d9\",\n];\n\nexport function pickColor(index: number, palette: readonly string[] = CORAL_CHART_PALETTE): string {\n  return palette[index % palette.length];\n}\n","// Shared visual frame around any chart kind: titled bordered card with a\n// fixed-height body that hosts the recharts ResponsiveContainer.\n\nimport { ReactNode } from \"react\";\n\nconst frameStyle: React.CSSProperties = {\n  margin: \"12px 0\",\n  padding: 12,\n  border: \"1px solid var(--colorNeutralStroke2, #e0e0e0)\",\n  borderRadius: 8,\n};\n\nconst titleStyle: React.CSSProperties = {\n  fontWeight: 600,\n  marginBottom: 8,\n};\n\nconst bodyStyle: React.CSSProperties = {\n  width: \"100%\",\n  height: 240,\n};\n\nexport function ChartFrame({\n  title,\n  children,\n}: {\n  title: string;\n  children: ReactNode;\n}) {\n  return (\n    <div style={frameStyle}>\n      <div style={titleStyle}>{title}</div>\n      <div style={bodyStyle}>{children}</div>\n    </div>\n  );\n}\n","// Coral-styled bar chart. Wraps recharts so consumers don't import recharts\n// directly — keeps the underlying library swappable and the public API tiny.\n\nimport {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Legend,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport { ChartFrame } from \"./ChartFrame\";\nimport { CORAL_CHART_PALETTE, pickColor } from \"./palette\";\nimport type { CoralChartSpec } from \"./types\";\n\nexport type CoralBarChartProps = {\n  spec: CoralChartSpec;\n  /** Override the default palette. */\n  colors?: readonly string[];\n};\n\nexport function CoralBarChart({\n  spec,\n  colors = CORAL_CHART_PALETTE,\n}: CoralBarChartProps) {\n  return (\n    <ChartFrame title={spec.title}>\n      <ResponsiveContainer>\n        <BarChart data={spec.data}>\n          <CartesianGrid strokeDasharray=\"3 3\" />\n          <XAxis dataKey={spec.xKey} />\n          <YAxis />\n          <Tooltip />\n          <Legend />\n          {spec.series.map((s, i) => (\n            <Bar\n              key={s.dataKey}\n              dataKey={s.dataKey}\n              name={s.label}\n              fill={pickColor(i, colors)}\n            />\n          ))}\n        </BarChart>\n      </ResponsiveContainer>\n    </ChartFrame>\n  );\n}\n","// Coral-styled line chart. Wraps recharts so consumers don't import recharts\n// directly — keeps the underlying library swappable and the public API tiny.\n\nimport {\n  CartesianGrid,\n  Legend,\n  Line,\n  LineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport { ChartFrame } from \"./ChartFrame\";\nimport { CORAL_CHART_PALETTE, pickColor } from \"./palette\";\nimport type { CoralChartSpec } from \"./types\";\n\nexport type CoralLineChartProps = {\n  spec: CoralChartSpec;\n  /** Override the default palette. */\n  colors?: readonly string[];\n};\n\nexport function CoralLineChart({\n  spec,\n  colors = CORAL_CHART_PALETTE,\n}: CoralLineChartProps) {\n  return (\n    <ChartFrame title={spec.title}>\n      <ResponsiveContainer>\n        <LineChart data={spec.data}>\n          <CartesianGrid strokeDasharray=\"3 3\" />\n          <XAxis dataKey={spec.xKey} />\n          <YAxis />\n          <Tooltip />\n          <Legend />\n          {spec.series.map((s, i) => (\n            <Line\n              key={s.dataKey}\n              type=\"monotone\"\n              dataKey={s.dataKey}\n              name={s.label}\n              stroke={pickColor(i, colors)}\n            />\n          ))}\n        </LineChart>\n      </ResponsiveContainer>\n    </ChartFrame>\n  );\n}\n","// Dispatcher that renders the right Coral chart for a given spec.kind.\n// Use this when you want a single component that picks bar / line based on\n// what an agent decided to emit; reach for CoralBarChart / CoralLineChart\n// directly when you know the kind statically.\n\nimport { CoralBarChart } from \"./CoralBarChart\";\nimport { CoralLineChart } from \"./CoralLineChart\";\nimport type { CoralChartSpec } from \"./types\";\n\nexport type CoralChartProps = {\n  spec: CoralChartSpec;\n  colors?: readonly string[];\n};\n\nexport function CoralChart({ spec, colors }: CoralChartProps) {\n  switch (spec.kind) {\n    case \"line\":\n      return <CoralLineChart spec={spec} colors={colors} />;\n    case \"bar\":\n    default:\n      return <CoralBarChart spec={spec} colors={colors} />;\n  }\n}\n"],"mappings":"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","names":["jsx","jsxs","CartesianGrid","Legend","ResponsiveContainer","Tooltip","XAxis","YAxis","jsx","jsxs","ResponsiveContainer","CartesianGrid","XAxis","YAxis","Tooltip","Legend","jsx"]}
+{"version":3,"sources":["../src/palette.ts","../src/ChartFrame.tsx","../src/CoralBarChart.tsx","../src/chartTheme.ts","../src/CoralLegend.tsx","../src/CoralTooltip.tsx","../src/CoralLineChart.tsx","../src/CoralChart.tsx","../src/csvExport.ts"],"sourcesContent":["/**\n * Default color palette used by built-in chart components. Designed to read\n * cleanly against the Coral neutral surfaces in both light and dark themes.\n * Override by passing `colors` to any chart, or by editing this list to align\n * a project to a different brand palette.\n */\nexport const CORAL_CHART_PALETTE = [\n  \"#6f91ff\",\n  \"#29e4c8\",\n  \"#ffdead\",\n  \"#e85d75\",\n  \"#9b6ad8\",\n  \"#4ab8d9\",\n];\n\nexport function pickColor(index: number, palette: readonly string[] = CORAL_CHART_PALETTE): string {\n  return palette[index % palette.length];\n}\n","// Shared visual frame around any chart kind. Two-tier card matching the\n// Coral Figma design: a tinted outer shell wraps a header row (title +\n// optional right-aligned action buttons) and an inset inner panel where\n// the chart itself renders.\n\nimport { tokens } from \"@fluentui/react-components\";\nimport type { CSSProperties, ReactNode } from \"react\";\n\nconst baseFrameStyle: CSSProperties = {\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 4,\n  padding: 4,\n  borderRadius: tokens.borderRadiusXLarge,\n  backgroundColor: tokens.colorNeutralBackground2,\n  border: `1px solid ${tokens.colorNeutralStroke2}`,\n};\n\nconst titleRowStyle: CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n  padding: \"4px 4px 4px 8px\",\n  gap: 8,\n};\n\nconst titleStyle: CSSProperties = {\n  fontFamily: tokens.fontFamilyBase,\n  fontSize: tokens.fontSizeBase300,\n  fontWeight: tokens.fontWeightSemibold,\n  lineHeight: tokens.lineHeightBase300,\n  color: tokens.colorNeutralForeground1,\n};\n\nconst actionsStyle: CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 4,\n  flexShrink: 0,\n};\n\nconst baseBodyStyle: CSSProperties = {\n  width: \"100%\",\n  padding: 12,\n  boxSizing: \"border-box\",\n  borderRadius: tokens.borderRadiusLarge,\n  backgroundColor: tokens.colorNeutralBackground3,\n  border: `1px solid ${tokens.colorNeutralStroke2}`,\n};\n\nexport function ChartFrame({\n  title,\n  actions,\n  children,\n  /**\n   * `\"inline\"` (default): fixed-height body for in-conversation rendering.\n   * `\"fill\"`: body flexes to fill the parent — used by the overlay so the\n   * chart scales to whatever size the overlay container is sized to.\n   */\n  variant = \"inline\",\n}: {\n  title: string;\n  actions?: ReactNode;\n  children: ReactNode;\n  variant?: \"inline\" | \"fill\";\n}) {\n  const frameStyle: CSSProperties =\n    variant === \"fill\"\n      ? { ...baseFrameStyle, width: \"100%\", height: \"100%\" }\n      : { ...baseFrameStyle, margin: \"12px 0\" };\n  const bodyStyle: CSSProperties =\n    variant === \"fill\"\n      ? { ...baseBodyStyle, flex: 1, minHeight: 0 }\n      : { ...baseBodyStyle, height: 320 };\n\n  return (\n    <div style={frameStyle}>\n      <div style={titleRowStyle}>\n        <span style={titleStyle}>{title}</span>\n        {actions && <div style={actionsStyle}>{actions}</div>}\n      </div>\n      <div style={bodyStyle}>{children}</div>\n    </div>\n  );\n}\n","// Coral-styled bar chart. Wraps recharts so consumers don't import recharts\n// directly — keeps the underlying library swappable and the public API tiny.\n\nimport {\n  Bar,\n  BarChart,\n  Legend,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport { ChartFrame } from \"./ChartFrame\";\nimport { axisProps, legendProps, tooltipProps } from \"./chartTheme\";\nimport { CORAL_CHART_PALETTE, pickColor } from \"./palette\";\nimport type { CoralChartSpec } from \"./types\";\n\nexport type CoralBarChartProps = {\n  spec: CoralChartSpec;\n  /** Override the default palette. */\n  colors?: readonly string[];\n  /** Right-aligned buttons rendered in the frame header (e.g. export / expand). */\n  actions?: import(\"react\").ReactNode;\n  /** Forwarded to ChartFrame — `\"fill\"` makes the body flex to the parent. */\n  variant?: \"inline\" | \"fill\";\n};\n\nexport function CoralBarChart({\n  spec,\n  colors = CORAL_CHART_PALETTE,\n  actions,\n  variant,\n}: CoralBarChartProps) {\n  return (\n    <ChartFrame title={spec.title} actions={actions} variant={variant}>\n      <ResponsiveContainer>\n        <BarChart data={spec.data}>\n          <XAxis dataKey={spec.xKey} {...axisProps} />\n          <YAxis {...axisProps} />\n          <Tooltip {...tooltipProps} />\n          <Legend {...legendProps} />\n          {spec.series.map((s, i) => (\n            <Bar\n              key={s.dataKey}\n              dataKey={s.dataKey}\n              name={s.label}\n              fill={pickColor(i, colors)}\n              radius={[4, 4, 0, 0]}\n            />\n          ))}\n        </BarChart>\n      </ResponsiveContainer>\n    </ChartFrame>\n  );\n}\n","// Shared recharts styling — both CoralBarChart and CoralLineChart spread\n// these onto their grid/axis/legend/tooltip so any visual tweak lands in\n// one place.\n//\n// Why props objects instead of wrapper components: recharts traverses its\n// direct children to discover axes, grids, tooltips, etc. Wrapping them in\n// our own component would hide them from that traversal and the chart would\n// silently render without axes.\n\nimport { tokens } from \"@fluentui/react-components\";\nimport type { CSSProperties } from \"react\";\nimport { CoralLegendContent } from \"./CoralLegend\";\nimport { CoralTooltipContent } from \"./CoralTooltip\";\n\nexport const gridProps = {\n  strokeDasharray: \"3 3\",\n  stroke: tokens.colorNeutralStroke2,\n} as const;\n\nexport const axisProps = {\n  axisLine: false,\n  tickLine: false,\n  tick: { fill: tokens.colorNeutralForeground4, fontSize: 12 },\n} as const;\n\nexport const legendProps = {\n  verticalAlign: \"top\" as const,\n  align: \"right\" as const,\n  layout: \"horizontal\" as const,\n  content: CoralLegendContent,\n  wrapperStyle: {\n    paddingBottom: 28,\n  } as CSSProperties,\n} as const;\n\nexport const tooltipProps = {\n  content: CoralTooltipContent,\n  cursor: { fill: tokens.colorNeutralBackground2Hover, opacity: 0.5 },\n} as const;\n","// Custom recharts legend content matching the Coral Figma design:\n// 12x12 rounded color box + Caption1 label, laid out horizontally above\n// the chart body.\n\nimport { tokens } from \"@fluentui/react-components\";\n\ntype LegendPayloadItem = {\n  value?: string | number;\n  color?: string;\n};\n\n// Recharts' generic legend-content prop doesn't unify cleanly with a typed\n// custom renderer, so accept props as `any` and narrow inside.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function CoralLegendContent(props: any) {\n  const { payload } = props as { payload?: readonly LegendPayloadItem[] };\n  if (!payload?.length) return null;\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"row\",\n        flexWrap: \"wrap\",\n        alignItems: \"center\",\n        justifyContent: \"flex-end\",\n        gap: 12,\n      }}\n    >\n      {payload.map((entry, i) => (\n        <div\n          key={`${entry.value}-${i}`}\n          style={{ display: \"flex\", alignItems: \"center\", gap: 6 }}\n        >\n          <span\n            style={{\n              width: 12,\n              height: 12,\n              borderRadius: 4,\n              backgroundColor: entry.color,\n              flexShrink: 0,\n            }}\n          />\n          <span\n            style={{\n              color: tokens.colorNeutralForeground2,\n              fontFamily: tokens.fontFamilyBase,\n              fontSize: tokens.fontSizeBase200,\n              lineHeight: tokens.lineHeightBase200,\n            }}\n          >\n            {entry.value}\n          </span>\n        </div>\n      ))}\n    </div>\n  );\n}\n","// Custom recharts tooltip content matching the Coral Figma design:\n// dark rounded panel, title on top, then 20x20 rounded color swatch +\n// \"name: value\" rows stacked vertically.\n\nimport { tokens } from \"@fluentui/react-components\";\n\ntype TooltipPayloadItem = {\n  dataKey?: unknown;\n  name?: string | number;\n  value?: string | number;\n  color?: string;\n};\n\n// Recharts' generic tooltip-content prop is strictly typed and the generics\n// don't unify cleanly with a custom renderer, so accept the props as `any`\n// here and re-narrow inside.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function CoralTooltipContent(props: any) {\n  const { active, payload, label } = props as {\n    active?: boolean;\n    payload?: readonly TooltipPayloadItem[];\n    label?: string | number;\n  };\n  if (!active || !payload?.length) return null;\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: 12,\n        padding: 16,\n        borderRadius: 12,\n        backgroundColor: tokens.colorNeutralBackground2,\n        minWidth: 160,\n\n      }}\n    >\n      {label != null && (\n        <div\n          style={{\n            color: tokens.colorNeutralForeground2,\n            fontFamily: tokens.fontFamilyBase,\n            fontSize: tokens.fontSizeBase200,\n            fontWeight: tokens.fontWeightSemibold,\n            lineHeight: tokens.lineHeightBase200,\n          }}\n        >\n          {label}\n        </div>\n      )}\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n        {payload.map((entry, i) => (\n          <div\n            key={`${entry.dataKey}-${i}`}\n            style={{ display: \"flex\", alignItems: \"center\", gap: 6 }}\n          >\n            <span\n              style={{\n                width: 12,\n                height: 12,\n                borderRadius: 4,\n                backgroundColor: entry.color,\n                flexShrink: 0,\n              }}\n            />\n            <span\n              style={{\n                color: tokens.colorNeutralForeground3,\n                fontFamily: tokens.fontFamilyBase,\n                fontSize: tokens.fontSizeBase200,\n                lineHeight: tokens.lineHeightBase200,\n              }}\n            >\n              {entry.name}: {entry.value}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n","// Coral-styled line chart. Wraps recharts so consumers don't import recharts\n// directly — keeps the underlying library swappable and the public API tiny.\n\nimport {\n  Legend,\n  Line,\n  LineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport { ChartFrame } from \"./ChartFrame\";\nimport { axisProps, legendProps, tooltipProps } from \"./chartTheme\";\nimport { CORAL_CHART_PALETTE, pickColor } from \"./palette\";\nimport type { CoralChartSpec } from \"./types\";\n\nexport type CoralLineChartProps = {\n  spec: CoralChartSpec;\n  /** Override the default palette. */\n  colors?: readonly string[];\n  /** Right-aligned buttons rendered in the frame header (e.g. export / expand). */\n  actions?: import(\"react\").ReactNode;\n  /** Forwarded to ChartFrame — `\"fill\"` makes the body flex to the parent. */\n  variant?: \"inline\" | \"fill\";\n};\n\nexport function CoralLineChart({\n  spec,\n  colors = CORAL_CHART_PALETTE,\n  actions,\n  variant,\n}: CoralLineChartProps) {\n  return (\n    <ChartFrame title={spec.title} actions={actions} variant={variant}>\n      <ResponsiveContainer>\n        <LineChart data={spec.data}>\n          <XAxis dataKey={spec.xKey} {...axisProps} />\n          <YAxis {...axisProps} />\n          <Tooltip {...tooltipProps} />\n          <Legend {...legendProps} />\n          {spec.series.map((s, i) => (\n            <Line\n              key={s.dataKey}\n              type=\"monotone\"\n              dataKey={s.dataKey}\n              name={s.label}\n              stroke={pickColor(i, colors)}\n            />\n          ))}\n        </LineChart>\n      </ResponsiveContainer>\n    </ChartFrame>\n  );\n}\n","// Dispatcher that renders the right Coral chart for a given spec.kind, and\n// owns the two header-row actions every chart gets:\n//   - MicrosoftExcel → downloads the spec data as CSV\n//   - FullScreenMaximize → opens the chart in a Coral Overlay at 95vw/95vh\n//\n// In the overlay, the expand button is swapped for a Dismiss button so the\n// chart frame looks identical but offers a clear close affordance.\n\nimport { useState } from \"react\";\nimport { Button } from \"@fluentui/react-components\";\nimport {\n  Dismiss,\n  FullScreenMaximize,\n  MicrosoftExcel,\n} from \"@coral-ai/bundleicons\";\nimport { Overlay } from \"@coral-ai/react\";\nimport { CoralBarChart } from \"./CoralBarChart\";\nimport { CoralLineChart } from \"./CoralLineChart\";\nimport { downloadChartCsv } from \"./csvExport\";\nimport type { CoralChartSpec } from \"./types\";\n\nexport type CoralChartProps = {\n  spec: CoralChartSpec;\n  colors?: readonly string[];\n};\n\ntype ChartBodyProps = {\n  spec: CoralChartSpec;\n  colors?: readonly string[];\n  actions?: import(\"react\").ReactNode;\n  variant?: \"inline\" | \"fill\";\n};\n\nfunction ChartBody({ spec, colors, actions, variant }: ChartBodyProps) {\n  switch (spec.kind) {\n    case \"line\":\n      return (\n        <CoralLineChart\n          spec={spec}\n          colors={colors}\n          actions={actions}\n          variant={variant}\n        />\n      );\n    case \"bar\":\n    default:\n      return (\n        <CoralBarChart\n          spec={spec}\n          colors={colors}\n          actions={actions}\n          variant={variant}\n        />\n      );\n  }\n}\n\nexport function CoralChart({ spec, colors }: CoralChartProps) {\n  const [open, setOpen] = useState(false);\n\n  const exportCsv = () => downloadChartCsv(spec);\n\n  const inlineActions = (\n    <>\n      <Button\n        appearance=\"subtle\"\n        size=\"small\"\n        icon={<MicrosoftExcel />}\n        onClick={exportCsv}\n        title=\"Download as CSV\"\n        aria-label=\"Download as CSV\"\n      />\n      <Button\n        appearance=\"subtle\"\n        size=\"small\"\n        icon={<FullScreenMaximize />}\n        onClick={() => setOpen(true)}\n        title=\"Expand\"\n        aria-label=\"Expand\"\n      />\n    </>\n  );\n\n  const overlayActions = (\n    <>\n      <Button\n        appearance=\"subtle\"\n        size=\"small\"\n        icon={<MicrosoftExcel />}\n        onClick={exportCsv}\n        title=\"Download as CSV\"\n        aria-label=\"Download as CSV\"\n      />\n      <Button\n        appearance=\"subtle\"\n        size=\"small\"\n        icon={<Dismiss />}\n        onClick={() => setOpen(false)}\n        title=\"Close\"\n        aria-label=\"Close\"\n      />\n    </>\n  );\n\n  return (\n    <>\n      <ChartBody spec={spec} colors={colors} actions={inlineActions} />\n      <Overlay open={open} onClose={() => setOpen(false)}>\n        {/* Fills the Overlay backdrop (whatever container that spans, not\n            necessarily the viewport — a transform ancestor would scope it\n            to the chat panel). Inner box is then 95% of that. */}\n        <div\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n          }}\n        >\n          <div\n            style={{\n              width: \"85%\",\n              height: \"85%\",\n              maxWidth: 1600,\n              maxHeight: 900,\n              display: \"flex\",\n            }}\n          >\n            <ChartBody\n              spec={spec}\n              colors={colors}\n              actions={overlayActions}\n              variant=\"fill\"\n            />\n          </div>\n        </div>\n      </Overlay>\n    </>\n  );\n}\n","// Serializes a CoralChartSpec's underlying data into a CSV string and\n// triggers a browser download. One column for the x-axis key, then one\n// column per series — header row uses the series `label` (not the raw\n// dataKey) so the spreadsheet reads cleanly.\n\nimport type { CoralChartSpec } from \"./types\";\n\nfunction escapeCsvCell(value: unknown): string {\n  if (value === null || value === undefined) return \"\";\n  const str = String(value);\n  if (/[\",\\r\\n]/.test(str)) {\n    return `\"${str.replace(/\"/g, '\"\"')}\"`;\n  }\n  return str;\n}\n\nexport function chartSpecToCsv(spec: CoralChartSpec): string {\n  const headers = [spec.xKey, ...spec.series.map((s) => s.label)];\n  const rows = spec.data.map((row) =>\n    [row[spec.xKey], ...spec.series.map((s) => row[s.dataKey])]\n      .map(escapeCsvCell)\n      .join(\",\"),\n  );\n  return [headers.map(escapeCsvCell).join(\",\"), ...rows].join(\"\\r\\n\");\n}\n\nexport function downloadChartCsv(spec: CoralChartSpec) {\n  const csv = chartSpecToCsv(spec);\n  const blob = new Blob([csv], { type: \"text/csv;charset=utf-8\" });\n  const url = URL.createObjectURL(blob);\n  const a = document.createElement(\"a\");\n  a.href = url;\n  a.download = `${(spec.title || \"chart\").replace(/[^a-z0-9_\\- ]+/gi, \"_\")}.csv`;\n  document.body.appendChild(a);\n  a.click();\n  a.remove();\n  URL.revokeObjectURL(url);\n}\n"],"mappings":"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","names":["tokens","tokens","jsx","jsxs","tokens","jsx","jsxs","tokens","jsx","jsxs","Legend","ResponsiveContainer","Tooltip","XAxis","YAxis","jsx","jsxs","ResponsiveContainer","XAxis","YAxis","Tooltip","Legend","jsx","jsxs"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coral-ai/charts",
-  "version": "3.8.1",
+  "version": "3.10.1",
   "private": false,
   "description": "Chart primitives for Coral. Recharts-backed under the hood (CoralBarChart, CoralLineChart, CoralChart); version tracks the bundled recharts release.",
   "license": "MIT",
@@ -28,18 +28,24 @@
     "LICENSE"
   ],
   "dependencies": {
-    "recharts": "3.8.1"
+    "recharts": "3.10.1"
   },
   "peerDependencies": {
+    "@coral-ai/react": ">=0.5.0 <1.0.0",
+    "@fluentui/react-components": "^9.0.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "@coral-ai/bundleicons": "^2.0.325"
   },
   "devDependencies": {
+    "@fluentui/react-components": "^9.0.0",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "tsup": "^8.5.1"
+    "tsup": "^8.5.1",
+    "@coral-ai/bundleicons": "2.0.325",
+    "@coral-ai/react": "0.6.0"
   },
   "publishConfig": {
     "access": "public"