@databricks/appkit-ui 0.0.2

package/dist/react/charts/options.js

@@ -0,0 +1,212 @@
+import { createTimeSeriesData, formatLabel, truncateLabel } from "./utils.js";
+
+//#region src/react/charts/options.ts
+function buildBaseOption(ctx) {
+	return {
+		title: ctx.title ? {
+			text: ctx.title,
+			left: "center"
+		} : void 0,
+		color: ctx.colors
+	};
+}
+function buildRadarOption(ctx, showArea = true) {
+	const maxValue = Math.max(...ctx.yFields.flatMap((f) => ctx.yDataMap[f].map((v) => Number(v) || 0)));
+	return {
+		...buildBaseOption(ctx),
+		tooltip: { trigger: "item" },
+		legend: ctx.showLegend && ctx.yFields.length > 1 ? { top: "bottom" } : void 0,
+		radar: {
+			indicator: ctx.xData.map((name) => ({
+				name: String(name),
+				max: maxValue * 1.2
+			})),
+			shape: "polygon"
+		},
+		series: [{
+			type: "radar",
+			data: ctx.yFields.map((key, idx) => ({
+				name: formatLabel(key),
+				value: ctx.yDataMap[key],
+				itemStyle: { color: ctx.colors[idx % ctx.colors.length] },
+				areaStyle: showArea ? { opacity: .3 } : void 0
+			}))
+		}]
+	};
+}
+function buildPieOption(ctx, chartType, innerRadius, showLabels, labelPosition) {
+	const pieData = ctx.xData.map((name, i) => ({
+		name: String(name),
+		value: ctx.yDataMap[ctx.yFields[0]]?.[i] ?? 0
+	}));
+	const isDonut = chartType === "donut" || innerRadius > 0;
+	return {
+		...buildBaseOption(ctx),
+		tooltip: {
+			trigger: "item",
+			formatter: "{b}: {c} ({d}%)"
+		},
+		legend: ctx.showLegend ? {
+			orient: "vertical",
+			left: "left",
+			top: "middle"
+		} : void 0,
+		series: [{
+			type: "pie",
+			radius: isDonut ? [`${innerRadius || 40}%`, "70%"] : "70%",
+			center: ["60%", "50%"],
+			data: pieData,
+			label: {
+				show: showLabels,
+				position: labelPosition,
+				formatter: "{b}: {d}%"
+			},
+			emphasis: { itemStyle: {
+				shadowBlur: 10,
+				shadowOffsetX: 0,
+				shadowColor: "rgba(0, 0, 0, 0.5)"
+			} }
+		}]
+	};
+}
+function buildHorizontalBarOption(ctx, stacked) {
+	const hasMultipleSeries = ctx.yFields.length > 1;
+	return {
+		...buildBaseOption(ctx),
+		tooltip: {
+			trigger: "axis",
+			axisPointer: { type: "shadow" }
+		},
+		legend: ctx.showLegend && hasMultipleSeries ? { top: "bottom" } : void 0,
+		grid: {
+			left: "20%",
+			right: "10%",
+			top: ctx.title ? "15%" : "5%",
+			bottom: ctx.showLegend && hasMultipleSeries ? "15%" : "5%"
+		},
+		xAxis: { type: "value" },
+		yAxis: {
+			type: "category",
+			data: ctx.xData,
+			axisLabel: {
+				width: 100,
+				overflow: "truncate",
+				formatter: (value) => truncateLabel(String(value))
+			}
+		},
+		series: ctx.yFields.map((key, idx) => ({
+			name: formatLabel(key),
+			type: "bar",
+			data: ctx.yDataMap[key],
+			stack: stacked ? "total" : void 0,
+			itemStyle: { borderRadius: [
+				0,
+				4,
+				4,
+				0
+			] },
+			color: ctx.colors[idx % ctx.colors.length]
+		}))
+	};
+}
+function buildHeatmapOption(ctx) {
+	return {
+		...buildBaseOption(ctx),
+		tooltip: {
+			trigger: "item",
+			formatter: (params) => {
+				const [xIdx, yIdx, value] = params.data;
+				return `${ctx.xData[xIdx] ?? xIdx}, ${ctx.yAxisData[yIdx] ?? yIdx}: ${value}`;
+			}
+		},
+		grid: {
+			left: "15%",
+			right: "15%",
+			top: ctx.title ? "15%" : "10%",
+			bottom: "15%"
+		},
+		xAxis: {
+			type: "category",
+			data: ctx.xData,
+			splitArea: { show: true },
+			axisLabel: {
+				rotate: ctx.xData.length > 10 ? 45 : 0,
+				formatter: (v) => truncateLabel(String(v), 10)
+			}
+		},
+		yAxis: {
+			type: "category",
+			data: ctx.yAxisData,
+			splitArea: { show: true },
+			axisLabel: { formatter: (v) => truncateLabel(String(v), 12) }
+		},
+		visualMap: {
+			min: ctx.min,
+			max: ctx.max,
+			calculable: true,
+			orient: "vertical",
+			right: "2%",
+			top: "center",
+			inRange: { color: ctx.colors.length >= 2 ? ctx.colors : ["#f0f0f0", ctx.colors[0]] }
+		},
+		series: [{
+			type: "heatmap",
+			data: ctx.heatmapData,
+			label: {
+				show: ctx.showLabels,
+				formatter: (params) => String(params.data[2])
+			},
+			emphasis: { itemStyle: {
+				shadowBlur: 10,
+				shadowColor: "rgba(0, 0, 0, 0.5)"
+			} }
+		}]
+	};
+}
+function buildCartesianOption(ctx) {
+	const { chartType, isTimeSeries, stacked, smooth, showSymbol, symbolSize } = ctx;
+	const hasMultipleSeries = ctx.yFields.length > 1;
+	const seriesType = chartType === "area" ? "line" : chartType;
+	return {
+		...buildBaseOption(ctx),
+		tooltip: { trigger: "axis" },
+		legend: ctx.showLegend && hasMultipleSeries ? { top: "bottom" } : void 0,
+		grid: {
+			left: "10%",
+			right: "10%",
+			top: ctx.title ? "15%" : "10%",
+			bottom: ctx.showLegend && hasMultipleSeries ? "20%" : "15%"
+		},
+		xAxis: {
+			type: isTimeSeries ? "time" : "category",
+			data: isTimeSeries ? void 0 : ctx.xData,
+			axisLabel: isTimeSeries ? void 0 : {
+				rotate: ctx.xData.length > 10 ? 45 : 0,
+				formatter: (v) => truncateLabel(String(v), 10)
+			}
+		},
+		yAxis: { type: "value" },
+		series: ctx.yFields.map((key, idx) => ({
+			name: formatLabel(key),
+			type: seriesType,
+			data: isTimeSeries ? createTimeSeriesData(ctx.xData, ctx.yDataMap[key]) : ctx.yDataMap[key],
+			smooth: chartType === "line" || chartType === "area" ? smooth : void 0,
+			showSymbol: chartType === "line" || chartType === "area" ? showSymbol : void 0,
+			symbol: chartType === "scatter" ? "circle" : void 0,
+			symbolSize: chartType === "scatter" ? symbolSize : void 0,
+			areaStyle: chartType === "area" ? { opacity: .3 } : void 0,
+			stack: stacked && chartType === "area" ? "total" : void 0,
+			itemStyle: chartType === "bar" ? { borderRadius: [
+				4,
+				4,
+				0,
+				0
+			] } : void 0,
+			color: ctx.colors[idx % ctx.colors.length]
+		}))
+	};
+}
+
+//#endregion
+export { buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption };
+//# sourceMappingURL=options.js.map

