@rowsncolumns/charts 28.1.14 → 28.1.15

package/dist/esm/components/editors/chart-editor.js

@@ -1,17 +1,24 @@
 import { BarChartIcon, ChevronRightIcon, CrossCircledIcon, TriangleDownIcon, } from "@rowsncolumns/icons";
 import { defaultCellCoords } from "@rowsncolumns/spreadsheet-state";
-import { Button, DropdownLeftSlot, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownRightSlot, IconButton, Input, Stack, Tabs, TabsList, TabsTrigger, TabsContent, } from "@rowsncolumns/ui";
+import { Button, DropdownLeftSlot, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownRightSlot, IconButton, Input, Stack, Tabs, TabsContent, TabsList, TabsTrigger, } from "@rowsncolumns/ui";
 import { DropdownMenu } from "@rowsncolumns/ui";
 import { DropdownMenuTrigger } from "@rowsncolumns/ui";
+import { uuid } from "@rowsncolumns/utils";
 import { useFormik } from "formik";
 import React, { useMemo } from "react";
 import { useSetChartEditorDialogState } from "../../atoms/editing-chart.atom";
-import { ChartRangeInput } from "./chart-range-input";
 import { CHART_TYPES, getChartPresetLabel } from "../../config";
-import { uuid } from "@rowsncolumns/utils";
 import { canSwitchRowColumn, inferSeriesOrientation, switchRowColumn, } from "../../utils/chart-orientation";
 import { isBasicChartSpec, isBubbleChartSpec, isHierarchyChartSpec, mergeChartSpec, } from "../../utils/chart-spec-utils";
 import { applyChartColorPalette, applyChartQuickLayout, applyChartStyle, CHART_COLOR_PALETTES, CHART_QUICK_LAYOUTS, CHART_STYLES, resetChartToMatchStyle, } from "../../utils/chart-styles";
+import { getChartEditorCapabilities } from "./chart-editor-capabilities";
+import { ChartRangeInput } from "./chart-range-input";
+import { AxisOptionsFields } from "./fields/axis-options-fields";
+import { chartTypeHasOptions, ChartTypeOptionsFields, } from "./fields/chart-type-options";
+import { DataLabelsFields } from "./fields/data-labels-fields";
+import { SeriesFormatFields } from "./fields/series-format-fields";
+import { SeriesNameField } from "./fields/series-name-field";
+import { TextFormatFields } from "./fields/text-format-fields";
 const AGGREGATE_OPTIONS = [
     { label: "Sum", value: "SUM" },
     { label: "Average", value: "AVERAGE" },
@@ -84,58 +91,118 @@ export const ChartEditor = ({ chart, sheetId, onSubmit, onRequestMoveChart, getF
         resetForm();
         closeDialog();
     };
-    const basicSpec = isBasicChartSpec(values.spec) ? values.spec : undefined;
-    const bubbleSpec = isBubbleChartSpec(values.spec) ? values.spec : undefined;
-    const treemapSpec = isHierarchyChartSpec(values.spec)
-        ? values.spec
+    const spec = values.spec;
+    const basicSpec = isBasicChartSpec(spec) ? spec : undefined;
+    const bubbleSpec = isBubbleChartSpec(spec) ? spec : undefined;
+    const treemapSpec = isHierarchyChartSpec(spec)
+        ? spec
         : undefined;
-    // Cartesian (XY) chart types have value/category axes; circular and
-    // polar/derived types (pie/doughnut/radar) do not, so the axis-scale
-    // controls are gated to these.
-    const isCartesianBasic = basicSpec
-        ? basicSpec.chartType !== "pie" &&
-            basicSpec.chartType !== "doughnut" &&
-            basicSpec.chartType !== "radar"
-        : false;
-    // Bar/column-only features. gapWidth is consumed by both renderers
-    // (echarts barCategoryGap / plotly bargap); overlap by echarts
-    // (barGap).
-    const isBarOrColumnBasic = basicSpec
-        ? basicSpec.chartType === "bar" || basicSpec.chartType === "column"
-        : false;
-    // Customize → "Chart options": each control names the chart types it
-    // applies to and the section renders when any of them does, so a chart type
-    // is never left out by a separately maintained list (pie was, until #783).
-    const chartOptionControls = {
-        binCount: basicSpec?.chartType === "histogram",
-        radarStyle: basicSpec?.chartType === "radar",
-        stockVariant: basicSpec?.chartType === "stock",
-        doughnutHoleSize: basicSpec?.chartType === "doughnut",
-        explosion: basicSpec?.chartType === "pie" || basicSpec?.chartType === "doughnut",
-        gapWidth: isBarOrColumnBasic,
-        overlap: isBarOrColumnBasic,
-    };
-    const showChartOptions = Object.values(chartOptionControls).some(Boolean);
-    // Check aggregate
-    const isAggregateType = basicSpec
-        ? basicSpec.series.some((serie) => serie.aggregateType)
-        : false;
-    const bubbleAggregateEnabled = bubbleSpec
-        ? bubbleSpec.series.some((serie) => serie.aggregateType)
-        : false;
-    const renderChartDataSection = (label, field, data, helperText) => {
-        const sections = data.length > 0 ? data : [{ sources: [] }];
+    // Which controls this chart type has — Excel's rule set, so an option is
+    // only offered where the chart (and the renderers) honour it (#1102).
+    const caps = getChartEditorCapabilities(spec);
+    // The series of a basic or bubble chart. Guarded: a spec converted from
+    // another category used to arrive without `series` and crash the editor
+    // on `series.some` (#1101).
+    const seriesList = basicSpec
+        ? basicSpec.series ?? []
+        : bubbleSpec
+            ? bubbleSpec.series ?? []
+            : [];
+    const domainsList = basicSpec
+        ? basicSpec.domains ?? []
+        : bubbleSpec
+            ? bubbleSpec.domains ?? []
+            : [];
+    const isAggregateType = seriesList.some((serie) => serie.aggregateType);
+    const setSeries = (index, patch) => setFieldValue(`spec.series[${index}]`, { ...seriesList[index], ...patch });
+    const hasSeriesFormat = caps.hasSecondaryAxis ||
+        caps.hasTrendlines ||
+        caps.hasErrorBars ||
+        caps.hasSeriesFill ||
+        caps.hasInvertIfNegative ||
+        caps.hasMarkers ||
+        caps.hasPointColors ||
+        caps.hasDataLabels;
+    const categoryLevels = basicSpec?.categoryLevels ?? [];
+    const hasTypeOptions = chartTypeHasOptions(spec, caps);
+    const renderChartDataSection = (label, field, data, helperText, levels) => {
+        // A levelled section (parent labels, category levels) starts empty and
+        // grows with "Add level"; a plain section always shows one input.
+        const sections = data.length > 0 ? data : levels ? [] : [{ sources: [] }];
         return (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3" },
             React.createElement("label", { className: "font-system text-sm" }, label),
             helperText ? (React.createElement("p", { className: "m-0 text-xs text-rnc-text-weak" }, helperText)) : null,
             sections.map((domain, i) => {
                 const sources = domain.sources.length > 0 ? domain.sources : [undefined];
-                return sources.map((source, idx) => (React.createElement("div", { key: `${values.chartId}-${label}-${sections.length}-${i}-${idx}` },
+                return sources.map((source, idx) => (React.createElement("div", { key: `${values.chartId}-${label}-${sections.length}-${i}-${idx}`, className: "flex items-center gap-1" },
                     React.createElement(ChartRangeInput, { sheetId: sheetId, range: source, onChangeRange: (range) => {
                             setFieldValue(`spec.${field}[${i}].sources[${idx}]`, range);
-                        }, required: true, placeholder: "Select a range", className: "mb-0 flex-1" }))));
-            })));
+                        }, required: true, placeholder: "Select a range", className: "mb-0 flex-1" }),
+                    levels && data.length > 1 ? (React.createElement(IconButton, { type: "button", "aria-label": `${levels.removeLabel} ${i + 1}`, title: levels.removeLabel, onClick: () => setFieldValue(`spec.${field}`, data.filter((_, levelIndex) => levelIndex !== i)) },
+                        React.createElement(CrossCircledIcon, null))) : null)));
+            }),
+            levels ? (React.createElement("div", null,
+                React.createElement(Button, { variant: "link", type: "button", className: "cursor-pointer", onClick: () => setFieldValue(`spec.${field}`, [...data, { sources: [] }]) }, levels.addLabel))) : null));
     };
