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

package/browser/esm/Dme0qpRinBnhzp53.mjs

@@ -0,0 +1,519 @@
+/**
+* @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.8.0-beta.10
+*
+* (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 "./DLqc11Pf8vaE4Q5B.mjs";
+import { i as t, r as n } from "./C4VT6lNbpaDXCpBb.mjs";
+import { b as r } from "./CMxbiQ5J79M3n1tk.mjs";
+import { m as i, mt as a, tt as o } from "./BThOwSja2ra4xejQ.mjs";
+import { t as s } from "./DjdkGy-EI1kSo226.mjs";
+import { E as c, H as l } from "./CWoPWWRwMgkGPFFP.mjs";
+import { t as u } from "./rkTVQiYG3wd8oPom.mjs";
+import { t as d } from "./CtZPEkaldpJpoGtW.mjs";
+import { m as f, t as p, y as m } from "./D2coM-dNrlLpnUu5.mjs";
+import { A as h, I as g, S as _, T as v } from "./DvWCBuY0jAL-RmJV.mjs";
+import { t as y } from "./CVxlfyE-gnJM8hOz.mjs";
+import { E as b, a as x, l as S, p as ee, r as C, y as w } from "./D8exjrado9TJrBp-.mjs";
+var T = e(t(), 1), E = e(n(), 1), D = {
+	[l.DashStyle.Solid]: null,
+	[l.DashStyle.Dot]: [1, 3],
+	[l.DashStyle.Dash]: [4, 3],
+	[l.DashStyle.LongDash]: [8, 3],
+	[l.DashStyle.DashDot]: [
+		4,
+		3,
+		1,
+		3
+	],
+	[l.DashStyle.LongDashDot]: [
+		8,
+		3,
+		1,
+		3
+	],
+	[l.DashStyle.LongDashDotDot]: [
+		8,
+		3,
+		1,
+		3,
+		1,
+		3
+	],
+	[l.DashStyle.SysDash]: [3, 1],
+	[l.DashStyle.SysDot]: [1, 1],
+	[l.DashStyle.SysDashDot]: [
+		3,
+		1,
+		1,
+		1
+	],
+	[l.DashStyle.SysDashDotDot]: [
+		3,
+		1,
+		1,
+		1,
+		1,
+		1
+	]
+}, O = (0, T.memo)((e) => {
+	let { dash: t, color: n, darkMode: r } = e, i = Array.isArray(t) ? t : D[t] ?? null;
+	return (0, E.jsx)(w, {
+		styleColor: n,
+		length: 60,
+		width: 2,
+		darkMode: r,
+		dashArray: i ? i.map((e) => 2 * e) : void 0
+	});
+});
+O.displayName = "DashIcon";
+var k = {
+	sm: 2.5,
+	med: 4,
+	lg: 6
+}, A = {
+	sm: 5,
+	med: 8,
+	lg: 12
+}, j = (0, T.memo)((e) => {
+	let { end: t, atStart: n = !1, color: r, darkMode: i = !1 } = e, a = k[t.width ?? l.LineEndSize.Medium], o = A[t.length ?? l.LineEndSize.Medium], s = null, c = 19;
+	switch (t.type) {
+		case l.LineEndType.Triangle:
+			s = (0, E.jsx)("polygon", { points: `19,8 ${19 - o},${8 - a} ${19 - o},${8 + a}` }), c = 19 - o;
+			break;
+		case l.LineEndType.Stealth:
+			s = (0, E.jsx)("polygon", { points: `19,8 ${19 - o},${8 - a} ${19 - .6 * o},8 ${19 - o},${8 + a}` }), c = 19 - .6 * o;
+			break;
+		case l.LineEndType.Diamond:
+			s = (0, E.jsx)("polygon", { points: `19,8 ${19 - o / 2},${8 - a} ${19 - o},8 ${19 - o / 2},${8 + a}` }), c = 19 - o;
+			break;
+		case l.LineEndType.Oval:
+			s = (0, E.jsx)("ellipse", {
+				cx: 19 - o / 2,
+				cy: 8,
+				rx: o / 2,
+				ry: a
+			}), c = 19 - o;
+			break;
+		case l.LineEndType.Arrow: s = (0, E.jsx)("polyline", {
+			points: `${19 - o},${8 - a} 19,8 ${19 - o},${8 + a}`,
+			fill: "none",
+			strokeWidth: 2,
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		});
+	}
+	let f = r ? r.toRGBA(i).toString() : "currentColor";
+	return (0, E.jsxs)(u, {
+		component: "svg",
+		width: 20,
+		height: 16,
+		viewBox: "0 0 20 16",
+		sx: {
+			display: "block",
+			overflow: "visible",
+			fill: f,
+			stroke: f,
+			filter: d(),
+			transform: n ? "scaleX(-1)" : void 0
+		},
+		children: [(0, E.jsx)("line", {
+			x1: 1,
+			y1: 8,
+			x2: c,
+			y2: 8,
+			strokeWidth: 2
+		}), s]
+	});
+});
+j.displayName = "LineEndIcon";
+var M = (e) => {
+	let { end: t, atStart: n = !1, color: r, darkMode: i, types: a, sizes: o, typeLabels: s, sizeLabels: c, widthLabel: d, lengthLabel: f, tooltip: p, disabled: m, onSelect: y } = e, b = (0, T.useCallback)((e) => {
+		let { closeFloatAll: p, floatReference: _ } = e, b = a.map((e) => {
+			let a = (0, E.jsx)(j, {
+				end: {
+					...t,
+					type: e
+				},
+				atStart: n,
+				color: r,
+				darkMode: i
+			}), b = e === t.type;
+			return e === l.LineEndType.None ? (0, E.jsx)(h, {
+				icon: a,
+				selected: b,
+				disabled: m,
+				onMouseDown: (e) => e.preventDefault(),
+				onMouseUp: () => {
+					p?.(), y(null);
+				},
+				children: s[e]
+			}, e) : (0, E.jsx)(g, {
+				icon: a,
+				label: s[e],
+				selected: b,
+				disabled: m,
+				parentFloat: _,
+				createPopupPanel: (a) => (0, E.jsx)(u, {
+					sx: {
+						display: "grid",
+						gridTemplateColumns: `repeat(${o.length}, auto)`,
+						gap: "2px",
+						padding: "6px 8px"
+					},
+					children: o.map((s) => o.map((o) => (0, E.jsx)(v, {
+						icon: (0, E.jsx)(j, {
+							end: {
+								type: e,
+								width: o,
+								length: s
+							},
+							atStart: n,
+							color: r,
+							darkMode: i
+						}),
+						selected: b && (t.width ?? l.LineEndSize.Medium) === o && (t.length ?? l.LineEndSize.Medium) === s,
+						disabled: m,
+						propsTooltip: {
+							label: `${d}: ${c[o]} · ${f}: ${c[s]}`,
+							simple: !0
+						},
+						onClick: () => {
+							a.closeFloatAll?.(), y({
+								type: e,
+								width: o,
+								length: s
+							});
+						}
+					}, `${o}-${s}`)))
+				}),
+				onQuickClick: () => {
+					p?.(), y({
+						...t,
+						type: e
+					});
+				}
+			}, e);
+		});
+		return (0, E.jsx)(u, {
+			sx: {
+				display: "flex",
+				flexDirection: "column",
+				paddingTop: "4px",
+				paddingBottom: "4px"
+			},
+			children: b
+		});
+	}, [
+		t,
+		n,
+		r,
+		i,
+		a,
+		o,
+		s,
+		c,
+		d,
+		f,
+		m,
+		y
+	]);
+	return (0, E.jsx)(_, {
+		disabled: m,
+		icon: (0, E.jsx)(u, {
+			sx: {
+				paddingLeft: "4px",
+				marginRight: "4px",
+				height: "24px",
+				display: "flex",
+				alignItems: "center"
+			},
+			children: (0, E.jsx)(j, {
+				end: t,
+				atStart: n,
+				color: r,
+				darkMode: i
+			})
+		}),
+		tooltip: p ? `${p}: ${s[t.type]}` : s[t.type],
+		createPopupPanel: b
+	});
+}, N = (e) => {
+	let { value: t, options: n, onSelect: r, columns: i, tooltip: o, disabled: s, icon: c } = e, l = n.find((e) => e.value === t) ?? n[0], d = (0, T.useCallback)((e) => {
+		let { closeFloat: o } = e;
+		return (0, E.jsx)(u, i ? {
+			sx: {
+				display: "grid",
+				gridTemplateColumns: `repeat(${i}, auto)`,
+				gap: "2px",
+				padding: "6px 8px"
+			},
+			children: n.map((e) => (0, E.jsx)(v, {
+				icon: e.icon,
+				selected: e.value === t,
+				disabled: s,
+				propsTooltip: {
+					label: e.label,
+					simple: !0
+				},
+				onClick: () => {
+					o?.(), r(e.value);
+				}
+			}, e.value))
+		} : {
+			sx: {
+				display: "flex",
+				flexDirection: "column",
+				paddingTop: "4px",
+				paddingBottom: "4px"
+			},
+			children: n.map((e) => (0, E.jsx)(h, {
+				tabIndex: 0,
+				sx: {
+					height: "28px",
+					paddingLeft: "16px"
+				},
+				propsTooltip: { description: e.label },
+				icon: null,
+				disabled: s,
+				selected: e.value === t,
+				onMouseDown: (e) => e.preventDefault(),
+				onMouseUp: () => {
+					o?.(), r(e.value);
+				},
+				onKeyDown: (e) => {
+					e.which === a.Enter && o?.();
+				},
+				children: e.icon
+			}, e.value))
+		});
+	}, [
+		n,
+		t,
+		r,
+		i,
+		s
+	]);
+	return (0, E.jsx)(_, {
+		disabled: s,
+		icon: (0, E.jsx)(u, {
+			sx: {
+				paddingLeft: "4px",
+				marginRight: "4px",
+				height: "24px",
+				display: "flex",
+				alignItems: "center"
+			},
+			children: c ?? l?.icon
+		}),
+		tooltip: o ? `${o}: ${l?.label ?? ""}` : l?.label,
+		createPopupPanel: d
+	});
+}, P = "none", F = "solid", I = [
+	l.DashStyle.Solid,
+	l.DashStyle.SysDot,
+	l.DashStyle.SysDash,
+	l.DashStyle.Dash,
+	l.DashStyle.DashDot,
+	l.DashStyle.LongDash,
+	l.DashStyle.LongDashDot,
+	l.DashStyle.LongDashDotDot
+], L = "custom", R = [
+	l.LineCap.Square,
+	l.LineCap.Round,
+	l.LineCap.Butt
+], z = [
+	l.LineJoin.Round,
+	l.LineJoin.Bevel,
+	l.LineJoin.Miter
+], B = [
+	l.LineEndType.None,
+	l.LineEndType.Triangle,
+	l.LineEndType.Arrow,
+	l.LineEndType.Stealth,
+	l.LineEndType.Diamond,
+	l.LineEndType.Oval
+], V = [
+	l.LineEndSize.Small,
+	l.LineEndSize.Medium,
+	l.LineEndSize.Large
+], H = (0, T.memo)((e) => {
+	let { selection: t, disabled: n, className: a, ...d } = e, h = o(), { stroke: g, stated: _, autoColor: v, applyStroke: w, schemeLookup: D, styles: k, darkMode: A } = t, j = n || t.disabled, H = g.isVisible(), U = H ? F : P, W = _?.fill && _.fill.type !== c.Type.None ? g.getFill().getColor() : null, G = W ?? v, K = g.getDash(), q = typeof K == "string" && I.includes(K) ? K : L, J = g.getHead(), Y = g.getTail(), te = i(() => k.recentColors(), [k]), ne = i((e) => {
+		e !== U && w(e === P ? { fill: { type: c.Type.None } } : {
+			fill: null,
+			width: g.getWidth() > 0 ? void 0 : null
+		}, r("op.setShapeStroke"));
+	}, [
+		U,
+		g,
+		w
+	]), re = i((e, t) => {
+		e && t && k.addRecentColor(e), w({ fill: e ? e.toString() : null }, r("op.setStrokeColor"));
+	}, [w, k]), ie = i((e) => {
+		w({ width: e }, r("op.setStrokeWidth"));
+	}, [w]), ae = i((e) => {
+		e !== L && w({ dash: e }, r("op.setStrokeDash"));
+	}, [w]), oe = i((e) => {
+		w({ lineCap: e }, r("op.setStroke"));
+	}, [w]), se = i((e) => {
+		w({ lineJoin: e }, r("op.setStroke"));
+	}, [w]), X = i((e, t) => {
+		w({ [e]: t }, r("op.setLineEnds"));
+	}, [w]), Z = (0, T.useMemo)(() => ({
+		dash: {
+			[l.DashStyle.Solid]: h("line.dash.solid"),
+			[l.DashStyle.SysDot]: h("line.dash.sysDot"),
+			[l.DashStyle.SysDash]: h("line.dash.sysDash"),
+			[l.DashStyle.Dash]: h("line.dash.dash"),
+			[l.DashStyle.DashDot]: h("line.dash.dashDot"),
+			[l.DashStyle.LongDash]: h("line.dash.lgDash"),
+			[l.DashStyle.LongDashDot]: h("line.dash.lgDashDot"),
+			[l.DashStyle.LongDashDotDot]: h("line.dash.lgDashDotDot"),
+			[L]: h("line.dashCustom")
+		},
+		cap: {
+			[l.LineCap.Square]: h("line.capSquare"),
+			[l.LineCap.Round]: h("line.capRound"),
+			[l.LineCap.Butt]: h("line.capFlat")
+		},
+		join: {
+			[l.LineJoin.Round]: h("line.joinRound"),
+			[l.LineJoin.Bevel]: h("line.joinBevel"),
+			[l.LineJoin.Miter]: h("line.joinMiter")
+		},
+		end: {
+			[l.LineEndType.None]: h("line.end.none"),
+			[l.LineEndType.Triangle]: h("line.end.triangle"),
+			[l.LineEndType.Arrow]: h("line.end.arrow"),
+			[l.LineEndType.Stealth]: h("line.end.stealth"),
+			[l.LineEndType.Diamond]: h("line.end.diamond"),
+			[l.LineEndType.Oval]: h("line.end.oval")
+		},
+		size: {
+			[l.LineEndSize.Small]: h("line.sizeSmall"),
+			[l.LineEndSize.Medium]: h("line.sizeMedium"),
+			[l.LineEndSize.Large]: h("line.sizeLarge")
+		}
+	}), [h]), Q = I.map((e) => ({
+		value: e,
+		label: Z.dash[e],
+		icon: (0, E.jsx)(O, {
+			dash: e,
+			color: G,
+			darkMode: A
+		})
+	}));
+	q === L && Q.push({
+		value: L,
+		label: Z.dash[L],
+		icon: (0, E.jsx)(O, {
+			dash: K,
+			color: G,
+			darkMode: A
+		})
+	});
+	let $ = (e, t, n, r, i, a) => (0, E.jsxs)(m, {
+		size: "small",
+		fullWidth: a === void 0,
+		sx: a === void 0 ? void 0 : { width: a },
+		children: [(0, E.jsx)(f, {
+			shrink: !0,
+			children: e
+		}), (0, E.jsx)(p, {
+			label: e,
+			notched: !0,
+			disabled: j,
+			value: t,
+			onChange: (e) => i(e.target.value),
+			children: n.map((e) => (0, E.jsx)(y, {
+				value: e,
+				children: r[e]
+			}, e))
+		})]
+	});
+	return (0, E.jsxs)(u, {
+		className: s("sxl-format-line-panel", a),
+		sx: x,
+		...d,
+		children: [(0, E.jsx)(S, { children: $(h("line.type"), U, [P, F], {
+			[P]: h("line.typeNone"),
+			[F]: h("line.typeSolid")
+		}, ne) }), H ? (0, E.jsxs)(E.Fragment, { children: [
+			(0, E.jsx)(S, {
+				label: h("line.color"),
+				children: (0, E.jsxs)(b, { children: [(0, E.jsx)(ee, {
+					icon: "stroke.colored",
+					disabled: j,
+					darkMode: A,
+					compareRGB: !0,
+					selectedColor: W,
+					onSelectColor: re,
+					propsPanel: {
+						disableAlpha: !0,
+						autoColor: v,
+						schemeLookup: D,
+						recentColors: te
+					}
+				}), (0, E.jsx)(C, {
+					label: h("line.width"),
+					value: g.getWidth(),
+					min: 0,
+					max: 1584,
+					step: .25,
+					decimals: !0,
+					width: 96,
+					disabled: j,
+					onChange: ie
+				})] })
+			}),
+			(0, E.jsx)(S, {
+				label: h("line.dashArrows"),
+				children: (0, E.jsxs)(b, { children: [
+					(0, E.jsx)(M, {
+						end: J,
+						atStart: !0,
+						color: G,
+						darkMode: A,
+						types: B,
+						sizes: V,
+						typeLabels: Z.end,
+						sizeLabels: Z.size,
+						widthLabel: h("line.sizeWidth"),
+						lengthLabel: h("line.sizeLength"),
+						tooltip: h("line.head"),
+						disabled: j,
+						onSelect: (e) => X("head", e)
+					}),
+					(0, E.jsx)(N, {
+						value: q,
+						options: Q,
+						onSelect: ae,
+						tooltip: h("line.dash"),
+						disabled: j
+					}),
+					(0, E.jsx)(M, {
+						end: Y,
+						color: G,
+						darkMode: A,
+						types: B,
+						sizes: V,
+						typeLabels: Z.end,
+						sizeLabels: Z.size,
+						widthLabel: h("line.sizeWidth"),
+						lengthLabel: h("line.sizeLength"),
+						tooltip: h("line.tail"),
+						disabled: j,
+						onSelect: (e) => X("tail", e)
+					})
+				] })
+			}),
+			(0, E.jsx)(S, {
+				label: h("line.capJoin"),
+				children: (0, E.jsxs)(b, { children: [$(h("line.cap"), g.getLineCap(), R, Z.cap, oe, 128), $(h("line.join"), g.getLineJoin(), z, Z.join, se, 128)] })
+			})
+		] }) : null]
+	});
+});
+H.displayName = "LinePanel";
+export { H as t };