package/dist/react/charts/options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.js","names":[],"sources":["../../../src/react/charts/options.ts"],"sourcesContent":["import type { ChartType } from \"./types\";\nimport { createTimeSeriesData, formatLabel, truncateLabel } from \"./utils\";\n\n// ============================================================================\n// Option Builder Types\n// ============================================================================\n\nexport interface OptionBuilderContext {\n  xData: (string | number)[];\n  yDataMap: Record<string, (string | number)[]>;\n  yFields: string[];\n  colors: string[];\n  title?: string;\n  showLegend: boolean;\n}\n\nexport interface CartesianContext extends OptionBuilderContext {\n  chartType: ChartType;\n  isTimeSeries: boolean;\n  stacked: boolean;\n  smooth: boolean;\n  showSymbol: boolean;\n  symbolSize: number;\n}\n\n// ============================================================================\n// Base Option Builder\n// ============================================================================\n\nfunction buildBaseOption(ctx: OptionBuilderContext): Record<string, unknown> {\n  return {\n    title: ctx.title ? { text: ctx.title, left: \"center\" } : undefined,\n    color: ctx.colors,\n  };\n}\n\n// ============================================================================\n// Radar Chart Option\n// ============================================================================\n\nexport function buildRadarOption(\n  ctx: OptionBuilderContext,\n  showArea = true,\n): Record<string, unknown> {\n  const maxValue = Math.max(\n    ...ctx.yFields.flatMap((f) => ctx.yDataMap[f].map((v) => Number(v) || 0)),\n  );\n\n  return {\n    ...buildBaseOption(ctx),\n    tooltip: { trigger: \"item\" },\n    legend:\n      ctx.showLegend && ctx.yFields.length > 1 ? { top: \"bottom\" } : undefined,\n    radar: {\n      indicator: ctx.xData.map((name) => ({\n        name: String(name),\n        max: maxValue * 1.2,\n      })),\n      shape: \"polygon\",\n    },\n    series: [\n      {\n        type: \"radar\",\n        data: ctx.yFields.map((key, idx) => ({\n          name: formatLabel(key),\n          value: ctx.yDataMap[key],\n          itemStyle: { color: ctx.colors[idx % ctx.colors.length] },\n          areaStyle: showArea ? { opacity: 0.3 } : undefined,\n        })),\n      },\n    ],\n  };\n}\n\n// ============================================================================\n// Pie/Donut Chart Option\n// ============================================================================\n\nexport function buildPieOption(\n  ctx: OptionBuilderContext,\n  chartType: \"pie\" | \"donut\",\n  innerRadius: number,\n  showLabels: boolean,\n  labelPosition: string,\n): Record<string, unknown> {\n  const pieData = ctx.xData.map((name, i) => ({\n    name: String(name),\n    value: ctx.yDataMap[ctx.yFields[0]]?.[i] ?? 0,\n  }));\n\n  const isDonut = chartType === \"donut\" || innerRadius > 0;\n\n  return {\n    ...buildBaseOption(ctx),\n    tooltip: { trigger: \"item\", formatter: \"{b}: {c} ({d}%)\" },\n    legend: ctx.showLegend\n      ? { orient: \"vertical\", left: \"left\", top: \"middle\" }\n      : undefined,\n    series: [\n      {\n        type: \"pie\",\n        radius: isDonut ? [`${innerRadius || 40}%`, \"70%\"] : \"70%\",\n        center: [\"60%\", \"50%\"],\n        data: pieData,\n        label: {\n          show: showLabels,\n          position: labelPosition,\n          formatter: \"{b}: {d}%\",\n        },\n        emphasis: {\n          itemStyle: {\n            shadowBlur: 10,\n            shadowOffsetX: 0,\n            shadowColor: \"rgba(0, 0, 0, 0.5)\",\n          },\n        },\n      },\n    ],\n  };\n}\n\n// ============================================================================\n// Horizontal Bar Chart Option\n// ============================================================================\n\nexport function buildHorizontalBarOption(\n  ctx: OptionBuilderContext,\n  stacked: boolean,\n): Record<string, unknown> {\n  const hasMultipleSeries = ctx.yFields.length > 1;\n\n  return {\n    ...buildBaseOption(ctx),\n    tooltip: { trigger: \"axis\", axisPointer: { type: \"shadow\" } },\n    legend: ctx.showLegend && hasMultipleSeries ? { top: \"bottom\" } : undefined,\n    grid: {\n      left: \"20%\",\n      right: \"10%\",\n      top: ctx.title ? \"15%\" : \"5%\",\n      bottom: ctx.showLegend && hasMultipleSeries ? \"15%\" : \"5%\",\n    },\n    xAxis: { type: \"value\" },\n    yAxis: {\n      type: \"category\",\n      data: ctx.xData,\n      axisLabel: {\n        width: 100,\n        overflow: \"truncate\",\n        formatter: (value: string) => truncateLabel(String(value)),\n      },\n    },\n    series: ctx.yFields.map((key, idx) => ({\n      name: formatLabel(key),\n      type: \"bar\",\n      data: ctx.yDataMap[key],\n      stack: stacked ? \"total\" : undefined,\n      itemStyle: { borderRadius: [0, 4, 4, 0] },\n      color: ctx.colors[idx % ctx.colors.length],\n    })),\n  };\n}\n\n// ============================================================================\n// Heatmap Chart Option\n// ============================================================================\n\nexport interface HeatmapContext extends OptionBuilderContext {\n  /** Y-axis categories (rows) */\n  yAxisData: (string | number)[];\n  /** Heatmap data as [xIndex, yIndex, value] tuples */\n  heatmapData: [number, number, number][];\n  /** Min value for color scale */\n  min: number;\n  /** Max value for color scale */\n  max: number;\n  /** Show value labels on cells */\n  showLabels: boolean;\n}\n\nexport function buildHeatmapOption(\n  ctx: HeatmapContext,\n): Record<string, unknown> {\n  return {\n    ...buildBaseOption(ctx),\n    tooltip: {\n      trigger: \"item\",\n      formatter: (params: { data: [number, number, number] }) => {\n        const [xIdx, yIdx, value] = params.data;\n        const xLabel = ctx.xData[xIdx] ?? xIdx;\n        const yLabel = ctx.yAxisData[yIdx] ?? yIdx;\n        return `${xLabel}, ${yLabel}: ${value}`;\n      },\n    },\n    grid: {\n      left: \"15%\",\n      right: \"15%\",\n      top: ctx.title ? \"15%\" : \"10%\",\n      bottom: \"15%\",\n    },\n    xAxis: {\n      type: \"category\",\n      data: ctx.xData,\n      splitArea: { show: true },\n      axisLabel: {\n        rotate: ctx.xData.length > 10 ? 45 : 0,\n        formatter: (v: string) => truncateLabel(String(v), 10),\n      },\n    },\n    yAxis: {\n      type: \"category\",\n      data: ctx.yAxisData,\n      splitArea: { show: true },\n      axisLabel: {\n        formatter: (v: string) => truncateLabel(String(v), 12),\n      },\n    },\n    visualMap: {\n      min: ctx.min,\n      max: ctx.max,\n      calculable: true,\n      orient: \"vertical\",\n      right: \"2%\",\n      top: \"center\",\n      inRange: {\n        color: ctx.colors.length >= 2 ? ctx.colors : [\"#f0f0f0\", ctx.colors[0]],\n      },\n    },\n    series: [\n      {\n        type: \"heatmap\",\n        data: ctx.heatmapData,\n        label: {\n          show: ctx.showLabels,\n          formatter: (params: { data: [number, number, number] }) =>\n            String(params.data[2]),\n        },\n        emphasis: {\n          itemStyle: {\n            shadowBlur: 10,\n            shadowColor: \"rgba(0, 0, 0, 0.5)\",\n          },\n        },\n      },\n    ],\n  };\n}\n\n// ============================================================================\n// Cartesian Chart Option (line, bar, area, scatter)\n// ============================================================================\n\nexport function buildCartesianOption(\n  ctx: CartesianContext,\n): Record<string, unknown> {\n  const { chartType, isTimeSeries, stacked, smooth, showSymbol, symbolSize } =\n    ctx;\n  const hasMultipleSeries = ctx.yFields.length > 1;\n  const seriesType = chartType === \"area\" ? \"line\" : chartType;\n\n  return {\n    ...buildBaseOption(ctx),\n    tooltip: { trigger: \"axis\" },\n    legend: ctx.showLegend && hasMultipleSeries ? { top: \"bottom\" } : undefined,\n    grid: {\n      left: \"10%\",\n      right: \"10%\",\n      top: ctx.title ? \"15%\" : \"10%\",\n      bottom: ctx.showLegend && hasMultipleSeries ? \"20%\" : \"15%\",\n    },\n    xAxis: {\n      type: isTimeSeries ? \"time\" : \"category\",\n      data: isTimeSeries ? undefined : ctx.xData,\n      axisLabel: isTimeSeries\n        ? undefined\n        : {\n            rotate: ctx.xData.length > 10 ? 45 : 0,\n            formatter: (v: string) => truncateLabel(String(v), 10),\n          },\n    },\n    yAxis: { type: \"value\" },\n    series: ctx.yFields.map((key, idx) => ({\n      name: formatLabel(key),\n      type: seriesType,\n      data: isTimeSeries\n        ? createTimeSeriesData(ctx.xData, ctx.yDataMap[key])\n        : ctx.yDataMap[key],\n      smooth: chartType === \"line\" || chartType === \"area\" ? smooth : undefined,\n      showSymbol:\n        chartType === \"line\" || chartType === \"area\" ? showSymbol : undefined,\n      symbol: chartType === \"scatter\" ? \"circle\" : undefined,\n      symbolSize: chartType === \"scatter\" ? symbolSize : undefined,\n      areaStyle: chartType === \"area\" ? { opacity: 0.3 } : undefined,\n      stack: stacked && chartType === \"area\" ? \"total\" : undefined,\n      itemStyle:\n        chartType === \"bar\" ? { borderRadius: [4, 4, 0, 0] } : undefined,\n      color: ctx.colors[idx % ctx.colors.length],\n    })),\n  };\n}\n"],"mappings":";;;AA6BA,SAAS,gBAAgB,KAAoD;AAC3E,QAAO;EACL,OAAO,IAAI,QAAQ;GAAE,MAAM,IAAI;GAAO,MAAM;GAAU,GAAG;EACzD,OAAO,IAAI;EACZ;;AAOH,SAAgB,iBACd,KACA,WAAW,MACc;CACzB,MAAM,WAAW,KAAK,IACpB,GAAG,IAAI,QAAQ,SAAS,MAAM,IAAI,SAAS,GAAG,KAAK,MAAM,OAAO,EAAE,IAAI,EAAE,CAAC,CAC1E;AAED,QAAO;EACL,GAAG,gBAAgB,IAAI;EACvB,SAAS,EAAE,SAAS,QAAQ;EAC5B,QACE,IAAI,cAAc,IAAI,QAAQ,SAAS,IAAI,EAAE,KAAK,UAAU,GAAG;EACjE,OAAO;GACL,WAAW,IAAI,MAAM,KAAK,UAAU;IAClC,MAAM,OAAO,KAAK;IAClB,KAAK,WAAW;IACjB,EAAE;GACH,OAAO;GACR;EACD,QAAQ,CACN;GACE,MAAM;GACN,MAAM,IAAI,QAAQ,KAAK,KAAK,SAAS;IACnC,MAAM,YAAY,IAAI;IACtB,OAAO,IAAI,SAAS;IACpB,WAAW,EAAE,OAAO,IAAI,OAAO,MAAM,IAAI,OAAO,SAAS;IACzD,WAAW,WAAW,EAAE,SAAS,IAAK,GAAG;IAC1C,EAAE;GACJ,CACF;EACF;;AAOH,SAAgB,eACd,KACA,WACA,aACA,YACA,eACyB;CACzB,MAAM,UAAU,IAAI,MAAM,KAAK,MAAM,OAAO;EAC1C,MAAM,OAAO,KAAK;EAClB,OAAO,IAAI,SAAS,IAAI,QAAQ,MAAM,MAAM;EAC7C,EAAE;CAEH,MAAM,UAAU,cAAc,WAAW,cAAc;AAEvD,QAAO;EACL,GAAG,gBAAgB,IAAI;EACvB,SAAS;GAAE,SAAS;GAAQ,WAAW;GAAmB;EAC1D,QAAQ,IAAI,aACR;GAAE,QAAQ;GAAY,MAAM;GAAQ,KAAK;GAAU,GACnD;EACJ,QAAQ,CACN;GACE,MAAM;GACN,QAAQ,UAAU,CAAC,GAAG,eAAe,GAAG,IAAI,MAAM,GAAG;GACrD,QAAQ,CAAC,OAAO,MAAM;GACtB,MAAM;GACN,OAAO;IACL,MAAM;IACN,UAAU;IACV,WAAW;IACZ;GACD,UAAU,EACR,WAAW;IACT,YAAY;IACZ,eAAe;IACf,aAAa;IACd,EACF;GACF,CACF;EACF;;AAOH,SAAgB,yBACd,KACA,SACyB;CACzB,MAAM,oBAAoB,IAAI,QAAQ,SAAS;AAE/C,QAAO;EACL,GAAG,gBAAgB,IAAI;EACvB,SAAS;GAAE,SAAS;GAAQ,aAAa,EAAE,MAAM,UAAU;GAAE;EAC7D,QAAQ,IAAI,cAAc,oBAAoB,EAAE,KAAK,UAAU,GAAG;EAClE,MAAM;GACJ,MAAM;GACN,OAAO;GACP,KAAK,IAAI,QAAQ,QAAQ;GACzB,QAAQ,IAAI,cAAc,oBAAoB,QAAQ;GACvD;EACD,OAAO,EAAE,MAAM,SAAS;EACxB,OAAO;GACL,MAAM;GACN,MAAM,IAAI;GACV,WAAW;IACT,OAAO;IACP,UAAU;IACV,YAAY,UAAkB,cAAc,OAAO,MAAM,CAAC;IAC3D;GACF;EACD,QAAQ,IAAI,QAAQ,KAAK,KAAK,SAAS;GACrC,MAAM,YAAY,IAAI;GACtB,MAAM;GACN,MAAM,IAAI,SAAS;GACnB,OAAO,UAAU,UAAU;GAC3B,WAAW,EAAE,cAAc;IAAC;IAAG;IAAG;IAAG;IAAE,EAAE;GACzC,OAAO,IAAI,OAAO,MAAM,IAAI,OAAO;GACpC,EAAE;EACJ;;AAoBH,SAAgB,mBACd,KACyB;AACzB,QAAO;EACL,GAAG,gBAAgB,IAAI;EACvB,SAAS;GACP,SAAS;GACT,YAAY,WAA+C;IACzD,MAAM,CAAC,MAAM,MAAM,SAAS,OAAO;AAGnC,WAAO,GAFQ,IAAI,MAAM,SAAS,KAEjB,IADF,IAAI,UAAU,SAAS,KACV,IAAI;;GAEnC;EACD,MAAM;GACJ,MAAM;GACN,OAAO;GACP,KAAK,IAAI,QAAQ,QAAQ;GACzB,QAAQ;GACT;EACD,OAAO;GACL,MAAM;GACN,MAAM,IAAI;GACV,WAAW,EAAE,MAAM,MAAM;GACzB,WAAW;IACT,QAAQ,IAAI,MAAM,SAAS,KAAK,KAAK;IACrC,YAAY,MAAc,cAAc,OAAO,EAAE,EAAE,GAAG;IACvD;GACF;EACD,OAAO;GACL,MAAM;GACN,MAAM,IAAI;GACV,WAAW,EAAE,MAAM,MAAM;GACzB,WAAW,EACT,YAAY,MAAc,cAAc,OAAO,EAAE,EAAE,GAAG,EACvD;GACF;EACD,WAAW;GACT,KAAK,IAAI;GACT,KAAK,IAAI;GACT,YAAY;GACZ,QAAQ;GACR,OAAO;GACP,KAAK;GACL,SAAS,EACP,OAAO,IAAI,OAAO,UAAU,IAAI,IAAI,SAAS,CAAC,WAAW,IAAI,OAAO,GAAG,EACxE;GACF;EACD,QAAQ,CACN;GACE,MAAM;GACN,MAAM,IAAI;GACV,OAAO;IACL,MAAM,IAAI;IACV,YAAY,WACV,OAAO,OAAO,KAAK,GAAG;IACzB;GACD,UAAU,EACR,WAAW;IACT,YAAY;IACZ,aAAa;IACd,EACF;GACF,CACF;EACF;;AAOH,SAAgB,qBACd,KACyB;CACzB,MAAM,EAAE,WAAW,cAAc,SAAS,QAAQ,YAAY,eAC5D;CACF,MAAM,oBAAoB,IAAI,QAAQ,SAAS;CAC/C,MAAM,aAAa,cAAc,SAAS,SAAS;AAEnD,QAAO;EACL,GAAG,gBAAgB,IAAI;EACvB,SAAS,EAAE,SAAS,QAAQ;EAC5B,QAAQ,IAAI,cAAc,oBAAoB,EAAE,KAAK,UAAU,GAAG;EAClE,MAAM;GACJ,MAAM;GACN,OAAO;GACP,KAAK,IAAI,QAAQ,QAAQ;GACzB,QAAQ,IAAI,cAAc,oBAAoB,QAAQ;GACvD;EACD,OAAO;GACL,MAAM,eAAe,SAAS;GAC9B,MAAM,eAAe,SAAY,IAAI;GACrC,WAAW,eACP,SACA;IACE,QAAQ,IAAI,MAAM,SAAS,KAAK,KAAK;IACrC,YAAY,MAAc,cAAc,OAAO,EAAE,EAAE,GAAG;IACvD;GACN;EACD,OAAO,EAAE,MAAM,SAAS;EACxB,QAAQ,IAAI,QAAQ,KAAK,KAAK,SAAS;GACrC,MAAM,YAAY,IAAI;GACtB,MAAM;GACN,MAAM,eACF,qBAAqB,IAAI,OAAO,IAAI,SAAS,KAAK,GAClD,IAAI,SAAS;GACjB,QAAQ,cAAc,UAAU,cAAc,SAAS,SAAS;GAChE,YACE,cAAc,UAAU,cAAc,SAAS,aAAa;GAC9D,QAAQ,cAAc,YAAY,WAAW;GAC7C,YAAY,cAAc,YAAY,aAAa;GACnD,WAAW,cAAc,SAAS,EAAE,SAAS,IAAK,GAAG;GACrD,OAAO,WAAW,cAAc,SAAS,UAAU;GACnD,WACE,cAAc,QAAQ,EAAE,cAAc;IAAC;IAAG;IAAG;IAAG;IAAE,EAAE,GAAG;GACzD,OAAO,IAAI,OAAO,MAAM,IAAI,OAAO;GACpC,EAAE;EACJ"}

