@sheetxl/studio-vanilla 0.8.0-beta.10 → 0.8.0-beta.11

package/{cdn/assets/FjNOhkR7-JAIaRP6.js → browser/esm/BiSGu7XE2wP-COS-.mjs}

@@ -1,5 +1,5 @@
 /**
-* @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.8.0-beta.10
+* @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.8.0-beta.11
 *
 * (C) 2026-present SheetXL Inc. & Michael T. Ford
 * License: The license can be found at https://www.sheetxl.com/license.

package/browser/esm/Bj5v_mMZnT65-EYm.mjs

@@ -0,0 +1,521 @@
+/**
+* @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.8.0-beta.11
+*
+* (C) 2026-present SheetXL Inc. & Michael T. Ford
+* License: The license can be found at https://www.sheetxl.com/license.
+*/
+import { r as e } from "./D90zUAjsvdYt4zAc.mjs";
+import { i as t, r as n } from "./CFPaTEuxUxH48Dnc.mjs";
+import { mt as r, z as i } from "./DsHzYBPSadCXZi-n.mjs";
+import { U as a } from "./CVGsocXM6EdK3av8.mjs";
+import { xt as o } from "./BiLb98_m7AwaRkX6.mjs";
+import { t as s } from "./Cdg4TpupUeYIiz2B.mjs";
+import { j as c } from "./KG-A3VX4kcf2uLJI.mjs";
+import { m as l, t as u, y as d } from "./CN1_Dq2VdyHJ8cMR.mjs";
+import { t as f } from "./DFFX8FaN8Xyq2YvS.mjs";
+import { t as p } from "./TEqlVdpb4Wjm-WJR.mjs";
+import { t as m } from "./bFtJ6ds2ojy78Wre.mjs";
+import { t as h } from "./BNWxTMoiH1NkkmAh.mjs";
+import { d as g } from "./DJMHQzwcPgTpS0f5.mjs";
+import { a as _, i as v, n as y, r as b, t as x } from "./Bqf1HNOGA-pPTdl2.mjs";
+import { t as S } from "./DAEoN5lF7Xw1VMoH.mjs";
+var C = e(t(), 1), w = e(n(), 1), T = (e) => (0, w.jsx)(c, {
+	variant: "subtitle2",
+	component: "div",
+	children: e.children
+}), E = (e, t) => {
+	let n = t.getChart(), r = t.getPath(), i = t.getParent(), a = () => i ? E(e, i) : "", o = Number(r.split("/").pop());
+	switch (t.getElementType()) {
+		case "chartArea": return e("chart.pane.element.chartArea");
+		case "title": return e("chart.pane.element.title");
+		case "legend": return e("chart.pane.element.legend");
+		case "legendEntry": return e("chart.pane.element.legendEntry", { index: o + 1 });
+		case "plotArea": return e("chart.pane.element.plotArea");
+		case "dataTable": return e("chart.pane.element.dataTable");
+		case "axis": return ((e, t, n) => {
+			let [, r, i] = n.split("/"), a = ((e) => /^(bar|3DBar)/.test(e.getChartType()))(t), o = i === "category" ? !a : i !== "value" || a, s = i === "series" ? e("chart.pane.axisKind.series") : ((e) => /^(xyscatter|bubble)/.test(e.getChartType()))(t) || i === "value" ? e("chart.pane.axisKind.value") : e("chart.pane.axisKind.category"), c = e("chart.pane.axis", {
+				side: e(o ? "chart.pane.axisSide.horizontal" : "chart.pane.axisSide.vertical"),
+				kind: s
+			});
+			return r === "secondary" ? e("chart.pane.secondary", { label: c }) : c;
+		})(e, n, r);
+		case "axisTitle": return e("chart.pane.element.axisTitle", { axis: a() });
+		case "gridlines": return r.endsWith("minorGridlines") ? e("chart.pane.element.minorGridlines", { axis: a() }) : e("chart.pane.element.majorGridlines", { axis: a() });
+		case "series": return e("chart.pane.element.series", { name: t.getName() ?? "" });
+		case "point": return e("chart.pane.element.point", {
+			series: a(),
+			index: o + 1
+		});
+		case "marker": return e("chart.pane.element.marker", { owner: a() });
+		case "dataLabels": return i?.getElementType() === "series" ? e("chart.pane.element.dataLabels", { series: a() }) : e("chart.pane.element.allDataLabels");
+		case "dataLabel": return e("chart.pane.element.dataLabel", { point: a() });
+		case "trendline": return e("chart.pane.element.trendline", {
+			series: a(),
+			index: o + 1
+		});
+		case "trendlineLabel": return e("chart.pane.element.trendlineLabel", { trendline: a() });
+		case "errorBars": return r.endsWith("/x") ? e("chart.pane.element.xErrorBars", { series: a() }) : e("chart.pane.element.yErrorBars", { series: a() });
+		case "chartGroup": return e("chart.pane.element.group", { index: o + 1 });
+		case "upDownBars": return e("chart.pane.element.upDownBars");
+		case "hiLoLines": return e("chart.pane.element.hiLoLines");
+		case "dropLines": return e("chart.pane.element.dropLines");
+		case "seriesLines": return e("chart.pane.element.seriesLines");
+		default: return r;
+	}
+}, D = (e, t) => {
+	let n = e.getStroke().getFill();
+	return n.getType() === a.Type.Solid ? n.getColor() : t.getNormal().getFont().getColor();
+}, O = (e) => {
+	let { style: t, sheet: n, disabled: i, label: a } = e, s = r(), c = n.getStyles(), l = o() === "dark", u = {
+		fill: t.getFill(),
+		styles: c,
+		schemeLookup: c.schemeLookup(),
+		darkMode: l,
+		disabled: i,
+		createCell: (e) => n.createCell(e),
+		applyFill: (e, n) => {
+			t.setFill(e, { description: n });
+		}
+	}, d = {
+		stroke: t.getStroke(),
+		stated: t.toJSON()?.stroke ?? null,
+		autoColor: D(t, c),
+		styles: c,
+		schemeLookup: c.schemeLookup(),
+		darkMode: l,
+		disabled: i,
+		applyStroke: (e, n) => {
+			t.setStroke(e, { description: n });
+		}
+	};
+	return (0, w.jsxs)(w.Fragment, { children: [
+		a ? (0, w.jsx)(T, { children: a }) : null,
+		(0, w.jsx)(T, { children: s("shape.pane.fill") }),
+		(0, w.jsx)(b, { selection: u }),
+		(0, w.jsx)(T, { children: s("shape.pane.line") }),
+		(0, w.jsx)(S, { selection: d })
+	] });
+}, k = (e) => (0, w.jsxs)(d, {
+	size: "small",
+	fullWidth: !0,
+	disabled: e.disabled,
+	children: [(0, w.jsx)(l, { children: e.label }), (0, w.jsx)(u, {
+		label: e.label,
+		value: e.value,
+		onChange: (t) => e.onChange(t.target.value),
+		children: e.options.map((t) => (0, w.jsx)(h, {
+			value: t,
+			children: e.labels[t] ?? t
+		}, t))
+	})]
+}), A = (e) => (0, w.jsx)(p, {
+	label: e.label,
+	disabled: e.disabled,
+	control: (0, w.jsx)(f, {
+		size: "small",
+		checked: e.checked,
+		onChange: (t) => e.onChange(t.target.checked)
+	})
+}), j = (e) => {
+	let [t, n] = (0, C.useState)(null), r = () => {
+		t !== null && t !== e.value && e.onCommit(t), n(null);
+	};
+	return (0, w.jsx)(m, {
+		size: "small",
+		fullWidth: !0,
+		label: e.label,
+		disabled: e.disabled,
+		value: t ?? e.value,
+		onChange: (e) => n(e.target.value),
+		onBlur: r,
+		onKeyDown: (e) => {
+			e.key === "Enter" && r();
+		}
+	});
+}, M = [
+	"none",
+	"single",
+	"double"
+], N = [
+	"none",
+	"single",
+	"double"
+], P = (e) => {
+	let { font: t, styles: n, disabled: a, run: s } = e, c = r(), l = o() === "dark", u = i(() => n.recentColors(), [n]), d = t.getColor(), f = {
+		none: c("chart.pane.text.lineNone"),
+		single: c("chart.pane.text.lineSingle"),
+		double: c("chart.pane.text.lineDouble")
+	};
+	return (0, w.jsxs)(w.Fragment, { children: [
+		(0, w.jsx)(T, { children: c("chart.pane.text") }),
+		(0, w.jsx)(x, { children: (0, w.jsx)(j, {
+			label: c("format.fontFamily"),
+			value: t.getFamily(),
+			disabled: a,
+			onCommit: (e) => s(() => t.setFamily(e || null))
+		}) }),
+		(0, w.jsx)(x, { children: (0, w.jsxs)(v, { children: [(0, w.jsx)(_, {
+			label: c("format.fontSize"),
+			value: t.getSize(),
+			min: 1,
+			max: 400,
+			step: 1,
+			decimals: !0,
+			width: 96,
+			disabled: a,
+			onChange: (e) => s(() => t.setSize(e))
+		}), (0, w.jsx)(g, {
+			icon: "text.colored",
+			disabled: a,
+			darkMode: l,
+			compareRGB: !0,
+			selectedColor: d,
+			onSelectColor: (e, r) => {
+				e && r && n.addRecentColor(e), s(() => t.setColor(e ? e.toString() : null));
+			},
+			propsPanel: {
+				disableAlpha: !0,
+				schemeLookup: n.schemeLookup(),
+				recentColors: u
+			}
+		})] }) }),
+		(0, w.jsx)(x, { children: (0, w.jsxs)(v, { children: [(0, w.jsx)(A, {
+			label: c("chart.pane.text.bold"),
+			checked: t.getBold(),
+			disabled: a,
+			onChange: (e) => s(() => t.setBold(e))
+		}), (0, w.jsx)(A, {
+			label: c("chart.pane.text.italic"),
+			checked: t.getItalic(),
+			disabled: a,
+			onChange: (e) => s(() => t.setItalic(e))
+		})] }) }),
+		(0, w.jsx)(x, { children: (0, w.jsxs)(v, { children: [(0, w.jsx)(k, {
+			label: c("chart.pane.text.underline"),
+			value: M.includes(t.getUnderline()) ? t.getUnderline() : "single",
+			options: M,
+			labels: f,
+			disabled: a,
+			onChange: (e) => s(() => t.setUnderline(e))
+		}), (0, w.jsx)(k, {
+			label: c("chart.pane.text.strike"),
+			value: t.getStrike(),
+			options: N,
+			labels: f,
+			disabled: a,
+			onChange: (e) => s(() => t.setStrike(e))
+		})] }) })
+	] });
+}, F = [
+	"top",
+	"bottom",
+	"left",
+	"right",
+	"corner"
+], I = [
+	"center",
+	"insideEnd",
+	"insideBase",
+	"outsideEnd",
+	"left",
+	"right",
+	"top",
+	"bottom",
+	"bestFit"
+], L = [
+	"linear",
+	"exponential",
+	"logarithmic",
+	"polynomial",
+	"power",
+	"movingAverage"
+], R = [
+	"fixedValue",
+	"percent",
+	"stDev",
+	"stError"
+], z = [
+	"both",
+	"plusValues",
+	"minusValues"
+], B = (e) => {
+	let { element: t, disabled: n, run: i } = e, a = r(), o = (e, t, r) => (0, w.jsx)(A, {
+		label: e,
+		checked: t,
+		disabled: n,
+		onChange: (e) => i(() => r(e))
+	}), c = [], l = () => t;
+	switch (t.getElementType()) {
+		case "chartArea": {
+			let e = l();
+			c.push(o(a("chart.pane.roundedCorners"), e.getRoundedCorners(), (t) => e.setRoundedCorners(t)));
+			break;
+		}
+		case "title":
+		case "axisTitle": {
+			let e = l();
+			c.push(o(a("chart.pane.visible"), e.getVisible(), (t) => e.setVisible(t))), c.push((0, w.jsx)(j, {
+				label: a("chart.pane.titleText"),
+				value: e.getText() ?? "",
+				disabled: n,
+				onCommit: (t) => i(() => e.setText(t || null))
+			}, "text")), c.push(o(a("chart.pane.overlay"), e.getOverlay(), (t) => e.setOverlay(t)));
+			break;
+		}
+		case "legend": {
+			let e = l();
+			c.push(o(a("chart.pane.visible"), e.getVisible(), (t) => e.setVisible(t))), c.push((0, w.jsx)(k, {
+				label: a("chart.pane.position"),
+				value: e.getPosition(),
+				options: F,
+				disabled: n,
+				labels: {
+					top: a("chart.pane.side.top"),
+					bottom: a("chart.pane.side.bottom"),
+					left: a("chart.pane.side.left"),
+					right: a("chart.pane.side.right"),
+					corner: a("chart.pane.side.corner")
+				},
+				onChange: (t) => i(() => e.setPosition(t))
+			}, "position")), c.push(o(a("chart.pane.overlay"), e.getOverlay(), (t) => e.setOverlay(t)));
+			break;
+		}
+		case "axis": {
+			let e = l();
+			if (c.push(o(a("chart.pane.visible"), e.getVisible(), (t) => e.setVisible(t))), c.push(o(a("chart.pane.reverse"), e.getReversePlotOrder(), (t) => e.setReversePlotOrder(t))), e.getKind() === "value") {
+				let t = (e, t, r) => (0, w.jsx)(_, {
+					label: e,
+					value: t ?? 0,
+					min: -0x38d7ea4c68000,
+					max: 0x38d7ea4c68000,
+					decimals: !0,
+					width: 120,
+					disabled: n,
+					onChange: (e) => i(() => r(e))
+				}, e);
+				c.push((0, w.jsxs)(v, { children: [t(a("chart.pane.minimum"), e.getMinimum(), (t) => e.setMinimum(t)), t(a("chart.pane.maximum"), e.getMaximum(), (t) => e.setMaximum(t))] }, "bounds")), c.push((0, w.jsx)(j, {
+					label: a("chart.pane.numberFormat"),
+					value: e.getNumberFormat() ?? "",
+					disabled: n,
+					onCommit: (t) => i(() => t ? e.setNumberFormat(t) : e.setLinkNumberFormat(!0))
+				}, "format"));
+			}
+			break;
+		}
+		case "gridlines":
+		case "upDownBars":
+		case "hiLoLines":
+		case "dropLines":
+		case "seriesLines": {
+			let e = l();
+			c.push(o(a("chart.pane.visible"), e.getVisible(), (t) => e.setVisible(t)));
+			break;
+		}
+		case "series": {
+			let e = l();
+			c.push(o(a("chart.pane.secondaryAxis"), e.getAxisGroup() === "secondary", (t) => e.setAxisGroup(t ? "secondary" : "primary")));
+			let t = e.getGapWidth(), r = e.getOverlap();
+			t === null && r === null || c.push((0, w.jsxs)(v, { children: [r === null ? null : (0, w.jsx)(_, {
+				label: a("chart.pane.overlap"),
+				value: r,
+				min: -100,
+				max: 100,
+				width: 96,
+				disabled: n,
+				onChange: (t) => i(() => e.setOverlap(t))
+			}), t === null ? null : (0, w.jsx)(_, {
+				label: a("chart.pane.gapWidth"),
+				value: t,
+				min: 0,
+				max: 500,
+				width: 96,
+				disabled: n,
+				onChange: (t) => i(() => e.setGapWidth(t))
+			})] }, "gap")), /^(line|xyscatter)/.test(e.getChartType()) && c.push(o(a("chart.pane.smooth"), e.getSmooth(), (t) => e.setSmooth(t)));
+			break;
+		}
+		case "dataLabels":
+		case "dataLabel": {
+			let e = l();
+			c.push(o(a("chart.pane.visible"), e.getVisible(), (t) => e.setVisible(t))), c.push(o(a("chart.pane.labels.value"), e.getShowValue(), (t) => e.setShowValue(t))), c.push(o(a("chart.pane.labels.category"), e.getShowCategoryName(), (t) => e.setShowCategoryName(t))), c.push(o(a("chart.pane.labels.series"), e.getShowSeriesName(), (t) => e.setShowSeriesName(t))), c.push(o(a("chart.pane.labels.percentage"), e.getShowPercentage(), (t) => e.setShowPercentage(t))), c.push(o(a("chart.pane.labels.legendKey"), e.getShowLegendKey(), (t) => e.setShowLegendKey(t))), c.push((0, w.jsx)(k, {
+				label: a("chart.pane.position"),
+				value: e.getPosition(),
+				options: I,
+				disabled: n,
+				labels: {
+					center: a("chart.pane.labels.center"),
+					insideEnd: a("chart.pane.labels.insideEnd"),
+					insideBase: a("chart.pane.labels.insideBase"),
+					outsideEnd: a("chart.pane.labels.outsideEnd"),
+					left: a("chart.pane.side.left"),
+					right: a("chart.pane.side.right"),
+					top: a("chart.pane.side.top"),
+					bottom: a("chart.pane.side.bottom"),
+					bestFit: a("chart.pane.labels.bestFit")
+				},
+				onChange: (t) => i(() => e.setPosition(t))
+			}, "position"));
+			break;
+		}
+		case "trendline": {
+			let e = l();
+			c.push((0, w.jsx)(k, {
+				label: a("chart.pane.trendline.type"),
+				value: e.getType(),
+				options: L,
+				disabled: n,
+				labels: {
+					linear: a("chart.pane.trendline.linear"),
+					exponential: a("chart.pane.trendline.exponential"),
+					logarithmic: a("chart.pane.trendline.logarithmic"),
+					polynomial: a("chart.pane.trendline.polynomial"),
+					power: a("chart.pane.trendline.power"),
+					movingAverage: a("chart.pane.trendline.movingAverage")
+				},
+				onChange: (t) => i(() => e.setType(t))
+			}, "type")), c.push(o(a("chart.pane.trendline.equation"), e.getShowEquation(), (t) => e.setShowEquation(t))), c.push(o(a("chart.pane.trendline.rSquared"), e.getShowRSquared(), (t) => e.setShowRSquared(t))), c.push((0, w.jsxs)(v, { children: [(0, w.jsx)(_, {
+				label: a("chart.pane.trendline.forward"),
+				value: e.getForwardPeriod(),
+				min: 0,
+				max: 1e6,
+				decimals: !0,
+				width: 96,
+				disabled: n,
+				onChange: (t) => i(() => e.setForwardPeriod(t))
+			}), (0, w.jsx)(_, {
+				label: a("chart.pane.trendline.backward"),
+				value: e.getBackwardPeriod(),
+				min: 0,
+				max: 1e6,
+				decimals: !0,
+				width: 96,
+				disabled: n,
+				onChange: (t) => i(() => e.setBackwardPeriod(t))
+			})] }, "periods"));
+			break;
+		}
+		case "errorBars": {
+			let e = l();
+			c.push(o(a("chart.pane.visible"), e.getVisible(), (t) => e.setVisible(t))), c.push((0, w.jsx)(k, {
+				label: a("chart.pane.errorBars.type"),
+				value: e.getType() === "custom" ? "fixedValue" : e.getType(),
+				options: R,
+				disabled: n,
+				labels: {
+					fixedValue: a("chart.pane.errorBars.fixedValue"),
+					percent: a("chart.pane.errorBars.percent"),
+					stDev: a("chart.pane.errorBars.stDev"),
+					stError: a("chart.pane.errorBars.stError")
+				},
+				onChange: (t) => i(() => e.setType(t))
+			}, "type"));
+			let t = e.getAmount();
+			t !== null && c.push((0, w.jsx)(_, {
+				label: a("chart.pane.errorBars.amount"),
+				value: t,
+				min: 0,
+				max: 0x38d7ea4c68000,
+				decimals: !0,
+				width: 120,
+				disabled: n,
+				onChange: (t) => i(() => e.setAmount(t))
+			}, "amount")), c.push((0, w.jsx)(k, {
+				label: a("chart.pane.errorBars.direction"),
+				value: e.getInclude(),
+				options: z,
+				disabled: n,
+				labels: {
+					both: a("chart.pane.errorBars.both"),
+					plusValues: a("chart.pane.errorBars.plus"),
+					minusValues: a("chart.pane.errorBars.minus")
+				},
+				onChange: (t) => i(() => e.setInclude(t))
+			}, "include")), c.push(o(a("chart.pane.errorBars.cap"), e.getEndStyleCap(), (t) => e.setEndStyleCap(t)));
+			break;
+		}
+		case "dataTable": {
+			let e = l();
+			c.push(o(a("chart.pane.visible"), e.getVisible(), (t) => e.setVisible(t))), c.push(o(a("chart.pane.labels.legendKey"), e.getShowLegendKey(), (t) => e.setShowLegendKey(t))), c.push(o(a("chart.pane.table.horizontal"), e.getShowHorizontalBorder(), (t) => e.setShowHorizontalBorder(t))), c.push(o(a("chart.pane.table.vertical"), e.getShowVerticalBorder(), (t) => e.setShowVerticalBorder(t))), c.push(o(a("chart.pane.table.outline"), e.getShowOutlineBorder(), (t) => e.setShowOutlineBorder(t)));
+			break;
+		}
+	}
+	return c.length === 0 ? null : (0, w.jsxs)(w.Fragment, { children: [(0, w.jsx)(T, { children: a("chart.pane.options") }), (0, w.jsx)(s, {
+		sx: {
+			...y,
+			gap: 1
+		},
+		children: c.map((e, t) => (0, w.jsx)(s, { children: e }, t))
+	})] });
+}, V = (0, C.memo)((e) => {
+	let { movable: t, sheet: n } = e, a = r(), o = t.getContent(), [, f] = (0, C.useReducer)((e) => e + 1, 0);
+	(0, C.useEffect)(() => o.addListeners({ onAnyChange: f }), [o]);
+	let p = n.getView().getChartElementSelection();
+	(0, C.useEffect)(() => p.addListeners({ onChange: f }), [p]);
+	let [m, g] = (0, C.useState)("chartArea"), [_, v] = (0, C.useState)(null), b = (p.getChart() === o ? p.getActive() : null) ?? o.getElement(m) ?? o.getChartArea(), x = o.getElements(), S = x.includes(b) ? x : [...x, b], T = o.isReadOnly(), D = i((e) => {
+		try {
+			e(), v(null);
+		} catch (e) {
+			v(e?.message ?? String(e));
+		}
+	}, []), k = b.getStyle?.(), A = k?.isITextBoxStyle ? k.getFont() : null, j = b.getElementType() === "legendEntry" ? null : k, M = b.getElementType() === "upDownBars" ? b : null;
+	return (0, w.jsxs)(s, {
+		sx: {
+			...y,
+			gap: 2,
+			paddingTop: (e) => e.spacing(1)
+		},
+		children: [
+			(0, w.jsxs)(d, {
+				size: "small",
+				fullWidth: !0,
+				children: [(0, w.jsx)(l, { children: a("chart.pane.element") }), (0, w.jsx)(u, {
+					label: a("chart.pane.element"),
+					value: b.getPath(),
+					onChange: (e) => ((e) => {
+						g(e), v(null);
+						let t = o.getElement(e);
+						t && t.getElementType() !== "chartArea" ? p.select([t]) : p.clear();
+					})(e.target.value),
+					children: S.map((e) => (0, w.jsx)(h, {
+						value: e.getPath(),
+						children: E(a, e)
+					}, e.getPath()))
+				})]
+			}),
+			_ ? (0, w.jsx)(c, {
+				variant: "caption",
+				color: "error",
+				children: _
+			}) : null,
+			(0, w.jsx)(B, {
+				element: b,
+				disabled: T,
+				run: D
+			}, `options:${b.getPath()}`),
+			A ? (0, w.jsx)(P, {
+				font: A,
+				styles: n.getStyles(),
+				disabled: T,
+				run: D
+			}, `text:${b.getPath()}`) : null,
+			j ? (0, w.jsx)(O, {
+				style: j,
+				sheet: n,
+				disabled: T
+			}, `style:${b.getPath()}`) : null,
+			M ? (0, w.jsxs)(w.Fragment, { children: [(0, w.jsx)(O, {
+				style: M.getUpBarsStyle(),
+				sheet: n,
+				disabled: T,
+				label: a("chart.pane.upBars")
+			}, "up"), (0, w.jsx)(O, {
+				style: M.getDownBarsStyle(),
+				sheet: n,
+				disabled: T,
+				label: a("chart.pane.downBars")
+			}, "down")] }) : null
+		]
+	});
+});
+V.displayName = "ChartFormatPanel";
+export { V as ChartFormatPanel };