open-mcp-app-ui 0.0.6 → 0.0.7

package/dist/charts/index.d.ts

@@ -2,6 +2,13 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { CSSProperties, ReactNode } from 'react';
 export { Area, Bar, CartesianGrid, Cell, Legend, Line, Pie, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, Tooltip as RechartsTooltip, ReferenceArea, ReferenceLine, ResponsiveContainer, Scatter, XAxis, YAxis } from 'recharts';
 
+/**
+ * Border variant type shared across chart sub-components.
+ * - "default" uses --color-border-primary (stronger)
+ * - "secondary" uses --color-border-secondary (subtler)
+ */
+type ChartBorderVariant = "default" | "secondary";
+
 /**
  * Shared chart types.
  * Defines the theme interface and common props used across all chart wrappers.
@@ -35,36 +42,56 @@ interface ThemedLineChartProps extends ChartContainerProps {
     children: ReactNode;
     /** Show background grid lines. */
     grid?: boolean;
+    /**
+     * Border variant for axis lines and tick marks.
+     * - "default" — uses --color-border-primary (stronger)
+     * - "secondary" — uses --color-border-secondary (subtler)
+     */
+    borderVariant?: ChartBorderVariant;
 }
 /**
  * Themed LineChart.
- * Automatically assigns palette colors to Line children that
- * don't have an explicit stroke prop.
+ * Automatically assigns palette colors to Line children and
+ * applies themed axis styles to XAxis/YAxis children.
  */
-declare const LineChart: ({ data, height, colorPalette, className, style, grid, children, }: ThemedLineChartProps) => react_jsx_runtime.JSX.Element;
+declare const LineChart: ({ data, height, colorPalette, className, style, grid, borderVariant, children, }: ThemedLineChartProps) => react_jsx_runtime.JSX.Element;
 
 interface ThemedBarChartProps extends ChartContainerProps {
     /** Chart data array. */
     data: Record<string, unknown>[];
     children: ReactNode;
     grid?: boolean;
+    /**
+     * Border variant for axis lines and tick marks.
+     * - "default" — uses --color-border-primary (stronger)
+     * - "secondary" — uses --color-border-secondary (subtler)
+     */
+    borderVariant?: ChartBorderVariant;
 }
 /**
  * Themed BarChart.
- * Automatically assigns palette colors to Bar children.
+ * Automatically assigns palette colors to Bar children and
+ * applies themed axis styles to XAxis/YAxis children.
  */
-declare const BarChart: ({ data, height, colorPalette, className, style, grid, children, }: ThemedBarChartProps) => react_jsx_runtime.JSX.Element;
+declare const BarChart: ({ data, height, colorPalette, className, style, grid, borderVariant, children, }: ThemedBarChartProps) => react_jsx_runtime.JSX.Element;
 
 interface ThemedAreaChartProps extends ChartContainerProps {
     data: Record<string, unknown>[];
     children: ReactNode;
     grid?: boolean;
+    /**
+     * Border variant for axis lines and tick marks.
+     * - "default" — uses --color-border-primary (stronger)
+     * - "secondary" — uses --color-border-secondary (subtler)
+     */
+    borderVariant?: ChartBorderVariant;
 }
 /**
  * Themed AreaChart.
- * Auto-assigns palette colors with gradient fill to Area children.
+ * Auto-assigns palette colors with gradient fill to Area children and
+ * applies themed axis styles to XAxis/YAxis children.
  */