package/dist/react/charts/pie/index.d.ts

@@ -0,0 +1,57 @@
+import { DonutChartProps, PieChartProps } from "../types.js";
+import * as react_jsx_runtime278 from "react/jsx-runtime";
+
+//#region src/react/charts/pie/index.d.ts
+
+/**
+ * Pie Chart component.
+ * Supports both JSON and Arrow data formats with automatic format selection.
+ *
+ * @example Simple usage
+ * ```tsx
+ * <PieChart
+ *   queryKey="market_share"
+ *   parameters={{ category: "tech" }}
+ * />
+ * ```
+ *
+ * @example With custom labels
+ * ```tsx
+ * <PieChart
+ *   queryKey="distribution"
+ *   showLabels={true}
+ *   labelPosition="inside"
+ * />
+ * ```
+ */
+declare const PieChart: {
+  (props: PieChartProps): react_jsx_runtime278.JSX.Element;
+  displayName: string;
+};
+/**
+ * Donut Chart component (Pie chart with inner radius).
+ * Supports both JSON and Arrow data formats with automatic format selection.
+ *
+ * @example Simple usage
+ * ```tsx
+ * <DonutChart
+ *   queryKey="budget_allocation"
+ *   parameters={{ year: 2024 }}
+ * />
+ * ```
+ *
+ * @example Custom inner radius
+ * ```tsx
+ * <DonutChart
+ *   queryKey="progress"
+ *   innerRadius={60}
+ * />
+ * ```
+ */
+declare const DonutChart: {
+  (props: DonutChartProps): react_jsx_runtime278.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { DonutChart, PieChart };
+//# sourceMappingURL=index.d.ts.map

package/dist/react/charts/pie/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/react/charts/pie/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAwBA;;;;;AAsBA;;;;;;;;;;;;;cAtBa;;;;;;;;;;;;;;;;;;;;;;;;cAsBA"}

package/dist/react/charts/pie/index.js

@@ -0,0 +1,50 @@
+import { createChart } from "../create-chart.js";
+
+//#region src/react/charts/pie/index.tsx
+/**
+* Pie Chart component.
+* Supports both JSON and Arrow data formats with automatic format selection.
+*
+* @example Simple usage
+* ```tsx
+* <PieChart
+*   queryKey="market_share"
+*   parameters={{ category: "tech" }}
+* />
+* ```
+*
+* @example With custom labels
+* ```tsx
+* <PieChart
+*   queryKey="distribution"
+*   showLabels={true}
+*   labelPosition="inside"
+* />
+* ```
+*/
+const PieChart = createChart("pie", "PieChart");
+/**
+* Donut Chart component (Pie chart with inner radius).
+* Supports both JSON and Arrow data formats with automatic format selection.
+*
+* @example Simple usage
+* ```tsx
+* <DonutChart
+*   queryKey="budget_allocation"
+*   parameters={{ year: 2024 }}
+* />
+* ```
+*
+* @example Custom inner radius
+* ```tsx
+* <DonutChart
+*   queryKey="progress"
+*   innerRadius={60}
+* />
+* ```
+*/
+const DonutChart = createChart("donut", "DonutChart");
+
+//#endregion
+export { DonutChart, PieChart };
+//# sourceMappingURL=index.js.map

package/dist/react/charts/pie/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/react/charts/pie/index.tsx"],"sourcesContent":["import { createChart } from \"../create-chart\";\nimport type { DonutChartProps, PieChartProps } from \"../types\";\n\n/**\n * Pie Chart component.\n * Supports both JSON and Arrow data formats with automatic format selection.\n *\n * @example Simple usage\n * ```tsx\n * <PieChart\n *   queryKey=\"market_share\"\n *   parameters={{ category: \"tech\" }}\n * />\n * ```\n *\n * @example With custom labels\n * ```tsx\n * <PieChart\n *   queryKey=\"distribution\"\n *   showLabels={true}\n *   labelPosition=\"inside\"\n * />\n * ```\n */\nexport const PieChart = createChart<PieChartProps>(\"pie\", \"PieChart\");\n\n/**\n * Donut Chart component (Pie chart with inner radius).\n * Supports both JSON and Arrow data formats with automatic format selection.\n *\n * @example Simple usage\n * ```tsx\n * <DonutChart\n *   queryKey=\"budget_allocation\"\n *   parameters={{ year: 2024 }}\n * />\n * ```\n *\n * @example Custom inner radius\n * ```tsx\n * <DonutChart\n *   queryKey=\"progress\"\n *   innerRadius={60}\n * />\n * ```\n */\nexport const DonutChart = createChart<DonutChartProps>(\"donut\", \"DonutChart\");\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,WAAW,YAA2B,OAAO,WAAW;;;;;;;;;;;;;;;;;;;;;AAsBrE,MAAa,aAAa,YAA6B,SAAS,aAAa"}