+    const renderSeriesCard = (entry, i) => {
+        const sources = entry.sources?.length > 0 ? entry.sources : [undefined];
+        return sources.map((source, idx) => (React.createElement("div", { className: "border border-rnc-border border-solid p-2 relative", key: `${values.chartId}-series-${seriesList.length}-${i}-${idx}` },
+            React.createElement("div", { className: "flex gap-2 items-start flex-wrap" },
+                React.createElement(SeriesNameField, { sheetId: sheetId, series: entry, getFormattedValue: getFormattedValue, onChange: (patch) => setSeries(i, patch) }),
+                React.createElement(Stack, { direction: "vertical", className: "gap-1 flex-1" },
+                    React.createElement("label", { className: "font-system text-sm" }, "Y values"),
+                    React.createElement(ChartRangeInput, { sheetId: sheetId, range: source, onChangeRange: (range) => {
+                            setFieldValue(`spec.series[${i}].sources[${idx}]`, range);
+                        }, required: true, placeholder: "Select a range", className: "mb-0" })),
+                React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2 w-20" },
+                    React.createElement("label", { className: "font-system text-sm" }, "Color"),
+                    React.createElement("div", { className: "flex items-center gap-1" },
+                        React.createElement("input", { type: "color", value: entry.color ?? "#4285F4", "aria-label": `Series ${i + 1} color`, onChange: (e) => setSeries(i, { color: e.target.value }), className: "h-6 w-8 p-0 border border-rnc-border rounded-sm bg-transparent cursor-pointer" }),
+                        entry.color ? (React.createElement(IconButton, { type: "button", "aria-label": `Clear series ${i + 1} color`, title: "Automatic color", onClick: () => setSeries(i, { color: undefined }) },
+                            React.createElement(CrossCircledIcon, null))) : null)),
+                isAggregateType ? (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2 w-32" },
+                    React.createElement("label", { className: "font-system text-sm" }, "Aggregate type"),
+                    React.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", value: entry.aggregateType ?? "", onChange: (event) => {
+                            const aggregateType = event.target.value;
+                            setSeries(i, { aggregateType: aggregateType || undefined });
+                        } },
+                        React.createElement("option", { value: "" }, "None"),
+                        AGGREGATE_OPTIONS.map((option) => (React.createElement("option", { key: option.value, value: option.value }, option.label)))))) : null,
+                caps.hasSeriesChartType ? (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2 w-28" },
+                    React.createElement("label", { className: "font-system text-sm" }, "Series type"),
+                    React.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", value: entry.seriesChartType ?? "", "aria-label": `Series ${i + 1} type`, onChange: (event) => setSeries(i, {
+                            seriesChartType: (event.target.value || undefined),
+                        }) },
+                        React.createElement("option", { value: "" }, "Default"),
+                        React.createElement("option", { value: "column" }, "Column"),
+                        React.createElement("option", { value: "bar" }, "Bar"),
+                        React.createElement("option", { value: "line" }, "Line"),
+                        React.createElement("option", { value: "area" }, "Area")))) : null),
+            hasSeriesFormat ? (React.createElement("details", { className: "mt-2 group/fmt" },
+                React.createElement("summary", { className: "cursor-pointer list-none py-1 font-system text-xs text-rnc-muted-foreground select-none [&::-webkit-details-marker]:hidden flex items-center gap-1" },
+                    React.createElement(ChevronRightIcon, { className: "transition-transform group-open/fmt:rotate-90" }),
+                    "Format"),
+                React.createElement(SeriesFormatFields, { sheetId: sheetId, series: entry, capabilities: caps, onChange: (patch) => setSeries(i, patch) }))) : null,
+            React.createElement(IconButton, { className: "absolute right-1 top-1", type: "button", "aria-label": `Remove series ${i + 1}`, onClick: () => setFieldValue("spec.series", seriesList.filter((_, seriesIndex) => seriesIndex !== i)) },
+                React.createElement(CrossCircledIcon, null)))));
+    };
+    const renderSeriesList = () => (React.createElement(Stack, { direction: "vertical", className: "gap-2 pb-2" },
+        React.createElement("label", { className: "font-system text-sm" }, "Legend entries (series)"),
+        seriesList.map(renderSeriesCard),
+        React.createElement("div", { className: "py-1" },
+            React.createElement(Button, { variant: "link", type: "button", className: "cursor-pointer", onClick: () => {
+                    const lastSeries = seriesList[seriesList.length - 1];
+                    setFieldValue("spec.series", [
+                        ...seriesList,
+                        {
+                            sources: lastSeries
+                                ? lastSeries.sources
+                                : spec.dataRange
+                                    ? [spec.dataRange]
+                                    : [],
+                        },
+                    ]);
+                } }, "Add series"))));
     return (React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col" },
         React.createElement(Tabs, { defaultValue: "setup", className: "w-full" },
             React.createElement(TabsList, { className: "grid-cols-2" },
@@ -187,252 +254,48 @@ export const ChartEditor = ({ chart, sheetId, onSubmit, onRequestMoveChart, getF
                 basicSpec ? (React.createElement(React.Fragment, null,
                     React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
                         React.createElement("label", { className: "font-system text-sm" }, "Horizontal (category) axis labels"),
-                        (basicSpec.domains ?? []).map((domain, i) => {
-                            return domain.sources.map((source, idx) => {
-                                return (React.createElement(ChartRangeInput, { key: `${values.chartId}-domains-${basicSpec.domains.length}-${i}-${idx}`, sheetId: sheetId, range: source, onChangeRange: (range) => {
+                        domainsList.map((domain, i) => {
+                            return (domain.sources ?? []).map((source, idx) => {
+                                return (React.createElement(ChartRangeInput, { key: `${values.chartId}-domains-${domainsList.length}-${i}-${idx}`, sheetId: sheetId, range: source, onChangeRange: (range) => {
                                         setFieldValue(`spec.domains[${i}].sources[${idx}]`, range);
                                     }, required: true, placeholder: "Select a range", className: "mb-0" }));
                             });
                         })),
-                    React.createElement("label", { className: "font-system text-sm flex items-center gap-1 pb-2" },
-                        React.createElement("input", { type: "checkbox", checked: isAggregateType, name: "showColumnStripes", onChange: (e) => {
-                                const nextSeries = basicSpec.series.map((serie) => ({
-                                    ...serie,
-                                    aggregateType: e.target.checked ? "SUM" : undefined,
-                                }));
-                                setFieldValue("spec.series", nextSeries);
-                            } }),
-                        "Aggregate"),
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Legend entries (series)"),
-                        basicSpec.series.map((domain, i) => {
-                            return domain.sources.map((source, idx) => {
-                                return (React.createElement("div", { className: "border border-rnc-border border-solid p-2 relative", key: `${values.chartId}-series-${basicSpec.series.length}-${i}-${idx}` },
-                                    React.createElement("div", { className: "flex gap-2 " },
-                                        React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
-                                            React.createElement("label", { className: "font-system text-sm" }, "Name"),
-                                            React.createElement(Input, { value: domain.dataLabel ?? "", type: "text", name: "fromValue", onChange: (e) => setFieldValue(`spec.series[${i}].dataLabel`, e.target.value), className: "text-xs", placeholder: "Enter value" })),
-                                        React.createElement(Stack, { direction: "vertical", className: "gap-1 flex-1" },
-                                            React.createElement("label", { className: "font-system text-sm" }, "Y values"),
-                                            React.createElement(ChartRangeInput, { sheetId: sheetId, range: source, onChangeRange: (range) => {
-                                                    setFieldValue(`spec.series[${i}].sources[${idx}]`, range);
-                                                }, required: true, placeholder: "Select a range", className: "mb-0" })),
-                                        React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2 w-20" },
-                                            React.createElement("label", { className: "font-system text-sm" }, "Color"),
-                                            React.createElement("div", { className: "flex items-center gap-1" },
-                                                React.createElement("input", { type: "color", value: domain.color ?? "#4285F4", onChange: (e) => setFieldValue(`spec.series[${i}].color`, e.target.value), className: "h-6 w-8 p-0 border border-rnc-border rounded-sm bg-transparent cursor-pointer", "aria-label": "Series color" }),
-                                                domain.color ? (React.createElement(IconButton, { type: "button", onClick: () => setFieldValue(`spec.series[${i}].color`, undefined), "aria-label": "Clear series color" },
-                                                    React.createElement(CrossCircledIcon, null))) : null)),
-                                        isAggregateType ? (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2 w-32" },
-                                            React.createElement("label", { className: "font-system text-sm" }, "Aggregate type"),
-                                            React.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", value: domain.aggregateType ?? "", onChange: (event) => {
-                                                    const aggregateType = event.target.value;
-                                                    setFieldValue(`spec.series[${i}].aggregateType`, aggregateType || undefined);
-                                                } },
-                                                React.createElement("option", { value: "" }, "None"),
-                                                AGGREGATE_OPTIONS.map((option) => (React.createElement("option", { key: option.value, value: option.value }, option.label)))))) : null,
-                                        basicSpec.chartType === "combo" ? (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2 w-32" },
-                                            React.createElement("label", { className: "font-system text-sm" }, "Series type"),
-                                            React.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", value: domain.seriesChartType ?? "bar", onChange: (event) => {
-                                                    setFieldValue(`spec.series[${i}].seriesChartType`, event.target.value || undefined);
-                                                } },
-                                                React.createElement("option", { value: "bar" }, "Bar"),
-                                                React.createElement("option", { value: "column" }, "Column"),
-                                                React.createElement("option", { value: "line" }, "Line"),
-                                                React.createElement("option", { value: "area" }, "Area")))) : null),
-                                    basicSpec.chartType !== "pie" &&
-                                        basicSpec.chartType !== "doughnut" &&
-                                        basicSpec.chartType !== "radar" &&
-                                        basicSpec.chartType !== "stock" ? (React.createElement("details", { className: "mt-2 group/fmt" },
-                                        React.createElement("summary", { className: "cursor-pointer list-none py-1 font-system text-xs text-rnc-muted-foreground select-none [&::-webkit-details-marker]:hidden flex items-center gap-1" },
-                                            React.createElement(ChevronRightIcon, { className: "transition-transform group-open/fmt:rotate-90" }),
-                                            "Format"),
-                                        React.createElement("div", { className: "flex flex-col gap-2 pt-2 border border-rnc-border border-solid mt-2" },
-                                            React.createElement("label", { className: "font-system text-sm flex items-center gap-1" },
-                                                React.createElement("input", { type: "checkbox", checked: !!domain.useSecondaryAxis, onChange: (e) => setFieldValue(`spec.series[${i}].useSecondaryAxis`, e.target.checked || undefined) }),
-                                                "Plot on secondary axis"),
-                                            React.createElement("div", { className: "flex items-center gap-2" },
-                                                React.createElement("label", { className: "font-system text-sm flex items-center gap-1" },
-                                                    React.createElement("input", { type: "checkbox", checked: (domain.trendlines?.length ?? 0) > 0, onChange: (e) => setFieldValue(`spec.series[${i}].trendlines`, e.target.checked
-                                                            ? [
-                                                                domain.trendlines?.[0] ?? {
-                                                                    type: "linear",
-                                                                },
-                                                            ]
-                                                            : undefined) }),
-                                                    "Trendline"),
-                                                (domain.trendlines?.length ?? 0) > 0 ? (React.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", value: domain.trendlines?.[0]?.type ?? "linear", onChange: (event) => setFieldValue(`spec.series[${i}].trendlines[0]`, {
-                                                        ...(domain.trendlines?.[0] ?? {}),
-                                                        type: event.target.value,
-                                                        ...(event.target.value === "poly"
-                                                            ? {
-                                                                order: domain.trendlines?.[0]
-                                                                    ?.order ?? 2,
-                                                            }
-                                                            : {}),
-                                                    }) },
-                                                    React.createElement("option", { value: "linear" }, "Linear"),
-                                                    React.createElement("option", { value: "poly" }, "Polynomial"),
-                                                    React.createElement("option", { value: "exp" }, "Exponential"),
-                                                    React.createElement("option", { value: "log" }, "Logarithmic"))) : null),
-                                            React.createElement("div", { className: "flex items-center gap-2 flex-wrap" },
-                                                React.createElement("label", { className: "font-system text-sm flex items-center gap-1" },
-                                                    React.createElement("input", { type: "checkbox", checked: !!domain.errorBars, onChange: (e) => setFieldValue(`spec.series[${i}].errorBars`, e.target.checked
-                                                            ? domain.errorBars ?? {
-                                                                valueType: "percentage",
-                                                                value: 5,
-                                                            }
-                                                            : undefined) }),
-                                                    "Error bars"),
-                                                domain.errorBars ? (React.createElement(React.Fragment, null,
-                                                    React.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", value: domain.errorBars?.valueType ??
-                                                            "percentage", onChange: (event) => setFieldValue(`spec.series[${i}].errorBars`, {
-                                                            ...(domain.errorBars ?? {}),
-                                                            valueType: event.target.value,
-                                                        }) },
-                                                        React.createElement("option", { value: "fixedVal" }, "Fixed"),
-                                                        React.createElement("option", { value: "percentage" }, "Percentage"),
-                                                        React.createElement("option", { value: "stdDev" }, "Std deviation"),
-                                                        React.createElement("option", { value: "stdErr" }, "Std error")),
-                                                    domain.errorBars?.valueType !==
-                                                        "stdErr" ? (React.createElement(Input, { type: "number", value: domain.errorBars?.value ?? "", onChange: (e) => setFieldValue(`spec.series[${i}].errorBars`, {
-                                                            ...(domain.errorBars ?? {}),
-                                                            value: e.target.value === ""
-                                                                ? undefined
-                                                                : Number(e.target.value),
-                                                        }), className: "text-xs w-20", placeholder: "Value" })) : null)) : null),
-                                            React.createElement("label", { className: "font-system text-sm flex items-center gap-1" },
-                                                React.createElement("input", { type: "checkbox", checked: !!domain.gradient, onChange: (e) => setFieldValue(`spec.series[${i}].gradient`, e.target.checked
-                                                        ? domain.gradient ?? {
-                                                            type: "linear",
-                                                            degree: 90,
-                                                            stops: [
-                                                                {
-                                                                    position: 0,
-                                                                    color: domain.color ?? "#4285F4",
-                                                                },
-                                                                {
-                                                                    position: 1,
-                                                                    color: "#FFFFFF",
-                                                                },
-                                                            ],
-                                                        }
-                                                        : undefined) }),
-                                                "Gradient fill")))) : null,
-                                    React.createElement(IconButton, { className: "absolute right-1 top-1", type: "button", onClick: () => {
-                                            const currentSeries = basicSpec.series;
-                                            setFieldValue("spec.series", currentSeries.filter((_, seriesIndex) => seriesIndex !== i));
-                                        } },
-                                        React.createElement(CrossCircledIcon, null))));
-                            });
-                        }),
-                        React.createElement("div", { className: "py-1" },
-                            React.createElement(Button, { variant: "link", onClick: () => {
-                                    const nextSeries = basicSpec.series;
-                                    const lastSeries = nextSeries[nextSeries.length - 1];
-                                    setFieldValue("spec.series", [
-                                        ...nextSeries,
-                                        {
-                                            sources: lastSeries
-                                                ? lastSeries.sources
-                                                : values.spec.dataRange
-                                                    ? [values.spec.dataRange]
-                                                    : [],
-                                        },
-                                    ]);
-                                }, type: "button", className: "cursor-pointer" }, "Add series"))))) : null,
+                    caps.hasCategoryLevels ? (React.createElement("details", { className: "pb-2" },
+                        React.createElement("summary", { className: "cursor-pointer list-none font-system text-xs text-rnc-muted-foreground select-none [&::-webkit-details-marker]:hidden" },
+                            "Category axis levels",
+                            categoryLevels.length ? ` (${categoryLevels.length})` : ""),
+                        renderChartDataSection("Category axis levels", "categoryLevels", categoryLevels, "One range per level, outermost first; the last level is the plotted categories.", { addLabel: "Add level", removeLabel: "Remove level" }))) : null)) : null,
                 bubbleSpec ? (React.createElement(React.Fragment, null,
                     React.createElement("label", { className: "font-system text-sm flex items-center gap-1 pb-2" },
-                        React.createElement("input", { type: "checkbox", checked: bubbleAggregateEnabled, onChange: (e) => {
-                                const nextSeries = bubbleSpec.series.map((serie) => ({
+                        React.createElement("input", { type: "checkbox", checked: bubbleSpec.useFirstRowAsHeaders !== false, onChange: (e) => setFieldValue("spec.useFirstRowAsHeaders", e.target.checked) }),
+                        "Use first row as headers"),
+                    bubbleSpec.chartType === "bubble"
+                        ? renderChartDataSection("Bubble labels", "bubbleLabels", bubbleSpec.bubbleLabels ?? [], "Select the cells containing labels for each bubble.")
+                        : null,
+                    renderChartDataSection("X values", "domains", domainsList, "Choose the numeric values for the horizontal axis."),
+                    bubbleSpec.chartType === "bubble"
+                        ? renderChartDataSection("Bubble sizes", "bubbleSizes", bubbleSpec.bubbleSizes ?? [], "Choose the numeric values that size each bubble.")
+                        : null)) : null,
+                basicSpec || bubbleSpec ? (React.createElement(React.Fragment, null,
+                    React.createElement("label", { className: "font-system text-sm flex items-center gap-1 pb-2" },
+                        React.createElement("input", { type: "checkbox", checked: isAggregateType, name: "showColumnStripes", onChange: (e) => {
+                                const nextSeries = seriesList.map((serie) => ({
                                     ...serie,
                                     aggregateType: e.target.checked ? "SUM" : undefined,
                                 }));
                                 setFieldValue("spec.series", nextSeries);
                             } }),
                         "Aggregate"),
-                    React.createElement("label", { className: "font-system text-sm flex items-center gap-1 pb-2" },
-                        React.createElement("input", { type: "checkbox", checked: bubbleSpec.useFirstRowAsHeaders !== false, onChange: (e) => setFieldValue("spec.useFirstRowAsHeaders", e.target.checked) }),
-                        "Use first row as headers"),
-                    bubbleSpec.chartType === "bubble"
-                        ? renderChartDataSection("Bubble labels", "bubbleLabels", bubbleSpec.bubbleLabels ?? [], "Select the cells containing labels for each bubble.")
-                        : null,
-                    renderChartDataSection("X values", "domains", bubbleSpec.domains ?? [], "Choose the numeric values for the horizontal axis."),
-                    React.createElement(Stack, { direction: "vertical", className: "gap-2 pb-2" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Legend entries (series)"),
-                        bubbleSpec.series.map((seriesEntry, i) => {
-                            const sources = seriesEntry.sources.length > 0
-                                ? seriesEntry.sources
-                                : [undefined];
-                            return sources.map((source, idx) => (React.createElement("div", { className: "border border-rnc-border border-solid p-2 relative", key: `${values.chartId}-bubble-series-${bubbleSpec.series.length}-${i}-${idx}` },
-                                React.createElement("div", { className: "flex gap-2 items-start" },
-                                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
-                                        React.createElement("label", { className: "font-system text-sm" }, "Name"),
-                                        React.createElement(Input, { value: seriesEntry.dataLabel ?? "", type: "text", onChange: (e) => setFieldValue(`spec.series[${i}].dataLabel`, e.target.value), className: "text-xs", placeholder: "Enter label" })),
-                                    React.createElement(Stack, { direction: "vertical", className: "gap-1 flex-1" },
-                                        React.createElement("label", { className: "font-system text-sm" }, "Y values"),
-                                        React.createElement(ChartRangeInput, { sheetId: sheetId, range: source, onChangeRange: (range) => {
-                                                setFieldValue(`spec.series[${i}].sources[${idx}]`, range);
-                                            }, required: true, placeholder: "Select a range", className: "mb-0 flex-1" })),
-                                    bubbleSpec.chartType === "scatter" ? (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2 w-24" },
-                                        React.createElement("label", { className: "font-system text-sm" }, "Marker"),
-                                        React.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", value: seriesEntry.marker?.symbol ?? "", onChange: (event) => setFieldValue(`spec.series[${i}].marker`, {
-                                                ...(seriesEntry.marker ?? {}),
-                                                symbol: event.target.value || undefined,
-                                            }) },
-                                            React.createElement("option", { value: "" }, "Auto"),
-                                            React.createElement("option", { value: "circle" }, "Circle"),
-                                            React.createElement("option", { value: "square" }, "Square"),
-                                            React.createElement("option", { value: "diamond" }, "Diamond"),
-                                            React.createElement("option", { value: "triangle" }, "Triangle"),
-                                            React.createElement("option", { value: "x" }, "X"),
-                                            React.createElement("option", { value: "plus" }, "Plus"),
-                                            React.createElement("option", { value: "star" }, "Star"),
-                                            React.createElement("option", { value: "none" }, "None")),
-                                        React.createElement("label", { className: "font-system text-xs" }, "Marker size"),
-                                        React.createElement(Input, { type: "number", min: 1, value: seriesEntry.marker?.size ?? "", onChange: (e) => setFieldValue(`spec.series[${i}].marker`, {
-                                                ...(seriesEntry.marker ?? {}),
-                                                size: e.target.value === ""
-                                                    ? undefined
-                                                    : Number(e.target.value),
-                                            }), className: "text-xs", placeholder: "6" }))) : null,
-                                    bubbleAggregateEnabled ? (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2 w-32" },
-                                        React.createElement("label", { className: "font-system text-sm" }, "Aggregate type"),
-                                        React.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", value: seriesEntry.aggregateType ?? "", onChange: (event) => {
-                                                const aggregateType = event.target.value;
-                                                setFieldValue(`spec.series[${i}].aggregateType`, aggregateType || undefined);
-                                            } },
-                                            React.createElement("option", { value: "" }, "None"),
-                                            AGGREGATE_OPTIONS.map((option) => (React.createElement("option", { key: option.value, value: option.value }, option.label)))))) : null),
-                                React.createElement(IconButton, { className: "absolute right-1 top-1", type: "button", onClick: () => {
-                                        const currentSeries = bubbleSpec.series;
-                                        setFieldValue("spec.series", currentSeries.filter((_, index) => index !== i));
-                                    } },
-                                    React.createElement(CrossCircledIcon, null)))));
-                        }),
-                        React.createElement("div", { className: "py-1" },
-                            React.createElement(Button, { variant: "link", type: "button", onClick: () => {
-                                    const nextSeries = bubbleSpec.series;
-                                    const lastSeries = nextSeries[nextSeries.length - 1];
-                                    setFieldValue("spec.series", [
-                                        ...nextSeries,
-                                        {
-                                            sources: lastSeries
-                                                ? lastSeries.sources
-                                                : values.spec.dataRange
-                                                    ? [values.spec.dataRange]
-                                                    : [],
-                                        },
-                                    ]);
-                                }, className: "cursor-pointer" }, "Add series"))))) : null,
+                    renderSeriesList())) : null,
                 treemapSpec ? (React.createElement(React.Fragment, null,
                     React.createElement("label", { className: "font-system text-sm flex items-center gap-1 pb-2" },
                         React.createElement("input", { type: "checkbox", checked: treemapSpec.useFirstRowAsHeaders !== false, onChange: (e) => setFieldValue("spec.useFirstRowAsHeaders", e.target.checked) }),
                         "Use first row as headers"),
                     renderChartDataSection("Labels", "labels", treemapSpec.labels ?? [], "Select the cells that contain node labels."),
-                    renderChartDataSection("Parent labels", "parentLabels", treemapSpec.parentLabels ?? [], "Choose the cells that define each node's parent label."),
+                    renderChartDataSection("Parent labels", "parentLabels", treemapSpec.parentLabels ?? [], "One range per level above the labels, top level first.", { addLabel: "Add level", removeLabel: "Remove level" }),
                     renderChartDataSection("Size data", "sizeData", treemapSpec.sizeData ?? [], "Provide numeric values to determine each node's size."))) : null,
