fluxo-ui 0.0.1

package/draw.js

@@ -0,0 +1,3147 @@
+import { n as __toESM, t as require_classnames } from "./classnames-CEAOwX3h.js";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import './styles/draw.css';//#region src/components/canvas-draw/canvas-draw-types.ts
+var import_classnames = /* @__PURE__ */ __toESM(require_classnames(), 1);
+var colorMap = {
+	red: "#e63946",
+	orange: "#f4a261",
+	yellow: "#f9c74f",
+	green: "#52b788",
+	teal: "#2a9d8f",
+	blue: "#4361ee",
+	purple: "#7209b7",
+	black: "#1a1a2e",
+	white: "#ffffff"
+};
+var defaultToolDefaults = {
+	strokeColor: "red",
+	fillColor: "transparent",
+	strokeWidth: 2,
+	fontFamily: "sans-serif",
+	fontSize: 14,
+	fontColor: "black",
+	fontBold: false,
+	fontItalic: false,
+	fontUnderline: false,
+	rounded: false,
+	arrowheadStyle: "single"
+};
+function contrastColor(hex) {
+	const h = hex.replace("#", "");
+	const r = parseInt(h.substring(0, 2), 16);
+	const g = parseInt(h.substring(2, 4), 16);
+	const b = parseInt(h.substring(4, 6), 16);
+	return (.299 * r + .587 * g + .114 * b) / 255 > .55 ? "#1a1a2e" : "#ffffff";
+}
+function autoFontColor(fillColor, explicitFontColor) {
+	if (fillColor === "transparent" || fillColor === "none") return colorMap[explicitFontColor] ?? explicitFontColor;
+	const hex = (colorMap[fillColor] ?? fillColor).replace("#", "");
+	const r = parseInt(hex.substring(0, 2), 16);
+	const g = parseInt(hex.substring(2, 4), 16);
+	const b = parseInt(hex.substring(4, 6), 16);
+	return (.299 * r + .587 * g + .114 * b) / 255 > .55 ? "#1a1a2e" : "#ffffff";
+}
+//#endregion
+//#region src/components/canvas-draw/CanvasDrawOverlay.tsx
+var svgNs = "http://www.w3.org/2000/svg";
+function uid() {
+	return `cd-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+}
+function svgEl(tag) {
+	return document.createElementNS(svgNs, tag);
+}
+function clr(c) {
+	return colorMap[c] ?? c;
+}
+function fontStyleStr(obj) {
+	let s = "";
+	if (obj.fontBold) s += "font-weight:700;";
+	if (obj.fontItalic) s += "font-style:italic;";
+	if (obj.fontUnderline) s += "text-decoration:underline;";
+	return s;
+}
+function getVideoBounds(videoEl) {
+	const rect = videoEl.getBoundingClientRect();
+	const vw = videoEl.videoWidth;
+	const vh = videoEl.videoHeight;
+	if (!vw || !vh) return {
+		x: 0,
+		y: 0,
+		w: rect.width,
+		h: rect.height
+	};
+	const containerAspect = rect.width / rect.height;
+	const videoAspect = vw / vh;
+	let renderedW;
+	let renderedH;
+	if (containerAspect > videoAspect) {
+		renderedH = rect.height;
+		renderedW = renderedH * videoAspect;
+	} else {
+		renderedW = rect.width;
+		renderedH = renderedW / videoAspect;
+	}
+	return {
+		x: (rect.width - renderedW) / 2,
+		y: (rect.height - renderedH) / 2,
+		w: renderedW,
+		h: renderedH
+	};
+}
+var handleSz = 7;
+var rotateHandleOffset = 24;
+function appendBoxHandles(parent, x, y, w, h, showRotate = false) {
+	const border = svgEl("rect");
+	border.setAttribute("x", String(x - 1));
+	border.setAttribute("y", String(y - 1));
+	border.setAttribute("width", String(w + 2));
+	border.setAttribute("height", String(h + 2));
+	border.setAttribute("fill", "none");
+	border.setAttribute("stroke", "var(--eui-primary, #3b82f6)");
+	border.setAttribute("stroke-width", "1");
+	border.setAttribute("stroke-dasharray", "4,3");
+	border.setAttribute("pointer-events", "none");
+	parent.appendChild(border);
+	const positions = [
+		{
+			pos: "nw",
+			cx: x,
+			cy: y
+		},
+		{
+			pos: "n",
+			cx: x + w / 2,
+			cy: y
+		},
+		{
+			pos: "ne",
+			cx: x + w,
+			cy: y
+		},
+		{
+			pos: "e",
+			cx: x + w,
+			cy: y + h / 2
+		},
+		{
+			pos: "se",
+			cx: x + w,
+			cy: y + h
+		},
+		{
+			pos: "s",
+			cx: x + w / 2,
+			cy: y + h
+		},
+		{
+			pos: "sw",
+			cx: x,
+			cy: y + h
+		},
+		{
+			pos: "w",
+			cx: x,
+			cy: y + h / 2
+		}
+	];
+	for (const { pos, cx, cy } of positions) {
+		const handle = svgEl("rect");
+		handle.setAttribute("x", String(cx - handleSz / 2));
+		handle.setAttribute("y", String(cy - handleSz / 2));
+		handle.setAttribute("width", String(handleSz));
+		handle.setAttribute("height", String(handleSz));
+		handle.setAttribute("fill", "#ffffff");
+		handle.setAttribute("stroke", "var(--eui-primary, #3b82f6)");
+		handle.setAttribute("stroke-width", "1.5");
+		handle.setAttribute("rx", "1");
+		handle.dataset.handle = pos;
+		handle.style.cursor = getCursorForHandle(pos);
+		parent.appendChild(handle);
+	}
+	if (showRotate) {
+		const cx = x + w / 2;
+		const cy = y - rotateHandleOffset;
+		const stem = svgEl("line");
+		stem.setAttribute("x1", String(cx));
+		stem.setAttribute("y1", String(y - 1));
+		stem.setAttribute("x2", String(cx));
+		stem.setAttribute("y2", String(cy + 5));
+		stem.setAttribute("stroke", "var(--eui-primary, #3b82f6)");
+		stem.setAttribute("stroke-width", "1");
+		stem.setAttribute("pointer-events", "none");
+		parent.appendChild(stem);
+		const circle = svgEl("circle");
+		circle.setAttribute("cx", String(cx));
+		circle.setAttribute("cy", String(cy));
+		circle.setAttribute("r", "5");
+		circle.setAttribute("fill", "#ffffff");
+		circle.setAttribute("stroke", "var(--eui-primary, #3b82f6)");
+		circle.setAttribute("stroke-width", "1.5");
+		circle.dataset.handle = "rotate";
+		circle.style.cursor = "grab";
+		parent.appendChild(circle);
+	}
+}
+function appendLineHandles(parent, x1, y1, x2, y2) {
+	for (const [hx, hy, pos] of [[
+		x1,
+		y1,
+		"start"
+	], [
+		x2,
+		y2,
+		"end"
+	]]) {
+		const c = svgEl("circle");
+		c.setAttribute("cx", String(hx));
+		c.setAttribute("cy", String(hy));
+		c.setAttribute("r", String(handleSz / 2 + 1));
+		c.setAttribute("fill", "#ffffff");
+		c.setAttribute("stroke", "var(--eui-primary, #3b82f6)");
+		c.setAttribute("stroke-width", "1.5");
+		c.dataset.handle = pos;
+		c.style.cursor = "crosshair";
+		parent.appendChild(c);
+	}
+}
+function appendCurvedArrowHandles(parent, x1, y1, x2, y2, cpx, cpy) {
+	const cpLine1 = svgEl("line");
+	cpLine1.setAttribute("x1", String(x1));
+	cpLine1.setAttribute("y1", String(y1));
+	cpLine1.setAttribute("x2", String(cpx));
+	cpLine1.setAttribute("y2", String(cpy));
+	cpLine1.setAttribute("stroke", "var(--eui-primary, #3b82f6)");
+	cpLine1.setAttribute("stroke-width", "0.5");
+	cpLine1.setAttribute("stroke-dasharray", "3,3");
+	cpLine1.setAttribute("pointer-events", "none");
+	parent.appendChild(cpLine1);
+	const cpLine2 = svgEl("line");
+	cpLine2.setAttribute("x1", String(x2));
+	cpLine2.setAttribute("y1", String(y2));
+	cpLine2.setAttribute("x2", String(cpx));
+	cpLine2.setAttribute("y2", String(cpy));
+	cpLine2.setAttribute("stroke", "var(--eui-primary, #3b82f6)");
+	cpLine2.setAttribute("stroke-width", "0.5");
+	cpLine2.setAttribute("stroke-dasharray", "3,3");
+	cpLine2.setAttribute("pointer-events", "none");
+	parent.appendChild(cpLine2);
+	for (const [hx, hy, pos] of [
+		[
+			x1,
+			y1,
+			"start"
+		],
+		[
+			x2,
+			y2,
+			"end"
+		],
+		[
+			cpx,
+			cpy,
+			"cp"
+		]
+	]) {
+		const c = svgEl("circle");
+		c.setAttribute("cx", String(hx));
+		c.setAttribute("cy", String(hy));
+		c.setAttribute("r", String(pos === "cp" ? handleSz / 2 + 2 : handleSz / 2 + 1));
+		c.setAttribute("fill", pos === "cp" ? "var(--eui-primary, #3b82f6)" : "#ffffff");
+		c.setAttribute("stroke", "var(--eui-primary, #3b82f6)");
+		c.setAttribute("stroke-width", "1.5");
+		c.dataset.handle = pos;
+		c.style.cursor = "crosshair";
+		parent.appendChild(c);
+	}
+}
+function getCursorForHandle(pos) {
+	return {
+		nw: "nw-resize",
+		n: "n-resize",
+		ne: "ne-resize",
+		e: "e-resize",
+		se: "se-resize",
+		s: "s-resize",
+		sw: "sw-resize",
+		w: "w-resize"
+	}[pos] ?? "pointer";
+}
+function renderObjectToSvg(parent, obj, selected, scaleX, scaleY, defsEl, rotation = 0) {
+	const g = svgEl("g");
+	g.dataset.objId = obj.id;
+	const sx = (v) => v * scaleX;
+	const sy = (v) => v * scaleY;
+	const sw = (v) => Math.max(1, v * Math.min(scaleX, scaleY));
+	switch (obj.type) {
+		case "arrow":
+		case "line": {
+			const line = svgEl("line");
+			line.setAttribute("x1", String(sx(obj.x1)));
+			line.setAttribute("y1", String(sy(obj.y1)));
+			line.setAttribute("x2", String(sx(obj.x2)));
+			line.setAttribute("y2", String(sy(obj.y2)));
+			line.setAttribute("stroke", clr(obj.strokeColor));
+			line.setAttribute("stroke-width", String(sw(obj.strokeWidth)));
+			if (obj.type === "arrow") {
+				const markerId = `cd-ah-${obj.id}`;
+				const marker = svgEl("marker");
+				marker.setAttribute("id", markerId);
+				marker.setAttribute("markerWidth", "10");
+				marker.setAttribute("markerHeight", "7");
+				marker.setAttribute("refX", "10");
+				marker.setAttribute("refY", "3.5");
+				marker.setAttribute("orient", "auto");
+				const poly = svgEl("polygon");
+				poly.setAttribute("points", "0 0, 10 3.5, 0 7");
+				poly.setAttribute("fill", clr(obj.strokeColor));
+				marker.appendChild(poly);
+				defsEl.appendChild(marker);
+				line.setAttribute("marker-end", `url(#${markerId})`);
+			}
+			g.appendChild(line);
+			const hit = svgEl("line");
+			hit.setAttribute("x1", String(sx(obj.x1)));
+			hit.setAttribute("y1", String(sy(obj.y1)));
+			hit.setAttribute("x2", String(sx(obj.x2)));
+			hit.setAttribute("y2", String(sy(obj.y2)));
+			hit.setAttribute("stroke", "transparent");
+			hit.setAttribute("stroke-width", "12");
+			hit.style.cursor = selected ? "move" : "pointer";
+			hit.dataset.objId = obj.id;
+			g.appendChild(hit);
+			if (selected) appendLineHandles(g, sx(obj.x1), sy(obj.y1), sx(obj.x2), sy(obj.y2));
+			break;
+		}
+		case "rect": {
+			const rect = svgEl("rect");
+			rect.setAttribute("x", String(sx(obj.x)));
+			rect.setAttribute("y", String(sy(obj.y)));
+			rect.setAttribute("width", String(sx(obj.width)));
+			rect.setAttribute("height", String(sy(obj.height)));
+			rect.setAttribute("stroke", clr(obj.strokeColor));
+			rect.setAttribute("stroke-width", String(sw(obj.strokeWidth)));
+			rect.setAttribute("fill", obj.fillColor === "transparent" ? "none" : clr(obj.fillColor));
+			if (obj.rounded) {
+				rect.setAttribute("rx", String(sw(8)));
+				rect.setAttribute("ry", String(sw(8)));
+			}
+			rect.style.cursor = selected ? "move" : "pointer";
+			rect.dataset.objId = obj.id;
+			g.appendChild(rect);
+			if (selected) appendBoxHandles(g, sx(obj.x), sy(obj.y), sx(obj.width), sy(obj.height), true);
+			break;
+		}
+		case "circle": {
+			const el = svgEl("ellipse");
+			el.setAttribute("cx", String(sx(obj.x + obj.width / 2)));
+			el.setAttribute("cy", String(sy(obj.y + obj.height / 2)));
+			el.setAttribute("rx", String(Math.abs(sx(obj.width)) / 2));
+			el.setAttribute("ry", String(Math.abs(sy(obj.height)) / 2));
+			el.setAttribute("stroke", clr(obj.strokeColor));
+			el.setAttribute("stroke-width", String(sw(obj.strokeWidth)));
+			el.setAttribute("fill", obj.fillColor === "transparent" ? "none" : clr(obj.fillColor));
+			el.style.cursor = selected ? "move" : "pointer";
+			el.dataset.objId = obj.id;
+			g.appendChild(el);
+			if (selected) appendBoxHandles(g, sx(obj.x), sy(obj.y), sx(obj.width), sy(obj.height), true);
+			break;
+		}
+		case "freehand": {
+			if (obj.points.length < 2) break;
+			const d = obj.points.map((p, i) => `${i === 0 ? "M" : "L"}${sx(p.x)},${sy(p.y)}`).join(" ");
+			const path = svgEl("path");
+			path.setAttribute("d", d);
+			path.setAttribute("stroke", clr(obj.strokeColor));
+			path.setAttribute("stroke-width", String(sw(obj.strokeWidth)));
+			path.setAttribute("fill", "none");
+			path.setAttribute("stroke-linecap", "round");
+			path.setAttribute("stroke-linejoin", "round");
+			path.style.cursor = selected ? "move" : "pointer";
+			path.dataset.objId = obj.id;
+			g.appendChild(path);
+			if (selected) {
+				const xs = obj.points.map((p) => p.x);
+				const ys = obj.points.map((p) => p.y);
+				appendBoxHandles(g, sx(Math.min(...xs)), sy(Math.min(...ys)), sx(Math.max(...xs) - Math.min(...xs)), sy(Math.max(...ys) - Math.min(...ys)), true);
+			}
+			break;
+		}
+		case "text": {
+			const fo = svgEl("foreignObject");
+			fo.setAttribute("x", String(sx(obj.x)));
+			fo.setAttribute("y", String(sy(obj.y)));
+			fo.setAttribute("width", String(sx(obj.width)));
+			fo.setAttribute("height", String(sy(obj.height)));
+			fo.style.overflow = "visible";
+			fo.style.cursor = selected ? "move" : "pointer";
+			fo.dataset.objId = obj.id;
+			const div = document.createElement("div");
+			const textBg = "fillColor" in obj && obj.fillColor !== "transparent" ? `background:${clr(obj.fillColor)};border-radius:4px;` : "";
+			div.style.cssText = `width:100%;height:100%;padding:4px;box-sizing:border-box;font-family:${obj.fontFamily};font-size:${sw(obj.fontSize)}px;color:${clr(obj.fontColor)};word-wrap:break-word;white-space:pre-wrap;pointer-events:none;user-select:none;${textBg}${fontStyleStr(obj)}`;
+			div.textContent = obj.text;
+			fo.appendChild(div);
+			g.appendChild(fo);
+			if (selected) appendBoxHandles(g, sx(obj.x), sy(obj.y), sx(obj.width), sy(obj.height), true);
+			break;
+		}
+		case "balloon": {
+			const { x, y, width: bw, height: bh } = obj;
+			const rx2 = sw(8);
+			const tailW = sw(16);
+			const tailH = sw(14);
+			const tailX = sx(x + bw / 2);
+			const balloonPath = `M ${sx(x) + rx2} ${sy(y)} H ${sx(x + bw) - rx2} Q ${sx(x + bw)} ${sy(y)} ${sx(x + bw)} ${sy(y) + rx2} V ${sy(y + bh) - rx2} Q ${sx(x + bw)} ${sy(y + bh)} ${sx(x + bw) - rx2} ${sy(y + bh)} H ${tailX + tailW / 2} L ${tailX} ${sy(y + bh) + tailH} L ${tailX - tailW / 2} ${sy(y + bh)} H ${sx(x) + rx2} Q ${sx(x)} ${sy(y + bh)} ${sx(x)} ${sy(y + bh) - rx2} V ${sy(y) + rx2} Q ${sx(x)} ${sy(y)} ${sx(x) + rx2} ${sy(y)} Z`;
+			const path = svgEl("path");
+			path.setAttribute("d", balloonPath);
+			path.setAttribute("stroke", clr(obj.strokeColor));
+			path.setAttribute("stroke-width", String(sw(obj.strokeWidth)));
+			path.setAttribute("fill", obj.fillColor === "transparent" ? "none" : clr(obj.fillColor));
+			path.style.cursor = selected ? "move" : "pointer";
+			path.dataset.objId = obj.id;
+			g.appendChild(path);
+			const fo = svgEl("foreignObject");
+			fo.setAttribute("x", String(sx(x) + sw(6)));
+			fo.setAttribute("y", String(sy(y) + sw(4)));
+			fo.setAttribute("width", String(Math.max(sx(bw) - sw(12), 20)));
+			fo.setAttribute("height", String(Math.max(sy(bh) - sw(8), 20)));
+			fo.style.overflow = "visible";
+			fo.style.pointerEvents = "none";
+			const fc = autoFontColor(obj.fillColor, obj.fontColor);
+			const div = document.createElement("div");
+			div.style.cssText = `width:100%;height:100%;box-sizing:border-box;font-family:${obj.fontFamily};font-size:${sw(obj.fontSize)}px;color:${fc};word-wrap:break-word;white-space:pre-wrap;user-select:none;${fontStyleStr(obj)}`;
+			div.textContent = obj.text;
+			fo.appendChild(div);
+			g.appendChild(fo);
+			if (selected) appendBoxHandles(g, sx(x), sy(y), sx(bw), sy(bh), true);
+			break;
+		}
+		case "step": {
+			const circle = svgEl("circle");
+			circle.setAttribute("cx", String(sx(obj.x)));
+			circle.setAttribute("cy", String(sy(obj.y)));
+			circle.setAttribute("r", String(sw(obj.radius)));
+			circle.setAttribute("fill", clr(obj.fillColor));
+			circle.setAttribute("stroke", clr(obj.strokeColor));
+			circle.setAttribute("stroke-width", String(sw(obj.strokeWidth)));
+			circle.style.cursor = selected ? "move" : "pointer";
+			circle.dataset.objId = obj.id;
+			g.appendChild(circle);
+			const fc2 = autoFontColor(obj.fillColor, obj.fontColor);
+			const txt = svgEl("text");
+			txt.setAttribute("x", String(sx(obj.x)));
+			txt.setAttribute("y", String(sy(obj.y) + 1));
+			txt.setAttribute("text-anchor", "middle");
+			txt.setAttribute("dominant-baseline", "middle");
+			txt.setAttribute("fill", fc2);
+			txt.setAttribute("font-size", String(Math.max(sw(obj.radius) * .9, 10)));
+			txt.setAttribute("font-weight", "700");
+			txt.setAttribute("font-family", "sans-serif");
+			txt.setAttribute("pointer-events", "none");
+			txt.textContent = String(obj.stepNumber);
+			g.appendChild(txt);
+			if (selected) {
+				const r = sw(obj.radius);
+				appendBoxHandles(g, sx(obj.x) - r, sy(obj.y) - r, r * 2, r * 2, true);
+			}
+			break;
+		}
+		case "highlighter": {
+			if (obj.points.length < 2) break;
+			const d = obj.points.map((p, i) => `${i === 0 ? "M" : "L"}${sx(p.x)},${sy(p.y)}`).join(" ");
+			const path = svgEl("path");
+			path.setAttribute("d", d);
+			path.setAttribute("stroke", clr(obj.strokeColor));
+			path.setAttribute("stroke-width", String(Math.max(sw(obj.strokeWidth) * 6, 12)));
+			path.setAttribute("fill", "none");
+			path.setAttribute("stroke-linecap", "round");
+			path.setAttribute("stroke-linejoin", "round");
+			path.setAttribute("opacity", "0.35");
+			path.style.cursor = selected ? "move" : "pointer";
+			path.dataset.objId = obj.id;
+			g.appendChild(path);
+			if (selected) {
+				const xs2 = obj.points.map((p) => p.x);
+				const ys2 = obj.points.map((p) => p.y);
+				appendBoxHandles(g, sx(Math.min(...xs2)), sy(Math.min(...ys2)), sx(Math.max(...xs2) - Math.min(...xs2)), sy(Math.max(...ys2) - Math.min(...ys2)), true);
+			}
+			break;
+		}
+		case "callout": {
+			const lineEl = svgEl("line");
+			lineEl.setAttribute("x1", String(sx(obj.x1)));
+			lineEl.setAttribute("y1", String(sy(obj.y1)));
+			lineEl.setAttribute("x2", String(sx(obj.x2)));
+			lineEl.setAttribute("y2", String(sy(obj.y2)));
+			lineEl.setAttribute("stroke", clr(obj.strokeColor));
+			lineEl.setAttribute("stroke-width", String(sw(obj.strokeWidth)));
+			g.appendChild(lineEl);
+			const hitLine = svgEl("line");
+			hitLine.setAttribute("x1", String(sx(obj.x1)));
+			hitLine.setAttribute("y1", String(sy(obj.y1)));
+			hitLine.setAttribute("x2", String(sx(obj.x2)));
+			hitLine.setAttribute("y2", String(sy(obj.y2)));
+			hitLine.setAttribute("stroke", "transparent");
+			hitLine.setAttribute("stroke-width", "12");
+			hitLine.style.cursor = selected ? "move" : "pointer";
+			hitLine.dataset.objId = obj.id;
+			g.appendChild(hitLine);
+			const dotR = sw(obj.radius);
+			const dotEl = svgEl("circle");
+			dotEl.setAttribute("cx", String(sx(obj.x1)));
+			dotEl.setAttribute("cy", String(sy(obj.y1)));
+			dotEl.setAttribute("r", String(Math.max(dotR * .15, 4)));
+			dotEl.setAttribute("fill", clr(obj.strokeColor));
+			g.appendChild(dotEl);
+			const circleEl = svgEl("circle");
+			circleEl.setAttribute("cx", String(sx(obj.x2)));
+			circleEl.setAttribute("cy", String(sy(obj.y2)));
+			circleEl.setAttribute("r", String(dotR));
+			circleEl.setAttribute("fill", clr(obj.fillColor));
+			circleEl.setAttribute("stroke", clr(obj.strokeColor));
+			circleEl.setAttribute("stroke-width", String(sw(obj.strokeWidth)));
+			circleEl.style.cursor = selected ? "move" : "pointer";
+			circleEl.dataset.objId = obj.id;
+			g.appendChild(circleEl);
+			const fc3 = autoFontColor(obj.fillColor, obj.fontColor);
+			const numTxt = svgEl("text");
+			numTxt.setAttribute("x", String(sx(obj.x2)));
+			numTxt.setAttribute("y", String(sy(obj.y2) + 1));
+			numTxt.setAttribute("text-anchor", "middle");
+			numTxt.setAttribute("dominant-baseline", "middle");
+			numTxt.setAttribute("fill", fc3);
+			numTxt.setAttribute("font-size", String(Math.max(dotR * .75, 12)));
+			numTxt.setAttribute("font-weight", "700");
+			numTxt.setAttribute("font-family", "sans-serif");
+			numTxt.setAttribute("pointer-events", "none");
+			numTxt.textContent = String(obj.stepNumber);
+			g.appendChild(numTxt);
+			if (selected) {
+				const selLine = svgEl("line");
+				selLine.setAttribute("x1", String(sx(obj.x1)));
+				selLine.setAttribute("y1", String(sy(obj.y1)));
+				selLine.setAttribute("x2", String(sx(obj.x2)));
+				selLine.setAttribute("y2", String(sy(obj.y2)));
+				selLine.setAttribute("stroke", "var(--eui-primary, #3b82f6)");
+				selLine.setAttribute("stroke-width", "1");
+				selLine.setAttribute("stroke-dasharray", "4,3");
+				selLine.setAttribute("pointer-events", "none");
+				g.appendChild(selLine);
+				appendLineHandles(g, sx(obj.x1), sy(obj.y1), sx(obj.x2), sy(obj.y2));
+			}
+			break;
+		}
+		case "dimension": {
+			const dx = sx(obj.x2) - sx(obj.x1);
+			const dy = sy(obj.y2) - sy(obj.y1);
+			const len = Math.sqrt(dx * dx + dy * dy);
+			const perpX = len > 0 ? -dy / len : 0;
+			const perpY = len > 0 ? dx / len : 1;
+			const capLen = 6;
+			const line2 = svgEl("line");
+			line2.setAttribute("x1", String(sx(obj.x1)));
+			line2.setAttribute("y1", String(sy(obj.y1)));
+			line2.setAttribute("x2", String(sx(obj.x2)));
+			line2.setAttribute("y2", String(sy(obj.y2)));
+			line2.setAttribute("stroke", clr(obj.strokeColor));
+			line2.setAttribute("stroke-width", String(sw(obj.strokeWidth)));
+			g.appendChild(line2);
+			for (const [ex, ey] of [[sx(obj.x1), sy(obj.y1)], [sx(obj.x2), sy(obj.y2)]]) {
+				const cap = svgEl("line");
+				cap.setAttribute("x1", String(ex + perpX * capLen));
+				cap.setAttribute("y1", String(ey + perpY * capLen));
+				cap.setAttribute("x2", String(ex - perpX * capLen));
+				cap.setAttribute("y2", String(ey - perpY * capLen));
+				cap.setAttribute("stroke", clr(obj.strokeColor));
+				cap.setAttribute("stroke-width", String(sw(obj.strokeWidth)));
+				g.appendChild(cap);
+			}
+			const midX = (sx(obj.x1) + sx(obj.x2)) / 2;
+			const midY = (sy(obj.y1) + sy(obj.y2)) / 2;
+			const dimLabel = svgEl("text");
+			dimLabel.setAttribute("x", String(midX + perpX * 12));
+			dimLabel.setAttribute("y", String(midY + perpY * 12));
+			dimLabel.setAttribute("text-anchor", "middle");
+			dimLabel.setAttribute("dominant-baseline", "middle");
+			dimLabel.setAttribute("fill", clr(obj.strokeColor));
+			dimLabel.setAttribute("font-size", "11");
+			dimLabel.setAttribute("font-family", "sans-serif");
+			dimLabel.setAttribute("font-weight", "600");
+			dimLabel.setAttribute("pointer-events", "none");
+			dimLabel.textContent = obj.customLabel ?? `${Math.round(len)}px`;
+			g.appendChild(dimLabel);
+			const hitLine2 = svgEl("line");
+			hitLine2.setAttribute("x1", String(sx(obj.x1)));
+			hitLine2.setAttribute("y1", String(sy(obj.y1)));
+			hitLine2.setAttribute("x2", String(sx(obj.x2)));
+			hitLine2.setAttribute("y2", String(sy(obj.y2)));
+			hitLine2.setAttribute("stroke", "transparent");
+			hitLine2.setAttribute("stroke-width", "12");
+			hitLine2.style.cursor = selected ? "move" : "pointer";
+			hitLine2.dataset.objId = obj.id;
+			g.appendChild(hitLine2);
+			if (selected) appendLineHandles(g, sx(obj.x1), sy(obj.y1), sx(obj.x2), sy(obj.y2));
+			break;
+		}
+		case "curvedArrow": {
+			const markerId = `cd-cah-${obj.id}`;
+			const marker = svgEl("marker");
+			marker.setAttribute("id", markerId);
+			marker.setAttribute("markerWidth", "10");
+			marker.setAttribute("markerHeight", "7");
+			marker.setAttribute("refX", "10");
+			marker.setAttribute("refY", "3.5");
+			marker.setAttribute("orient", "auto");
+			const poly = svgEl("polygon");
+			poly.setAttribute("points", "0 0, 10 3.5, 0 7");
+			poly.setAttribute("fill", clr(obj.strokeColor));
+			marker.appendChild(poly);
+			defsEl.appendChild(marker);
+			const pathD = `M ${sx(obj.x1)} ${sy(obj.y1)} Q ${sx(obj.cpx)} ${sy(obj.cpy)} ${sx(obj.x2)} ${sy(obj.y2)}`;
+			const curvePath = svgEl("path");
+			curvePath.setAttribute("d", pathD);
+			curvePath.setAttribute("stroke", clr(obj.strokeColor));
+			curvePath.setAttribute("stroke-width", String(sw(obj.strokeWidth)));
+			curvePath.setAttribute("fill", "none");
+			curvePath.setAttribute("marker-end", `url(#${markerId})`);
+			g.appendChild(curvePath);
+			const hitPath = svgEl("path");
+			hitPath.setAttribute("d", pathD);
+			hitPath.setAttribute("stroke", "transparent");
+			hitPath.setAttribute("stroke-width", "12");
+			hitPath.setAttribute("fill", "none");
+			hitPath.style.cursor = selected ? "move" : "pointer";
+			hitPath.dataset.objId = obj.id;
+			g.appendChild(hitPath);
+			if (selected) appendCurvedArrowHandles(g, sx(obj.x1), sy(obj.y1), sx(obj.x2), sy(obj.y2), sx(obj.cpx), sy(obj.cpy));
+			break;
+		}
+	}
+	const isLineType = obj.type === "arrow" || obj.type === "line" || obj.type === "dimension" || obj.type === "callout" || obj.type === "curvedArrow";
+	if (rotation && !isLineType) {
+		const bbox = getObjectCenter(obj, sx, sy);
+		g.setAttribute("transform", `rotate(${rotation} ${bbox.cx} ${bbox.cy})`);
+	}
+	parent.appendChild(g);
+}
+function getObjectCenter(obj, sx, sy) {
+	if ("width" in obj && "height" in obj && "x" in obj && "y" in obj) {
+		const o = obj;
+		return {
+			cx: sx(o.x) + sx(o.width) / 2,
+			cy: sy(o.y) + sy(o.height) / 2
+		};
+	}
+	if (obj.type === "step") return {
+		cx: sx(obj.x),
+		cy: sy(obj.y)
+	};
+	if (obj.type === "freehand") {
+		const xs = obj.points.map((p) => p.x);
+		const ys = obj.points.map((p) => p.y);
+		const minX = Math.min(...xs);
+		const maxX = Math.max(...xs);
+		const minY = Math.min(...ys);
+		const maxY = Math.max(...ys);
+		return {
+			cx: sx((minX + maxX) / 2),
+			cy: sy((minY + maxY) / 2)
+		};
+	}
+	return {
+		cx: 0,
+		cy: 0
+	};
+}
+function applyDrag(item, dxPct, dyPct) {
+	const obj = item.object;
+	if (obj.type === "freehand" || obj.type === "highlighter") {
+		const pts = obj.points;
+		return {
+			...item,
+			xPct: item.xPct + dxPct,
+			yPct: item.yPct + dyPct,
+			object: {
+				...obj,
+				points: pts.map((p) => ({
+					x: p.x + dxPct,
+					y: p.y + dyPct
+				}))
+			}
+		};
+	}
+	if (obj.type === "arrow" || obj.type === "line" || obj.type === "dimension") return {
+		...item,
+		xPct: item.xPct + dxPct,
+		yPct: item.yPct + dyPct,
+		object: {
+			...obj,
+			x1: obj.x1 + dxPct,
+			y1: obj.y1 + dyPct,
+			x2: obj.x2 + dxPct,
+			y2: obj.y2 + dyPct
+		}
+	};
+	if (obj.type === "callout") return {
+		...item,
+		xPct: item.xPct + dxPct,
+		yPct: item.yPct + dyPct,
+		object: {
+			...obj,
+			x1: obj.x1 + dxPct,
+			y1: obj.y1 + dyPct,
+			x2: obj.x2 + dxPct,
+			y2: obj.y2 + dyPct
+		}
+	};
+	if (obj.type === "curvedArrow") return {
+		...item,
+		xPct: item.xPct + dxPct,
+		yPct: item.yPct + dyPct,
+		object: {
+			...obj,
+			x1: obj.x1 + dxPct,
+			y1: obj.y1 + dyPct,
+			x2: obj.x2 + dxPct,
+			y2: obj.y2 + dyPct,
+			cpx: obj.cpx + dxPct,
+			cpy: obj.cpy + dyPct
+		}
+	};
+	if ("x" in obj && "y" in obj) return {
+		...item,
+		xPct: item.xPct + dxPct,
+		yPct: item.yPct + dyPct,
+		object: {
+			...obj,
+			x: obj.x + dxPct,
+			y: obj.y + dyPct
+		}
+	};
+	return item;
+}
+function applyResize(item, handle, dxPct, dyPct) {
+	const obj = item.object;
+	if (obj.type === "arrow" || obj.type === "line" || obj.type === "dimension") {
+		if (handle === "end") return {
+			...item,
+			wPct: (item.wPct ?? 0) + dxPct,
+			hPct: (item.hPct ?? 0) + dyPct,
+			object: {
+				...obj,
+				x2: obj.x2 + dxPct,
+				y2: obj.y2 + dyPct
+			}
+		};
+		if (handle === "start") return {
+			...item,
+			xPct: item.xPct + dxPct,
+			yPct: item.yPct + dyPct,
+			object: {
+				...obj,
+				x1: obj.x1 + dxPct,
+				y1: obj.y1 + dyPct
+			}
+		};
+	}
+	if (obj.type === "callout") {
+		if (handle === "end") return {
+			...item,
+			object: {
+				...obj,
+				x2: obj.x2 + dxPct,
+				y2: obj.y2 + dyPct
+			}
+		};
+		if (handle === "start") return {
+			...item,
+			object: {
+				...obj,
+				x1: obj.x1 + dxPct,
+				y1: obj.y1 + dyPct
+			}
+		};
+	}
+	if (obj.type === "curvedArrow") {
+		if (handle === "end") return {
+			...item,
+			wPct: (item.wPct ?? 0) + dxPct,
+			hPct: (item.hPct ?? 0) + dyPct,
+			object: {
+				...obj,
+				x2: obj.x2 + dxPct,
+				y2: obj.y2 + dyPct
+			}
+		};
+		if (handle === "start") return {
+			...item,
+			xPct: item.xPct + dxPct,
+			yPct: item.yPct + dyPct,
+			object: {
+				...obj,
+				x1: obj.x1 + dxPct,
+				y1: obj.y1 + dyPct
+			}
+		};
+		if (handle === "cp") return {
+			...item,
+			object: {
+				...obj,
+				cpx: obj.cpx + dxPct,
+				cpy: obj.cpy + dyPct
+			}
+		};
+	}
+	if (obj.type === "step") {
+		const currentR = (item.wPct ?? .04) / 2;
+		const delta = Math.max(Math.abs(dxPct), Math.abs(dyPct));
+		const expanding = handle.includes("e") && dxPct > 0 || handle.includes("s") && dyPct > 0 || handle.includes("w") && dxPct < 0 || handle.includes("n") && dyPct < 0;
+		const newR = Math.max(.008, currentR + (expanding ? delta : -delta));
+		return {
+			...item,
+			wPct: newR * 2,
+			hPct: newR * 2,
+			object: {
+				...obj,
+				radius: newR
+			}
+		};
+	}
+	if (obj.type === "freehand" || obj.type === "highlighter") {
+		const pts = obj.points;
+		const xs = pts.map((p) => p.x);
+		const ys = pts.map((p) => p.y);
+		const minX = Math.min(...xs);
+		const minY = Math.min(...ys);
+		const maxX = Math.max(...xs);
+		const maxY = Math.max(...ys);
+		const origW = maxX - minX || .001;
+		const origH = maxY - minY || .001;
+		let newMinX = minX, newMinY = minY, newW = origW, newH = origH;
+		if (handle.includes("e")) newW += dxPct;
+		if (handle.includes("s")) newH += dyPct;
+		if (handle.includes("w")) {
+			newMinX += dxPct;
+			newW -= dxPct;
+		}
+		if (handle.includes("n")) {
+			newMinY += dyPct;
+			newH -= dyPct;
+		}
+		if (newW < .001) newW = .001;
+		if (newH < .001) newH = .001;
+		const scaleXf = newW / origW;
+		const scaleYf = newH / origH;
+		const newPts = pts.map((p) => ({
+			x: newMinX + (p.x - minX) * scaleXf,
+			y: newMinY + (p.y - minY) * scaleYf
+		}));
+		return {
+			...item,
+			xPct: newMinX,
+			yPct: newMinY,
+			wPct: newW,
+			hPct: newH,
+			object: {
+				...obj,
+				points: newPts
+			}
+		};
+	}
+	if ("width" in obj && "height" in obj && "x" in obj && "y" in obj) {
+		let { x, y, width: w, height: h } = obj;
+		if (handle.includes("e")) w += dxPct;
+		if (handle.includes("s")) h += dyPct;
+		if (handle.includes("w")) {
+			x += dxPct;
+			w -= dxPct;
+		}
+		if (handle.includes("n")) {
+			y += dyPct;
+			h -= dyPct;
+		}
+		return {
+			...item,
+			xPct: x,
+			yPct: y,
+			wPct: w,
+			hPct: h,
+			object: {
+				...obj,
+				x,
+				y,
+				width: w,
+				height: h
+			}
+		};
+	}
+	return item;
+}
+var CanvasDrawOverlay = forwardRef(function CanvasDrawOverlay(props, ref) {
+	const { background, currentMs, isEditing, items, groups, selectedItemId, defaults, activeTool, currentDrawShowAt, currentDrawHideAt, currentDrawTransition, currentDrawGroupId, onItemsChange, onItemsCommit, onSelectItem, onDrawComplete } = props;
+	const svgRef = useRef(null);
+	const boundsRef = useRef(null);
+	const [boundsVersion, setBoundsVersion] = useState(0);
+	const drawingRef = useRef(false);
+	const startPctRef = useRef({
+		x: 0,
+		y: 0
+	});
+	const currentObjRef = useRef(null);
+	const dragRef = useRef(null);
+	const resizeRef = useRef(null);
+	const rotateRef = useRef(null);
+	const itemsRef = useRef(items);
+	itemsRef.current = items;
+	const activeToolRef = useRef(activeTool);
+	activeToolRef.current = activeTool;
+	useImperativeHandle(ref, () => ({
+		getItems: () => items,
+		getGroups: () => groups,
+		exportSvgString: () => svgRef.current?.outerHTML ?? ""
+	}));
+	const updateBounds = useCallback(() => {
+		const svg = svgRef.current;
+		if (!svg) return;
+		let boundsW;
+		let boundsH;
+		let offsetX = 0;
+		let offsetY = 0;
+		if (background.type === "video") {
+			const video = background.videoRef.current;
+			if (!video) return;
+			const b = getVideoBounds(video);
+			boundsW = b.w;
+			boundsH = b.h;
+			offsetX = b.x;
+			offsetY = b.y;
+			const videoRect = video.getBoundingClientRect();
+			const wrapEl = svg.parentElement;
+			if (!wrapEl) return;
+			const wrapRect = wrapEl.getBoundingClientRect();
+			svg.style.left = `${videoRect.left - wrapRect.left + offsetX}px`;
+			svg.style.top = `${videoRect.top - wrapRect.top + offsetY}px`;
+		} else {
+			const parent = svg.parentElement;
+			if (!parent) return;
+			boundsW = parent.clientWidth;
+			boundsH = parent.clientHeight;
+			svg.style.left = "0px";
+			svg.style.top = "0px";
+		}
+		const prev = boundsRef.current;
+		boundsRef.current = {
+			x: offsetX,
+			y: offsetY,
+			w: boundsW,
+			h: boundsH
+		};
+		svg.style.width = `${boundsW}px`;
+		svg.style.height = `${boundsH}px`;
+		svg.setAttribute("viewBox", `0 0 ${boundsW} ${boundsH}`);
+		if (!prev || prev.w !== boundsW || prev.h !== boundsH) setBoundsVersion((v) => v + 1);
+	}, [background]);
+	useEffect(() => {
+		if (background.type === "video") {
+			const video = background.videoRef.current;
+			if (!video) return;
+			const update = () => updateBounds();
+			video.addEventListener("loadedmetadata", update);
+			video.addEventListener("resize", update);
+			const ro = new ResizeObserver(() => updateBounds());
+			ro.observe(video);
+			if (video.parentElement) ro.observe(video.parentElement);
+			updateBounds();
+			return () => {
+				video.removeEventListener("loadedmetadata", update);
+				video.removeEventListener("resize", update);
+				ro.disconnect();
+			};
+		} else {
+			const parent = svgRef.current?.parentElement;
+			if (!parent) return;
+			const ro = new ResizeObserver(() => updateBounds());
+			ro.observe(parent);
+			updateBounds();
+			return () => ro.disconnect();
+		}
+	}, [background, updateBounds]);
+	useEffect(() => {
+		const onFullscreen = () => setTimeout(() => updateBounds(), 100);
+		document.addEventListener("fullscreenchange", onFullscreen);
+		document.addEventListener("webkitfullscreenchange", onFullscreen);
+		return () => {
+			document.removeEventListener("fullscreenchange", onFullscreen);
+			document.removeEventListener("webkitfullscreenchange", onFullscreen);
+		};
+	}, [updateBounds]);
+	const getItemVisible = useCallback((item, ms) => {
+		if (item.showAtMs > ms) return false;
+		if (item.hideAtMs !== null && ms >= item.hideAtMs) return false;
+		if (item.groupId) {
+			const group = groups.find((g) => g.id === item.groupId);
+			if (group) {
+				if (group.showAtMs > ms) return false;
+				if (group.hideAtMs !== null && ms >= group.hideAtMs) return false;
+			}
+		}
+		return true;
+	}, [groups]);
+	const svgPxToPct = useCallback((svgX, svgY) => {
+		const b = boundsRef.current;
+		if (!b || b.w === 0 || b.h === 0) return {
+			xPct: 0,
+			yPct: 0
+		};
+		return {
+			xPct: svgX / b.w,
+			yPct: svgY / b.h
+		};
+	}, []);
+	const eventToSvgPx = useCallback((e) => {
+		const svg = svgRef.current;
+		if (!svg) return null;
+		const svgRect = svg.getBoundingClientRect();
+		return {
+			x: e.clientX - svgRect.left,
+			y: e.clientY - svgRect.top
+		};
+	}, []);
+	const itemObjectToScaled = useCallback((item) => {
+		const b = boundsRef.current;
+		if (!b) return item.object;
+		const sX = b.w;
+		const sY = b.h;
+		const obj = { ...item.object };
+		if (obj.type === "curvedArrow") return {
+			...obj,
+			x1: obj.x1 * sX,
+			y1: obj.y1 * sY,
+			x2: obj.x2 * sX,
+			y2: obj.y2 * sY,
+			cpx: obj.cpx * sX,
+			cpy: obj.cpy * sY
+		};
+		if (obj.type === "callout") return {
+			...obj,
+			x1: obj.x1 * sX,
+			y1: obj.y1 * sY,
+			x2: obj.x2 * sX,
+			y2: obj.y2 * sY,
+			radius: obj.radius * Math.min(sX, sY)
+		};
+		if ("x1" in obj) return {
+			...obj,
+			x1: item.xPct * sX,
+			y1: item.yPct * sY,
+			x2: (item.xPct + (item.wPct ?? 0)) * sX,
+			y2: (item.yPct + (item.hPct ?? 0)) * sY
+		};
+		if ("points" in obj) {
+			const pts = obj.points;
+			return {
+				...obj,
+				points: pts.map((p) => ({
+					x: p.x * sX,
+					y: p.y * sY
+				}))
+			};
+		}
+		if ("x" in obj && "y" in obj) {
+			const o2 = obj;
+			return {
+				...obj,
+				x: item.xPct * sX,
+				y: item.yPct * sY,
+				...o2.width !== void 0 ? {
+					width: (item.wPct ?? 0) * sX,
+					height: (item.hPct ?? 0) * sY
+				} : {},
+				...o2.radius !== void 0 ? { radius: (item.wPct ?? .05) * Math.min(sX, sY) / 2 } : {}
+			};
+		}
+		return obj;
+	}, []);
+	const rebuildSvg = useCallback(() => {
+		const svg = svgRef.current;
+		if (!svg || !boundsRef.current) return;
+		while (svg.lastChild) svg.removeChild(svg.lastChild);
+		const defs = svgEl("defs");
+		svg.appendChild(defs);
+		for (const item of items) {
+			const scaledObj = itemObjectToScaled(item);
+			const selected = isEditing && item.id === selectedItemId;
+			const groupEl = svgEl("g");
+			groupEl.dataset.cdItemId = item.id;
+			if (!isEditing && item.transition !== "none") groupEl.style.transition = "opacity 0.35s ease, transform 0.35s ease";
+			renderObjectToSvg(groupEl, scaledObj, selected, 1, 1, defs, item.rotation ?? 0);
+			svg.appendChild(groupEl);
+		}
+	}, [
+		items,
+		isEditing,
+		selectedItemId,
+		itemObjectToScaled,
+		boundsVersion
+	]);
+	const updateVisibility = useCallback(() => {
+		const svg = svgRef.current;
+		const b = boundsRef.current;
+		if (!svg || !b) return;
+		svg.querySelectorAll(":scope > g[data-cd-item-id]").forEach((groupEl) => {
+			const itemId = groupEl.dataset.cdItemId;
+			const item = items.find((it) => it.id === itemId);
+			if (!item) {
+				groupEl.style.display = "none";
+				return;
+			}
+			const visible = getItemVisible(item, currentMs);
+			if (isEditing) {
+				groupEl.style.display = "";
+				groupEl.style.opacity = visible ? "1" : "0.3";
+				groupEl.style.transform = "";
+			} else {
+				const transition = item.transition;
+				if (transition !== "none") {
+					groupEl.style.display = "";
+					groupEl.style.opacity = visible ? "1" : "0";
+					if (transition === "scale") {
+						groupEl.style.transform = visible ? "scale(1)" : "scale(0.5)";
+						groupEl.style.transformOrigin = `${item.xPct * b.w + (item.wPct ?? .05) * b.w / 2}px ${item.yPct * b.h + (item.hPct ?? .05) * b.h / 2}px`;
+					} else if (transition === "slide-up") groupEl.style.transform = visible ? "translateY(0)" : "translateY(20px)";
+					else if (transition === "slide-down") groupEl.style.transform = visible ? "translateY(0)" : "translateY(-20px)";
+					else if (transition === "slide-left") groupEl.style.transform = visible ? "translateX(0)" : "translateX(20px)";
+					else if (transition === "slide-right") groupEl.style.transform = visible ? "translateX(0)" : "translateX(-20px)";
+					else groupEl.style.transform = "";
+				} else {
+					groupEl.style.display = visible ? "" : "none";
+					groupEl.style.opacity = "";
+					groupEl.style.transform = "";
+				}
+			}
+		});
+	}, [
+		items,
+		currentMs,
+		isEditing,
+		getItemVisible
+	]);
+	useEffect(() => {
+		rebuildSvg();
+		updateVisibility();
+	}, [rebuildSvg]);
+	useEffect(() => {
+		updateVisibility();
+	}, [updateVisibility]);
+	const openInlineTextEditor = useCallback((itemId, obj, svgX, svgY, isExisting = false) => {
+		const svg = svgRef.current;
+		if (!svg) return;
+		const svgRect = svg.getBoundingClientRect();
+		const existingText = obj.text ?? "";
+		const inputEl = document.createElement("textarea");
+		inputEl.value = isExisting ? existingText : "";
+		inputEl.style.cssText = `
+            position:fixed;
+            left:${svgRect.left + svgX}px;
+            top:${svgRect.top + svgY}px;
+            width:160px;height:60px;
+            font-size:13px;font-family:sans-serif;
+            background:#fff;color:#111;border:2px solid var(--eui-primary, #3b82f6);
+            border-radius:4px;padding:4px;outline:none;resize:both;z-index:9999;
+        `;
+		document.body.appendChild(inputEl);
+		inputEl.focus();
+		if (isExisting) inputEl.select();
+		let committed = false;
+		const commit = () => {
+			if (committed) return;
+			committed = true;
+			const text = inputEl.value.trim();
+			inputEl.remove();
+			if (isExisting) {
+				if (text) {
+					const updated = {
+						...obj,
+						text
+					};
+					onItemsChange(itemsRef.current.map((it) => it.id === itemId ? {
+						...it,
+						object: updated
+					} : it));
+				}
+			} else {
+				const newItem = {
+					id: itemId,
+					object: {
+						...obj,
+						text
+					},
+					showAtMs: currentDrawShowAt,
+					hideAtMs: currentDrawHideAt,
+					transition: currentDrawTransition,
+					groupId: currentDrawGroupId,
+					xPct: obj.x,
+					yPct: obj.y,
+					wPct: .15,
+					hPct: .06
+				};
+				if (text) {
+					onItemsChange([...itemsRef.current, newItem]);
+					onSelectItem(itemId);
+				}
+			}
+		};
+		inputEl.addEventListener("blur", commit);
+		inputEl.addEventListener("keydown", (ev) => {
+			if (ev.key === "Escape") {
+				inputEl.value = isExisting ? existingText : "";
+				inputEl.blur();
+			}
+			if (ev.key === "Enter" && !ev.shiftKey) {
+				ev.preventDefault();
+				commit();
+			}
+		});
+	}, [
+		currentDrawShowAt,
+		currentDrawHideAt,
+		currentDrawTransition,
+		currentDrawGroupId,
+		onItemsChange,
+		onSelectItem
+	]);
+	const openDimensionLabelEditor = useCallback((itemId, obj, svgX, svgY) => {
+		const svg = svgRef.current;
+		if (!svg || obj.type !== "dimension") return;
+		const svgRect = svg.getBoundingClientRect();
+		const currentLabel = obj.customLabel ?? "";
+		const inputEl = document.createElement("input");
+		inputEl.type = "text";
+		inputEl.value = currentLabel;
+		inputEl.placeholder = "auto";
+		inputEl.style.cssText = `
+            position:fixed;
+            left:${svgRect.left + svgX - 50}px;
+            top:${svgRect.top + svgY - 14}px;
+            width:100px;height:28px;
+            font-size:12px;font-family:sans-serif;
+            background:#fff;color:#111;border:2px solid var(--eui-primary, #3b82f6);
+            border-radius:4px;padding:2px 6px;outline:none;text-align:center;z-index:9999;
+        `;
+		document.body.appendChild(inputEl);
+		inputEl.focus();
+		inputEl.select();
+		let committed = false;
+		const commit = () => {
+			if (committed) return;
+			committed = true;
+			const val = inputEl.value.trim();
+			inputEl.remove();
+			const updated = {
+				...obj,
+				customLabel: val || void 0
+			};
+			onItemsChange(itemsRef.current.map((it) => it.id === itemId ? {
+				...it,
+				object: updated
+			} : it));
+		};
+		inputEl.addEventListener("blur", commit);
+		inputEl.addEventListener("keydown", (ev) => {
+			if (ev.key === "Escape") {
+				inputEl.value = currentLabel;
+				inputEl.blur();
+			}
+			if (ev.key === "Enter") {
+				ev.preventDefault();
+				commit();
+			}
+		});
+	}, [onItemsChange]);
+	const onDoubleClick = useCallback((e) => {
+		if (!isEditing || activeTool !== "select") return;
+		const cdItemId = e.target.closest("[data-cd-item-id]")?.getAttribute("data-cd-item-id");
+		if (!cdItemId) return;
+		const item = itemsRef.current.find((it) => it.id === cdItemId);
+		if (!item) return;
+		e.preventDefault();
+		e.stopPropagation();
+		const pos = eventToSvgPx(e);
+		if (!pos) return;
+		if (item.object.type === "dimension") {
+			openDimensionLabelEditor(cdItemId, item.object, pos.x, pos.y);
+			return;
+		}
+		if (item.object.type !== "text" && item.object.type !== "balloon") return;
+		openInlineTextEditor(cdItemId, item.object, pos.x, pos.y, true);
+	}, [
+		isEditing,
+		activeTool,
+		eventToSvgPx,
+		openInlineTextEditor,
+		openDimensionLabelEditor
+	]);
+	const completeDrawing = useCallback(() => {
+		activeToolRef.current = "select";
+		onDrawComplete?.();
+	}, [onDrawComplete]);
+	const onMouseDown = useCallback((e) => {
+		if (!isEditing) return;
+		e.preventDefault();
+		e.stopPropagation();
+		const pos = eventToSvgPx(e);
+		if (!pos) return;
+		const b = boundsRef.current;
+		if (!b) return;
+		if (pos.x < 0 || pos.y < 0 || pos.x > b.w || pos.y > b.h) return;
+		const { x, y } = pos;
+		const currentItems = itemsRef.current;
+		const target = e.target;
+		const objId = target.dataset?.objId ?? target.closest("[data-obj-id]")?.getAttribute("data-obj-id");
+		const cdItemId = target.closest("[data-cd-item-id]")?.getAttribute("data-cd-item-id");
+		const handlePos = target.dataset?.handle;
+		const tool = activeToolRef.current;
+		if (tool === "select") {
+			if (handlePos === "rotate" && cdItemId) {
+				const item = currentItems.find((it) => it.id === cdItemId);
+				if (item) {
+					const scaledObj = itemObjectToScaled(item);
+					const identity = (v) => v;
+					const center = getObjectCenter(scaledObj, identity, identity);
+					rotateRef.current = {
+						itemId: cdItemId,
+						centerPx: center,
+						startAngle: Math.atan2(y - center.cy, x - center.cx) * (180 / Math.PI),
+						origRotation: item.rotation ?? 0
+					};
+				}
+				return;
+			}
+			if (handlePos && cdItemId) {
+				const item = currentItems.find((it) => it.id === cdItemId);
+				if (item) resizeRef.current = {
+					itemId: cdItemId,
+					handle: handlePos,
+					startPx: {
+						x,
+						y
+					},
+					origItem: {
+						...item,
+						object: { ...item.object }
+					}
+				};
+				return;
+			}
+			if (cdItemId || objId) {
+				const id = cdItemId ?? objId;
+				onSelectItem(id);
+				const item = currentItems.find((it) => it.id === id);
+				if (item) dragRef.current = {
+					itemId: id,
+					startPx: {
+						x,
+						y
+					},
+					origItem: {
+						...item,
+						object: { ...item.object }
+					}
+				};
+				return;
+			}
+			onSelectItem(null);
+			return;
+		}
+		const { xPct, yPct } = svgPxToPct(x, y);
+		const newId = uid();
+		drawingRef.current = true;
+		startPctRef.current = {
+			x: xPct,
+			y: yPct
+		};
+		let newObj;
+		const strokeW = defaults.strokeWidth;
+		const sc = defaults.strokeColor;
+		if (tool === "freehand") newObj = {
+			id: newId,
+			type: "freehand",
+			strokeColor: sc,
+			strokeWidth: strokeW,
+			points: [{
+				x: xPct,
+				y: yPct
+			}]
+		};
+		else if (tool === "arrow") newObj = {
+			id: newId,
+			type: "arrow",
+			strokeColor: sc,
+			strokeWidth: strokeW,
+			x1: xPct,
+			y1: yPct,
+			x2: xPct,
+			y2: yPct,
+			arrowheadStyle: defaults.arrowheadStyle
+		};
+		else if (tool === "line") newObj = {
+			id: newId,
+			type: "line",
+			strokeColor: sc,
+			strokeWidth: strokeW,
+			x1: xPct,
+			y1: yPct,
+			x2: xPct,
+			y2: yPct
+		};
+		else if (tool === "rect") newObj = {
+			id: newId,
+			type: "rect",
+			strokeColor: sc,
+			strokeWidth: strokeW,
+			x: xPct,
+			y: yPct,
+			width: 0,
+			height: 0,
+			fillColor: defaults.fillColor,
+			rounded: defaults.rounded
+		};
+		else if (tool === "circle") newObj = {
+			id: newId,
+			type: "circle",
+			strokeColor: sc,
+			strokeWidth: strokeW,
+			x: xPct,
+			y: yPct,
+			width: 0,
+			height: 0,
+			fillColor: defaults.fillColor
+		};
+		else if (tool === "text") {
+			newObj = {
+				id: newId,
+				type: "text",
+				strokeColor: sc,
+				strokeWidth: strokeW,
+				x: xPct,
+				y: yPct,
+				width: .15,
+				height: .06,
+				text: "",
+				fontFamily: defaults.fontFamily,
+				fontSize: defaults.fontSize,
+				fontColor: defaults.fontColor,
+				fillColor: defaults.fillColor,
+				fontBold: defaults.fontBold,
+				fontItalic: defaults.fontItalic,
+				fontUnderline: defaults.fontUnderline
+			};
+			drawingRef.current = false;
+			openInlineTextEditor(newId, newObj, x, y);
+			completeDrawing();
+			return;
+		} else if (tool === "balloon") {
+			newObj = {
+				id: newId,
+				type: "balloon",
+				strokeColor: sc,
+				strokeWidth: strokeW,
+				x: xPct,
+				y: yPct,
+				width: .12,
+				height: .08,
+				text: "",
+				fontFamily: defaults.fontFamily,
+				fontSize: defaults.fontSize,
+				fontColor: defaults.fontColor,
+				fillColor: defaults.fillColor,
+				tailDirection: "down",
+				fontBold: defaults.fontBold,
+				fontItalic: defaults.fontItalic,
+				fontUnderline: defaults.fontUnderline
+			};
+			drawingRef.current = false;
+			openInlineTextEditor(newId, newObj, x, y);
+			completeDrawing();
+			return;
+		} else if (tool === "step") {
+			const maxStep = currentItems.reduce((m, it) => it.object.type === "step" ? Math.max(m, it.object.stepNumber) : m, 0);
+			const stepFill = defaults.fillColor === "transparent" ? "blue" : defaults.fillColor;
+			newObj = {
+				id: newId,
+				type: "step",
+				strokeColor: sc,
+				strokeWidth: strokeW,
+				x: xPct,
+				y: yPct,
+				radius: .02,
+				stepNumber: maxStep + 1,
+				fillColor: stepFill,
+				fontColor: defaults.fontColor
+			};
+			drawingRef.current = false;
+			const stepItem = {
+				id: newId,
+				object: newObj,
+				showAtMs: currentDrawShowAt,
+				hideAtMs: currentDrawHideAt,
+				transition: currentDrawTransition,
+				groupId: currentDrawGroupId,
+				xPct,
+				yPct,
+				wPct: .04,
+				hPct: .04
+			};
+			onItemsChange([...currentItems, stepItem]);
+			onSelectItem(newId);
+			completeDrawing();
+			return;
+		} else if (tool === "highlighter") newObj = {
+			id: newId,
+			type: "highlighter",
+			strokeColor: sc,
+			strokeWidth: strokeW,
+			points: [{
+				x: xPct,
+				y: yPct
+			}]
+		};
+		else if (tool === "callout") {
+			const maxCallout = currentItems.reduce((m, it) => it.object.type === "callout" || it.object.type === "step" ? Math.max(m, it.object.stepNumber) : m, 0);
+			const calloutFill = defaults.fillColor === "transparent" ? "blue" : defaults.fillColor;
+			newObj = {
+				id: newId,
+				type: "callout",
+				strokeColor: sc,
+				strokeWidth: strokeW,
+				x1: xPct,
+				y1: yPct,
+				x2: xPct,
+				y2: yPct,
+				stepNumber: maxCallout + 1,
+				fillColor: calloutFill,
+				fontColor: defaults.fontColor,
+				radius: .06
+			};
+		} else if (tool === "dimension") newObj = {
+			id: newId,
+			type: "dimension",
+			strokeColor: sc,
+			strokeWidth: strokeW,
+			x1: xPct,
+			y1: yPct,
+			x2: xPct,
+			y2: yPct
+		};
+		else if (tool === "curvedArrow") newObj = {
+			id: newId,
+			type: "curvedArrow",
+			strokeColor: sc,
+			strokeWidth: strokeW,
+			x1: xPct,
+			y1: yPct,
+			x2: xPct,
+			y2: yPct,
+			cpx: xPct,
+			cpy: yPct
+		};
+		else return;
+		const newItem = {
+			id: newId,
+			object: newObj,
+			showAtMs: currentDrawShowAt,
+			hideAtMs: currentDrawHideAt,
+			transition: currentDrawTransition,
+			groupId: currentDrawGroupId,
+			xPct,
+			yPct,
+			wPct: 0,
+			hPct: 0
+		};
+		currentObjRef.current = newItem;
+		onItemsChange([...currentItems, newItem]);
+		onSelectItem(newId);
+	}, [
+		isEditing,
+		defaults,
+		currentDrawShowAt,
+		currentDrawHideAt,
+		currentDrawTransition,
+		currentDrawGroupId,
+		svgPxToPct,
+		eventToSvgPx,
+		onItemsChange,
+		onSelectItem,
+		openInlineTextEditor,
+		completeDrawing,
+		itemObjectToScaled
+	]);
+	const onMouseMove = useCallback((e) => {
+		if (!isEditing) return;
+		const pos = eventToSvgPx(e);
+		if (!pos) return;
+		const b = boundsRef.current;
+		if (!b) return;
+		const { x, y } = pos;
+		const currentItems = itemsRef.current;
+		if (rotateRef.current) {
+			const { itemId, centerPx, startAngle, origRotation } = rotateRef.current;
+			let delta = Math.atan2(y - centerPx.cy, x - centerPx.cx) * (180 / Math.PI) - startAngle;
+			if (e.shiftKey) delta = Math.round(delta / 15) * 15;
+			const newRotation = origRotation + delta;
+			onItemsChange(currentItems.map((it) => it.id === itemId ? {
+				...it,
+				rotation: newRotation
+			} : it));
+			return;
+		}
+		if (resizeRef.current) {
+			const { itemId, handle, startPx, origItem } = resizeRef.current;
+			const dx = x - startPx.x;
+			const dy = y - startPx.y;
+			const updated = applyResize(origItem, handle, dx / b.w, dy / b.h);
+			onItemsChange(currentItems.map((it) => it.id === itemId ? updated : it));
+			return;
+		}
+		if (dragRef.current) {
+			const { itemId, startPx, origItem } = dragRef.current;
+			const updated = applyDrag(origItem, (x - startPx.x) / b.w, (y - startPx.y) / b.h);
+			onItemsChange(currentItems.map((it) => it.id === itemId ? updated : it));
+			return;
+		}
+		if (!drawingRef.current || !currentObjRef.current) return;
+		const { x: sx2, y: sy2 } = startPctRef.current;
+		const { xPct, yPct } = svgPxToPct(x, y);
+		const item = currentObjRef.current;
+		let updatedItem;
+		if (item.object.type === "freehand") {
+			const pts = [...item.object.points, {
+				x: xPct,
+				y: yPct
+			}];
+			updatedItem = {
+				...item,
+				object: {
+					...item.object,
+					points: pts
+				},
+				wPct: null,
+				hPct: null
+			};
+		} else if (item.object.type === "highlighter") {
+			const pts = [...item.object.points, {
+				x: xPct,
+				y: yPct
+			}];
+			updatedItem = {
+				...item,
+				object: {
+					...item.object,
+					points: pts
+				},
+				wPct: null,
+				hPct: null
+			};
+		} else if (item.object.type === "arrow" || item.object.type === "line" || item.object.type === "dimension") updatedItem = {
+			...item,
+			object: {
+				...item.object,
+				x2: xPct,
+				y2: yPct
+			},
+			wPct: xPct - sx2,
+			hPct: yPct - sy2
+		};
+		else if (item.object.type === "callout") updatedItem = {
+			...item,
+			object: {
+				...item.object,
+				x2: xPct,
+				y2: yPct
+			}
+		};
+		else if (item.object.type === "curvedArrow") {
+			const midX = (sx2 + xPct) / 2;
+			const midY = (sy2 + yPct) / 2;
+			const dx2 = xPct - sx2;
+			const cpx2 = midX - (yPct - sy2) * .3;
+			const cpy2 = midY + dx2 * .3;
+			updatedItem = {
+				...item,
+				object: {
+					...item.object,
+					x2: xPct,
+					y2: yPct,
+					cpx: cpx2,
+					cpy: cpy2
+				},
+				wPct: xPct - sx2,
+				hPct: yPct - sy2
+			};
+		} else if (item.object.type === "rect" || item.object.type === "circle" || item.object.type === "text" || item.object.type === "balloon") {
+			const minX = Math.min(sx2, xPct);
+			const minY = Math.min(sy2, yPct);
+			const w = Math.abs(xPct - sx2);
+			const h = Math.abs(yPct - sy2);
+			updatedItem = {
+				...item,
+				xPct: minX,
+				yPct: minY,
+				object: {
+					...item.object,
+					x: minX,
+					y: minY,
+					width: w,
+					height: h
+				},
+				wPct: w,
+				hPct: h
+			};
+		} else updatedItem = item;
+		currentObjRef.current = updatedItem;
+		onItemsChange(currentItems.map((it) => it.id === item.id ? updatedItem : it));
+	}, [
+		isEditing,
+		svgPxToPct,
+		eventToSvgPx,
+		onItemsChange
+	]);
+	const onMouseUp = useCallback(() => {
+		if (!isEditing) return;
+		const wasDrawing = drawingRef.current;
+		const drawnItemId = currentObjRef.current?.id ?? null;
+		const hadInteraction = wasDrawing || dragRef.current !== null || resizeRef.current !== null || rotateRef.current !== null;
+		drawingRef.current = false;
+		currentObjRef.current = null;
+		dragRef.current = null;
+		resizeRef.current = null;
+		rotateRef.current = null;
+		if (hadInteraction) onItemsCommit();
+		if (wasDrawing) {
+			if (drawnItemId) onSelectItem(drawnItemId);
+			completeDrawing();
+		}
+	}, [
+		isEditing,
+		onItemsCommit,
+		completeDrawing,
+		onSelectItem
+	]);
+	const cursor = isEditing ? activeToolRef.current === "select" ? "default" : "crosshair" : "default";
+	return /* @__PURE__ */ jsx("svg", {
+		ref: svgRef,
+		style: {
+			position: "absolute",
+			left: 0,
+			top: 0,
+			overflow: "visible",
+			pointerEvents: isEditing ? "all" : "none",
+			cursor,
+			userSelect: "none",
+			zIndex: 10
+		},
+		onMouseDown,
+		onMouseMove,
+		onMouseUp,
+		onMouseLeave: onMouseUp,
+		onDoubleClick
+	});
+});
+//#endregion
+//#region src/components/canvas-draw/CanvasDrawToolbar.tsx
+var allTools = [
+	{
+		id: "select",
+		label: "Select",
+		icon: "↖"
+	},
+	{
+		id: "arrow",
+		label: "Arrow",
+		icon: "→"
+	},
+	{
+		id: "curvedArrow",
+		label: "Curved Arrow",
+		icon: "↝"
+	},
+	{
+		id: "line",
+		label: "Line",
+		icon: "╱"
+	},
+	{
+		id: "dimension",
+		label: "Dimension",
+		icon: "⟷"
+	},
+	{
+		id: "rect",
+		label: "Rectangle",
+		icon: "▭"
+	},
+	{
+		id: "circle",
+		label: "Ellipse",
+		icon: "◯"
+	},
+	{
+		id: "freehand",
+		label: "Freehand",
+		icon: "✏"
+	},
+	{
+		id: "highlighter",
+		label: "Highlighter",
+		icon: "🖍"
+	},
+	{
+		id: "text",
+		label: "Text",
+		icon: "T"
+	},
+	{
+		id: "balloon",
+		label: "Balloon",
+		icon: "💬"
+	},
+	{
+		id: "step",
+		label: "Step",
+		icon: "①"
+	},
+	{
+		id: "callout",
+		label: "Callout",
+		icon: "❶"
+	}
+];
+var strokeWidthOptions = [
+	1,
+	2,
+	3,
+	5,
+	8
+];
+var fontSizeOptions = [
+	10,
+	12,
+	14,
+	16,
+	20,
+	24,
+	32
+];
+var fontFamilyOptions = [
+	{
+		id: "sans-serif",
+		label: "Sans"
+	},
+	{
+		id: "serif",
+		label: "Serif"
+	},
+	{
+		id: "monospace",
+		label: "Mono"
+	},
+	{
+		id: "cursive",
+		label: "Cursive"
+	}
+];
+var allColors = [
+	"red",
+	"orange",
+	"yellow",
+	"green",
+	"teal",
+	"blue",
+	"purple",
+	"black",
+	"white"
+];
+var transitionOptions$1 = [
+	{
+		id: "none",
+		label: "None"
+	},
+	{
+		id: "fade",
+		label: "Fade"
+	},
+	{
+		id: "scale",
+		label: "Scale"
+	},
+	{
+		id: "slide-up",
+		label: "Slide Up"
+	},
+	{
+		id: "slide-down",
+		label: "Slide Down"
+	},
+	{
+		id: "slide-left",
+		label: "Slide Left"
+	},
+	{
+		id: "slide-right",
+		label: "Slide Right"
+	}
+];
+var textToolSet = new Set(["text", "balloon"]);
+var fillToolSet = new Set([
+	"rect",
+	"circle",
+	"balloon",
+	"step",
+	"callout",
+	"text"
+]);
+var strokeToolSet = new Set([
+	"arrow",
+	"line",
+	"rect",
+	"circle",
+	"freehand",
+	"highlighter",
+	"dimension",
+	"curvedArrow",
+	"balloon",
+	"step",
+	"callout"
+]);
+function hasTextProps(obj) {
+	return obj.type === "text" || obj.type === "balloon";
+}
+function hasFillProp(obj) {
+	return obj.type === "rect" || obj.type === "circle" || obj.type === "balloon" || obj.type === "step" || obj.type === "callout" || obj.type === "text";
+}
+function formatTime$1(ms) {
+	const s = Math.floor(ms / 1e3);
+	const m = Math.floor(s / 60);
+	const sec = s % 60;
+	const milli = ms % 1e3;
+	return `${m}:${sec.toString().padStart(2, "0")}.${Math.floor(milli / 100)}`;
+}
+function parseMsInput(val) {
+	const trimmed = val.trim();
+	const parts = trimmed.split(":");
+	if (parts.length === 2) {
+		const mins = parseInt(parts[0], 10);
+		const secParts = parts[1].split(".");
+		const secs = parseInt(secParts[0], 10);
+		const frac = secParts[1] ? parseInt(secParts[1].padEnd(3, "0").slice(0, 3), 10) : 0;
+		if (!isNaN(mins) && !isNaN(secs)) return (mins * 60 + secs) * 1e3 + frac;
+	}
+	const n = parseFloat(trimmed);
+	if (!isNaN(n)) return Math.round(n * 1e3);
+	return null;
+}
+function resolveToolConfig(config) {
+	if (!config) return new Set(allTools.map((t) => t.id));
+	const enabled = /* @__PURE__ */ new Set();
+	for (const tool of allTools) {
+		const val = config[tool.id];
+		if (val === void 0 || val === true) enabled.add(tool.id);
+	}
+	return enabled;
+}
+function CanvasDrawToolbar({ activeTool, defaults, mediaDurationMs, showAtMs, hideAtMs, transition, selectedItem, groups, features, onToolChange, onDefaultsChange, onShowAtChange, onHideAtChange, onTransitionChange, onDeleteSelected, onDuplicateSelected, onUndo, onRedo, onClearAll, onSetCurrentAsShowAt, onSetCurrentAsHideAt, onUpdateSelectedTiming, onAssignGroup, onUpdateStepNumber, canUndo, canRedo, onExport }) {
+	const [showAtInput, setShowAtInput] = useState("");
+	const [hideAtInput, setHideAtInput] = useState("");
+	const [editingShowAt, setEditingShowAt] = useState(false);
+	const [editingHideAt, setEditingHideAt] = useState(false);
+	const enabledTools = resolveToolConfig(features.tools);
+	const visibleTools = allTools.filter((t) => enabledTools.has(t.id));
+	const setColor = (c) => onDefaultsChange({
+		...defaults,
+		strokeColor: c
+	});
+	const setFill = (c) => onDefaultsChange({
+		...defaults,
+		fillColor: c
+	});
+	const setWidth = (w) => onDefaultsChange({
+		...defaults,
+		strokeWidth: w
+	});
+	const setFontSize = (s) => onDefaultsChange({
+		...defaults,
+		fontSize: s
+	});
+	const setFontColor = (c) => onDefaultsChange({
+		...defaults,
+		fontColor: c
+	});
+	const setFontFamily = (f) => onDefaultsChange({
+		...defaults,
+		fontFamily: f
+	});
+	const toggleBold = () => onDefaultsChange({
+		...defaults,
+		fontBold: !defaults.fontBold
+	});
+	const toggleItalic = () => onDefaultsChange({
+		...defaults,
+		fontItalic: !defaults.fontItalic
+	});
+	const toggleUnderline = () => onDefaultsChange({
+		...defaults,
+		fontUnderline: !defaults.fontUnderline
+	});
+	const toggleRounded = () => onDefaultsChange({
+		...defaults,
+		rounded: !defaults.rounded
+	});
+	const handleShowAtCommit = () => {
+		const ms = parseMsInput(showAtInput);
+		if (ms !== null) {
+			const clamped = Math.max(0, Math.min(ms, mediaDurationMs));
+			onShowAtChange(clamped);
+			if (selectedItem) onUpdateSelectedTiming(clamped, selectedItem.hideAtMs, selectedItem.transition);
+		}
+		setEditingShowAt(false);
+	};
+	const handleHideAtCommit = () => {
+		if (hideAtInput.trim() === "" || hideAtInput.trim() === "—") {
+			onHideAtChange(null);
+			if (selectedItem) onUpdateSelectedTiming(selectedItem.showAtMs, null, selectedItem.transition);
+		} else {
+			const ms = parseMsInput(hideAtInput);
+			if (ms !== null) {
+				const clamped = Math.max(0, Math.min(ms, mediaDurationMs));
+				onHideAtChange(clamped);
+				if (selectedItem) onUpdateSelectedTiming(selectedItem.showAtMs, clamped, selectedItem.transition);
+			}
+		}
+		setEditingHideAt(false);
+	};
+	const handleTransitionChange = (t) => {
+		onTransitionChange(t);
+		if (selectedItem) onUpdateSelectedTiming(selectedItem.showAtMs, selectedItem.hideAtMs, t);
+	};
+	const effectiveShowAt = selectedItem ? selectedItem.showAtMs : showAtMs;
+	const effectiveHideAt = selectedItem ? selectedItem.hideAtMs : hideAtMs;
+	const effectiveTransition = selectedItem ? selectedItem.transition : transition;
+	const showStrokeSection = features.strokeColor !== false && (selectedItem != null ? selectedItem.object.type !== "text" : strokeToolSet.has(activeTool) || activeTool === "select");
+	const showStrokeWidthSection = features.strokeWidth !== false && (selectedItem != null ? selectedItem.object.type !== "text" : strokeToolSet.has(activeTool) || activeTool === "select");
+	const showFontSection = features.fontControls !== false && (textToolSet.has(activeTool) || selectedItem != null && hasTextProps(selectedItem.object));
+	const showFillSection = features.fillColor !== false && (fillToolSet.has(activeTool) || selectedItem != null && hasFillProp(selectedItem.object));
+	const showRounded = features.roundedCorners !== false && (activeTool === "rect" || selectedItem != null && selectedItem.object.type === "rect");
+	const showStepNumber = selectedItem != null && (selectedItem.object.type === "step" || selectedItem.object.type === "callout");
+	const showTiming = features.timing !== false;
+	const showTransitions = features.transitions !== false;
+	const showGroups = features.groups !== false && selectedItem != null && groups.length > 0;
+	const showUndo = features.undo !== false;
+	const showExport = features.export !== false;
+	const showClear = features.clearAll !== false;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "eui-canvas-draw-toolbar",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "eui-cdt-section eui-cdt-section--tools",
+				children: visibleTools.map((t) => /* @__PURE__ */ jsx("button", {
+					className: (0, import_classnames.default)("eui-cdt-tool", { "eui-cdt-tool--active": activeTool === t.id }),
+					title: t.label,
+					onClick: () => onToolChange(t.id),
+					"aria-pressed": activeTool === t.id,
+					"aria-label": t.label,
+					children: t.icon
+				}, t.id))
+			}),
+			/* @__PURE__ */ jsx("div", { className: "eui-cdt-divider" }),
+			showStrokeSection && /* @__PURE__ */ jsxs("div", {
+				className: "eui-cdt-section",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "eui-cdt-label",
+					children: "Color"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "eui-cdt-colors",
+					children: allColors.map((c) => /* @__PURE__ */ jsx("button", {
+						className: (0, import_classnames.default)("eui-cdt-color", {
+							"eui-cdt-color--active": defaults.strokeColor === c,
+							"eui-cdt-color--white": c === "white"
+						}),
+						style: { background: colorMap[c] },
+						title: c,
+						"aria-label": `Stroke: ${c}`,
+						"aria-pressed": defaults.strokeColor === c,
+						onClick: () => setColor(c)
+					}, c))
+				})]
+			}),
+			(showStrokeWidthSection || showRounded) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: "eui-cdt-divider" }), /* @__PURE__ */ jsxs("div", {
+				className: "eui-cdt-section",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "eui-cdt-label",
+						children: "Stroke"
+					}),
+					showStrokeWidthSection && /* @__PURE__ */ jsx("div", {
+						className: "eui-cdt-widths",
+						children: strokeWidthOptions.map((w) => /* @__PURE__ */ jsx("button", {
+							className: (0, import_classnames.default)("eui-cdt-width", { "eui-cdt-width--active": defaults.strokeWidth === w }),
+							title: `${w}px`,
+							"aria-pressed": defaults.strokeWidth === w,
+							onClick: () => setWidth(w),
+							children: /* @__PURE__ */ jsx("span", { style: {
+								display: "block",
+								height: Math.max(w, 1),
+								background: "currentColor",
+								borderRadius: 2,
+								width: "100%"
+							} })
+						}, w))
+					}),
+					showRounded && /* @__PURE__ */ jsxs("button", {
+						className: (0, import_classnames.default)("eui-cdt-rounded-toggle", { "eui-cdt-rounded-toggle--active": defaults.rounded }),
+						title: "Rounded corners",
+						"aria-pressed": defaults.rounded,
+						onClick: toggleRounded,
+						children: [/* @__PURE__ */ jsx("span", { children: "◰" }), /* @__PURE__ */ jsx("span", { children: "Rounded" })]
+					})
+				]
+			})] }),
+			showFillSection && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: "eui-cdt-divider" }), /* @__PURE__ */ jsxs("div", {
+				className: "eui-cdt-section",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "eui-cdt-label",
+						children: "Fill"
+					}),
+					/* @__PURE__ */ jsxs("button", {
+						className: (0, import_classnames.default)("eui-cdt-fill-none", { "eui-cdt-fill-none--active": defaults.fillColor === "transparent" }),
+						title: "Transparent",
+						"aria-label": "Fill: transparent",
+						"aria-pressed": defaults.fillColor === "transparent",
+						onClick: () => setFill("transparent"),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "eui-cdt-fill-none-icon",
+							children: "∅"
+						}), /* @__PURE__ */ jsx("span", { children: "No fill" })]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "eui-cdt-colors",
+						children: allColors.map((c) => /* @__PURE__ */ jsx("button", {
+							className: (0, import_classnames.default)("eui-cdt-color", {
+								"eui-cdt-color--active": defaults.fillColor === c,
+								"eui-cdt-color--white": c === "white"
+							}),
+							style: { background: colorMap[c] },
+							title: c,
+							"aria-label": `Fill: ${c}`,
+							"aria-pressed": defaults.fillColor === c,
+							onClick: () => setFill(c)
+						}, c))
+					})
+				]
+			})] }),
+			showStepNumber && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: "eui-cdt-divider" }), /* @__PURE__ */ jsxs("div", {
+				className: "eui-cdt-section",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "eui-cdt-label",
+					children: "Number"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "eui-cdt-step-number",
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							className: "eui-cdt-step-number-btn",
+							onClick: () => {
+								const obj = selectedItem.object;
+								if ("stepNumber" in obj) onUpdateStepNumber?.(Math.max(1, obj.stepNumber - 1));
+							},
+							"aria-label": "Decrease step number",
+							children: "−"
+						}),
+						/* @__PURE__ */ jsx("input", {
+							className: "eui-cdt-step-number-input",
+							type: "number",
+							min: 1,
+							value: "stepNumber" in selectedItem.object ? selectedItem.object.stepNumber : 1,
+							onChange: (e) => {
+								const val = parseInt(e.target.value, 10);
+								if (!isNaN(val) && val >= 1) onUpdateStepNumber?.(val);
+							},
+							"aria-label": "Step number"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							className: "eui-cdt-step-number-btn",
+							onClick: () => {
+								const obj = selectedItem.object;
+								if ("stepNumber" in obj) onUpdateStepNumber?.(obj.stepNumber + 1);
+							},
+							"aria-label": "Increase step number",
+							children: "+"
+						})
+					]
+				})]
+			})] }),
+			showFontSection && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("div", { className: "eui-cdt-divider" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "eui-cdt-section",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "eui-cdt-label",
+							children: "Font"
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "eui-cdt-font-selects",
+							children: [/* @__PURE__ */ jsx("select", {
+								className: "eui-cdt-select",
+								value: defaults.fontFamily,
+								onChange: (e) => setFontFamily(e.target.value),
+								title: "Font family",
+								"aria-label": "Font family",
+								children: fontFamilyOptions.map((f) => /* @__PURE__ */ jsx("option", {
+									value: f.id,
+									children: f.label
+								}, f.id))
+							}), /* @__PURE__ */ jsx("select", {
+								className: "eui-cdt-select",
+								value: defaults.fontSize,
+								onChange: (e) => setFontSize(Number(e.target.value)),
+								title: "Font size",
+								"aria-label": "Font size",
+								children: fontSizeOptions.map((s) => /* @__PURE__ */ jsxs("option", {
+									value: s,
+									children: [s, "px"]
+								}, s))
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "eui-cdt-biu",
+							children: [
+								/* @__PURE__ */ jsx("button", {
+									className: (0, import_classnames.default)("eui-cdt-biu-btn", { "eui-cdt-biu-btn--active": defaults.fontBold }),
+									title: "Bold",
+									"aria-pressed": defaults.fontBold,
+									onClick: toggleBold,
+									children: /* @__PURE__ */ jsx("strong", { children: "B" })
+								}),
+								/* @__PURE__ */ jsx("button", {
+									className: (0, import_classnames.default)("eui-cdt-biu-btn", { "eui-cdt-biu-btn--active": defaults.fontItalic }),
+									title: "Italic",
+									"aria-pressed": defaults.fontItalic,
+									onClick: toggleItalic,
+									children: /* @__PURE__ */ jsx("em", { children: "I" })
+								}),
+								/* @__PURE__ */ jsx("button", {
+									className: (0, import_classnames.default)("eui-cdt-biu-btn", { "eui-cdt-biu-btn--active": defaults.fontUnderline }),
+									title: "Underline",
+									"aria-pressed": defaults.fontUnderline,
+									onClick: toggleUnderline,
+									children: /* @__PURE__ */ jsx("span", {
+										style: { textDecoration: "underline" },
+										children: "U"
+									})
+								})
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("div", { className: "eui-cdt-divider" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "eui-cdt-section",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "eui-cdt-label",
+						children: "Font Color"
+					}), /* @__PURE__ */ jsx("div", {
+						className: "eui-cdt-colors",
+						children: allColors.map((c) => /* @__PURE__ */ jsx("button", {
+							className: (0, import_classnames.default)("eui-cdt-color", {
+								"eui-cdt-color--active": defaults.fontColor === c,
+								"eui-cdt-color--white": c === "white"
+							}),
+							style: { background: colorMap[c] },
+							title: `Font: ${c}`,
+							"aria-label": `Font color: ${c}`,
+							"aria-pressed": defaults.fontColor === c,
+							onClick: () => setFontColor(c)
+						}, c))
+					})]
+				})
+			] }),
+			showTiming && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: "eui-cdt-divider" }), /* @__PURE__ */ jsxs("div", {
+				className: "eui-cdt-section eui-cdt-section--timing",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "eui-cdt-label",
+						children: "Timing"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "eui-cdt-timing-row",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "eui-cdt-timing-label",
+								children: "Show at"
+							}),
+							editingShowAt ? /* @__PURE__ */ jsx("input", {
+								className: "eui-cdt-timing-input",
+								value: showAtInput,
+								autoFocus: true,
+								onChange: (e) => setShowAtInput(e.target.value),
+								onBlur: handleShowAtCommit,
+								onKeyDown: (e) => {
+									if (e.key === "Enter") handleShowAtCommit();
+									if (e.key === "Escape") setEditingShowAt(false);
+								},
+								placeholder: "0:00.0",
+								"aria-label": "Show at time"
+							}) : /* @__PURE__ */ jsx("button", {
+								className: "eui-cdt-timing-val",
+								onClick: () => {
+									setShowAtInput(formatTime$1(effectiveShowAt));
+									setEditingShowAt(true);
+								},
+								"aria-label": `Show at ${formatTime$1(effectiveShowAt)}`,
+								children: formatTime$1(effectiveShowAt)
+							}),
+							/* @__PURE__ */ jsx("button", {
+								className: "eui-cdt-timing-now",
+								title: "Set to current time",
+								"aria-label": "Set show time to current",
+								onClick: onSetCurrentAsShowAt,
+								children: "▸"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "eui-cdt-timing-row",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "eui-cdt-timing-label",
+								children: "Hide at"
+							}),
+							editingHideAt ? /* @__PURE__ */ jsx("input", {
+								className: "eui-cdt-timing-input",
+								value: hideAtInput,
+								autoFocus: true,
+								onChange: (e) => setHideAtInput(e.target.value),
+								onBlur: handleHideAtCommit,
+								onKeyDown: (e) => {
+									if (e.key === "Enter") handleHideAtCommit();
+									if (e.key === "Escape") setEditingHideAt(false);
+								},
+								placeholder: "never",
+								"aria-label": "Hide at time"
+							}) : /* @__PURE__ */ jsx("button", {
+								className: "eui-cdt-timing-val",
+								onClick: () => {
+									setHideAtInput(effectiveHideAt !== null ? formatTime$1(effectiveHideAt) : "");
+									setEditingHideAt(true);
+								},
+								"aria-label": effectiveHideAt !== null ? `Hide at ${formatTime$1(effectiveHideAt)}` : "No hide time set",
+								children: effectiveHideAt !== null ? formatTime$1(effectiveHideAt) : "—"
+							}),
+							/* @__PURE__ */ jsx("button", {
+								className: "eui-cdt-timing-now",
+								title: "Set to current time",
+								"aria-label": "Set hide time to current",
+								onClick: onSetCurrentAsHideAt,
+								children: "▸"
+							})
+						]
+					}),
+					showTransitions && /* @__PURE__ */ jsxs("div", {
+						className: "eui-cdt-timing-row",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "eui-cdt-timing-label",
+							children: "Transition"
+						}), /* @__PURE__ */ jsx("select", {
+							className: "eui-cdt-select",
+							value: effectiveTransition,
+							onChange: (e) => handleTransitionChange(e.target.value),
+							"aria-label": "Transition type",
+							children: transitionOptions$1.map((t) => /* @__PURE__ */ jsx("option", {
+								value: t.id,
+								children: t.label
+							}, t.id))
+						})]
+					})
+				]
+			})] }),
+			showGroups && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: "eui-cdt-divider" }), /* @__PURE__ */ jsxs("div", {
+				className: "eui-cdt-section eui-cdt-section--timing",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "eui-cdt-label",
+					children: "Group"
+				}), /* @__PURE__ */ jsxs("select", {
+					className: "eui-cdt-select",
+					value: selectedItem.groupId ?? "",
+					onChange: (e) => onAssignGroup(e.target.value || null),
+					"aria-label": "Assign group",
+					children: [/* @__PURE__ */ jsx("option", {
+						value: "",
+						children: "No group"
+					}), groups.map((g) => /* @__PURE__ */ jsx("option", {
+						value: g.id,
+						children: g.label
+					}, g.id))]
+				})]
+			})] }),
+			/* @__PURE__ */ jsx("div", { className: "eui-cdt-divider" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "eui-cdt-section eui-cdt-section--actions",
+				children: [
+					showUndo && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+						className: "eui-cdt-action",
+						title: "Undo (Ctrl+Z)",
+						"aria-label": "Undo",
+						onClick: onUndo,
+						disabled: !canUndo,
+						children: "↩"
+					}), /* @__PURE__ */ jsx("button", {
+						className: "eui-cdt-action",
+						title: "Redo (Ctrl+Y)",
+						"aria-label": "Redo",
+						onClick: onRedo,
+						disabled: !canRedo,
+						children: "↪"
+					})] }),
+					/* @__PURE__ */ jsx("button", {
+						className: "eui-cdt-action",
+						title: "Duplicate selected",
+						"aria-label": "Duplicate selected",
+						onClick: onDuplicateSelected,
+						disabled: !selectedItem,
+						children: "⧉"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						className: "eui-cdt-action eui-cdt-action--danger",
+						title: "Delete selected (Del)",
+						"aria-label": "Delete selected",
+						onClick: onDeleteSelected,
+						disabled: !selectedItem,
+						children: "✕"
+					}),
+					showClear && /* @__PURE__ */ jsx("button", {
+						className: "eui-cdt-action eui-cdt-action--danger",
+						title: "Clear all",
+						"aria-label": "Clear all drawings",
+						onClick: onClearAll,
+						children: "🗑"
+					}),
+					showExport && onExport && /* @__PURE__ */ jsx("button", {
+						className: "eui-cdt-action eui-cdt-action--export",
+						title: "Export",
+						"aria-label": "Export as image",
+						onClick: () => onExport("png"),
+						children: "⬇"
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/canvas-draw/CanvasDraw.tsx
+var maxUndoHistory = 50;
+function CanvasDraw({ background, items: controlledItems, groups: controlledGroups, currentMs = 0, mediaDurationMs = 0, isEditing = true, toolbarPlacement = "top", defaultTool = "select", defaultToolDefaults: partialDefaults, features = {}, className, style, onItemsChange, onExport }) {
+	const mergedDefaults = useMemo(() => ({
+		...defaultToolDefaults,
+		...partialDefaults
+	}), [partialDefaults]);
+	const isControlled = controlledItems !== void 0;
+	const [internalItems, setInternalItems] = useState([]);
+	const [internalGroups] = useState(controlledGroups ?? []);
+	const [activeTool, setActiveTool] = useState(defaultTool);
+	const [toolDefaults, setToolDefaults] = useState(mergedDefaults);
+	const [selectedItemId, setSelectedItemId] = useState(null);
+	const [showAtMs, setShowAtMs] = useState(0);
+	const [hideAtMs, setHideAtMs] = useState(null);
+	const [drawTransition, setDrawTransition] = useState("none");
+	const [drawGroupId] = useState(null);
+	const items = isControlled ? controlledItems ?? [] : internalItems;
+	const groups = controlledGroups ?? internalGroups;
+	const undoStackRef = useRef([]);
+	const redoStackRef = useRef([]);
+	const [canUndo, setCanUndo] = useState(false);
+	const [canRedo, setCanRedo] = useState(false);
+	const preDrawSnapshotRef = useRef(null);
+	const overlayRef = useRef(null);
+	const setItems = useCallback((next) => {
+		if (!isControlled) setInternalItems(next);
+		onItemsChange?.(next);
+	}, [isControlled, onItemsChange]);
+	const handleItemsChange = useCallback((next) => {
+		if (preDrawSnapshotRef.current === null) preDrawSnapshotRef.current = items.slice();
+		setItems(next);
+	}, [items, setItems]);
+	const handleItemsCommit = useCallback(() => {
+		if (preDrawSnapshotRef.current !== null) {
+			undoStackRef.current = [...undoStackRef.current.slice(-maxUndoHistory + 1), preDrawSnapshotRef.current];
+			redoStackRef.current = [];
+			preDrawSnapshotRef.current = null;
+			setCanUndo(true);
+			setCanRedo(false);
+		}
+	}, []);
+	const handleUndo = useCallback(() => {
+		if (undoStackRef.current.length === 0) return;
+		const prev = undoStackRef.current[undoStackRef.current.length - 1];
+		undoStackRef.current = undoStackRef.current.slice(0, -1);
+		redoStackRef.current = [...redoStackRef.current, items.slice()];
+		setItems(prev);
+		setSelectedItemId(null);
+		setCanUndo(undoStackRef.current.length > 0);
+		setCanRedo(true);
+	}, [items, setItems]);
+	const handleRedo = useCallback(() => {
+		if (redoStackRef.current.length === 0) return;
+		const next = redoStackRef.current[redoStackRef.current.length - 1];
+		redoStackRef.current = redoStackRef.current.slice(0, -1);
+		undoStackRef.current = [...undoStackRef.current, items.slice()];
+		setItems(next);
+		setSelectedItemId(null);
+		setCanUndo(true);
+		setCanRedo(redoStackRef.current.length > 0);
+	}, [items, setItems]);
+	const handleDeleteSelected = useCallback(() => {
+		if (!selectedItemId) return;
+		undoStackRef.current = [...undoStackRef.current.slice(-maxUndoHistory + 1), items.slice()];
+		redoStackRef.current = [];
+		setItems(items.filter((it) => it.id !== selectedItemId));
+		setSelectedItemId(null);
+		setCanUndo(true);
+		setCanRedo(false);
+	}, [
+		selectedItemId,
+		items,
+		setItems
+	]);
+	const handleDuplicateSelected = useCallback(() => {
+		if (!selectedItemId) return;
+		const original = items.find((it) => it.id === selectedItemId);
+		if (!original) return;
+		const copy = {
+			...original,
+			id: `cd-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+			xPct: original.xPct + .02,
+			yPct: original.yPct + .02,
+			object: {
+				...original.object,
+				id: `cd-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`
+			}
+		};
+		undoStackRef.current = [...undoStackRef.current.slice(-maxUndoHistory + 1), items.slice()];
+		redoStackRef.current = [];
+		setItems([...items, copy]);
+		setSelectedItemId(copy.id);
+		setCanUndo(true);
+		setCanRedo(false);
+	}, [
+		selectedItemId,
+		items,
+		setItems
+	]);
+	const handleClearAll = useCallback(() => {
+		undoStackRef.current = [...undoStackRef.current.slice(-maxUndoHistory + 1), items.slice()];
+		redoStackRef.current = [];
+		setItems([]);
+		setSelectedItemId(null);
+		setCanUndo(true);
+		setCanRedo(false);
+	}, [items, setItems]);
+	const handleDefaultsChange = useCallback((d) => {
+		setToolDefaults(d);
+		if (selectedItemId) setItems(items.map((it) => {
+			if (it.id !== selectedItemId) return it;
+			const obj = it.object;
+			const base = {
+				strokeColor: d.strokeColor,
+				strokeWidth: d.strokeWidth
+			};
+			if (obj.type === "rect" || obj.type === "circle") return {
+				...it,
+				object: {
+					...obj,
+					...base,
+					fillColor: d.fillColor,
+					...obj.type === "rect" ? { rounded: d.rounded } : {}
+				}
+			};
+			if (obj.type === "text") return {
+				...it,
+				object: {
+					...obj,
+					...base,
+					fillColor: d.fillColor,
+					fontFamily: d.fontFamily,
+					fontSize: d.fontSize,
+					fontColor: d.fontColor,
+					fontBold: d.fontBold,
+					fontItalic: d.fontItalic,
+					fontUnderline: d.fontUnderline
+				}
+			};
+			if (obj.type === "balloon") return {
+				...it,
+				object: {
+					...obj,
+					...base,
+					fillColor: d.fillColor,
+					fontFamily: d.fontFamily,
+					fontSize: d.fontSize,
+					fontColor: d.fontColor,
+					fontBold: d.fontBold,
+					fontItalic: d.fontItalic,
+					fontUnderline: d.fontUnderline
+				}
+			};
+			if (obj.type === "step") {
+				const stepFill = d.fillColor === "transparent" ? obj.fillColor : d.fillColor;
+				return {
+					...it,
+					object: {
+						...obj,
+						...base,
+						fillColor: stepFill,
+						fontColor: d.fontColor
+					}
+				};
+			}
+			if (obj.type === "callout") {
+				const calloutFill = d.fillColor === "transparent" ? obj.fillColor : d.fillColor;
+				return {
+					...it,
+					object: {
+						...obj,
+						...base,
+						fillColor: calloutFill,
+						fontColor: d.fontColor
+					}
+				};
+			}
+			return {
+				...it,
+				object: {
+					...obj,
+					...base
+				}
+			};
+		}));
+	}, [
+		selectedItemId,
+		items,
+		setItems
+	]);
+	const handleUpdateSelectedTiming = useCallback((newShowAt, newHideAt, newTransition) => {
+		if (!selectedItemId) return;
+		setItems(items.map((it) => it.id !== selectedItemId ? it : {
+			...it,
+			showAtMs: newShowAt,
+			hideAtMs: newHideAt,
+			transition: newTransition
+		}));
+	}, [
+		selectedItemId,
+		items,
+		setItems
+	]);
+	const handleAssignGroup = useCallback((groupId) => {
+		if (!selectedItemId) return;
+		setItems(items.map((it) => it.id !== selectedItemId ? it : {
+			...it,
+			groupId
+		}));
+	}, [
+		selectedItemId,
+		items,
+		setItems
+	]);
+	const handleUpdateStepNumber = useCallback((stepNumber) => {
+		if (!selectedItemId) return;
+		setItems(items.map((it) => {
+			if (it.id !== selectedItemId) return it;
+			const obj = it.object;
+			if (obj.type === "step" || obj.type === "callout") return {
+				...it,
+				object: {
+					...obj,
+					stepNumber
+				}
+			};
+			return it;
+		}));
+	}, [
+		selectedItemId,
+		items,
+		setItems
+	]);
+	const handleExport = useCallback(async (format) => {
+		if (!onExport) return;
+		if (format === "svg") {
+			const svgStr = overlayRef.current?.exportSvgString() ?? "";
+			const blob = new Blob([svgStr], { type: "image/svg+xml" });
+			onExport(URL.createObjectURL(blob), "svg");
+			return;
+		}
+		const wrapper = document.querySelector(".eui-canvas-draw__canvas");
+		if (!wrapper) return;
+		try {
+			const { default: renderToCanvas } = await import(
+				/* @vite-ignore */
+				"html2canvas"
+);
+			const canvas = await renderToCanvas(wrapper, {
+				useCORS: true,
+				scale: 2
+			});
+			const mime = format === "jpg" ? "image/jpeg" : format === "webp" ? "image/webp" : "image/png";
+			onExport(canvas.toDataURL(mime, .92), format);
+		} catch (err) {
+			console.error("[CanvasDraw] Export requires \"html2canvas\" package. Install it with: npm install html2canvas", err);
+		}
+	}, [onExport]);
+	const handleDrawComplete = useCallback(() => {
+		setActiveTool("select");
+	}, []);
+	const wrapRef = useRef(null);
+	const handleUndoRef = useRef(handleUndo);
+	handleUndoRef.current = handleUndo;
+	const handleRedoRef = useRef(handleRedo);
+	handleRedoRef.current = handleRedo;
+	const handleDeleteSelectedRef = useRef(handleDeleteSelected);
+	handleDeleteSelectedRef.current = handleDeleteSelected;
+	useEffect(() => {
+		if (!isEditing) return;
+		const el = wrapRef.current;
+		if (!el) return;
+		const onKeyDown = (e) => {
+			if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLSelectElement) return;
+			if (e.key === "Delete" || e.key === "Backspace") {
+				e.preventDefault();
+				handleDeleteSelectedRef.current();
+			} else if (e.key === "z" && (e.ctrlKey || e.metaKey) && !e.shiftKey) {
+				e.preventDefault();
+				handleUndoRef.current();
+			} else if (e.key === "y" && (e.ctrlKey || e.metaKey) || e.key === "z" && (e.ctrlKey || e.metaKey) && e.shiftKey) {
+				e.preventDefault();
+				handleRedoRef.current();
+			}
+		};
+		el.addEventListener("keydown", onKeyDown);
+		return () => el.removeEventListener("keydown", onKeyDown);
+	}, [isEditing]);
+	const selectedItem = useMemo(() => items.find((it) => it.id === selectedItemId) ?? null, [items, selectedItemId]);
+	const toolbarVisible = isEditing && toolbarPlacement !== "none";
+	const isVerticalToolbar = toolbarPlacement === "left" || toolbarPlacement === "right";
+	const wrapClass = (0, import_classnames.default)("eui-canvas-draw", {
+		[`eui-canvas-draw--tb-${toolbarPlacement}`]: toolbarVisible,
+		"eui-canvas-draw--vertical-tb": isVerticalToolbar,
+		"eui-canvas-draw--editing": isEditing
+	}, className);
+	const backgroundEl = useMemo(() => {
+		if (background.type === "image") return /* @__PURE__ */ jsx("img", {
+			src: background.src,
+			className: "eui-canvas-draw__bg-img",
+			alt: "",
+			draggable: false
+		});
+		if (background.type === "color") return /* @__PURE__ */ jsx("div", {
+			className: "eui-canvas-draw__bg-color",
+			style: { background: background.color }
+		});
+		return null;
+	}, [background]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: wrapRef,
+		className: wrapClass,
+		style,
+		tabIndex: -1,
+		children: [
+			toolbarVisible && (toolbarPlacement === "top" || toolbarPlacement === "left") && /* @__PURE__ */ jsx(CanvasDrawToolbar, {
+				activeTool,
+				defaults: toolDefaults,
+				currentMs,
+				mediaDurationMs,
+				showAtMs,
+				hideAtMs,
+				transition: drawTransition,
+				selectedItem,
+				groups,
+				features,
+				onToolChange: setActiveTool,
+				onDefaultsChange: handleDefaultsChange,
+				onShowAtChange: setShowAtMs,
+				onHideAtChange: setHideAtMs,
+				onTransitionChange: setDrawTransition,
+				onDeleteSelected: handleDeleteSelected,
+				onDuplicateSelected: handleDuplicateSelected,
+				onUndo: handleUndo,
+				onRedo: handleRedo,
+				onClearAll: handleClearAll,
+				onSetCurrentAsShowAt: () => setShowAtMs(currentMs),
+				onSetCurrentAsHideAt: () => setHideAtMs(currentMs),
+				onUpdateSelectedTiming: handleUpdateSelectedTiming,
+				onAssignGroup: handleAssignGroup,
+				onUpdateStepNumber: handleUpdateStepNumber,
+				canUndo,
+				canRedo,
+				onExport: onExport ? handleExport : void 0
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "eui-canvas-draw__canvas",
+				children: [
+					backgroundEl,
+					/* @__PURE__ */ jsx(CanvasDrawOverlay, {
+						ref: overlayRef,
+						background,
+						currentMs,
+						isEditing,
+						items,
+						groups,
+						selectedItemId,
+						defaults: toolDefaults,
+						activeTool,
+						currentDrawShowAt: showAtMs,
+						currentDrawHideAt: hideAtMs,
+						currentDrawTransition: drawTransition,
+						currentDrawGroupId: drawGroupId,
+						onItemsChange: handleItemsChange,
+						onItemsCommit: handleItemsCommit,
+						onSelectItem: setSelectedItemId,
+						onDrawComplete: handleDrawComplete
+					}),
+					features.export !== false && onExport && /* @__PURE__ */ jsx("div", {
+						className: "eui-canvas-draw__export-bar",
+						children: [
+							"png",
+							"jpg",
+							"webp",
+							"svg"
+						].map((fmt) => /* @__PURE__ */ jsx("button", {
+							className: "eui-canvas-draw__export-btn",
+							onClick: () => handleExport(fmt),
+							"aria-label": `Export as ${fmt.toUpperCase()}`,
+							children: fmt.toUpperCase()
+						}, fmt))
+					})
+				]
+			}),
+			toolbarVisible && (toolbarPlacement === "bottom" || toolbarPlacement === "right") && /* @__PURE__ */ jsx(CanvasDrawToolbar, {
+				activeTool,
+				defaults: toolDefaults,
+				currentMs,
+				mediaDurationMs,
+				showAtMs,
+				hideAtMs,
+				transition: drawTransition,
+				selectedItem,
+				groups,
+				features,
+				onToolChange: setActiveTool,
+				onDefaultsChange: handleDefaultsChange,
+				onShowAtChange: setShowAtMs,
+				onHideAtChange: setHideAtMs,
+				onTransitionChange: setDrawTransition,
+				onDeleteSelected: handleDeleteSelected,
+				onDuplicateSelected: handleDuplicateSelected,
+				onUndo: handleUndo,
+				onRedo: handleRedo,
+				onClearAll: handleClearAll,
+				onSetCurrentAsShowAt: () => setShowAtMs(currentMs),
+				onSetCurrentAsHideAt: () => setHideAtMs(currentMs),
+				onUpdateSelectedTiming: handleUpdateSelectedTiming,
+				onAssignGroup: handleAssignGroup,
+				onUpdateStepNumber: handleUpdateStepNumber,
+				canUndo,
+				canRedo,
+				onExport: onExport ? handleExport : void 0
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/canvas-draw/MediaTimeline.tsx
+var groupPalette = [
+	"#4361ee",
+	"#7209b7",
+	"#2a9d8f",
+	"#f4a261",
+	"#e63946",
+	"#52b788"
+];
+var transitionOptions = [
+	{
+		id: "none",
+		label: "None"
+	},
+	{
+		id: "fade",
+		label: "Fade"
+	},
+	{
+		id: "scale",
+		label: "Scale"
+	},
+	{
+		id: "slide-up",
+		label: "↑ Slide"
+	},
+	{
+		id: "slide-down",
+		label: "↓ Slide"
+	},
+	{
+		id: "slide-left",
+		label: "← Slide"
+	},
+	{
+		id: "slide-right",
+		label: "→ Slide"
+	}
+];
+function msToPercent(ms, durationMs) {
+	if (durationMs === 0) return 0;
+	return Math.min(100, Math.max(0, ms / durationMs * 100));
+}
+function xToMs(x, durationMs, width) {
+	return Math.round(x / width * durationMs);
+}
+function formatTime(ms) {
+	const s = Math.floor(ms / 1e3);
+	return `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, "0")}`;
+}
+function MediaTimeline({ items, groups, durationMs, currentMs, selectedItemId, tickCount = 10, defaultItemColor = "#89b4fa", onSelectItem, onUpdateItem, onUpdateGroup, onAddGroup, onDeleteGroup, onSeek, zoomLevel: controlledZoom, onZoomChange }) {
+	const trackRef = useRef(null);
+	const [dragState, setDragState] = useState(null);
+	const [expandedGroupId, setExpandedGroupId] = useState(null);
+	const [internalZoom, setInternalZoom] = useState(1);
+	const zoom = controlledZoom ?? internalZoom;
+	const getTrackWidth = useCallback(() => trackRef.current?.clientWidth ?? 600, []);
+	const handleWheel = useCallback((e) => {
+		if (!e.ctrlKey && !e.metaKey) return;
+		e.preventDefault();
+		const delta = e.deltaY > 0 ? -.1 : .1;
+		const newZoom = Math.max(.1, Math.min(10, zoom + delta));
+		if (onZoomChange) onZoomChange(newZoom);
+		else setInternalZoom(newZoom);
+	}, [zoom, onZoomChange]);
+	const selectedItem = selectedItemId ? items.find((it) => it.id === selectedItemId) : null;
+	const onTrackMouseDown = useCallback((e) => {
+		if (e.target === trackRef.current) {
+			const rect = trackRef.current.getBoundingClientRect();
+			onSeek(xToMs(e.clientX - rect.left, durationMs, getTrackWidth()));
+		}
+	}, [
+		durationMs,
+		getTrackWidth,
+		onSeek
+	]);
+	const startDrag = useCallback((type, id, e, origShowAt, origHideAt) => {
+		e.stopPropagation();
+		e.preventDefault();
+		setDragState({
+			type,
+			id,
+			startX: e.clientX,
+			origShowAt,
+			origHideAt
+		});
+	}, []);
+	const onMouseMove = useCallback((e) => {
+		if (!dragState) return;
+		const dx = e.clientX - dragState.startX;
+		const dMs = Math.round(dx / getTrackWidth() * durationMs);
+		const { type, id, origShowAt, origHideAt } = dragState;
+		if (type === "item-move") {
+			const newShow = Math.max(0, Math.min(origShowAt + dMs, durationMs));
+			const dur = origHideAt !== null ? origHideAt - origShowAt : null;
+			onUpdateItem(id, {
+				showAtMs: newShow,
+				hideAtMs: dur !== null ? Math.min(newShow + dur, durationMs) : null
+			});
+		} else if (type === "item-resize-end") {
+			const base = origHideAt ?? origShowAt;
+			onUpdateItem(id, { hideAtMs: Math.max(origShowAt + 100, Math.min(base + dMs, durationMs)) });
+		} else if (type === "group-move") {
+			const newShow = Math.max(0, Math.min(origShowAt + dMs, durationMs));
+			const dur = origHideAt !== null ? origHideAt - origShowAt : null;
+			onUpdateGroup(id, {
+				showAtMs: newShow,
+				hideAtMs: dur !== null ? Math.min(newShow + dur, durationMs) : null
+			});
+		} else if (type === "group-resize-end") {
+			const base = origHideAt ?? origShowAt;
+			onUpdateGroup(id, { hideAtMs: Math.max(origShowAt + 100, Math.min(base + dMs, durationMs)) });
+		} else if (type === "group-resize-start") onUpdateGroup(id, { showAtMs: Math.max(0, Math.min(origShowAt + dMs, (origHideAt ?? durationMs) - 100)) });
+	}, [
+		dragState,
+		durationMs,
+		getTrackWidth,
+		onUpdateItem,
+		onUpdateGroup
+	]);
+	const onMouseUp = useCallback(() => setDragState(null), []);
+	const ticks = Array.from({ length: tickCount + 1 }, (_, i) => Math.round(i / tickCount * durationMs));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "eui-media-timeline",
+		onMouseMove,
+		onMouseUp,
+		onMouseLeave: onMouseUp,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "eui-mt-header",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "eui-mt-title",
+					children: "Timeline"
+				}),
+				selectedItem && /* @__PURE__ */ jsxs("span", {
+					className: "eui-mt-selected-info",
+					children: [formatTime(selectedItem.showAtMs), selectedItem.hideAtMs !== null ? ` – ${formatTime(selectedItem.hideAtMs)}` : " – end"]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "eui-mt-zoom-label",
+					children: [Math.round(zoom * 100), "%"]
+				}),
+				/* @__PURE__ */ jsx("button", {
+					className: "eui-mt-add-group",
+					onClick: onAddGroup,
+					"aria-label": "Add group",
+					children: "+ Group"
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "eui-mt-track-wrap",
+			ref: trackRef,
+			onMouseDown: onTrackMouseDown,
+			onWheel: handleWheel,
+			style: {
+				width: `${zoom * 100}%`,
+				minWidth: "100%"
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "eui-mt-ticks",
+					children: ticks.map((ms) => /* @__PURE__ */ jsx("div", {
+						className: "eui-mt-tick",
+						style: { left: `${msToPercent(ms, durationMs)}%` },
+						children: /* @__PURE__ */ jsx("span", {
+							className: "eui-mt-tick-label",
+							children: formatTime(ms)
+						})
+					}, ms))
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "eui-mt-playhead",
+					style: { left: `${msToPercent(currentMs, durationMs)}%` },
+					"aria-hidden": "true"
+				}),
+				groups.map((group, gi) => {
+					const gColor = group.color ?? groupPalette[gi % groupPalette.length];
+					const startPct = msToPercent(group.showAtMs, durationMs);
+					const endPct = group.hideAtMs !== null ? msToPercent(group.hideAtMs, durationMs) : 100;
+					const wPct = Math.max(endPct - startPct, .3);
+					const isExpanded = expandedGroupId === group.id;
+					return /* @__PURE__ */ jsxs("div", {
+						className: "eui-mt-group-row",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "eui-mt-group-block",
+							style: {
+								left: `${startPct}%`,
+								width: `${wPct}%`,
+								borderColor: gColor,
+								background: `${gColor}22`
+							},
+							onMouseDown: (e) => startDrag("group-move", group.id, e, group.showAtMs, group.hideAtMs),
+							onClick: () => setExpandedGroupId(isExpanded ? null : group.id),
+							title: group.label,
+							role: "button",
+							"aria-label": `Group: ${group.label}`,
+							children: [
+								/* @__PURE__ */ jsx("div", {
+									className: "eui-mt-resize-handle eui-mt-resize-handle--start",
+									onMouseDown: (e) => startDrag("group-resize-start", group.id, e, group.showAtMs, group.hideAtMs),
+									"aria-hidden": "true"
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "eui-mt-group-label",
+									style: { color: gColor },
+									children: group.label
+								}),
+								/* @__PURE__ */ jsx("div", {
+									className: "eui-mt-resize-handle eui-mt-resize-handle--end",
+									onMouseDown: (e) => startDrag("group-resize-end", group.id, e, group.showAtMs, group.hideAtMs),
+									"aria-hidden": "true"
+								})
+							]
+						}), isExpanded && /* @__PURE__ */ jsxs("div", {
+							className: "eui-mt-group-props",
+							children: [
+								/* @__PURE__ */ jsx("input", {
+									className: "eui-mt-group-name-input",
+									value: group.label,
+									onChange: (e) => onUpdateGroup(group.id, { label: e.target.value }),
+									placeholder: "Group name",
+									"aria-label": "Group name"
+								}),
+								/* @__PURE__ */ jsx("select", {
+									className: "eui-mt-select",
+									value: group.transition,
+									onChange: (e) => onUpdateGroup(group.id, { transition: e.target.value }),
+									"aria-label": "Group transition",
+									children: transitionOptions.map((t) => /* @__PURE__ */ jsx("option", {
+										value: t.id,
+										children: t.label
+									}, t.id))
+								}),
+								/* @__PURE__ */ jsx("button", {
+									className: "eui-mt-delete-group",
+									onClick: () => {
+										onDeleteGroup(group.id);
+										setExpandedGroupId(null);
+									},
+									"aria-label": `Delete group ${group.label}`,
+									children: "Delete group"
+								})
+							]
+						})]
+					}, group.id);
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "eui-mt-items-row",
+					children: items.map((item) => {
+						const startPct = msToPercent(item.showAtMs, durationMs);
+						const endPct = item.hideAtMs !== null ? msToPercent(item.hideAtMs, durationMs) : 100;
+						const wPct = Math.max(endPct - startPct, .3);
+						const isSelected = item.id === selectedItemId;
+						const groupIndex = groups.findIndex((g) => g.id === item.groupId);
+						const blockColor = groupIndex >= 0 ? groups[groupIndex].color ?? groupPalette[groupIndex % groupPalette.length] : item.color ?? defaultItemColor;
+						return /* @__PURE__ */ jsx("div", {
+							className: (0, import_classnames.default)("eui-mt-item-block", { "eui-mt-item-block--selected": isSelected }),
+							style: {
+								left: `${startPct}%`,
+								width: `${wPct}%`,
+								background: blockColor,
+								opacity: isSelected ? 1 : .65
+							},
+							title: item.label ?? `${item.showAtMs}ms${item.hideAtMs !== null ? ` – ${item.hideAtMs}ms` : ""}`,
+							role: "button",
+							"aria-selected": isSelected,
+							onClick: () => onSelectItem(isSelected ? null : item.id),
+							onMouseDown: (e) => {
+								onSelectItem(item.id);
+								startDrag("item-move", item.id, e, item.showAtMs, item.hideAtMs);
+							},
+							children: /* @__PURE__ */ jsx("div", {
+								className: "eui-mt-resize-handle eui-mt-resize-handle--end",
+								onMouseDown: (e) => {
+									e.stopPropagation();
+									startDrag("item-resize-end", item.id, e, item.showAtMs, item.hideAtMs);
+								},
+								"aria-hidden": "true"
+							})
+						}, item.id);
+					})
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { CanvasDraw, CanvasDrawOverlay, CanvasDrawToolbar, MediaTimeline, autoFontColor, colorMap, contrastColor, defaultToolDefaults };