package/dist/react/charts/radar/index.d.ts

@@ -0,0 +1,32 @@
+import { RadarChartProps } from "../types.js";
+import * as react_jsx_runtime280 from "react/jsx-runtime";
+
+//#region src/react/charts/radar/index.d.ts
+
+/**
+ * Radar Chart component.
+ * Supports both JSON and Arrow data formats with automatic format selection.
+ *
+ * @example Simple usage
+ * ```tsx
+ * <RadarChart
+ *   queryKey="skills_assessment"
+ *   parameters={{ userId: "123" }}
+ * />
+ * ```
+ *
+ * @example With custom styling
+ * ```tsx
+ * <RadarChart
+ *   queryKey="performance_metrics"
+ *   showArea={true}
+ * />
+ * ```
+ */
+declare const RadarChart: {
+  (props: RadarChartProps): react_jsx_runtime280.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { RadarChart };
+//# sourceMappingURL=index.d.ts.map

package/dist/react/charts/radar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/react/charts/radar/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAuBA;;;;;;;;;;;;;;;;;cAAa"}

package/dist/react/charts/radar/index.js

@@ -0,0 +1,28 @@
+import { createChart } from "../create-chart.js";
+
+//#region src/react/charts/radar/index.tsx
+/**
+* Radar Chart component.
+* Supports both JSON and Arrow data formats with automatic format selection.
+*
+* @example Simple usage
+* ```tsx
+* <RadarChart
+*   queryKey="skills_assessment"
+*   parameters={{ userId: "123" }}
+* />
+* ```
+*
+* @example With custom styling
+* ```tsx
+* <RadarChart
+*   queryKey="performance_metrics"
+*   showArea={true}
+* />
+* ```
+*/
+const RadarChart = createChart("radar", "RadarChart");
+
+//#endregion
+export { RadarChart };
+//# sourceMappingURL=index.js.map

package/dist/react/charts/radar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/react/charts/radar/index.tsx"],"sourcesContent":["import { createChart } from \"../create-chart\";\nimport type { RadarChartProps } from \"../types\";\n\n/**\n * Radar Chart component.\n * Supports both JSON and Arrow data formats with automatic format selection.\n *\n * @example Simple usage\n * ```tsx\n * <RadarChart\n *   queryKey=\"skills_assessment\"\n *   parameters={{ userId: \"123\" }}\n * />\n * ```\n *\n * @example With custom styling\n * ```tsx\n * <RadarChart\n *   queryKey=\"performance_metrics\"\n *   showArea={true}\n * />\n * ```\n */\nexport const RadarChart = createChart<RadarChartProps>(\"radar\", \"RadarChart\");\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAa,aAAa,YAA6B,SAAS,aAAa"}