-declare const AreaChart: ({ data, height, colorPalette, className, style, grid, children, }: ThemedAreaChartProps) => react_jsx_runtime.JSX.Element;
+declare const AreaChart: ({ data, height, colorPalette, className, style, grid, borderVariant, children, }: ThemedAreaChartProps) => react_jsx_runtime.JSX.Element;
 
 interface ThemedPieChartProps extends Omit<ChartContainerProps, "height"> {
     /** Chart height (also used for approximate width in responsive container). */
@@ -81,12 +108,19 @@ declare const PieChart: ({ height, colorPalette, className, style, children, }:
 interface ThemedScatterChartProps extends ChartContainerProps {
     children: ReactNode;
     grid?: boolean;
+    /**
+     * Border variant for axis lines and tick marks.
+     * - "default" — uses --color-border-primary (stronger)
+     * - "secondary" — uses --color-border-secondary (subtler)
+     */
+    borderVariant?: ChartBorderVariant;
 }
 /**
  * Themed ScatterChart.
- * Auto-assigns palette fill colors to Scatter children.
+ * Auto-assigns palette fill colors to Scatter children and
+ * applies themed axis styles to XAxis/YAxis children.
  */
-declare const ScatterChart: ({ height, colorPalette, className, style, grid, children, }: ThemedScatterChartProps) => react_jsx_runtime.JSX.Element;
+declare const ScatterChart: ({ height, colorPalette, className, style, grid, borderVariant, children, }: ThemedScatterChartProps) => react_jsx_runtime.JSX.Element;
 
 interface ThemedRadarChartProps extends ChartContainerProps {
     data: Record<string, unknown>[];
@@ -102,12 +136,19 @@ interface ThemedComposedChartProps extends ChartContainerProps {
     data: Record<string, unknown>[];
     children: ReactNode;
     grid?: boolean;
+    /**
+     * Border variant for axis lines and tick marks.
+     * - "default" — uses --color-border-primary (stronger)
+     * - "secondary" — uses --color-border-secondary (subtler)
+     */
+    borderVariant?: ChartBorderVariant;
 }
 /**
  * Themed ComposedChart.
- * Auto-assigns palette colors to Line, Bar, and Area children.
+ * Auto-assigns palette colors to Line, Bar, and Area children and
+ * applies themed axis styles to XAxis/YAxis children.
  */
-declare const ComposedChart: ({ data, height, colorPalette, className, style, grid, children, }: ThemedComposedChartProps) => react_jsx_runtime.JSX.Element;
+declare const ComposedChart: ({ data, height, colorPalette, className, style, grid, borderVariant, children, }: ThemedComposedChartProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * ThemedTooltip — Pre-themed tooltip using MCP Apps spec CSS variables.
@@ -121,4 +162,4 @@ declare const ComposedChart: ({ data, height, colorPalette, className, style, gr
  */
 declare const ThemedTooltip: (props: any) => react_jsx_runtime.JSX.Element;
 
-export { AreaChart, BarChart, type ChartContainerProps, ComposedChart, DEFAULT_PALETTE, LineChart, PieChart, RadarChart, ScatterChart, ThemedTooltip as Tooltip };
+export { AreaChart, BarChart, type ChartBorderVariant, type ChartContainerProps, ComposedChart, DEFAULT_PALETTE, LineChart, PieChart, RadarChart, ScatterChart, ThemedTooltip as Tooltip };

package/dist/charts/index.js

@@ -3,6 +3,8 @@ import { Children, cloneElement, isValidElement } from "react";
 import {
   LineChart as RechartsLineChart,
   Line as RechartsLine,
+  XAxis as RechartsXAxis,
+  YAxis as RechartsYAxis,
   CartesianGrid
 } from "recharts";
 
@@ -44,6 +46,7 @@ var getSeriesColor = ({
 };
 
 // src/charts/theme.ts
+import React from "react";
 var getCSSVar = ({ name, fallback }) => {
   if (typeof window === "undefined") return fallback;
   const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
@@ -66,7 +69,40 @@ var getTooltipStyle = () => ({
     marginBottom: "4px"
   }
 });
-var getGridColor = () => getCSSVar({ name: "--color-border-secondary", fallback: "#e5e7eb" });
+var getBorderColor = ({ variant = "default" } = {}) => variant === "secondary" ? getCSSVar({ name: "--color-border-secondary", fallback: "#e5e7eb" }) : getCSSVar({ name: "--color-border-primary", fallback: "#d1d5db" });
+var getGridColor = ({ variant = "secondary" } = {}) => getBorderColor({ variant });
+var getAxisStyle = ({ variant = "default" } = {}) => ({
+  tick: {
+    fill: getCSSVar({ name: "--color-text-secondary", fallback: "#6b7280" }),
+    fontSize: getCSSVar({ name: "--font-text-xs-size", fallback: "11px" }),
+    fontFamily: getCSSVar({ name: "--font-sans", fallback: "ui-sans-serif, system-ui, sans-serif" })
+  },
+  axisLine: {
+    stroke: getBorderColor({ variant })
+  },
+  tickLine: {
+    stroke: getBorderColor({ variant })
+  }
+});
+var themeAxisChild = ({
+  child,
+  variant = "default",
+  XAxis: XAxis2,
+  YAxis: YAxis2
+}) => {
+  const t = child.type;
+  const dn = t?.displayName;
+  if (t === XAxis2 || t === YAxis2 || dn === "XAxis" || dn === "YAxis") {
+    const style = getAxisStyle({ variant });
+    const props = child.props;
+    return React.cloneElement(child, {
+      tick: props.tick === false ? false : { ...style.tick, ...typeof props.tick === "object" && props.tick ? props.tick : {} },
+      axisLine: props.axisLine === false ? false : { ...style.axisLine, ...typeof props.axisLine === "object" && props.axisLine ? props.axisLine : {} },
+      tickLine: props.tickLine === false ? false : { ...style.tickLine, ...typeof props.tickLine === "object" && props.tickLine ? props.tickLine : {} }
+    });
+  }
+  return null;
+};
 
 // src/charts/LineChart.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
@@ -77,11 +113,14 @@ var LineChart = ({
   className,
   style,
   grid = true,
+  borderVariant = "default",
   children
 }) => {
   let seriesIndex = 0;
   const themedChildren = Children.map(children, (child) => {
     if (!isValidElement(child)) return child;
+    const themedAxis = themeAxisChild({ child, variant: borderVariant, XAxis: RechartsXAxis, YAxis: RechartsYAxis });
+    if (themedAxis) return themedAxis;
     if (child.type === RechartsLine || child.type?.displayName === "Line") {
       const idx = seriesIndex++;
       const existing = child.props.stroke;
@@ -105,6 +144,8 @@ import { Children as Children2, cloneElement as cloneElement2, isValidElement as
 import {
   BarChart as RechartsBarChart,
   Bar as RechartsBar,
+  XAxis as RechartsXAxis2,
+  YAxis as RechartsYAxis2,
   CartesianGrid as CartesianGrid2
 } from "recharts";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -115,11 +156,14 @@ var BarChart = ({
   className,
   style,
   grid = true,
+  borderVariant = "default",
   children
 }) => {
   let seriesIndex = 0;
   const themedChildren = Children2.map(children, (child) => {
     if (!isValidElement2(child)) return child;
+    const themedAxis = themeAxisChild({ child, variant: borderVariant, XAxis: RechartsXAxis2, YAxis: RechartsYAxis2 });
+    if (themedAxis) return themedAxis;
     if (child.type === RechartsBar || child.type?.displayName === "Bar") {
       const idx = seriesIndex++;
       const existing = child.props.fill;
@@ -141,6 +185,8 @@ import { Children as Children3, cloneElement as cloneElement3, isValidElement as
 import {
   AreaChart as RechartsAreaChart,
   Area as RechartsArea,
+  XAxis as RechartsXAxis3,
+  YAxis as RechartsYAxis3,
   CartesianGrid as CartesianGrid3
 } from "recharts";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -151,11 +197,14 @@ var AreaChart = ({
   className,
   style,
   grid = true,
+  borderVariant = "default",
   children
 }) => {
   let seriesIndex = 0;
   const themedChildren = Children3.map(children, (child) => {
     if (!isValidElement3(child)) return child;
+    const themedAxis = themeAxisChild({ child, variant: borderVariant, XAxis: RechartsXAxis3, YAxis: RechartsYAxis3 });
+    if (themedAxis) return themedAxis;
     if (child.type === RechartsArea || child.type?.displayName === "Area") {
       const idx = seriesIndex++;
       const color = child.props.stroke || getSeriesColor({ index: idx, palette: colorPalette });
@@ -213,6 +262,8 @@ import { Children as Children5, cloneElement as cloneElement5, isValidElement as
 import {
   ScatterChart as RechartsScatterChart,
   Scatter as RechartsScatter,
+  XAxis as RechartsXAxis4,
+  YAxis as RechartsYAxis4,
   CartesianGrid as CartesianGrid4
 } from "recharts";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -222,11 +273,14 @@ var ScatterChart = ({
   className,
   style,
   grid = true,
+  borderVariant = "default",
   children
 }) => {
   let seriesIndex = 0;
   const themedChildren = Children5.map(children, (child) => {
     if (!isValidElement5(child)) return child;
+    const themedAxis = themeAxisChild({ child, variant: borderVariant, XAxis: RechartsXAxis4, YAxis: RechartsYAxis4 });
+    if (themedAxis) return themedAxis;
     if (child.type === RechartsScatter || child.type?.displayName === "Scatter") {
       const idx = seriesIndex++;
       const existing = child.props.fill;
@@ -281,6 +335,8 @@ import {
   Line as RechartsLine2,
   Bar as RechartsBar2,
   Area as RechartsArea2,
+  XAxis as RechartsXAxis5,
+  YAxis as RechartsYAxis5,
   CartesianGrid as CartesianGrid5
 } from "recharts";
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -291,11 +347,14 @@ var ComposedChart = ({
   className,
   style,
   grid = true,
+  borderVariant = "default",
   children
 }) => {
   let seriesIndex = 0;
   const themedChildren = Children7.map(children, (child) => {
     if (!isValidElement7(child)) return child;
+    const themedAxis = themeAxisChild({ child, variant: borderVariant, XAxis: RechartsXAxis5, YAxis: RechartsYAxis5 });
+    if (themedAxis) return themedAxis;
     const t = child.type;
     const dn = t?.displayName;
     if (t === RechartsLine2 || dn === "Line") {

package/dist/charts/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/charts/LineChart.tsx","../../src/charts/ChartContainer.tsx","../../src/charts/types.ts","../../src/charts/theme.ts","../../src/charts/BarChart.tsx","../../src/charts/AreaChart.tsx","../../src/charts/PieChart.tsx","../../src/charts/ScatterChart.tsx","../../src/charts/RadarChart.tsx","../../src/charts/ComposedChart.tsx","../../src/charts/ThemedTooltip.tsx","../../src/charts/index.ts"],"sourcesContent":["/**\n * LineChart — Themed line/trend chart wrapper.\n *\n * Thin wrapper around Recharts' LineChart that auto-applies\n * MCP Apps spec CSS variable theming to all visual elements.\n *\n * @example\n * ```tsx\n * import { LineChart, Line, XAxis, YAxis, Tooltip } from \"open-mcp-app-ui/charts\";\n *\n * <LineChart data={data} height={300}>\n *   <XAxis dataKey=\"month\" />\n *   <YAxis />\n *   <Tooltip />\n *   <Line dataKey=\"revenue\" />\n * </LineChart>\n * ```\n */\n\nimport React, { type ReactNode, Children, cloneElement, isValidElement } from \"react\";\nimport {\n  LineChart as RechartsLineChart,\n  Line as RechartsLine,\n  CartesianGrid,\n} from \"recharts\";\nimport { ChartContainer, getSeriesColor } from \"./ChartContainer.js\";\nimport { getGridColor } from \"./theme.js\";\nimport type { ChartContainerProps } from \"./types.js\";\n\ninterface ThemedLineChartProps extends ChartContainerProps {\n  /** Chart data array. Each entry is one data point. */\n  data: Record<string, unknown>[];\n  /** Child elements (Line, XAxis, YAxis, Tooltip, Legend, etc.) */\n  children: ReactNode;\n  /** Show background grid lines. */\n  grid?: boolean;\n}\n\n/**\n * Themed LineChart.\n * Automatically assigns palette colors to Line children that\n * don't have an explicit stroke prop.\n */\nexport const LineChart = ({\n  data,\n  height,\n  colorPalette,\n  className,\n  style,\n  grid = true,\n  children,\n}: ThemedLineChartProps) => {\n  let seriesIndex = 0;\n\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n    if ((child.type as any) === RechartsLine || (child.type as any)?.displayName === \"Line\") {\n      const idx = seriesIndex++;\n      const existing = (child.props as any).stroke;\n      return cloneElement(child as React.ReactElement<any>, {\n        stroke: existing || getSeriesColor({ index: idx, palette: colorPalette }),\n        strokeWidth: (child.props as any).strokeWidth ?? 2,\n        dot: (child.props as any).dot ?? false,\n        activeDot: (child.props as any).activeDot ?? { r: 4 },\n      });\n    }\n    return child;\n  });\n\n  return (\n    <ChartContainer height={height} className={className} style={style}>\n      <RechartsLineChart data={data} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n        {grid && <CartesianGrid strokeDasharray=\"3 3\" stroke={getGridColor()} opacity={0.5} />}\n        {themedChildren}\n      </RechartsLineChart>\n    </ChartContainer>\n  );\n};\n","/**\n * ChartContainer — Responsive wrapper for all chart types.\n *\n * Wraps Recharts' ResponsiveContainer with the theme palette context.\n * All chart wrappers use this internally. Not exported directly — each\n * chart type (LineChart, BarChart, etc.) composes it.\n */\n\nimport { type ReactNode } from \"react\";\nimport { ResponsiveContainer } from \"recharts\";\nimport { DEFAULT_PALETTE, type ChartContainerProps } from \"./types.js\";\n\n/**\n * Provides a responsive, themed container for a Recharts chart.\n * Fills 100% width of its parent and uses the specified height.\n */\nexport const ChartContainer = ({\n  height = 300,\n  className = \"\",\n  style,\n  children,\n}: ChartContainerProps & { children: ReactNode }) => (\n  <div\n    className={`omu-chart w-full ${className}`}\n    style={{ height: `${height}px`, ...style }}\n  >\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      {children as React.ReactElement}\n    </ResponsiveContainer>\n  </div>\n);\n\n/**\n * Get the color for a given series index from the palette.\n * Wraps around if there are more series than palette entries.\n */\nexport const getSeriesColor = ({\n  index,\n  palette,\n}: {\n  index: number;\n  palette?: string[];\n}): string => {\n  const colors = palette ?? DEFAULT_PALETTE;\n  return colors[index % colors.length];\n};\n","/**\n * Shared chart types.\n * Defines the theme interface and common props used across all chart wrappers.\n */\n\nimport type { CSSProperties } from \"react\";\n\n/**\n * Color palette for multi-series charts.\n * Each series gets the next color in the palette.\n * Uses CSS variables from the MCP Apps spec where possible,\n * with opacity variations for additional series.\n */\nexport const DEFAULT_PALETTE = [\n  \"var(--color-accent, #6366f1)\",\n  \"var(--color-text-secondary, #6b7280)\",\n  \"var(--color-ring-primary, #a78bfa)\",\n  \"var(--color-text-tertiary, #9ca3af)\",\n  \"var(--color-border-primary, #d1d5db)\",\n  \"color-mix(in srgb, var(--color-accent, #6366f1) 60%, transparent)\",\n  \"color-mix(in srgb, var(--color-accent, #6366f1) 35%, transparent)\",\n];\n\n/**\n * Base props shared by all chart container wrappers.\n */\nexport interface ChartContainerProps {\n  /** Chart height in pixels. Width is always 100% of parent. */\n  height?: number;\n  /** Custom color palette for series data. Overrides the default palette. */\n  colorPalette?: string[];\n  /** Additional CSS class on the outermost wrapper. */\n  className?: string;\n  /** Inline styles on the outermost wrapper. */\n  style?: CSSProperties;\n}\n","/**\n * Chart Theme — CSS variable mapping for Recharts.\n *\n * Reads MCP Apps spec CSS variables at render time and provides\n * them as style objects for Recharts sub-components (tooltip, grid,\n * axis labels, legend). This is how charts automatically adapt to\n * the host's theme without configuration.\n */\n\n/**\n * Resolve a CSS variable value at runtime.\n * Falls back to the provided default if the variable is not set.\n */\nexport const getCSSVar = ({ name, fallback }: { name: string; fallback: string }): string => {\n  if (typeof window === \"undefined\") return fallback;\n  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();\n  return value || fallback;\n};\n\n/**\n * Themed tooltip style object for Recharts <Tooltip>.\n * Applied via contentStyle, labelStyle, and wrapperStyle props.\n */\nexport const getTooltipStyle = () => ({\n  contentStyle: {\n    backgroundColor: getCSSVar({ name: \"--color-background-secondary\", fallback: \"#f9fafb\" }),\n    border: `1px solid ${getCSSVar({ name: \"--color-border-secondary\", fallback: \"#e5e7eb\" })}`,\n    borderRadius: getCSSVar({ name: \"--border-radius-md\", fallback: \"8px\" }),\n    color: getCSSVar({ name: \"--color-text-primary\", fallback: \"#111827\" }),\n    fontSize: getCSSVar({ name: \"--font-text-sm-size\", fallback: \"13px\" }),\n    fontFamily: getCSSVar({ name: \"--font-sans\", fallback: \"ui-sans-serif, system-ui, sans-serif\" }),\n    padding: \"8px 12px\",\n    boxShadow: \"0 4px 12px rgba(0,0,0,0.08)\",\n  },\n  labelStyle: {\n    color: getCSSVar({ name: \"--color-text-primary\", fallback: \"#111827\" }),\n    fontWeight: 500,\n    marginBottom: \"4px\",\n  },\n});\n\n/**\n * Themed grid line color for <CartesianGrid>.\n */\nexport const getGridColor = (): string =>\n  getCSSVar({ name: \"--color-border-secondary\", fallback: \"#e5e7eb\" });\n\n/**\n * Themed axis tick/label style for <XAxis> and <YAxis>.\n */\nexport const getAxisStyle = () => ({\n  tick: {\n    fill: getCSSVar({ name: \"--color-text-secondary\", fallback: \"#6b7280\" }),\n    fontSize: getCSSVar({ name: \"--font-text-xs-size\", fallback: \"11px\" }),\n    fontFamily: getCSSVar({ name: \"--font-sans\", fallback: \"ui-sans-serif, system-ui, sans-serif\" }),\n  },\n  axisLine: {\n    stroke: getCSSVar({ name: \"--color-border-secondary\", fallback: \"#e5e7eb\" }),\n  },\n  tickLine: {\n    stroke: getCSSVar({ name: \"--color-border-secondary\", fallback: \"#e5e7eb\" }),\n  },\n});\n\n/**\n * Themed legend style for <Legend>.\n */\nexport const getLegendStyle = () => ({\n  color: getCSSVar({ name: \"--color-text-secondary\", fallback: \"#6b7280\" }),\n  fontSize: getCSSVar({ name: \"--font-text-sm-size\", fallback: \"13px\" }),\n  fontFamily: getCSSVar({ name: \"--font-sans\", fallback: \"ui-sans-serif, system-ui, sans-serif\" }),\n});\n","/**\n * BarChart — Themed bar/column chart wrapper.\n */\n\nimport React, { type ReactNode, Children, cloneElement, isValidElement } from \"react\";\nimport {\n  BarChart as RechartsBarChart,\n  Bar as RechartsBar,\n  CartesianGrid,\n} from \"recharts\";\nimport { ChartContainer, getSeriesColor } from \"./ChartContainer.js\";\nimport { getGridColor } from \"./theme.js\";\nimport type { ChartContainerProps } from \"./types.js\";\n\ninterface ThemedBarChartProps extends ChartContainerProps {\n  /** Chart data array. */\n  data: Record<string, unknown>[];\n  children: ReactNode;\n  grid?: boolean;\n}\n\n/**\n * Themed BarChart.\n * Automatically assigns palette colors to Bar children.\n */\nexport const BarChart = ({\n  data,\n  height,\n  colorPalette,\n  className,\n  style,\n  grid = true,\n  children,\n}: ThemedBarChartProps) => {\n  let seriesIndex = 0;\n\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n    if ((child.type as any) === RechartsBar || (child.type as any)?.displayName === \"Bar\") {\n      const idx = seriesIndex++;\n      const existing = (child.props as any).fill;\n      return cloneElement(child as React.ReactElement<any>, {\n        fill: existing || getSeriesColor({ index: idx, palette: colorPalette }),\n        radius: (child.props as any).radius ?? [4, 4, 0, 0],\n      });\n    }\n    return child;\n  });\n\n  return (\n    <ChartContainer height={height} className={className} style={style}>\n      <RechartsBarChart data={data} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n        {grid && <CartesianGrid strokeDasharray=\"3 3\" stroke={getGridColor()} opacity={0.5} vertical={false} />}\n        {themedChildren}\n      </RechartsBarChart>\n    </ChartContainer>\n  );\n};\n","/**\n * AreaChart — Themed area/volume chart wrapper.\n */\n\nimport React, { type ReactNode, Children, cloneElement, isValidElement } from \"react\";\nimport {\n  AreaChart as RechartsAreaChart,\n  Area as RechartsArea,\n  CartesianGrid,\n} from \"recharts\";\nimport { ChartContainer, getSeriesColor } from \"./ChartContainer.js\";\nimport { getGridColor } from \"./theme.js\";\nimport type { ChartContainerProps } from \"./types.js\";\n\ninterface ThemedAreaChartProps extends ChartContainerProps {\n  data: Record<string, unknown>[];\n  children: ReactNode;\n  grid?: boolean;\n}\n\n/**\n * Themed AreaChart.\n * Auto-assigns palette colors with gradient fill to Area children.\n */\nexport const AreaChart = ({\n  data,\n  height,\n  colorPalette,\n  className,\n  style,\n  grid = true,\n  children,\n}: ThemedAreaChartProps) => {\n  let seriesIndex = 0;\n\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n    if ((child.type as any) === RechartsArea || (child.type as any)?.displayName === \"Area\") {\n      const idx = seriesIndex++;\n      const color = (child.props as any).stroke || getSeriesColor({ index: idx, palette: colorPalette });\n      return cloneElement(child as React.ReactElement<any>, {\n        stroke: color,\n        fill: (child.props as any).fill || color,\n        fillOpacity: (child.props as any).fillOpacity ?? 0.15,\n        strokeWidth: (child.props as any).strokeWidth ?? 2,\n      });\n    }\n    return child;\n  });\n\n  return (\n    <ChartContainer height={height} className={className} style={style}>\n      <RechartsAreaChart data={data} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n        {grid && <CartesianGrid strokeDasharray=\"3 3\" stroke={getGridColor()} opacity={0.5} />}\n        {themedChildren}\n      </RechartsAreaChart>\n    </ChartContainer>\n  );\n};\n","/**\n * PieChart — Themed pie/donut chart wrapper.\n */\n\nimport React, { type ReactNode, Children, cloneElement, isValidElement } from \"react\";\nimport {\n  PieChart as RechartsPieChart,\n  Pie as RechartsPie,\n  Cell,\n} from \"recharts\";\nimport { ChartContainer, getSeriesColor } from \"./ChartContainer.js\";\nimport type { ChartContainerProps } from \"./types.js\";\n\ninterface ThemedPieChartProps extends Omit<ChartContainerProps, \"height\"> {\n  /** Chart height (also used for approximate width in responsive container). */\n  height?: number;\n  children: ReactNode;\n}\n\n/**\n * Themed PieChart.\n * Auto-assigns palette colors to Pie data via Cell children when no\n * explicit fill is provided on individual data entries.\n */\nexport const PieChart = ({\n  height,\n  colorPalette,\n  className,\n  style,\n  children,\n}: ThemedPieChartProps) => {\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n    if ((child.type as any) === RechartsPie || (child.type as any)?.displayName === \"Pie\") {\n      const props = child.props as any;\n      const data: any[] = props.data ?? [];\n      /**\n       * If the Pie has no Cell children, inject them automatically\n       * so each slice gets a palette color.\n       */\n      const hasExplicitCells = Children.toArray(props.children).some(\n        (c: any) => isValidElement(c) && ((c.type as any) === Cell || (c.type as any)?.displayName === \"Cell\")\n      );\n      if (!hasExplicitCells && data.length > 0) {\n        return cloneElement(child as React.ReactElement<any>, {\n          children: data.map((_, i) => (\n            <Cell key={`cell-${i}`} fill={getSeriesColor({ index: i, palette: colorPalette })} />\n          )),\n        });\n      }\n    }\n    return child;\n  });\n\n  return (\n    <ChartContainer height={height} className={className} style={style}>\n      <RechartsPieChart>\n        {themedChildren}\n      </RechartsPieChart>\n    </ChartContainer>\n  );\n};\n","/**\n * ScatterChart — Themed scatter/correlation chart wrapper.\n */\n\nimport React, { type ReactNode, Children, cloneElement, isValidElement } from \"react\";\nimport {\n  ScatterChart as RechartsScatterChart,\n  Scatter as RechartsScatter,\n  CartesianGrid,\n} from \"recharts\";\nimport { ChartContainer, getSeriesColor } from \"./ChartContainer.js\";\nimport { getGridColor } from \"./theme.js\";\nimport type { ChartContainerProps } from \"./types.js\";\n\ninterface ThemedScatterChartProps extends ChartContainerProps {\n  children: ReactNode;\n  grid?: boolean;\n}\n\n/**\n * Themed ScatterChart.\n * Auto-assigns palette fill colors to Scatter children.\n */\nexport const ScatterChart = ({\n  height,\n  colorPalette,\n  className,\n  style,\n  grid = true,\n  children,\n}: ThemedScatterChartProps) => {\n  let seriesIndex = 0;\n\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n    if ((child.type as any) === RechartsScatter || (child.type as any)?.displayName === \"Scatter\") {\n      const idx = seriesIndex++;\n      const existing = (child.props as any).fill;\n      return cloneElement(child as React.ReactElement<any>, {\n        fill: existing || getSeriesColor({ index: idx, palette: colorPalette }),\n      });\n    }\n    return child;\n  });\n\n  return (\n    <ChartContainer height={height} className={className} style={style}>\n      <RechartsScatterChart margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n        {grid && <CartesianGrid strokeDasharray=\"3 3\" stroke={getGridColor()} opacity={0.5} />}\n        {themedChildren}\n      </RechartsScatterChart>\n    </ChartContainer>\n  );\n};\n","/**\n * RadarChart — Themed radar/spider chart wrapper.\n */\n\nimport React, { type ReactNode, Children, cloneElement, isValidElement } from \"react\";\nimport {\n  RadarChart as RechartsRadarChart,\n  Radar as RechartsRadar,\n} from \"recharts\";\nimport { ChartContainer, getSeriesColor } from \"./ChartContainer.js\";\nimport type { ChartContainerProps } from \"./types.js\";\n\ninterface ThemedRadarChartProps extends ChartContainerProps {\n  data: Record<string, unknown>[];\n  children: ReactNode;\n}\n\n/**\n * Themed RadarChart.\n * Auto-assigns palette colors to Radar children.\n */\nexport const RadarChart = ({\n  data,\n  height,\n  colorPalette,\n  className,\n  style,\n  children,\n}: ThemedRadarChartProps) => {\n  let seriesIndex = 0;\n\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n    if ((child.type as any) === RechartsRadar || (child.type as any)?.displayName === \"Radar\") {\n      const idx = seriesIndex++;\n      const color = (child.props as any).stroke || getSeriesColor({ index: idx, palette: colorPalette });\n      return cloneElement(child as React.ReactElement<any>, {\n        stroke: color,\n        fill: (child.props as any).fill || color,\n        fillOpacity: (child.props as any).fillOpacity ?? 0.2,\n      });\n    }\n    return child;\n  });\n\n  return (\n    <ChartContainer height={height} className={className} style={style}>\n      <RechartsRadarChart data={data} cx=\"50%\" cy=\"50%\" outerRadius=\"70%\">\n        {themedChildren}\n      </RechartsRadarChart>\n    </ChartContainer>\n  );\n};\n","/**\n * ComposedChart — Themed mixed chart wrapper (Bar + Line + Area in one).\n */\n\nimport React, { type ReactNode, Children, cloneElement, isValidElement } from \"react\";\nimport {\n  ComposedChart as RechartsComposedChart,\n  Line as RechartsLine,\n  Bar as RechartsBar,\n  Area as RechartsArea,\n  CartesianGrid,\n} from \"recharts\";\nimport { ChartContainer, getSeriesColor } from \"./ChartContainer.js\";\nimport { getGridColor } from \"./theme.js\";\nimport type { ChartContainerProps } from \"./types.js\";\n\ninterface ThemedComposedChartProps extends ChartContainerProps {\n  data: Record<string, unknown>[];\n  children: ReactNode;\n  grid?: boolean;\n}\n\n/**\n * Themed ComposedChart.\n * Auto-assigns palette colors to Line, Bar, and Area children.\n */\nexport const ComposedChart = ({\n  data,\n  height,\n  colorPalette,\n  className,\n  style,\n  grid = true,\n  children,\n}: ThemedComposedChartProps) => {\n  let seriesIndex = 0;\n\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n    const t = child.type as any;\n    const dn = t?.displayName;\n\n    if (t === RechartsLine || dn === \"Line\") {\n      const idx = seriesIndex++;\n      return cloneElement(child as React.ReactElement<any>, {\n        stroke: (child.props as any).stroke || getSeriesColor({ index: idx, palette: colorPalette }),\n        strokeWidth: (child.props as any).strokeWidth ?? 2,\n        dot: (child.props as any).dot ?? false,\n      });\n    }\n    if (t === RechartsBar || dn === \"Bar\") {\n      const idx = seriesIndex++;\n      return cloneElement(child as React.ReactElement<any>, {\n        fill: (child.props as any).fill || getSeriesColor({ index: idx, palette: colorPalette }),\n        radius: (child.props as any).radius ?? [4, 4, 0, 0],\n      });\n    }\n    if (t === RechartsArea || dn === \"Area\") {\n      const idx = seriesIndex++;\n      const color = (child.props as any).stroke || getSeriesColor({ index: idx, palette: colorPalette });\n      return cloneElement(child as React.ReactElement<any>, {\n        stroke: color,\n        fill: (child.props as any).fill || color,\n        fillOpacity: (child.props as any).fillOpacity ?? 0.15,\n        strokeWidth: (child.props as any).strokeWidth ?? 2,\n      });\n    }\n    return child;\n  });\n\n  return (\n    <ChartContainer height={height} className={className} style={style}>\n      <RechartsComposedChart data={data} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n        {grid && <CartesianGrid strokeDasharray=\"3 3\" stroke={getGridColor()} opacity={0.5} />}\n        {themedChildren}\n      </RechartsComposedChart>\n    </ChartContainer>\n  );\n};\n","/**\n * ThemedTooltip — Pre-themed tooltip using MCP Apps spec CSS variables.\n *\n * Drop-in replacement for Recharts' Tooltip that automatically\n * applies the host's theme colors for background, text, border.\n */\n\nimport { useMemo } from \"react\";\nimport { Tooltip as RechartsTooltip } from \"recharts\";\nimport { getTooltipStyle } from \"./theme.js\";\n\n/**\n * A themed Tooltip that reads CSS variables at render time.\n * Forwards all standard Recharts Tooltip props.\n */\nexport const ThemedTooltip = (props: any) => {\n  const style = useMemo(() => getTooltipStyle(), []);\n  return (\n    <RechartsTooltip\n      contentStyle={style.contentStyle}\n      labelStyle={style.labelStyle}\n      cursor={{ stroke: \"var(--color-border-secondary, #e5e7eb)\", strokeWidth: 1 }}\n      {...props}\n    />\n  );\n};\n","/**\n * open-mcp-app-ui/charts\n *\n * Themed chart components built on Recharts v3.\n * Auto-styled via MCP Apps spec CSS variables.\n *\n * Usage:\n *   import { LineChart, Line, XAxis, YAxis, Tooltip } from \"open-mcp-app-ui/charts\";\n *\n *   <LineChart data={data} height={300}>\n *     <XAxis dataKey=\"month\" />\n *     <YAxis />\n *     <Tooltip />\n *     <Line dataKey=\"revenue\" />\n *   </LineChart>\n */\n\n// Themed chart wrappers\nexport { LineChart } from \"./LineChart.js\";\nexport { BarChart } from \"./BarChart.js\";\nexport { AreaChart } from \"./AreaChart.js\";\nexport { PieChart } from \"./PieChart.js\";\nexport { ScatterChart } from \"./ScatterChart.js\";\nexport { RadarChart } from \"./RadarChart.js\";\nexport { ComposedChart } from \"./ComposedChart.js\";\nexport { ThemedTooltip as Tooltip } from \"./ThemedTooltip.js\";\n\n// Re-export Recharts primitives for composition\nexport {\n  Line,\n  Bar,\n  Area,\n  Pie,\n  Scatter,\n  Radar,\n  Cell,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Legend,\n  PolarGrid,\n  PolarAngleAxis,\n  PolarRadiusAxis,\n  Tooltip as RechartsTooltip,\n  ReferenceLine,\n  ReferenceArea,\n  ResponsiveContainer,\n} from \"recharts\";\n\n// Types\nexport type { ChartContainerProps } from \"./types.js\";\nexport { DEFAULT_PALETTE } from \"./types.js\";\n"],"mappings":"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","names":["jsx","Children","cloneElement","isValidElement","CartesianGrid","jsx","jsxs","Children","isValidElement","cloneElement","CartesianGrid","Children","cloneElement","isValidElement","CartesianGrid","jsx","jsxs","Children","isValidElement","cloneElement","CartesianGrid","Children","cloneElement","isValidElement","jsx","Children","isValidElement","cloneElement","Children","cloneElement","isValidElement","CartesianGrid","jsx","jsxs","Children","isValidElement","cloneElement","CartesianGrid","Children","cloneElement","isValidElement","jsx","Children","isValidElement","cloneElement","Children","cloneElement","isValidElement","RechartsLine","RechartsBar","RechartsArea","CartesianGrid","jsx","jsxs","Children","isValidElement","RechartsLine","cloneElement","RechartsBar","RechartsArea","CartesianGrid","jsx","Cell","CartesianGrid","ResponsiveContainer"]}
+{"version":3,"sources":["../../src/charts/LineChart.tsx","../../src/charts/ChartContainer.tsx","../../src/charts/types.ts","../../src/charts/theme.ts","../../src/charts/BarChart.tsx","../../src/charts/AreaChart.tsx","../../src/charts/PieChart.tsx","../../src/charts/ScatterChart.tsx","../../src/charts/RadarChart.tsx","../../src/charts/ComposedChart.tsx","../../src/charts/ThemedTooltip.tsx","../../src/charts/index.ts"],"sourcesContent":["/**\n * LineChart — Themed line/trend chart wrapper.\n *\n * Thin wrapper around Recharts' LineChart that auto-applies\n * MCP Apps spec CSS variable theming to all visual elements.\n *\n * @example\n * ```tsx\n * import { LineChart, Line, XAxis, YAxis, Tooltip } from \"open-mcp-app-ui/charts\";\n *\n * <LineChart data={data} height={300}>\n *   <XAxis dataKey=\"month\" />\n *   <YAxis />\n *   <Tooltip />\n *   <Line dataKey=\"revenue\" />\n * </LineChart>\n * ```\n */\n\nimport React, { type ReactNode, Children, cloneElement, isValidElement } from \"react\";\nimport {\n  LineChart as RechartsLineChart,\n  Line as RechartsLine,\n  XAxis as RechartsXAxis,\n  YAxis as RechartsYAxis,\n  CartesianGrid,\n} from \"recharts\";\nimport { ChartContainer, getSeriesColor } from \"./ChartContainer.js\";\nimport { getGridColor, themeAxisChild, type ChartBorderVariant } from \"./theme.js\";\nimport type { ChartContainerProps } from \"./types.js\";\n\ninterface ThemedLineChartProps extends ChartContainerProps {\n  /** Chart data array. Each entry is one data point. */\n  data: Record<string, unknown>[];\n  /** Child elements (Line, XAxis, YAxis, Tooltip, Legend, etc.) */\n  children: ReactNode;\n  /** Show background grid lines. */\n  grid?: boolean;\n  /**\n   * Border variant for axis lines and tick marks.\n   * - \"default\" — uses --color-border-primary (stronger)\n   * - \"secondary\" — uses --color-border-secondary (subtler)\n   */\n  borderVariant?: ChartBorderVariant;\n}\n\n/**\n * Themed LineChart.\n * Automatically assigns palette colors to Line children and\n * applies themed axis styles to XAxis/YAxis children.\n */\nexport const LineChart = ({\n  data,\n  height,\n  colorPalette,\n  className,\n  style,\n  grid = true,\n  borderVariant = \"default\",\n  children,\n}: ThemedLineChartProps) => {\n  let seriesIndex = 0;\n\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n\n    // Theme axis children\n    const themedAxis = themeAxisChild({ child: child as React.ReactElement<any>, variant: borderVariant, XAxis: RechartsXAxis, YAxis: RechartsYAxis });\n    if (themedAxis) return themedAxis;\n\n    if ((child.type as any) === RechartsLine || (child.type as any)?.displayName === \"Line\") {\n      const idx = seriesIndex++;\n      const existing = (child.props as any).stroke;\n      return cloneElement(child as React.ReactElement<any>, {\n        stroke: existing || getSeriesColor({ index: idx, palette: colorPalette }),\n        strokeWidth: (child.props as any).strokeWidth ?? 2,\n        dot: (child.props as any).dot ?? false,\n        activeDot: (child.props as any).activeDot ?? { r: 4 },\n      });\n    }\n    return child;\n  });\n\n  return (\n    <ChartContainer height={height} className={className} style={style}>\n      <RechartsLineChart data={data} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n        {grid && <CartesianGrid strokeDasharray=\"3 3\" stroke={getGridColor()} opacity={0.5} />}\n        {themedChildren}\n      </RechartsLineChart>\n    </ChartContainer>\n  );\n};\n","/**\n * ChartContainer — Responsive wrapper for all chart types.\n *\n * Wraps Recharts' ResponsiveContainer with the theme palette context.\n * All chart wrappers use this internally. Not exported directly — each\n * chart type (LineChart, BarChart, etc.) composes it.\n */\n\nimport { type ReactNode } from \"react\";\nimport { ResponsiveContainer } from \"recharts\";\nimport { DEFAULT_PALETTE, type ChartContainerProps } from \"./types.js\";\n\n/**\n * Provides a responsive, themed container for a Recharts chart.\n * Fills 100% width of its parent and uses the specified height.\n */\nexport const ChartContainer = ({\n  height = 300,\n  className = \"\",\n  style,\n  children,\n}: ChartContainerProps & { children: ReactNode }) => (\n  <div\n    className={`omu-chart w-full ${className}`}\n    style={{ height: `${height}px`, ...style }}\n  >\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      {children as React.ReactElement}\n    </ResponsiveContainer>\n  </div>\n);\n\n/**\n * Get the color for a given series index from the palette.\n * Wraps around if there are more series than palette entries.\n */\nexport const getSeriesColor = ({\n  index,\n  palette,\n}: {\n  index: number;\n  palette?: string[];\n}): string => {\n  const colors = palette ?? DEFAULT_PALETTE;\n  return colors[index % colors.length];\n};\n","/**\n * Shared chart types.\n * Defines the theme interface and common props used across all chart wrappers.\n */\n\nimport type { CSSProperties } from \"react\";\n\n/**\n * Color palette for multi-series charts.\n * Each series gets the next color in the palette.\n * Uses CSS variables from the MCP Apps spec where possible,\n * with opacity variations for additional series.\n */\nexport const DEFAULT_PALETTE = [\n  \"var(--color-accent, #6366f1)\",\n  \"var(--color-text-secondary, #6b7280)\",\n  \"var(--color-ring-primary, #a78bfa)\",\n  \"var(--color-text-tertiary, #9ca3af)\",\n  \"var(--color-border-primary, #d1d5db)\",\n  \"color-mix(in srgb, var(--color-accent, #6366f1) 60%, transparent)\",\n  \"color-mix(in srgb, var(--color-accent, #6366f1) 35%, transparent)\",\n];\n\n/**\n * Base props shared by all chart container wrappers.\n */\nexport interface ChartContainerProps {\n  /** Chart height in pixels. Width is always 100% of parent. */\n  height?: number;\n  /** Custom color palette for series data. Overrides the default palette. */\n  colorPalette?: string[];\n  /** Additional CSS class on the outermost wrapper. */\n  className?: string;\n  /** Inline styles on the outermost wrapper. */\n  style?: CSSProperties;\n}\n","import React from \"react\";\n\n/**\n * Chart Theme — CSS variable mapping for Recharts.\n *\n * Reads MCP Apps spec CSS variables at render time and provides\n * them as style objects for Recharts sub-components (tooltip, grid,\n * axis labels, legend). This is how charts automatically adapt to\n * the host's theme without configuration.\n */\n\n/**\n * Resolve a CSS variable value at runtime.\n * Falls back to the provided default if the variable is not set.\n */\nexport const getCSSVar = ({ name, fallback }: { name: string; fallback: string }): string => {\n  if (typeof window === \"undefined\") return fallback;\n  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();\n  return value || fallback;\n};\n\n/**\n * Themed tooltip style object for Recharts <Tooltip>.\n * Applied via contentStyle, labelStyle, and wrapperStyle props.\n */\nexport const getTooltipStyle = () => ({\n  contentStyle: {\n    backgroundColor: getCSSVar({ name: \"--color-background-secondary\", fallback: \"#f9fafb\" }),\n    border: `1px solid ${getCSSVar({ name: \"--color-border-secondary\", fallback: \"#e5e7eb\" })}`,\n    borderRadius: getCSSVar({ name: \"--border-radius-md\", fallback: \"8px\" }),\n    color: getCSSVar({ name: \"--color-text-primary\", fallback: \"#111827\" }),\n    fontSize: getCSSVar({ name: \"--font-text-sm-size\", fallback: \"13px\" }),\n    fontFamily: getCSSVar({ name: \"--font-sans\", fallback: \"ui-sans-serif, system-ui, sans-serif\" }),\n    padding: \"8px 12px\",\n    boxShadow: \"0 4px 12px rgba(0,0,0,0.08)\",\n  },\n  labelStyle: {\n    color: getCSSVar({ name: \"--color-text-primary\", fallback: \"#111827\" }),\n    fontWeight: 500,\n    marginBottom: \"4px\",\n  },\n});\n\n/**\n * Border variant type shared across chart sub-components.\n * - \"default\" uses --color-border-primary (stronger)\n * - \"secondary\" uses --color-border-secondary (subtler)\n */\nexport type ChartBorderVariant = \"default\" | \"secondary\";\n\n/**\n * Resolve the border CSS variable for the given variant.\n */\nconst getBorderColor = ({ variant = \"default\" }: { variant?: ChartBorderVariant } = {}): string =>\n  variant === \"secondary\"\n    ? getCSSVar({ name: \"--color-border-secondary\", fallback: \"#e5e7eb\" })\n    : getCSSVar({ name: \"--color-border-primary\", fallback: \"#d1d5db\" });\n\n/**\n * Themed grid line color for <CartesianGrid>.\n * Grids default to secondary (subtle background lines).\n */\nexport const getGridColor = ({ variant = \"secondary\" }: { variant?: ChartBorderVariant } = {}): string =>\n  getBorderColor({ variant });\n\n/**\n * Themed axis tick/label style for <XAxis> and <YAxis>.\n * Axis lines default to primary (visible structural lines).\n */\nexport const getAxisStyle = ({ variant = \"default\" }: { variant?: ChartBorderVariant } = {}) => ({\n  tick: {\n    fill: getCSSVar({ name: \"--color-text-secondary\", fallback: \"#6b7280\" }),\n    fontSize: getCSSVar({ name: \"--font-text-xs-size\", fallback: \"11px\" }),\n    fontFamily: getCSSVar({ name: \"--font-sans\", fallback: \"ui-sans-serif, system-ui, sans-serif\" }),\n  },\n  axisLine: {\n    stroke: getBorderColor({ variant }),\n  },\n  tickLine: {\n    stroke: getBorderColor({ variant }),\n  },\n});\n\n/**\n * Apply themed axis styles to an XAxis or YAxis child via cloneElement.\n *\n * Recharts identifies axis components by child.type, so wrapping them\n * in custom components breaks chart rendering. Instead, chart wrappers\n * call this in their Children.map loop to inject theme props while\n * preserving the original Recharts component type.\n *\n * Returns a cloned element with themed tick, axisLine, and tickLine,\n * or the original child untouched if it's not an axis component.\n */\nexport const themeAxisChild = ({\n  child,\n  variant = \"default\",\n  XAxis,\n  YAxis,\n}: {\n  child: React.ReactElement<any>;\n  variant?: ChartBorderVariant;\n  XAxis: any;\n  YAxis: any;\n}): React.ReactElement<any> | null => {\n  const t = child.type as any;\n  const dn = t?.displayName;\n\n  if (t === XAxis || t === YAxis || dn === \"XAxis\" || dn === \"YAxis\") {\n    const style = getAxisStyle({ variant });\n    const props = child.props as any;\n    return React.cloneElement(child, {\n      tick: props.tick === false ? false : { ...style.tick, ...(typeof props.tick === \"object\" && props.tick ? props.tick : {}) },\n      axisLine: props.axisLine === false ? false : { ...style.axisLine, ...(typeof props.axisLine === \"object\" && props.axisLine ? props.axisLine : {}) },\n      tickLine: props.tickLine === false ? false : { ...style.tickLine, ...(typeof props.tickLine === \"object\" && props.tickLine ? props.tickLine : {}) },\n    });\n  }\n\n  return null;\n};\n\n/**\n * Themed legend style for <Legend>.\n */\nexport const getLegendStyle = () => ({\n  color: getCSSVar({ name: \"--color-text-secondary\", fallback: \"#6b7280\" }),\n  fontSize: getCSSVar({ name: \"--font-text-sm-size\", fallback: \"13px\" }),\n  fontFamily: getCSSVar({ name: \"--font-sans\", fallback: \"ui-sans-serif, system-ui, sans-serif\" }),\n});\n","/**\n * BarChart — Themed bar/column chart wrapper.\n */\n\nimport React, { type ReactNode, Children, cloneElement, isValidElement } from \"react\";\nimport {\n  BarChart as RechartsBarChart,\n  Bar as RechartsBar,\n  XAxis as RechartsXAxis,\n  YAxis as RechartsYAxis,\n  CartesianGrid,\n} from \"recharts\";\nimport { ChartContainer, getSeriesColor } from \"./ChartContainer.js\";\nimport { getGridColor, themeAxisChild, type ChartBorderVariant } from \"./theme.js\";\nimport type { ChartContainerProps } from \"./types.js\";\n\ninterface ThemedBarChartProps extends ChartContainerProps {\n  /** Chart data array. */\n  data: Record<string, unknown>[];\n  children: ReactNode;\n  grid?: boolean;\n  /**\n   * Border variant for axis lines and tick marks.\n   * - \"default\" — uses --color-border-primary (stronger)\n   * - \"secondary\" — uses --color-border-secondary (subtler)\n   */\n  borderVariant?: ChartBorderVariant;\n}\n\n/**\n * Themed BarChart.\n * Automatically assigns palette colors to Bar children and\n * applies themed axis styles to XAxis/YAxis children.\n */\nexport const BarChart = ({\n  data,\n  height,\n  colorPalette,\n  className,\n  style,\n  grid = true,\n  borderVariant = \"default\",\n  children,\n}: ThemedBarChartProps) => {\n  let seriesIndex = 0;\n\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n\n    const themedAxis = themeAxisChild({ child: child as React.ReactElement<any>, variant: borderVariant, XAxis: RechartsXAxis, YAxis: RechartsYAxis });\n    if (themedAxis) return themedAxis;\n\n    if ((child.type as any) === RechartsBar || (child.type as any)?.displayName === \"Bar\") {\n      const idx = seriesIndex++;\n      const existing = (child.props as any).fill;\n      return cloneElement(child as React.ReactElement<any>, {\n        fill: existing || getSeriesColor({ index: idx, palette: colorPalette }),\n        radius: (child.props as any).radius ?? [4, 4, 0, 0],\n      });\n    }\n    return child;\n  });\n\n  return (\n    <ChartContainer height={height} className={className} style={style}>\n      <RechartsBarChart data={data} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n        {grid && <CartesianGrid strokeDasharray=\"3 3\" stroke={getGridColor()} opacity={0.5} vertical={false} />}\n        {themedChildren}\n      </RechartsBarChart>\n    </ChartContainer>\n  );\n};\n","/**\n * AreaChart — Themed area/volume chart wrapper.\n */\n\nimport React, { type ReactNode, Children, cloneElement, isValidElement } from \"react\";\nimport {\n  AreaChart as RechartsAreaChart,\n  Area as RechartsArea,\n  XAxis as RechartsXAxis,\n  YAxis as RechartsYAxis,\n  CartesianGrid,\n} from \"recharts\";\nimport { ChartContainer, getSeriesColor } from \"./ChartContainer.js\";\nimport { getGridColor, themeAxisChild, type ChartBorderVariant } from \"./theme.js\";\nimport type { ChartContainerProps } from \"./types.js\";\n\ninterface ThemedAreaChartProps extends ChartContainerProps {\n  data: Record<string, unknown>[];\n  children: ReactNode;\n  grid?: boolean;\n  /**\n   * Border variant for axis lines and tick marks.\n   * - \"default\" — uses --color-border-primary (stronger)\n   * - \"secondary\" — uses --color-border-secondary (subtler)\n   */\n  borderVariant?: ChartBorderVariant;\n}\n\n/**\n * Themed AreaChart.\n * Auto-assigns palette colors with gradient fill to Area children and\n * applies themed axis styles to XAxis/YAxis children.\n */\nexport const AreaChart = ({\n  data,\n  height,\n  colorPalette,\n  className,\n  style,\n  grid = true,\n  borderVariant = \"default\",\n  children,\n}: ThemedAreaChartProps) => {\n  let seriesIndex = 0;\n\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n\n    const themedAxis = themeAxisChild({ child: child as React.ReactElement<any>, variant: borderVariant, XAxis: RechartsXAxis, YAxis: RechartsYAxis });\n    if (themedAxis) return themedAxis;\n\n    if ((child.type as any) === RechartsArea || (child.type as any)?.displayName === \"Area\") {\n      const idx = seriesIndex++;\n      const color = (child.props as any).stroke || getSeriesColor({ index: idx, palette: colorPalette });\n      return cloneElement(child as React.ReactElement<any>, {\n        stroke: color,\n        fill: (child.props as any).fill || color,\n        fillOpacity: (child.props as any).fillOpacity ?? 0.15,\n        strokeWidth: (child.props as any).strokeWidth ?? 2,\n      });\n    }\n    return child;\n  });\n\n  return (\n    <ChartContainer height={height} className={className} style={style}>\n      <RechartsAreaChart data={data} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n        {grid && <CartesianGrid strokeDasharray=\"3 3\" stroke={getGridColor()} opacity={0.5} />}\n        {themedChildren}\n      </RechartsAreaChart>\n    </ChartContainer>\n  );\n};\n","/**\n * PieChart — Themed pie/donut chart wrapper.\n */\n\nimport React, { type ReactNode, Children, cloneElement, isValidElement } from \"react\";\nimport {\n  PieChart as RechartsPieChart,\n  Pie as RechartsPie,\n  Cell,\n} from \"recharts\";\nimport { ChartContainer, getSeriesColor } from \"./ChartContainer.js\";\nimport type { ChartContainerProps } from \"./types.js\";\n\ninterface ThemedPieChartProps extends Omit<ChartContainerProps, \"height\"> {\n  /** Chart height (also used for approximate width in responsive container). */\n  height?: number;\n  children: ReactNode;\n}\n\n/**\n * Themed PieChart.\n * Auto-assigns palette colors to Pie data via Cell children when no\n * explicit fill is provided on individual data entries.\n */\nexport const PieChart = ({\n  height,\n  colorPalette,\n  className,\n  style,\n  children,\n}: ThemedPieChartProps) => {\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n    if ((child.type as any) === RechartsPie || (child.type as any)?.displayName === \"Pie\") {\n      const props = child.props as any;\n      const data: any[] = props.data ?? [];\n      /**\n       * If the Pie has no Cell children, inject them automatically\n       * so each slice gets a palette color.\n       */\n      const hasExplicitCells = Children.toArray(props.children).some(\n        (c: any) => isValidElement(c) && ((c.type as any) === Cell || (c.type as any)?.displayName === \"Cell\")\n      );\n      if (!hasExplicitCells && data.length > 0) {\n        return cloneElement(child as React.ReactElement<any>, {\n          children: data.map((_, i) => (\n            <Cell key={`cell-${i}`} fill={getSeriesColor({ index: i, palette: colorPalette })} />\n          )),\n        });\n      }\n    }\n    return child;\n  });\n\n  return (\n    <ChartContainer height={height} className={className} style={style}>\n      <RechartsPieChart>\n        {themedChildren}\n      </RechartsPieChart>\n    </ChartContainer>\n  );\n};\n","/**\n * ScatterChart — Themed scatter/correlation chart wrapper.\n */\n\nimport React, { type ReactNode, Children, cloneElement, isValidElement } from \"react\";\nimport {\n  ScatterChart as RechartsScatterChart,\n  Scatter as RechartsScatter,\n  XAxis as RechartsXAxis,\n  YAxis as RechartsYAxis,\n  CartesianGrid,\n} from \"recharts\";\nimport { ChartContainer, getSeriesColor } from \"./ChartContainer.js\";\nimport { getGridColor, themeAxisChild, type ChartBorderVariant } from \"./theme.js\";\nimport type { ChartContainerProps } from \"./types.js\";\n\ninterface ThemedScatterChartProps extends ChartContainerProps {\n  children: ReactNode;\n  grid?: boolean;\n  /**\n   * Border variant for axis lines and tick marks.\n   * - \"default\" — uses --color-border-primary (stronger)\n   * - \"secondary\" — uses --color-border-secondary (subtler)\n   */\n  borderVariant?: ChartBorderVariant;\n}\n\n/**\n * Themed ScatterChart.\n * Auto-assigns palette fill colors to Scatter children and\n * applies themed axis styles to XAxis/YAxis children.\n */\nexport const ScatterChart = ({\n  height,\n  colorPalette,\n  className,\n  style,\n  grid = true,\n  borderVariant = \"default\",\n  children,\n}: ThemedScatterChartProps) => {\n  let seriesIndex = 0;\n\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n\n    const themedAxis = themeAxisChild({ child: child as React.ReactElement<any>, variant: borderVariant, XAxis: RechartsXAxis, YAxis: RechartsYAxis });\n    if (themedAxis) return themedAxis;\n\n    if ((child.type as any) === RechartsScatter || (child.type as any)?.displayName === \"Scatter\") {\n      const idx = seriesIndex++;\n      const existing = (child.props as any).fill;\n      return cloneElement(child as React.ReactElement<any>, {\n        fill: existing || getSeriesColor({ index: idx, palette: colorPalette }),\n      });\n    }\n    return child;\n  });\n\n  return (\n    <ChartContainer height={height} className={className} style={style}>\n      <RechartsScatterChart margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n        {grid && <CartesianGrid strokeDasharray=\"3 3\" stroke={getGridColor()} opacity={0.5} />}\n        {themedChildren}\n      </RechartsScatterChart>\n    </ChartContainer>\n  );\n};\n","/**\n * RadarChart — Themed radar/spider chart wrapper.\n */\n\nimport React, { type ReactNode, Children, cloneElement, isValidElement } from \"react\";\nimport {\n  RadarChart as RechartsRadarChart,\n  Radar as RechartsRadar,\n} from \"recharts\";\nimport { ChartContainer, getSeriesColor } from \"./ChartContainer.js\";\nimport type { ChartContainerProps } from \"./types.js\";\n\ninterface ThemedRadarChartProps extends ChartContainerProps {\n  data: Record<string, unknown>[];\n  children: ReactNode;\n}\n\n/**\n * Themed RadarChart.\n * Auto-assigns palette colors to Radar children.\n */\nexport const RadarChart = ({\n  data,\n  height,\n  colorPalette,\n  className,\n  style,\n  children,\n}: ThemedRadarChartProps) => {\n  let seriesIndex = 0;\n\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n    if ((child.type as any) === RechartsRadar || (child.type as any)?.displayName === \"Radar\") {\n      const idx = seriesIndex++;\n      const color = (child.props as any).stroke || getSeriesColor({ index: idx, palette: colorPalette });\n      return cloneElement(child as React.ReactElement<any>, {\n        stroke: color,\n        fill: (child.props as any).fill || color,\n        fillOpacity: (child.props as any).fillOpacity ?? 0.2,\n      });\n    }\n    return child;\n  });\n\n  return (\n    <ChartContainer height={height} className={className} style={style}>\n      <RechartsRadarChart data={data} cx=\"50%\" cy=\"50%\" outerRadius=\"70%\">\n        {themedChildren}\n      </RechartsRadarChart>\n    </ChartContainer>\n  );\n};\n","/**\n * ComposedChart — Themed mixed chart wrapper (Bar + Line + Area in one).\n */\n\nimport React, { type ReactNode, Children, cloneElement, isValidElement } from \"react\";\nimport {\n  ComposedChart as RechartsComposedChart,\n  Line as RechartsLine,\n  Bar as RechartsBar,\n  Area as RechartsArea,\n  XAxis as RechartsXAxis,\n  YAxis as RechartsYAxis,\n  CartesianGrid,\n} from \"recharts\";\nimport { ChartContainer, getSeriesColor } from \"./ChartContainer.js\";\nimport { getGridColor, themeAxisChild, type ChartBorderVariant } from \"./theme.js\";\nimport type { ChartContainerProps } from \"./types.js\";\n\ninterface ThemedComposedChartProps extends ChartContainerProps {\n  data: Record<string, unknown>[];\n  children: ReactNode;\n  grid?: boolean;\n  /**\n   * Border variant for axis lines and tick marks.\n   * - \"default\" — uses --color-border-primary (stronger)\n   * - \"secondary\" — uses --color-border-secondary (subtler)\n   */\n  borderVariant?: ChartBorderVariant;\n}\n\n/**\n * Themed ComposedChart.\n * Auto-assigns palette colors to Line, Bar, and Area children and\n * applies themed axis styles to XAxis/YAxis children.\n */\nexport const ComposedChart = ({\n  data,\n  height,\n  colorPalette,\n  className,\n  style,\n  grid = true,\n  borderVariant = \"default\",\n  children,\n}: ThemedComposedChartProps) => {\n  let seriesIndex = 0;\n\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n\n    const themedAxis = themeAxisChild({ child: child as React.ReactElement<any>, variant: borderVariant, XAxis: RechartsXAxis, YAxis: RechartsYAxis });\n    if (themedAxis) return themedAxis;\n\n    const t = child.type as any;\n    const dn = t?.displayName;\n\n    if (t === RechartsLine || dn === \"Line\") {\n      const idx = seriesIndex++;\n      return cloneElement(child as React.ReactElement<any>, {\n        stroke: (child.props as any).stroke || getSeriesColor({ index: idx, palette: colorPalette }),\n        strokeWidth: (child.props as any).strokeWidth ?? 2,\n        dot: (child.props as any).dot ?? false,\n      });\n    }\n    if (t === RechartsBar || dn === \"Bar\") {\n      const idx = seriesIndex++;\n      return cloneElement(child as React.ReactElement<any>, {\n        fill: (child.props as any).fill || getSeriesColor({ index: idx, palette: colorPalette }),\n        radius: (child.props as any).radius ?? [4, 4, 0, 0],\n      });\n    }\n    if (t === RechartsArea || dn === \"Area\") {\n      const idx = seriesIndex++;\n      const color = (child.props as any).stroke || getSeriesColor({ index: idx, palette: colorPalette });\n      return cloneElement(child as React.ReactElement<any>, {\n        stroke: color,\n        fill: (child.props as any).fill || color,\n        fillOpacity: (child.props as any).fillOpacity ?? 0.15,\n        strokeWidth: (child.props as any).strokeWidth ?? 2,\n      });\n    }\n    return child;\n  });\n\n  return (\n    <ChartContainer height={height} className={className} style={style}>\n      <RechartsComposedChart data={data} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n        {grid && <CartesianGrid strokeDasharray=\"3 3\" stroke={getGridColor()} opacity={0.5} />}\n        {themedChildren}\n      </RechartsComposedChart>\n    </ChartContainer>\n  );\n};\n","/**\n * ThemedTooltip — Pre-themed tooltip using MCP Apps spec CSS variables.\n *\n * Drop-in replacement for Recharts' Tooltip that automatically\n * applies the host's theme colors for background, text, border.\n */\n\nimport { useMemo } from \"react\";\nimport { Tooltip as RechartsTooltip } from \"recharts\";\nimport { getTooltipStyle } from \"./theme.js\";\n\n/**\n * A themed Tooltip that reads CSS variables at render time.\n * Forwards all standard Recharts Tooltip props.\n */\nexport const ThemedTooltip = (props: any) => {\n  const style = useMemo(() => getTooltipStyle(), []);\n  return (\n    <RechartsTooltip\n      contentStyle={style.contentStyle}\n      labelStyle={style.labelStyle}\n      cursor={{ stroke: \"var(--color-border-secondary, #e5e7eb)\", strokeWidth: 1 }}\n      {...props}\n    />\n  );\n};\n","/**\n * open-mcp-app-ui/charts\n *\n * Themed chart components built on Recharts v3.\n * Auto-styled via MCP Apps spec CSS variables.\n *\n * Usage:\n *   import { LineChart, Line, XAxis, YAxis, Tooltip } from \"open-mcp-app-ui/charts\";\n *\n *   <LineChart data={data} height={300}>\n *     <XAxis dataKey=\"month\" />\n *     <YAxis />\n *     <Tooltip />\n *     <Line dataKey=\"revenue\" />\n *   </LineChart>\n */\n\n// Themed chart wrappers\nexport { LineChart } from \"./LineChart.js\";\nexport { BarChart } from \"./BarChart.js\";\nexport { AreaChart } from \"./AreaChart.js\";\nexport { PieChart } from \"./PieChart.js\";\nexport { ScatterChart } from \"./ScatterChart.js\";\nexport { RadarChart } from \"./RadarChart.js\";\nexport { ComposedChart } from \"./ComposedChart.js\";\nexport { ThemedTooltip as Tooltip } from \"./ThemedTooltip.js\";\n\n// Re-export Recharts primitives for composition\nexport {\n  Line,\n  Bar,\n  Area,\n  Pie,\n  Scatter,\n  Radar,\n  Cell,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Legend,\n  PolarGrid,\n  PolarAngleAxis,\n  PolarRadiusAxis,\n  Tooltip as RechartsTooltip,\n  ReferenceLine,\n  ReferenceArea,\n  ResponsiveContainer,\n} from \"recharts\";\n\n// Theme utilities\nexport { type ChartBorderVariant } from \"./theme.js\";\n\n// Types\nexport type { ChartContainerProps } from \"./types.js\";\nexport { DEFAULT_PALETTE } from \"./types.js\";\n"],"mappings":"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","names":["XAxis","YAxis","jsx","Children","cloneElement","isValidElement","RechartsXAxis","RechartsYAxis","CartesianGrid","jsx","jsxs","Children","isValidElement","RechartsXAxis","RechartsYAxis","cloneElement","CartesianGrid","Children","cloneElement","isValidElement","RechartsXAxis","RechartsYAxis","CartesianGrid","jsx","jsxs","Children","isValidElement","RechartsXAxis","RechartsYAxis","cloneElement","CartesianGrid","Children","cloneElement","isValidElement","jsx","Children","isValidElement","cloneElement","Children","cloneElement","isValidElement","RechartsXAxis","RechartsYAxis","CartesianGrid","jsx","jsxs","Children","isValidElement","RechartsXAxis","RechartsYAxis","cloneElement","CartesianGrid","Children","cloneElement","isValidElement","jsx","Children","isValidElement","cloneElement","Children","cloneElement","isValidElement","RechartsLine","RechartsBar","RechartsArea","RechartsXAxis","RechartsYAxis","CartesianGrid","jsx","jsxs","Children","isValidElement","RechartsXAxis","RechartsYAxis","RechartsLine","cloneElement","RechartsBar","RechartsArea","CartesianGrid","jsx","Cell","CartesianGrid","ResponsiveContainer"]}

package/dist/editor/index.d.ts

@@ -5,7 +5,7 @@ import react__default from 'react';
  *
  * Built on Milkdown (ProseMirror + Remark) for markdown-first editing
  * with perfect round-trip fidelity. Supports WYSIWYG, raw markdown,
- * and split (side-by-side) editing modes.
+ * and raw markdown editing modes.
  *
  * Styled exclusively with MCP Apps spec CSS variables. All typography,
  * colors, borders, and spacing use the host's theme tokens.
@@ -19,7 +19,7 @@ import react__default from 'react';
 /** Available toolbar action items. */
 type ToolbarItem = "bold" | "italic" | "strikethrough" | "heading" | "bulletList" | "orderedList" | "taskList" | "code" | "codeBlock" | "blockquote" | "link" | "divider" | "undo" | "redo";
 /** Editing mode. */
-type EditorMode = "wysiwyg" | "markdown" | "split";
+type EditorMode = "wysiwyg" | "markdown";
 interface EditorProps {
     /** Markdown string (source of truth). */
     value?: string;
@@ -29,7 +29,6 @@ interface EditorProps {
      * Editing mode:
      * - "wysiwyg" — Rich text rendering with formatting (default)
      * - "markdown" — Raw markdown text editing
-     * - "split" — Side-by-side WYSIWYG and markdown
      *
      * Omit to show a mode toggle in the toolbar so users can switch freely.
      */
@@ -45,10 +44,11 @@ interface EditorProps {
     readOnly?: boolean;
     /**
      * Show a border and rounded corners around the editor.
-     * When false (default), the editor sits flat within its container,
-     * making it easy to embed inside cards or other bordered elements.
+     * - false (default) — no border, sits flat within its container
+     * - true / "default" — uses --color-border-primary (stronger)
+     * - "secondary" — uses --color-border-secondary (subtler)
      */
-    bordered?: boolean;
+    bordered?: boolean | "default" | "secondary";
     /** Minimum editor height in pixels. */
     minHeight?: number;
     /** Maximum editor height in pixels before scrolling. */
@@ -70,7 +70,7 @@ interface EditorRef {
  * Markdown + rich text editor with toolbar and mode switching.
  *
  * Built on Milkdown (ProseMirror + Remark) for markdown-first editing.
- * Supports WYSIWYG, raw markdown, and split editing modes. Styled with
+ * Supports WYSIWYG and raw markdown editing modes. Styled with
  * MCP Apps spec CSS variables for automatic host theming.
  *
  * By default the editor has no border or rounded corners so it sits

package/dist/editor/index.js

@@ -190,8 +190,7 @@ var ModeToggle = ({
 }) => {
   const modes = [
     { value: "wysiwyg", label: "Rich" },
-    { value: "markdown", label: "MD" },
-    { value: "split", label: "Split" }
+    { value: "markdown", label: "MD" }
   ];
   return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5 ml-auto pl-2 pr-2", children: modes.map((m) => /* @__PURE__ */ jsx(
     "button",
@@ -386,11 +385,8 @@ var Editor = forwardRef(
       (markdown) => {
         setRawValue(markdown);
         onChange?.(markdown);
-        if (mode === "split") {
-          actionsRef.current?.setMarkdown(markdown);
-        }
       },
-      [onChange, mode]
+      [onChange]
     );
     const handleToolbarAction = useCallback(
       (item) => {
@@ -466,12 +462,12 @@ var Editor = forwardRef(
     );
     const handleModeChange = useCallback(
       (newMode) => {
-        if (mode === "wysiwyg" || mode === "split") {
+        if (mode === "wysiwyg") {
           const current = actionsRef.current?.getMarkdown() ?? rawValue;
           setRawValue(current);
         }
         setInternalMode(newMode);
-        if (newMode === "wysiwyg" || newMode === "split") {
+        if (newMode === "wysiwyg") {
           setMilkdownKey((k) => k + 1);
         }
       },
@@ -489,7 +485,10 @@ var Editor = forwardRef(
         className: [
           "omu-editor flex flex-col overflow-hidden",
           "bg-bg-primary text-txt-primary",
-          bordered ? "border border-bdr-primary rounded-md focus-within:outline focus-within:outline-2 focus-within:outline-offset-0 focus-within:outline-ring-primary" : "",
+          bordered ? [
+            "rounded-md focus-within:outline focus-within:outline-2 focus-within:outline-offset-0 focus-within:outline-ring-primary",
+            bordered === "secondary" ? "border border-bdr-secondary" : "border border-bdr-primary"
+          ].join(" ") : "",
           className
         ].join(" "),
         style: wrapperStyle,
@@ -499,7 +498,7 @@ var Editor = forwardRef(
             showModeToggle && !readOnly && /* @__PURE__ */ jsx(ModeToggle, { mode, onModeChange: handleModeChange })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-h-0 overflow-hidden", children: [
-            (mode === "wysiwyg" || mode === "split") && /* @__PURE__ */ jsx("div", { className: `flex flex-col flex-1 min-h-0 ${mode === "split" ? "border-r border-bdr-secondary" : ""}`, children: /* @__PURE__ */ jsx(MilkdownProvider, { children: /* @__PURE__ */ jsx(
+            mode === "wysiwyg" && /* @__PURE__ */ jsx("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsx(MilkdownProvider, { children: /* @__PURE__ */ jsx(
               MilkdownInner,
               {
                 defaultValue: rawValue,
@@ -511,13 +510,13 @@ var Editor = forwardRef(
                 actionsRef
               }
             ) }, milkdownKey) }),
-            (mode === "markdown" || mode === "split") && /* @__PURE__ */ jsx("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsx(
+            mode === "markdown" && /* @__PURE__ */ jsx("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsx(
               MarkdownTextarea,
               {
                 value: rawValue,
                 onChange: handleRawChange,
                 readOnly,
-                placeholder: mode === "markdown" ? placeholder : "Raw markdown...",
+                placeholder,
                 autoFocus: autoFocus && mode === "markdown",
                 minHeight: minHeight - 40,
                 maxHeight: maxHeight ? maxHeight - 40 : void 0