-                basicSpec ? (React.createElement(React.Fragment, null,
+                caps.hasEmptyCellOptions ? (React.createElement(React.Fragment, null,
                     React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2 w-56" },
                         React.createElement("label", { className: "font-system text-sm" }, "Show empty cells as"),
                         React.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", "aria-label": "Show empty cells as", value: values.spec.emptyCells ?? "gaps", onChange: (event) => {
@@ -459,6 +322,9 @@ export const ChartEditor = ({ chart, sheetId, onSubmit, onRequestMoveChart, getF
                     React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
                         React.createElement("label", { className: "font-system text-sm" }, "Chart title"),
                         React.createElement(Input, { value: values?.spec.title ?? "", type: "text", onChange: (e) => setFieldValue(`spec.title`, e.target.value), className: "text-xs", placeholder: "Enter chart title" })),
+                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                        React.createElement("label", { className: "font-system text-sm" }, "Subtitle"),
+                        React.createElement(Input, { value: values.spec.subtitle ?? "", type: "text", onChange: (e) => setFieldValue("spec.subtitle", e.target.value || undefined), className: "text-xs", placeholder: "Enter chart subtitle", "aria-label": "Chart subtitle" })),
                     React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
                         React.createElement("label", { className: "font-system text-sm" }, "Style"),
                         React.createElement("div", { className: "grid grid-cols-4 gap-1", role: "radiogroup" }, CHART_STYLES.map((style) => {
@@ -492,18 +358,7 @@ export const ChartEditor = ({ chart, sheetId, onSubmit, onRequestMoveChart, getF
                             CHART_QUICK_LAYOUTS.map((layout) => (React.createElement("option", { key: layout.id, value: layout.id }, layout.label))))),
                     React.createElement("div", null,
                         React.createElement(Button, { type: "button", size: "xs", onClick: () => setFieldValue("spec", resetChartToMatchStyle(values.spec)) }, "Reset to match style")),
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Title font"),
-                        React.createElement("div", { className: "flex items-center gap-1 flex-wrap" },
-                            React.createElement(Input, { value: values.spec.titleTextFormat?.fontFamily ?? "", type: "text", onChange: (e) => setFieldValue("spec.titleTextFormat.fontFamily", e.target.value || undefined), className: "text-xs w-32", placeholder: "Font family", "aria-label": "Title font family" }),
-                            React.createElement(Input, { value: values.spec.titleTextFormat?.fontSize ?? "", type: "number", min: 1, onChange: (e) => setFieldValue("spec.titleTextFormat.fontSize", e.target.value === "" ? undefined : Number(e.target.value)), className: "text-xs w-16", placeholder: "Size", "aria-label": "Title font size" }),
-                            React.createElement("input", { type: "color", value: values.spec.titleTextFormat?.color ?? "#000000", onChange: (e) => setFieldValue("spec.titleTextFormat.color", e.target.value), className: "h-6 w-8 p-0 border border-rnc-border rounded-sm bg-transparent cursor-pointer", "aria-label": "Title color" }),
-                            React.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
-                                React.createElement("input", { type: "checkbox", checked: Boolean(values.spec.titleTextFormat?.bold), onChange: (e) => setFieldValue("spec.titleTextFormat.bold", e.target.checked) }),
-                                "Bold"),
-                            React.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
-                                React.createElement("input", { type: "checkbox", checked: Boolean(values.spec.titleTextFormat?.italic), onChange: (e) => setFieldValue("spec.titleTextFormat.italic", e.target.checked) }),
-                                "Italic")))),
+                    React.createElement(TextFormatFields, { label: "Title font", value: values.spec.titleTextFormat, onChange: (titleTextFormat) => setFieldValue("spec.titleTextFormat", titleTextFormat), ariaLabels: { color: "Title color" } })),
                 React.createElement(Section, { title: "Chart area" },
                     React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
                         React.createElement("label", { className: "font-system text-sm" }, "Fill"),
@@ -520,171 +375,34 @@ export const ChartEditor = ({ chart, sheetId, onSubmit, onRequestMoveChart, getF
                     React.createElement("label", { className: "font-system text-sm flex items-center gap-1" },
                         React.createElement("input", { type: "checkbox", checked: Boolean(values.spec.roundedCorners), onChange: (e) => setFieldValue("spec.roundedCorners", e.target.checked) }),
                         "Rounded corners")),
-                basicSpec ? (React.createElement(React.Fragment, null,
-                    React.createElement(Section, { title: "Legend" },
-                        React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
-                            React.createElement("label", { className: "font-system text-sm" }, "Legend"),
-                            React.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent w-32", value: values?.spec.legend?.position ?? "", onChange: (e) => setFieldValue("spec.legend.position", e.target.value || undefined) },
-                                React.createElement("option", { value: "" }, "Auto"),
-                                React.createElement("option", { value: "top" }, "Top"),
-                                React.createElement("option", { value: "bottom" }, "Bottom"),
-                                React.createElement("option", { value: "left" }, "Left"),
-                                React.createElement("option", { value: "right" }, "Right"),
-                                React.createElement("option", { value: "none" }, "None")))),
-                    React.createElement(Section, { title: "Vertical axis" },
-                        React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
-                            React.createElement("label", { className: "font-system text-sm" }, "Vertical axis title"),
-                            React.createElement(Input, { value: values?.spec.verticalAxisTitle ?? "", type: "text", onChange: (e) => setFieldValue(`spec.verticalAxisTitle`, e.target.value), className: "text-xs", placeholder: "Vertical axis title" })),
-                        isCartesianBasic ? (React.createElement(Stack, { direction: "vertical", className: "gap-2 pb-2" },
-                            React.createElement("label", { className: "font-system text-sm" }, "Value axis"),
-                            React.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
-                                React.createElement(Stack, { direction: "vertical", className: "gap-1 w-20" },
-                                    React.createElement("label", { className: "font-system text-xs" }, "Min"),
-                                    React.createElement(Input, { type: "number", value: values?.spec.valueAxisOptions?.min ?? "", onChange: (e) => setFieldValue("spec.valueAxisOptions.min", e.target.value === ""
-                                            ? undefined
-                                            : Number(e.target.value)), className: "text-xs", placeholder: "Auto" })),
-                                React.createElement(Stack, { direction: "vertical", className: "gap-1 w-20" },
-                                    React.createElement("label", { className: "font-system text-xs" }, "Max"),
-                                    React.createElement(Input, { type: "number", value: values?.spec.valueAxisOptions?.max ?? "", onChange: (e) => setFieldValue("spec.valueAxisOptions.max", e.target.value === ""
-                                            ? undefined
-                                            : Number(e.target.value)), className: "text-xs", placeholder: "Auto" }))),
-                            React.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
-                                React.createElement("input", { type: "checkbox", checked: Boolean(values?.spec.valueAxisOptions?.logarithmic), onChange: (e) => setFieldValue("spec.valueAxisOptions.logarithmic", e.target.checked || undefined) }),
-                                "Logarithmic scale"),
-                            React.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
-                                React.createElement("input", { type: "checkbox", checked: Boolean(values?.spec.valueAxisOptions?.reverse), onChange: (e) => setFieldValue("spec.valueAxisOptions.reverse", e.target.checked || undefined) }),
-                                "Reverse direction"),
-                            React.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
-                                React.createElement("input", { type: "checkbox", checked: values?.spec.valueAxisOptions?.showMajorGridlines !==
-                                        false, onChange: (e) => setFieldValue("spec.valueAxisOptions.showMajorGridlines", e.target.checked) }),
-                                "Gridlines"),
-                            React.createElement("label", { className: "font-system text-xs" }, "Number format"),
-                            React.createElement(Input, { value: values?.spec.valueAxisOptions?.numberFormatPattern ??
-                                    "", type: "text", onChange: (e) => setFieldValue("spec.valueAxisOptions.numberFormatPattern", e.target.value || undefined), className: "text-xs w-32", placeholder: "Linked to source" }),
-                            basicSpec.series.some((s) => s.useSecondaryAxis) ? (React.createElement(React.Fragment, null,
-                                React.createElement("label", { className: "font-system text-sm pt-1" }, "Secondary value axis"),
-                                React.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
-                                    React.createElement(Stack, { direction: "vertical", className: "gap-1 w-20" },
-                                        React.createElement("label", { className: "font-system text-xs" }, "Min"),
-                                        React.createElement(Input, { type: "number", value: values?.spec.secondaryValueAxisOptions?.min ??
-                                                "", onChange: (e) => setFieldValue("spec.secondaryValueAxisOptions.min", e.target.value === ""
-                                                ? undefined
-                                                : Number(e.target.value)), className: "text-xs", placeholder: "Auto" })),
-                                    React.createElement(Stack, { direction: "vertical", className: "gap-1 w-20" },
-                                        React.createElement("label", { className: "font-system text-xs" }, "Max"),
-                                        React.createElement(Input, { type: "number", value: values?.spec.secondaryValueAxisOptions?.max ??
-                                                "", onChange: (e) => setFieldValue("spec.secondaryValueAxisOptions.max", e.target.value === ""
-                                                ? undefined
-                                                : Number(e.target.value)), className: "text-xs", placeholder: "Auto" }))),
-                                React.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
-                                    React.createElement("input", { type: "checkbox", checked: Boolean(values?.spec.secondaryValueAxisOptions
-                                            ?.logarithmic), onChange: (e) => setFieldValue("spec.secondaryValueAxisOptions.logarithmic", e.target.checked || undefined) }),
-                                    "Logarithmic scale"),
-                                React.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
-                                    React.createElement("input", { type: "checkbox", checked: values?.spec.secondaryValueAxisOptions
-                                            ?.showMajorGridlines !== false, onChange: (e) => setFieldValue("spec.secondaryValueAxisOptions.showMajorGridlines", e.target.checked) }),
-                                    "Gridlines"),
-                                React.createElement("label", { className: "font-system text-xs" }, "Number format"),
-                                React.createElement(Input, { value: values?.spec.secondaryValueAxisOptions
-                                        ?.numberFormatPattern ?? "", type: "text", onChange: (e) => setFieldValue("spec.secondaryValueAxisOptions.numberFormatPattern", e.target.value || undefined), className: "text-xs w-32", placeholder: "Linked to source" }))) : null)) : null),
-                    React.createElement(Section, { title: "Horizontal axis" },
-                        React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
-                            React.createElement("label", { className: "font-system text-sm" }, "Horizontal axis title"),
-                            React.createElement(Input, { value: values?.spec.horizontalAxisTitle ?? "", type: "text", onChange: (e) => setFieldValue(`spec.horizontalAxisTitle`, e.target.value), className: "text-xs", placeholder: "Horizontal axis title" })),
-                        isCartesianBasic ? (React.createElement(React.Fragment, null,
-                            React.createElement("label", { className: "font-system text-sm pt-1" }, "Category axis"),
-                            React.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
-                                React.createElement("input", { type: "checkbox", checked: values?.spec.categoryAxisOptions
-                                        ?.showMajorGridlines === true, onChange: (e) => setFieldValue("spec.categoryAxisOptions.showMajorGridlines", e.target.checked) }),
-                                "Gridlines"))) : null),
-                    React.createElement(Section, { title: "Data labels" },
-                        React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
-                            React.createElement("label", { className: "font-system text-sm flex items-center gap-1" },
-                                React.createElement("input", { type: "checkbox", checked: Boolean(values?.spec.dataLabels?.show), onChange: (e) => setFieldValue("spec.dataLabels.show", e.target.checked) }),
-                                "Show data labels"),
-                            values?.spec.dataLabels?.show ? (React.createElement("div", { className: "pl-4 flex flex-col gap-1" },
-                                React.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
-                                    React.createElement("input", { type: "checkbox", checked: values?.spec.dataLabels?.showValue !== false, onChange: (e) => setFieldValue("spec.dataLabels.showValue", e.target.checked) }),
-                                    "Value"),
-                                React.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
-                                    React.createElement("input", { type: "checkbox", checked: Boolean(values?.spec.dataLabels?.showCategoryName), onChange: (e) => setFieldValue("spec.dataLabels.showCategoryName", e.target.checked) }),
-                                    "Category name"),
-                                React.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
-                                    React.createElement("input", { type: "checkbox", checked: Boolean(values?.spec.dataLabels?.showSeriesName), onChange: (e) => setFieldValue("spec.dataLabels.showSeriesName", e.target.checked) }),
-                                    "Series name"),
-                                React.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
-                                    React.createElement("input", { type: "checkbox", checked: Boolean(values?.spec.dataLabels?.showPercent), onChange: (e) => setFieldValue("spec.dataLabels.showPercent", e.target.checked) }),
-                                    "Percentage"),
-                                React.createElement("label", { className: "font-system text-xs" }, "Label position"),
-                                React.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent w-32", value: values?.spec.dataLabels?.position ?? "outside", onChange: (e) => setFieldValue("spec.dataLabels.position", e.target.value) },
-                                    React.createElement("option", { value: "center" }, "Center"),
-                                    React.createElement("option", { value: "inside" }, "Inside"),
-                                    React.createElement("option", { value: "outside" }, "Outside"),
-                                    React.createElement("option", { value: "insideEnd" }, "Inside end"),
-                                    React.createElement("option", { value: "outsideEnd" }, "Outside end"),
-                                    React.createElement("option", { value: "bestFit" }, "Best fit"),
-                                    React.createElement("option", { value: "above" }, "Above"),
-                                    React.createElement("option", { value: "below" }, "Below"),
-                                    React.createElement("option", { value: "left" }, "Left"),
-                                    React.createElement("option", { value: "right" }, "Right")),
-                                React.createElement("label", { className: "font-system text-xs" }, "Number format pattern"),
-                                React.createElement(Input, { value: values?.spec.dataLabels?.numberFormatPattern ?? "", type: "text", onChange: (e) => setFieldValue("spec.dataLabels.numberFormatPattern", e.target.value || undefined), className: "text-xs w-32", placeholder: "#,##0.00" }))) : null)),
-                    basicSpec && showChartOptions ? (React.createElement(Section, { title: "Chart options" },
-                        chartOptionControls.binCount ? (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
-                            React.createElement("label", { className: "font-system text-sm" }, "Bins (leave blank for auto)"),
-                            React.createElement(Input, { value: basicSpec.binCount ?? "", type: "number", min: 1, onChange: (e) => {
-                                    const raw = e.target.value;
-                                    setFieldValue("spec.binCount", raw === "" ? undefined : Number(raw));
-                                }, className: "text-xs", placeholder: "Auto (Sturges)" }))) : null,
-                        chartOptionControls.radarStyle ? (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
-                            React.createElement("label", { className: "font-system text-sm" }, "Radar style"),
-                            React.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", value: basicSpec.radarStyle ?? "standard", onChange: (e) => setFieldValue("spec.radarStyle", e.target.value) },
-                                React.createElement("option", { value: "standard" }, "Standard"),
-                                React.createElement("option", { value: "marker" }, "With markers"),
-                                React.createElement("option", { value: "filled" }, "Filled")))) : null,
-                        chartOptionControls.stockVariant ? (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
-                            React.createElement("label", { className: "font-system text-sm" }, "Stock variant"),
-                            React.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", value: basicSpec.stockVariant ?? "HLC", onChange: (e) => setFieldValue("spec.stockVariant", e.target.value) },
-                                React.createElement("option", { value: "HLC" }, "High-Low-Close"),
-                                React.createElement("option", { value: "OHLC" }, "Open-High-Low-Close"),
-                                React.createElement("option", { value: "VHLC" }, "Volume-High-Low-Close"),
-                                React.createElement("option", { value: "VOHLC" }, "Volume-Open-High-Low-Close")))) : null,
-                        chartOptionControls.doughnutHoleSize ? (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
-                            React.createElement("label", { className: "font-system text-sm" }, "Doughnut hole size (0-0.9)"),
-                            React.createElement(Input, { type: "number", min: 0, max: 0.9, step: 0.05, value: basicSpec.doughnutHoleSize ?? "", onChange: (e) => setFieldValue("spec.doughnutHoleSize", e.target.value === ""
-                                    ? undefined
-                                    : Number(e.target.value)), className: "text-xs w-32", placeholder: "0.5" }))) : null,
-                        chartOptionControls.explosion ? (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
-                            React.createElement("label", { className: "font-system text-sm" }, "Explosion (% of radius, 0-400)"),
-                            React.createElement(Input, { type: "number", min: 0, max: 400, step: 5, "aria-label": "Explosion", value: basicSpec.explosion ?? "", onChange: (e) => setFieldValue("spec.explosion", e.target.value === ""
-                                    ? undefined
-                                    : Number(e.target.value)), className: "text-xs w-32", placeholder: "0" }))) : null,
-                        chartOptionControls.gapWidth ? (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
-                            React.createElement("label", { className: "font-system text-sm" }, "Gap width (0-500)"),
-                            React.createElement(Input, { type: "number", min: 0, max: 500, value: basicSpec.gapWidth ?? "", onChange: (e) => setFieldValue("spec.gapWidth", e.target.value === ""
-                                    ? undefined
-                                    : Number(e.target.value)), className: "text-xs w-32", placeholder: "150" }))) : null,
-                        chartOptionControls.overlap ? (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
-                            React.createElement("label", { className: "font-system text-sm" }, "Series overlap (-100 to 100)"),
-                            React.createElement(Input, { type: "number", min: -100, max: 100, value: basicSpec.overlap ?? "", onChange: (e) => setFieldValue("spec.overlap", e.target.value === ""
-                                    ? undefined
-                                    : Number(e.target.value)), className: "text-xs w-32", placeholder: "0" }))) : null)) : null)) : null,
-                bubbleSpec && bubbleSpec.chartType === "scatter" ? (React.createElement(Section, { title: "Chart options" },
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Scatter style"),
-                        React.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent w-56", value: bubbleSpec.scatterStyle ?? "lineMarker", onChange: (e) => setFieldValue("spec.scatterStyle", e.target.value) },
-                            React.createElement("option", { value: "lineMarker" }, "Straight lines with markers"),
-                            React.createElement("option", { value: "line" }, "Straight lines"),
-                            React.createElement("option", { value: "marker" }, "Markers only"),
-                            React.createElement("option", { value: "smoothMarker" }, "Smooth lines with markers"),
-                            React.createElement("option", { value: "smooth" }, "Smooth lines"))))) : null,
-                bubbleSpec ? (React.createElement(Section, { title: "Axis titles" },
+                caps.hasLegend ? (React.createElement(Section, { title: "Legend" },
                     React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                        React.createElement("label", { className: "font-system text-sm" }, "Legend"),
+                        React.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent w-32", "aria-label": "Legend position", value: values?.spec.legend?.position ?? "", onChange: (e) => setFieldValue("spec.legend.position", e.target.value || undefined) },
+                            React.createElement("option", { value: "" }, "Auto"),
+                            React.createElement("option", { value: "top" }, "Top"),
+                            React.createElement("option", { value: "bottom" }, "Bottom"),
+                            React.createElement("option", { value: "left" }, "Left"),
+                            React.createElement("option", { value: "right" }, "Right"),
+                            React.createElement("option", { value: "topRight" }, "Top right"),
+                            React.createElement("option", { value: "none" }, "None"))),
+                    React.createElement(TextFormatFields, { label: "Legend font", collapsible: true, value: values.spec.legend?.textFormat, onChange: (textFormat) => setFieldValue("spec.legend.textFormat", textFormat) }))) : null,
+                caps.hasAxisTitles || caps.hasValueAxis ? (React.createElement(Section, { title: "Vertical axis" },
+                    caps.hasAxisTitles ? (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
                         React.createElement("label", { className: "font-system text-sm" }, "Vertical axis title"),
-                        React.createElement(Input, { value: values?.spec.verticalAxisTitle ?? "", type: "text", onChange: (e) => setFieldValue(`spec.verticalAxisTitle`, e.target.value), className: "text-xs", placeholder: "Vertical axis title" })),
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                        React.createElement(Input, { value: values?.spec.verticalAxisTitle ?? "", type: "text", onChange: (e) => setFieldValue(`spec.verticalAxisTitle`, e.target.value), className: "text-xs", placeholder: "Vertical axis title" }))) : null,
+                    caps.hasValueAxis ? (React.createElement(AxisOptionsFields, { label: "Value axis", kind: "value", value: values.spec.valueAxisOptions, onChange: (next) => setFieldValue("spec.valueAxisOptions", next) })) : null,
+                    caps.hasSecondaryAxis &&
+                        seriesList.some((s) => s.useSecondaryAxis) ? (React.createElement(AxisOptionsFields, { label: "Secondary value axis", kind: "value", value: values.spec.secondaryValueAxisOptions, onChange: (next) => setFieldValue("spec.secondaryValueAxisOptions", next) })) : null)) : null,
+                caps.hasAxisTitles || caps.hasCategoryAxis ? (React.createElement(Section, { title: "Horizontal axis" },
+                    caps.hasAxisTitles ? (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
                         React.createElement("label", { className: "font-system text-sm" }, "Horizontal axis title"),
-                        React.createElement(Input, { value: values?.spec.horizontalAxisTitle ?? "", type: "text", onChange: (e) => setFieldValue(`spec.horizontalAxisTitle`, e.target.value), className: "text-xs", placeholder: "Horizontal axis title" })))) : null,
+                        React.createElement(Input, { value: values?.spec.horizontalAxisTitle ?? "", type: "text", onChange: (e) => setFieldValue(`spec.horizontalAxisTitle`, e.target.value), className: "text-xs", placeholder: "Horizontal axis title" }))) : null,
+                    caps.hasCategoryAxis ? (React.createElement(AxisOptionsFields, { label: "Category axis", kind: caps.category === "bubble" ? "value" : "category", value: values.spec.categoryAxisOptions, gridlinesDefault: false, onChange: (next) => setFieldValue("spec.categoryAxisOptions", next) })) : null)) : null,
+                caps.hasDataLabels ? (React.createElement(Section, { title: "Data labels" },
+                    React.createElement(DataLabelsFields, { value: values.spec.dataLabels, capabilities: caps, onChange: (dataLabels) => setFieldValue("spec.dataLabels", dataLabels) }))) : null,
+                hasTypeOptions ? (React.createElement(Section, { title: "Chart options" },
+                    React.createElement(ChartTypeOptionsFields, { spec: values.spec, capabilities: caps, setFieldValue: setFieldValue }))) : null,
                 React.createElement(Section, { title: "Properties" },
                     React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2", role: "radiogroup" }, CHART_PLACEMENT_OPTIONS.map(({ label, value }) => (React.createElement("label", { key: value, className: "font-system text-sm flex items-center gap-1" },
                         React.createElement("input", { type: "radio", name: "placement", value: value, checked: (values.position.overlayPosition.placement ??