package/dist/react/charts/scatter/index.d.ts

@@ -0,0 +1,32 @@
+import { ScatterChartProps } from "../types.js";
+import * as react_jsx_runtime281 from "react/jsx-runtime";
+
+//#region src/react/charts/scatter/index.d.ts
+
+/**
+ * Scatter Chart component.
+ * Supports both JSON and Arrow data formats with automatic format selection.
+ *
+ * @example Simple usage
+ * ```tsx
+ * <ScatterChart
+ *   queryKey="correlation_data"
+ *   parameters={{ metrics: ["revenue", "growth"] }}
+ * />
+ * ```
+ *
+ * @example With custom symbol size
+ * ```tsx
+ * <ScatterChart
+ *   queryKey="data_points"
+ *   symbolSize={12}
+ * />
+ * ```
+ */
+declare const ScatterChart: {
+  (props: ScatterChartProps): react_jsx_runtime281.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { ScatterChart };
+//# sourceMappingURL=index.d.ts.map

package/dist/react/charts/scatter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/react/charts/scatter/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAuBA;;;;;;;;;;;;;;;;;cAAa"}

package/dist/react/charts/scatter/index.js

@@ -0,0 +1,28 @@
+import { createChart } from "../create-chart.js";
+
+//#region src/react/charts/scatter/index.tsx
+/**
+* Scatter Chart component.
+* Supports both JSON and Arrow data formats with automatic format selection.
+*
+* @example Simple usage
+* ```tsx
+* <ScatterChart
+*   queryKey="correlation_data"
+*   parameters={{ metrics: ["revenue", "growth"] }}
+* />
+* ```
+*
+* @example With custom symbol size
+* ```tsx
+* <ScatterChart
+*   queryKey="data_points"
+*   symbolSize={12}
+* />
+* ```
+*/
+const ScatterChart = createChart("scatter", "ScatterChart");
+
+//#endregion
+export { ScatterChart };
+//# sourceMappingURL=index.js.map

package/dist/react/charts/scatter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/react/charts/scatter/index.tsx"],"sourcesContent":["import { createChart } from \"../create-chart\";\nimport type { ScatterChartProps } from \"../types\";\n\n/**\n * Scatter Chart component.\n * Supports both JSON and Arrow data formats with automatic format selection.\n *\n * @example Simple usage\n * ```tsx\n * <ScatterChart\n *   queryKey=\"correlation_data\"\n *   parameters={{ metrics: [\"revenue\", \"growth\"] }}\n * />\n * ```\n *\n * @example With custom symbol size\n * ```tsx\n * <ScatterChart\n *   queryKey=\"data_points\"\n *   symbolSize={12}\n * />\n * ```\n */\nexport const ScatterChart = createChart<ScatterChartProps>(\n  \"scatter\",\n  \"ScatterChart\",\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAa,eAAe,YAC1B,WACA,eACD"}

