@fiestaboard/ui 3.1.0 → 3.2.0

package/dist/components/editor/template-editor.js

@@ -0,0 +1,662 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Box as t } from "../layout/box.js";
+import { Flex as n } from "../layout/flex.js";
+import { Skeleton as r } from "../feedback/skeleton.js";
+import { Text as i } from "../typography/text.js";
+import { Stack as a } from "../layout/stack.js";
+import { Tooltip as o, TooltipContent as s, TooltipProvider as c, TooltipTrigger as l } from "../overlays/tooltip.js";
+import { resolveDimensions as ee } from "../../lib/board-dimensions.js";
+import { DEFAULT_BOARD_LINES as te, DEFAULT_BOARD_WIDTH as ne } from "./constants.js";
+import { ColorTileNode as re } from "./extensions/color-tile-node.js";
+import { FillSpaceNode as ie } from "./extensions/fill-space-node.js";
+import { FormulaNode as u } from "./extensions/formula-node.js";
+import { LineNavigation as ae } from "./extensions/line-navigation.js";
+import { SingleParagraphDoc as oe } from "./extensions/single-paragraph-doc.js";
+import { TrailingNewline as se } from "./extensions/trailing-newline.js";
+import { VariableNode as ce } from "./extensions/variable-node.js";
+import { WrappedTextNode as le } from "./extensions/wrapped-text-node.js";
+import { brushToCell as ue } from "./utils/draw-mode.js";
+import { parseLineContent as de, parseTemplateSimple as d, serializeTemplateSimple as f } from "./utils/serialization.js";
+import { TemplateEditorToolbar as fe } from "./template-editor-toolbar.js";
+import { buildStrokeTransaction as pe } from "./utils/stroke-transaction.js";
+import { AlignCenter as me, AlignLeft as he, AlignRight as ge } from "lucide-react";
+import { forwardRef as p, useCallback as m, useEffect as h, useImperativeHandle as _e, useMemo as ve, useRef as g, useState as _ } from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { closeHistory as b, undoDepth as ye } from "@tiptap/pm/history";
+import { TextSelection as x } from "@tiptap/pm/state";
+import { EditorContent as be, useEditor as xe } from "@tiptap/react";
+import Se from "@tiptap/starter-kit";
+//#region src/components/editor/template-editor.tsx
+var S = {
+	lineCount: (e, t) => `${e} / ${t} lines`,
+	overLineLimit: (e) => ` — exceeds the ${e}-line board limit`,
+	currentLine: (e) => `(Line ${e})`,
+	alignment: "Alignment:",
+	alignLeft: "Align left",
+	alignCenter: "Align center",
+	alignRight: "Align right",
+	editorAriaLabel: "Template editor"
+}, Ce = /* @__PURE__ */ new Set([
+	"variable",
+	"colorTile",
+	"fillSpace",
+	"formula",
+	"wrappedText"
+]);
+function C(e) {
+	try {
+		if (!e || !e.content || e.content.size === 0) return "";
+		let t = "";
+		return e.content.forEach((e) => {
+			if (!(!e || !e.type)) try {
+				if (e.type.name === "text") t += e.text || "";
+				else if (e.type.name === "variable") {
+					let { pluginId: n, field: r, filters: i } = e.attrs || {}, a = i && i.length > 0 ? i.map((e) => `|${e.name}${e.arg ? ":" + e.arg : ""}`).join("") : "";
+					t += `{{${n || ""}.${r || ""}${a}}}`;
+				} else if (e.type.name === "colorTile") t += `{{${e.attrs?.color || ""}}}`;
+				else if (e.type.name === "fillSpace") {
+					let n = e.attrs?.repeatChar;
+					t += n && n !== " " ? `{{fill_space_repeat:${n}}}` : "{{fill_space}}";
+				} else e.type.name === "wrappedText" ? t += `{{${e.attrs?.text || ""}|wrap}}` : e.type.name === "formula" ? t += `{{= ${e.attrs?.expression || ""} }}` : e.type.name === "hardBreak" && (t += "\n");
+			} catch (e) {
+				console.warn("Error serializing node:", e);
+			}
+		}), t;
+	} catch (e) {
+		return console.warn("Error in serializeSliceToTemplate:", e), "";
+	}
+}
+var w = p(function({ value: p, onChange: w, onFocus: we, placeholder: Te = "Type text or insert variables...", className: T, showAlignmentControls: Ee = !0, onLineAlignmentChange: E, lineAlignments: De, onLineWrapChange: D, lineWrapEnabled: Oe, showToolbar: O = !0, boardWidth: ke, boardLines: Ae, onLineCountChange: k, deviceType: A, onSyncFromBoard: je, syncFromBoardPending: Me = !1, drawMode: j = !1, onDrawModeToggle: Ne, drawBrush: Pe, onDrawBrushChange: Fe, onDrawHistoryEvent: M, labels: Ie, toolbarProps: Le }, Re) {
+	let N = {
+		...S,
+		...Ie
+	}, P = A ? ee(A) : null, F = ke ?? P?.cols ?? ne, I = Ae ?? P?.rows ?? te, ze = De || Array.from({ length: I }, () => "left"), L = Oe || Array.from({ length: I }, () => !1), Be = g(!1), R = g(null), z = g(null), [B, V] = _(() => (p || "").split("\n").length), [Ve, He] = _(() => Array.from({ length: I }, () => 24)), H = g(!1), U = g(null), W = xe({
+		immediatelyRender: !1,
+		extensions: [
+			oe,
+			Se.configure({
+				heading: !1,
+				blockquote: !1,
+				codeBlock: !1,
+				horizontalRule: !1,
+				bulletList: !1,
+				orderedList: !1,
+				listItem: !1,
+				code: !1,
+				bold: !1,
+				italic: !1,
+				strike: !1,
+				document: !1
+			}),
+			ce,
+			re,
+			ie,
+			u,
+			le,
+			ae,
+			se
+		],
+		content: d(p || "", I),
+		editorProps: {
+			attributes: {
+				class: e("w-full font-mono text-sm", "prose prose-sm max-w-none", "[&_.ProseMirror]:outline-none", "[&_.ProseMirror]:font-mono", "[&_.ProseMirror]:text-sm", "[&_.ProseMirror]:resize-none", "[&_.ProseMirror]:uppercase", "[&_.ProseMirror_p]:my-0 [&_.ProseMirror_p]:leading-tight", "[&_.ProseMirror_p]:min-h-[1.5rem]", T),
+				"data-placeholder": Te,
+				role: "textbox",
+				"aria-label": N.editorAriaLabel,
+				"aria-multiline": "true"
+			},
+			handleKeyDown: (e, t) => {
+				if (t.key === "Enter" && !t.ctrlKey && !t.metaKey) {
+					if (t.preventDefault(), t.shiftKey) return !0;
+					let n = e.state.schema.nodes.hardBreak;
+					return n && e.dispatch(e.state.tr.replaceSelectionWith(n.create()).scrollIntoView()), !0;
+				}
+				if (t.key === "Backspace" && !t.ctrlKey && !t.metaKey && !t.shiftKey) {
+					let { state: t } = e, { selection: n } = t;
+					if (!n.empty) return !1;
+					let r = n.$from.pos, i = n.$from.start();
+					if (r <= i || t.doc.textBetween(r - 1, r, void 0, "") !== "​") return !1;
+					let a = r - 1;
+					for (; a > i && t.doc.textBetween(a - 1, a, void 0, "") === "​";) a--;
+					let o = t.doc.resolve(a).nodeBefore;
+					if (o?.type.name === "hardBreak") {
+						for (a -= o.nodeSize; a > i && t.doc.textBetween(a - 1, a, void 0, "") === "​";) a--;
+						let s = r, c = n.$from.end();
+						for (; s < c && t.doc.textBetween(s, s + 1, void 0, "") === "​";) s++;
+						return e.dispatch(t.tr.delete(a, s).scrollIntoView()), !0;
+					}
+					return a <= i ? !0 : o?.isAtom ? (e.dispatch(t.tr.delete(a - o.nodeSize, r).scrollIntoView()), !0) : (e.dispatch(t.tr.delete(a - 1, r).scrollIntoView()), !0);
+				}
+				if (t.key === "Delete" && !t.ctrlKey && !t.metaKey && !t.shiftKey) {
+					let { state: t } = e, { selection: n } = t;
+					if (!n.empty) return !1;
+					let r = n.$from.pos, i = n.$from.end();
+					if (r >= i || t.doc.textBetween(r, r + 1, void 0, "") !== "​") return !1;
+					let a = r + 1;
+					for (; a < i && t.doc.textBetween(a, a + 1, void 0, "") === "​";) a++;
+					let o = t.doc.resolve(a).nodeAfter;
+					if (o?.type.name === "hardBreak") {
+						for (a += o.nodeSize; a < i && t.doc.textBetween(a, a + 1, void 0, "") === "​";) a++;
+						let s = r, c = n.$from.start();
+						for (; s > c && t.doc.textBetween(s - 1, s, void 0, "") === "​";) s--;
+						return e.dispatch(t.tr.delete(s, a).scrollIntoView()), !0;
+					}
+					return a >= i ? !0 : o?.isAtom ? (e.dispatch(t.tr.delete(r, a + o.nodeSize).scrollIntoView()), !0) : (e.dispatch(t.tr.delete(r, a + 1).scrollIntoView()), !0);
+				}
+				if ((t.key === "ArrowRight" || t.key === "ArrowLeft") && !t.altKey && !t.ctrlKey && !t.metaKey) {
+					let { state: n } = e, { selection: r } = n;
+					if (!(r instanceof x)) return !1;
+					let i = r.$head.pos, a = r.$head.start(), o = r.$head.end();
+					if (t.key === "ArrowRight") {
+						if (i >= o) return !1;
+						let a = i + 1;
+						for (; a < o && n.doc.textBetween(a - 1, a, void 0, "") === "​";) a++;
+						if (a === i + 1 && !t.shiftKey) return !1;
+						t.preventDefault();
+						let s = t.shiftKey ? x.create(n.doc, r.$anchor.pos, a) : x.create(n.doc, a);
+						return e.dispatch(n.tr.setSelection(s).scrollIntoView()), !0;
+					}
+					if (t.key === "ArrowLeft") {
+						if (i <= a) return !1;
+						let o = i - 1;
+						for (; o > a && n.doc.textBetween(o, o + 1, void 0, "") === "​";) o--;
+						if (o === i - 1 && !t.shiftKey) return !1;
+						t.preventDefault();
+						let s = t.shiftKey ? x.create(n.doc, r.$anchor.pos, o) : x.create(n.doc, o);
+						return e.dispatch(n.tr.setSelection(s).scrollIntoView()), !0;
+					}
+				}
+				let n = t.key.toLowerCase(), r = t.ctrlKey || t.metaKey;
+				if (r && n === "z" && !t.shiftKey) {
+					let e = R.current;
+					return e?.can().undo() ? (t.preventDefault(), e.chain().focus().undo().run(), !0) : !1;
+				}
+				if (r && (n === "y" || n === "z" && t.shiftKey)) {
+					let e = R.current;
+					return e?.can().redo() ? (t.preventDefault(), e.chain().focus().redo().run(), !0) : !1;
+				}
+				if (!e || !e.state || !e.state.selection || !e.state.doc || !e.state.schema) return !1;
+				try {
+					let { state: n } = e, { selection: r } = n;
+					if (!r) return !1;
+					if ((t.ctrlKey || t.metaKey) && t.key === "x" && !r.empty) {
+						try {
+							let e = r.content();
+							if (e) {
+								let t = C(e);
+								navigator.clipboard && navigator.clipboard.writeText && navigator.clipboard.writeText(t).catch(() => {});
+							}
+						} catch (e) {
+							console.warn("Error in cut handler:", e);
+						}
+						return !1;
+					}
+					return !1;
+				} catch (e) {
+					return console.warn("Error in handleKeyDown:", e), !1;
+				}
+			},
+			handlePaste: (e, t, n) => {
+				try {
+					let e = t.clipboardData?.getData("text/plain") || "";
+					if (e && (e.includes("{{") || e.match(/\{[a-z]+\}/i))) {
+						let t = de(e);
+						if (t.length > 0 && R.current?.state && R.current?.chain) return R.current.chain().focus().insertContent(t).run(), !0;
+					}
+				} catch (e) {
+					console.warn("Error in handlePaste:", e);
+				}
+				return !1;
+			},
+			transformPastedText: (e) => e && (e.includes("{{") || e.match(/\{[a-z]+\}/i)) ? e : e.toUpperCase(),
+			handleDOMEvents: {
+				mousedown: (e, t) => {
+					let n = t.target, r = n.closest("[data-drag-handle]");
+					if (r && t.button === 0) {
+						if (n.closest("button")) return !1;
+						let t = e.posAtDOM(r, 0);
+						if (t !== null && t >= 0) try {
+							let n = e.state.doc.resolve(t), r = n.nodeAfter, i = n.pos;
+							if ((!r || r.type.name !== "variable" && r.type.name !== "colorTile" && r.type.name !== "fillSpace" && r.type.name !== "wrappedText") && (r = n.nodeBefore, r && (i = n.pos - r.nodeSize)), r && (r.type.name === "variable" || r.type.name === "colorTile" || r.type.name === "fillSpace" || r.type.name === "wrappedText")) return z.current = {
+								from: i,
+								to: i + r.nodeSize
+							}, !1;
+						} catch (e) {
+							console.warn("Error selecting node for drag:", e);
+						}
+					}
+					return !1;
+				},
+				dragstart: (e, t) => !1,
+				click: (e, t) => {
+					if (t.target.closest("button")) return !1;
+					let n = e.posAtCoords({
+						left: t.clientX,
+						top: t.clientY
+					});
+					if (!n) return !1;
+					let r = e.state.doc.nodeAt(n.pos);
+					if (!r || !Ce.has(r.type.name)) return !1;
+					let i = n.pos + r.nodeSize;
+					e.dispatch(e.state.tr.setSelection(x.create(e.state.doc, i)));
+					let a = e.nodeDOM(n.pos);
+					return a instanceof HTMLElement && a.classList.add("selected-inline"), t.preventDefault(), !0;
+				}
+			},
+			handleDrop: (e, t, n, r) => {
+				if (z.current) {
+					let { from: n, to: r } = z.current, i = e.posAtCoords({
+						left: t.clientX,
+						top: t.clientY
+					});
+					if (i && i.pos !== null) try {
+						let t = e.state.doc.resolve(i.pos);
+						if (i.pos >= n && i.pos <= r) return z.current = null, !0;
+						let a = e.state.doc.nodeAt(n);
+						if (!a) return z.current = null, !1;
+						let o = t.pos;
+						t.parentOffset === 0 && t.depth > 0 && (o = t.before(t.depth)), o > r && (o -= r - n);
+						let s = e.state.tr;
+						s.delete(n, r);
+						let c = o > n ? o - (r - n) : o;
+						if (c >= 0 && c <= s.doc.content.size) {
+							s.insert(c, a);
+							let t = c + a.nodeSize;
+							return t <= s.doc.content.size && s.setSelection(x.create(s.doc, t)), e.dispatch(s), z.current = null, !0;
+						}
+					} catch (e) {
+						console.warn("Error handling drop:", e);
+					}
+					z.current = null;
+				}
+				return !1;
+			},
+			clipboardTextSerializer: (e) => {
+				try {
+					return !e || !e.content ? "" : C(e);
+				} catch (e) {
+					return console.warn("Error in clipboardTextSerializer:", e), "";
+				}
+			}
+		},
+		onSelectionUpdate: ({ editor: e }) => {
+			e.view.dom.querySelectorAll(".selected-inline").forEach((e) => {
+				e.classList.remove("selected-inline");
+			});
+			let { selection: t } = e.state;
+			t.empty || e.state.doc.nodesBetween(t.from, t.to, (t, n) => {
+				if (t.isAtom && t.isInline) {
+					let t = e.view.nodeDOM(n);
+					t instanceof HTMLElement && t.classList.add("selected-inline");
+				}
+			});
+		},
+		onUpdate: ({ editor: e }) => {
+			if (Be.current || !e || !e.state) return;
+			let t = e.getJSON(), n = f(t, I), r = n.split("\n").length;
+			w(n), V(r), k && k(r), U.current?.();
+		},
+		onCreate: ({ editor: e }) => {
+			let t = e.getJSON(), n = f(t, I).split("\n").length;
+			V(n), k && k(n), U.current?.();
+		},
+		onFocus: () => {
+			we?.();
+		}
+	});
+	h(() => {
+		W && (R.current = W);
+	}, [W]);
+	let Ue = g({
+		done: [],
+		undone: []
+	}), G = g(!1), K = g(M);
+	h(() => {
+		K.current = M;
+	}, [M]), h(() => {
+		if (!W) return;
+		let e = ({ transaction: e }) => {
+			if (!e.docChanged) return;
+			let t = Ue.current, n = e.getMeta("history$"), r = ye(W.state);
+			if (n && typeof n == "object" && typeof n.redo == "boolean") if (n.redo) {
+				for (; t.undone.length > 0 && t.undone[t.undone.length - 1] > r;) t.undone.pop();
+				let e = t.undone[t.undone.length - 1] === r;
+				e && t.done.push(t.undone.pop()), K.current?.({
+					action: "redo",
+					stroke: e
+				});
+			} else {
+				let e = r + 1;
+				for (; t.done.length > 0 && t.done[t.done.length - 1] > e;) t.done.pop();
+				let n = t.done[t.done.length - 1] === e;
+				n && t.undone.push(t.done.pop()), K.current?.({
+					action: "undo",
+					stroke: n
+				});
+			}
+			else {
+				for (t.undone.length = 0; t.done.length > 0 && t.done[t.done.length - 1] >= r;) t.done.pop();
+				G.current && (G.current = !1, t.done.push(r));
+			}
+		};
+		return W.on("transaction", e), () => {
+			W.off("transaction", e);
+		};
+	}, [W]), _e(Re, () => ({
+		applyStroke(e, t) {
+			let n = R.current;
+			if (!n || n.isDestroyed) return [];
+			let r = ue(t), i = f(n.getJSON(), I).split("\n"), a = /* @__PURE__ */ new Map();
+			for (let t of e) {
+				if (t.row < 0 || t.row >= I || t.col < 0 || t.col >= F) continue;
+				let e = a.get(t.row) ?? [];
+				e.push({
+					col: t.col,
+					cell: r
+				}), a.set(t.row, e);
+			}
+			if (a.size === 0) return [];
+			let o = pe(n.state, i, a, F);
+			if (!o) return [];
+			let { view: s } = n;
+			return G.current = !0, s.dispatch(b(o)), s.dispatch(b(s.state.tr)), [...a.keys()].sort((e, t) => e - t);
+		},
+		undo() {
+			let e = R.current;
+			!e || e.isDestroyed || e.chain().undo().run();
+		},
+		redo() {
+			let e = R.current;
+			!e || e.isDestroyed || e.chain().redo().run();
+		}
+	}), [I, F]);
+	let q = m(() => {
+		if (!(!W || W.isDestroyed) && !j) try {
+			let { state: e, view: t } = W;
+			if (!t.dom.isConnected) return;
+			let n = [];
+			e.doc.descendants((e, t) => {
+				e.type.name === "hardBreak" && n.push(t);
+			});
+			let r = [];
+			try {
+				r.push(t.coordsAtPos(1).top);
+			} catch {
+				return;
+			}
+			for (let e of n) try {
+				r.push(t.coordsAtPos(e + 1).top);
+			} catch {
+				return;
+			}
+			let i = [];
+			for (let e = 0; e < r.length; e++) if (e + 1 < r.length) i.push(Math.max(Math.round(r[e + 1] - r[e]), 24));
+			else {
+				let n = t.dom.querySelector("p"), a = n ? n.getBoundingClientRect().bottom : r[e] + 24;
+				i.push(Math.max(Math.round(a - r[e]), 24));
+			}
+			for (; i.length < I;) i.push(24);
+			He(i);
+		} catch {}
+	}, [
+		W,
+		I,
+		j
+	]), J = m(() => {
+		H.current || (H.current = !0, requestAnimationFrame(() => {
+			H.current = !1, q();
+		}));
+	}, [q]);
+	h(() => {
+		U.current = J;
+	}, [J]), h(() => {
+		j || J();
+	}, [j, J]), h(() => {
+		if (!W) return;
+		let e = new ResizeObserver(J);
+		return e.observe(W.view.dom), J(), () => e.disconnect();
+	}, [W, J]), h(() => {
+		if (!W) return;
+		let e = W.view.dom, t = (e) => {
+			if (!z.current) return;
+			e.preventDefault(), e.stopPropagation();
+			let { from: t, to: n } = z.current, r = W.view.posAtCoords({
+				left: e.clientX,
+				top: e.clientY
+			});
+			if (r && r.pos !== null) try {
+				let e = W.state.doc.resolve(r.pos);
+				if (r.pos >= t && r.pos <= n) {
+					z.current = null;
+					return;
+				}
+				let i = W.state.doc.nodeAt(t);
+				if (!i) {
+					z.current = null;
+					return;
+				}
+				let a = e.pos;
+				e.parentOffset === 0 && e.depth > 0 && (a = e.before(e.depth)), a > n && (a -= n - t);
+				let o = W.state.tr;
+				o.delete(t, n);
+				let s = a > t ? a - (n - t) : a;
+				if (s >= 0 && s <= o.doc.content.size) {
+					o.insert(s, i);
+					let e = s + i.nodeSize;
+					e <= o.doc.content.size && o.setSelection(x.create(o.doc, e)), W.view.dispatch(o), z.current = null;
+				}
+			} catch (e) {
+				console.warn("Error handling DOM drop:", e), z.current = null;
+			}
+		}, n = (e) => {
+			z.current && (e.preventDefault(), e.dataTransfer.dropEffect = "move");
+		};
+		return e.addEventListener("drop", t), e.addEventListener("dragover", n), () => {
+			e.removeEventListener("drop", t), e.removeEventListener("dragover", n);
+		};
+	}, [W]), h(() => {
+		if (!W || W.isDestroyed) return;
+		W.isFocused || p !== f(W.getJSON(), I) && queueMicrotask(() => {
+			!W || W.isDestroyed || W.commands.setContent(d(p || "", I), {
+				emitUpdate: !1,
+				parseOptions: { preserveWhitespace: !0 }
+			});
+		});
+		let e = (p || "").split("\n").length;
+		V(e), k && k(e), U.current?.();
+	}, [
+		p,
+		W,
+		I,
+		k
+	]);
+	let Y = m(() => {
+		try {
+			if (!W || !W.state || !W.state.selection) return null;
+			let { state: e } = W, { selection: t } = e;
+			if (!t || !t.$from) return null;
+			let { $from: n } = t, r = 0;
+			return e.doc && e.doc.nodesBetween(0, n.pos, (e) => {
+				e && e.type && e.type.name === "hardBreak" && r++;
+			}), r;
+		} catch (e) {
+			return console.warn("Error in getCurrentLineIndex:", e), null;
+		}
+	}, [W]), X = m((e) => {
+		if (W) try {
+			if (!W.state || !W.state.selection) return;
+			let { state: t } = W, { selection: n } = t;
+			if (!n || !n.$from) return;
+			let r = 0;
+			t.doc.nodesBetween(0, n.$from.pos, (e) => {
+				e && e.type && e.type.name === "hardBreak" && r++;
+			});
+			let i = r;
+			if (n.empty || t.doc.nodesBetween(n.$from.pos, n.$to.pos, (e) => {
+				e && e.type && e.type.name === "hardBreak" && i++;
+			}), r < 0 || r >= I) return;
+			let a = Math.min(i, I - 1);
+			if (E) for (let t = r; t <= a; t++) E(t, e);
+		} catch (e) {
+			console.warn("Error in handleAlignmentClick:", e);
+		}
+	}, [
+		W,
+		I,
+		E
+	]), We = m(() => {
+		if (!W) return;
+		let e = Y();
+		if (e === null || e < 0 || e >= I) return;
+		let t = !L[e];
+		D && D(e, t);
+	}, [
+		W,
+		Y,
+		D,
+		I,
+		L
+	]), Z = ve(() => {
+		try {
+			if (!W?.state?.selection?.$from || !W.state.doc) return null;
+			let e = 0;
+			return W.state.doc.nodesBetween(0, W.state.selection.$from.pos, (t) => {
+				t && t.type && t.type.name === "hardBreak" && e++;
+			}), e;
+		} catch (e) {
+			return console.warn("Error getting current line index:", e), null;
+		}
+	}, [W, W?.state?.selection?.$from?.pos]), Q = Z !== null && Z >= 0 && Z < I && ze[Z] || "left";
+	if (!W) return /* @__PURE__ */ v(t, {
+		className: e("min-h-[9rem] border rounded-md p-2 bg-muted/30", T),
+		children: /* @__PURE__ */ v(a, {
+			gap: "1",
+			children: Array.from({ length: I }).map((e, t) => /* @__PURE__ */ v(r, { className: "h-6" }, t))
+		})
+	});
+	let Ge = Z !== null && Z >= 0 && Z < I && L[Z] || !1, $ = B > I;
+	return /* @__PURE__ */ y(t, {
+		className: e("relative", T),
+		children: [O && /* @__PURE__ */ v(fe, {
+			...Le,
+			editor: W,
+			currentAlignment: Q,
+			currentWrapEnabled: Ge,
+			onAlignmentChange: (e) => {
+				X(e);
+			},
+			onWrapToggle: () => {
+				We();
+			},
+			deviceType: A,
+			onSyncFromBoard: je,
+			syncFromBoardPending: Me,
+			drawMode: j,
+			onDrawModeToggle: Ne,
+			drawBrush: Pe,
+			onDrawBrushChange: Fe
+		}), /* @__PURE__ */ y(t, {
+			className: e("flex-1", j && "hidden"),
+			children: [
+				/* @__PURE__ */ v(t, {
+					className: e("border bg-background relative rounded-md", O ? "rounded-t-none" : "", $ && "border-warning"),
+					style: {
+						padding: "0.75rem",
+						minHeight: `${I * 1.5 + 1.5}rem`
+					},
+					children: /* @__PURE__ */ y(n, {
+						gap: "2",
+						style: { minHeight: `${I * 1.5}rem` },
+						children: [/* @__PURE__ */ v(t, {
+							className: "select-none shrink-0 text-right",
+							style: {
+								fontSize: "0.75rem",
+								lineHeight: "1.5rem",
+								minWidth: "1.25rem"
+							},
+							"aria-hidden": "true",
+							children: Array.from({ length: Math.max(B, I) }, (e, n) => /* @__PURE__ */ v(t, {
+								style: {
+									height: `${Ve[n] ?? 24}px`,
+									lineHeight: "1.5rem",
+									color: n === Z ? "var(--foreground)" : "var(--muted-foreground)",
+									opacity: n === Z ? .7 : .4
+								},
+								children: n + 1
+							}, n))
+						}), /* @__PURE__ */ v(t, {
+							className: "relative flex-1 min-w-0",
+							children: /* @__PURE__ */ v(be, { editor: W })
+						})]
+					})
+				}),
+				/* @__PURE__ */ y(i, {
+					size: "xs",
+					tone: $ ? "warning" : "muted",
+					weight: $ ? "medium" : "normal",
+					className: "mt-1",
+					children: [N.lineCount(B, I), $ && N.overLineLimit(I)]
+				}),
+				!O && Ee && /* @__PURE__ */ v(c, { children: /* @__PURE__ */ y(n, {
+					align: "center",
+					gap: "2",
+					className: "mt-2",
+					children: [
+						/* @__PURE__ */ v(i, {
+							as: "span",
+							size: "xs",
+							tone: "muted",
+							children: N.alignment
+						}),
+						/* @__PURE__ */ y(n, {
+							className: "rounded-md border overflow-hidden",
+							children: [
+								/* @__PURE__ */ y(o, { children: [/* @__PURE__ */ v(l, {
+									asChild: !0,
+									children: /* @__PURE__ */ v("button", {
+										type: "button",
+										onClick: () => X("left"),
+										"aria-label": N.alignLeft,
+										className: e("px-3 py-1.5 text-xs transition-colors", Q === "left" ? "bg-primary text-primary-foreground" : "hover:bg-muted text-muted-foreground"),
+										children: /* @__PURE__ */ v(he, { className: "w-4 h-4" })
+									})
+								}), /* @__PURE__ */ v(s, { children: N.alignLeft })] }),
+								/* @__PURE__ */ y(o, { children: [/* @__PURE__ */ v(l, {
+									asChild: !0,
+									children: /* @__PURE__ */ v("button", {
+										type: "button",
+										onClick: () => X("center"),
+										"aria-label": N.alignCenter,
+										className: e("px-3 py-1.5 text-xs border-x transition-colors", Q === "center" ? "bg-primary text-primary-foreground border-primary" : "hover:bg-muted text-muted-foreground"),
+										children: /* @__PURE__ */ v(me, { className: "w-4 h-4" })
+									})
+								}), /* @__PURE__ */ v(s, { children: N.alignCenter })] }),
+								/* @__PURE__ */ y(o, { children: [/* @__PURE__ */ v(l, {
+									asChild: !0,
+									children: /* @__PURE__ */ v("button", {
+										type: "button",
+										onClick: () => X("right"),
+										"aria-label": N.alignRight,
+										className: e("px-3 py-1.5 text-xs transition-colors", Q === "right" ? "bg-primary text-primary-foreground" : "hover:bg-muted text-muted-foreground"),
+										children: /* @__PURE__ */ v(ge, { className: "w-4 h-4" })
+									})
+								}), /* @__PURE__ */ v(s, { children: N.alignRight })] })
+							]
+						}),
+						Z !== null && /* @__PURE__ */ v(i, {
+							as: "span",
+							size: "xs",
+							tone: "muted",
+							children: N.currentLine(Z + 1)
+						})
+					]
+				}) })
+			]
+		})]
+	});
+});
+//#endregion
+export { S as DEFAULT_TEMPLATE_EDITOR_LABELS, w as TemplateEditor };
+
+//# sourceMappingURL=template-editor.js.map