package/dist/react/charts/theme.d.ts

@@ -0,0 +1,23 @@
+import { ChartColorPalette } from "./types.js";
+
+//#region src/react/charts/theme.d.ts
+
+/**
+ * Hook to get theme colors with automatic updates on theme change.
+ * Re-resolves CSS variables when color scheme or theme attributes change.
+ *
+ * @param palette - Color palette type: "categorical" (default), "sequential", or "diverging"
+ */
+declare function useThemeColors(palette?: ChartColorPalette): string[];
+/**
+ * Hook to get all three color palettes at once.
+ * Useful when a component needs access to multiple palette types.
+ */
+declare function useAllThemeColors(): {
+  categorical: string[];
+  sequential: string[];
+  diverging: string[];
+};
+//#endregion
+export { useAllThemeColors, useThemeColors };
+//# sourceMappingURL=theme.d.ts.map

package/dist/react/charts/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","names":[],"sources":["../../../src/react/charts/theme.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;iBA0FgB,cAAA,WACL;;;;;iBAuCK,iBAAA,CAAA"}

package/dist/react/charts/theme.js

@@ -0,0 +1,96 @@
+import { CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL } from "./constants.js";
+import { useEffect, useState } from "react";
+
+//#region src/react/charts/theme.ts
+const PALETTE_CONFIG = {
+	categorical: {
+		vars: CHART_COLOR_VARS_CATEGORICAL,
+		fallback: FALLBACK_COLORS_CATEGORICAL
+	},
+	sequential: {
+		vars: CHART_COLOR_VARS_SEQUENTIAL,
+		fallback: FALLBACK_COLORS_SEQUENTIAL
+	},
+	diverging: {
+		vars: CHART_COLOR_VARS_DIVERGING,
+		fallback: FALLBACK_COLORS_DIVERGING
+	}
+};
+/**
+* Cache for computed theme colors to avoid repeated CSS variable lookups.
+* Cache is cleared when theme change events fire (MutationObserver/matchMedia).
+*/
+const colorCache = /* @__PURE__ */ new Map();
+/**
+* Clears the theme color cache.
+* Called when theme change events fire, or for testing when mocks change.
+* @internal
+*/
+function resetThemeColorCache() {
+	colorCache.clear();
+}
+/**
+* Gets theme colors with module-level caching.
+* Avoids repeated CSS variable lookups for the same palette within a theme.
+*/
+function getThemeColors(palette = "categorical") {
+	const config = PALETTE_CONFIG[palette];
+	if (typeof window === "undefined") return config.fallback;
+	const cached = colorCache.get(palette);
+	if (cached) return cached;
+	const styles = getComputedStyle(document.documentElement);
+	const colors = [];
+	for (const varName of config.vars) {
+		const value = styles.getPropertyValue(varName).trim();
+		if (value) colors.push(value);
+	}
+	const result = colors.length > 0 ? colors : config.fallback;
+	colorCache.set(palette, result);
+	return result;
+}
+/**
+* Hook to get theme colors with automatic updates on theme change.
+* Re-resolves CSS variables when color scheme or theme attributes change.
+*
+* @param palette - Color palette type: "categorical" (default), "sequential", or "diverging"
+*/
+function useThemeColors(palette = "categorical") {
+	const [colors, setColors] = useState(() => typeof window === "undefined" ? PALETTE_CONFIG[palette].fallback : getThemeColors(palette));
+	useEffect(() => {
+		const updateColors = () => {
+			resetThemeColorCache();
+			setColors(getThemeColors(palette));
+		};
+		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		mediaQuery.addEventListener("change", updateColors);
+		const observer = new MutationObserver(updateColors);
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: [
+				"class",
+				"data-theme",
+				"data-mode"
+			]
+		});
+		return () => {
+			mediaQuery.removeEventListener("change", updateColors);
+			observer.disconnect();
+		};
+	}, [palette]);
+	return colors;
+}
+/**
+* Hook to get all three color palettes at once.
+* Useful when a component needs access to multiple palette types.
+*/
+function useAllThemeColors() {
+	return {
+		categorical: useThemeColors("categorical"),
+		sequential: useThemeColors("sequential"),
+		diverging: useThemeColors("diverging")
+	};
+}
+
+//#endregion
+export { useAllThemeColors, useThemeColors };
+//# sourceMappingURL=theme.js.map

package/dist/react/charts/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":["PALETTE_CONFIG: Record<\n  ChartColorPalette,\n  { vars: readonly string[]; fallback: string[] }\n>","colors: string[]"],"sources":["../../../src/react/charts/theme.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport {\n  CHART_COLOR_VARS_CATEGORICAL,\n  CHART_COLOR_VARS_DIVERGING,\n  CHART_COLOR_VARS_SEQUENTIAL,\n  FALLBACK_COLORS_CATEGORICAL,\n  FALLBACK_COLORS_DIVERGING,\n  FALLBACK_COLORS_SEQUENTIAL,\n} from \"./constants\";\nimport type { ChartColorPalette } from \"./types\";\n\n// ============================================================================\n// Theme Colors (resolved from CSS variables)\n// ============================================================================\n\nconst PALETTE_CONFIG: Record<\n  ChartColorPalette,\n  { vars: readonly string[]; fallback: string[] }\n> = {\n  categorical: {\n    vars: CHART_COLOR_VARS_CATEGORICAL,\n    fallback: FALLBACK_COLORS_CATEGORICAL,\n  },\n  sequential: {\n    vars: CHART_COLOR_VARS_SEQUENTIAL,\n    fallback: FALLBACK_COLORS_SEQUENTIAL,\n  },\n  diverging: {\n    vars: CHART_COLOR_VARS_DIVERGING,\n    fallback: FALLBACK_COLORS_DIVERGING,\n  },\n};\n\n// ============================================================================\n// Module-Level Caching\n// ============================================================================\n\n/**\n * Cache for computed theme colors to avoid repeated CSS variable lookups.\n * Cache is cleared when theme change events fire (MutationObserver/matchMedia).\n */\nconst colorCache = new Map<string, string[]>();\n\n/**\n * Clears the theme color cache.\n * Called when theme change events fire, or for testing when mocks change.\n * @internal\n */\nexport function resetThemeColorCache(): void {\n  colorCache.clear();\n}\n\n/**\n * Gets theme colors with module-level caching.\n * Avoids repeated CSS variable lookups for the same palette within a theme.\n */\nfunction getThemeColors(palette: ChartColorPalette = \"categorical\"): string[] {\n  const config = PALETTE_CONFIG[palette];\n\n  if (typeof window === \"undefined\") return config.fallback;\n\n  // Return cached colors if available\n  const cached = colorCache.get(palette);\n  if (cached) {\n    return cached;\n  }\n\n  // Compute colors from CSS variables\n  const styles = getComputedStyle(document.documentElement);\n  const colors: string[] = [];\n\n  for (const varName of config.vars) {\n    const value = styles.getPropertyValue(varName).trim();\n    if (value) colors.push(value);\n  }\n\n  const result = colors.length > 0 ? colors : config.fallback;\n\n  // Cache the result\n  colorCache.set(palette, result);\n\n  return result;\n}\n\n/**\n * Hook to get theme colors with automatic updates on theme change.\n * Re-resolves CSS variables when color scheme or theme attributes change.\n *\n * @param palette - Color palette type: \"categorical\" (default), \"sequential\", or \"diverging\"\n */\nexport function useThemeColors(\n  palette: ChartColorPalette = \"categorical\",\n): string[] {\n  const [colors, setColors] = useState<string[]>(() =>\n    typeof window === \"undefined\"\n      ? PALETTE_CONFIG[palette].fallback\n      : getThemeColors(palette),\n  );\n\n  useEffect(() => {\n    // Clear cache and re-fetch colors when theme changes\n    const updateColors = () => {\n      resetThemeColorCache();\n      setColors(getThemeColors(palette));\n    };\n\n    // Listen for system color scheme changes\n    const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n    mediaQuery.addEventListener(\"change\", updateColors);\n\n    // Listen for theme attribute changes (e.g., class=\"dark\", data-theme=\"dark\")\n    const observer = new MutationObserver(updateColors);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\", \"data-mode\"],\n    });\n\n    return () => {\n      mediaQuery.removeEventListener(\"change\", updateColors);\n      observer.disconnect();\n    };\n  }, [palette]);\n\n  return colors;\n}\n\n/**\n * Hook to get all three color palettes at once.\n * Useful when a component needs access to multiple palette types.\n */\nexport function useAllThemeColors(): {\n  categorical: string[];\n  sequential: string[];\n  diverging: string[];\n} {\n  const categorical = useThemeColors(\"categorical\");\n  const sequential = useThemeColors(\"sequential\");\n  const diverging = useThemeColors(\"diverging\");\n\n  return { categorical, sequential, diverging };\n}\n"],"mappings":";;;;AAeA,MAAMA,iBAGF;CACF,aAAa;EACX,MAAM;EACN,UAAU;EACX;CACD,YAAY;EACV,MAAM;EACN,UAAU;EACX;CACD,WAAW;EACT,MAAM;EACN,UAAU;EACX;CACF;;;;;AAUD,MAAM,6BAAa,IAAI,KAAuB;;;;;;AAO9C,SAAgB,uBAA6B;AAC3C,YAAW,OAAO;;;;;;AAOpB,SAAS,eAAe,UAA6B,eAAyB;CAC5E,MAAM,SAAS,eAAe;AAE9B,KAAI,OAAO,WAAW,YAAa,QAAO,OAAO;CAGjD,MAAM,SAAS,WAAW,IAAI,QAAQ;AACtC,KAAI,OACF,QAAO;CAIT,MAAM,SAAS,iBAAiB,SAAS,gBAAgB;CACzD,MAAMC,SAAmB,EAAE;AAE3B,MAAK,MAAM,WAAW,OAAO,MAAM;EACjC,MAAM,QAAQ,OAAO,iBAAiB,QAAQ,CAAC,MAAM;AACrD,MAAI,MAAO,QAAO,KAAK,MAAM;;CAG/B,MAAM,SAAS,OAAO,SAAS,IAAI,SAAS,OAAO;AAGnD,YAAW,IAAI,SAAS,OAAO;AAE/B,QAAO;;;;;;;;AAST,SAAgB,eACd,UAA6B,eACnB;CACV,MAAM,CAAC,QAAQ,aAAa,eAC1B,OAAO,WAAW,cACd,eAAe,SAAS,WACxB,eAAe,QAAQ,CAC5B;AAED,iBAAgB;EAEd,MAAM,qBAAqB;AACzB,yBAAsB;AACtB,aAAU,eAAe,QAAQ,CAAC;;EAIpC,MAAM,aAAa,OAAO,WAAW,+BAA+B;AACpE,aAAW,iBAAiB,UAAU,aAAa;EAGnD,MAAM,WAAW,IAAI,iBAAiB,aAAa;AACnD,WAAS,QAAQ,SAAS,iBAAiB;GACzC,YAAY;GACZ,iBAAiB;IAAC;IAAS;IAAc;IAAY;GACtD,CAAC;AAEF,eAAa;AACX,cAAW,oBAAoB,UAAU,aAAa;AACtD,YAAS,YAAY;;IAEtB,CAAC,QAAQ,CAAC;AAEb,QAAO;;;;;;AAOT,SAAgB,oBAId;AAKA,QAAO;EAAE,aAJW,eAAe,cAAc;EAI3B,YAHH,eAAe,aAAa;EAGb,WAFhB,eAAe,YAAY;EAEA"}