@elixpo/lixsketch 5.4.7 → 5.5.0

package/dist/react/chunk-JJCJNLNN.js

@@ -0,0 +1,1490 @@
+"use client";
+import {
+  applySyntaxHighlightingToSVG,
+  createHighlightedSVGText,
+  deselectCodeBlock,
+  extractTextFromCodeElement,
+  getCodeLanguage,
+  getSelectedCodeBlock,
+  selectCodeBlock,
+  setCodeLanguage,
+  updateCodeBackground,
+  wrapCodeElement
+} from "./chunk-LHRTXNVE.js";
+import {
+  cleanupAttachments,
+  updateAttachedArrows
+} from "./chunk-BZE4CEBG.js";
+import {
+  pushCreateAction,
+  pushDeleteActionWithAttachments,
+  pushFrameAttachmentAction,
+  pushOptionsChangeAction,
+  pushTransformAction,
+  setTextReferences,
+  updateSelectedElement
+} from "./chunk-L5OARZJ7.js";
+
+// src/tools/textTool.js
+function getThemeStroke() {
+  if (typeof document === "undefined") return "#fff";
+  return document.body && document.body.classList.contains("theme-dark") ? "#fff" : "#1a1a2e";
+}
+var textSize = "30px";
+var textFont = "lixFont";
+var textColor = null;
+var textAlign = "left";
+var textColorOptions = document.querySelectorAll(".textColorSpan");
+var textFontOptions = document.querySelectorAll(".textFontSpan");
+var textSizeOptions = document.querySelectorAll(".textSizeSpan");
+var textAlignOptions = document.querySelectorAll(".textAlignSpan");
+var selectedElement = null;
+var selectionBox = null;
+var resizeHandles = {};
+var dragOffsetX;
+var dragOffsetY;
+var isDragging = false;
+var isResizing = false;
+var currentResizeHandle = null;
+var startBBox = null;
+var startFontSize = null;
+var startPoint = null;
+var isRotating = false;
+var rotationStartAngle = 0;
+var rotationStartTransform = null;
+var initialHandlePosRelGroup = null;
+var initialGroupTx = 0;
+var initialGroupTy = 0;
+var initialInverseScreenCTM = null;
+var draggedShapeInitialFrameText = null;
+var hoveredFrameText = null;
+setTextReferences(selectedElement, updateSelectionFeedback, svg);
+function switchToSelectionTool() {
+  if (window.__sketchStoreApi) {
+    window.__sketchStoreApi.setActiveTool("select", { afterDraw: true });
+  } else {
+    window.isSelectionToolActive = true;
+  }
+}
+function wrapTextElement(groupElement) {
+  const textShape = new TextShape(groupElement);
+  return textShape;
+}
+function getSVGCoordinates(event, element = svg) {
+  if (!svg || !svg.createSVGPoint) {
+    console.error("SVG element or createSVGPoint method not available.");
+    return { x: 0, y: 0 };
+  }
+  let pt = svg.createSVGPoint();
+  pt.x = event.clientX;
+  pt.y = event.clientY;
+  try {
+    let screenCTM = element && typeof element.getScreenCTM === "function" && element.getScreenCTM() || svg.getScreenCTM();
+    if (!screenCTM) {
+      console.error("Could not get Screen CTM.");
+      return { x: event.clientX, y: event.clientY };
+    }
+    let svgPoint = pt.matrixTransform(screenCTM.inverse());
+    return {
+      x: svgPoint.x,
+      y: svgPoint.y
+    };
+  } catch (error) {
+    console.error("Error getting SVG coordinates:", error);
+    return { x: event.clientX, y: event.clientY };
+  }
+}
+function addText(event) {
+  let { x, y } = getSVGCoordinates(event);
+  let gElement = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  gElement.setAttribute("data-type", "text-group");
+  gElement.setAttribute("transform", `translate(${x}, ${y})`);
+  let textElement = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "text"
+  );
+  let textAlignElement = "start";
+  if (textAlign === "center") textAlignElement = "middle";
+  else if (textAlign === "right") textAlignElement = "end";
+  textElement.setAttribute("x", 0);
+  textElement.setAttribute("y", 0);
+  textElement.setAttribute("fill", textColor ?? getThemeStroke());
+  textElement.setAttribute("font-size", textSize);
+  textElement.setAttribute("font-family", textFont);
+  textElement.setAttribute("text-anchor", textAlignElement);
+  textElement.setAttribute("cursor", "default");
+  textElement.setAttribute("white-space", "pre");
+  textElement.setAttribute("dominant-baseline", "hanging");
+  textElement.setAttribute("pointer-events", "bounding-box");
+  textElement.textContent = "";
+  gElement.setAttribute("data-x", x);
+  gElement.setAttribute("data-y", y);
+  textElement.setAttribute("data-initial-size", textSize);
+  textElement.setAttribute("data-initial-font", textFont);
+  textElement.setAttribute("data-initial-color", textColor ?? getThemeStroke());
+  textElement.setAttribute("data-initial-align", textAlign);
+  textElement.setAttribute("data-type", "text");
+  gElement.appendChild(textElement);
+  svg.appendChild(gElement);
+  const shapeID = `text-${String(Date.now()).slice(0, 8)}-${Math.floor(Math.random() * 1e4)}`;
+  gElement.setAttribute("id", shapeID);
+  textElement.setAttribute("id", `${shapeID}-text`);
+  const textShape = wrapTextElement(gElement);
+  if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+    shapes.push(textShape);
+  }
+  pushCreateAction({
+    type: "text",
+    element: textShape,
+    shapeName: "text"
+  });
+  if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+    shapes.forEach((shape) => {
+      if (shape.shapeName === "frame" && shape.isShapeInFrame(textShape)) {
+        shape.addShapeToFrame(textShape);
+      }
+    });
+  }
+  makeTextEditable(textElement, gElement);
+}
+function makeTextEditable(textElement, groupElement) {
+  if (document.querySelector("textarea.svg-text-editor")) {
+    return;
+  }
+  if (selectedElement) {
+    deselectElement();
+  }
+  let input = document.createElement("textarea");
+  input.className = "svg-text-editor";
+  let textContent = "";
+  const tspans = textElement.querySelectorAll("tspan");
+  if (tspans.length > 0) {
+    tspans.forEach((tspan, index) => {
+      textContent += tspan.textContent.replace(/ /g, "\xA0");
+      if (index < tspans.length - 1) {
+        textContent += "\n";
+      }
+    });
+  } else {
+    textContent = textElement.textContent.replace(/ /g, "\xA0");
+  }
+  input.value = textContent;
+  input.style.position = "absolute";
+  input.style.outline = "none";
+  input.style.padding = "1px";
+  input.style.margin = "0";
+  input.style.boxSizing = "border-box";
+  input.style.overflow = "hidden";
+  input.style.resize = "none";
+  input.style.whiteSpace = "pre-wrap";
+  input.style.minHeight = "1.2em";
+  input.style.zIndex = "10000";
+  const svgRect = svg.getBoundingClientRect();
+  const textBBox = textElement.getBBox();
+  let pt = svg.createSVGPoint();
+  pt.x = textBBox.x;
+  pt.y = textBBox.y;
+  const groupCTM = groupElement.getScreenCTM() || svg.getScreenCTM();
+  let screenPt = pt.matrixTransform(groupCTM);
+  input.style.left = `${screenPt.x}px`;
+  input.style.top = `${screenPt.y}px`;
+  const svgZoomFactor = svg.getScreenCTM() ? svg.getScreenCTM().a : 1;
+  const screenWidth = textBBox.width * svgZoomFactor;
+  input.style.width = "auto";
+  input.style.height = "auto";
+  const currentFontSize = textElement.getAttribute("font-size") || "30px";
+  const currentFontFamily = textElement.getAttribute("font-family") || "lixFont";
+  const currentFill = textElement.getAttribute("fill") || "#fff";
+  const currentAnchor = textElement.getAttribute("text-anchor") || "start";
+  const rawSize = parseFloat(currentFontSize) || 30;
+  const scaledFontSize = `${rawSize * svgZoomFactor}px`;
+  input.style.minWidth = "150px";
+  input.style.minHeight = "1.5em";
+  input.style.width = "auto";
+  input.style.height = "auto";
+  input.style.overflow = "visible";
+  input.style.whiteSpace = "pre-wrap";
+  input.style.wordBreak = "break-word";
+  input.style.fontSize = scaledFontSize;
+  input.style.fontFamily = currentFontFamily;
+  input.style.color = currentFill;
+  input.style.lineHeight = "1.2em";
+  input.style.textAlign = currentAnchor === "middle" ? "center" : currentAnchor === "end" ? "right" : "left";
+  input.style.backgroundColor = "transparent";
+  input.style.border = "1px dashed rgba(255,255,255,0.55)";
+  input.style.borderRadius = "3px";
+  input.style.outline = "none";
+  document.body.appendChild(input);
+  const adjustHeight = () => {
+    input.style.height = "auto";
+    input.style.height = input.scrollHeight + "px";
+    const maxHeight = svgRect.height - screenPt.y;
+    if (input.scrollHeight > maxHeight) {
+      input.style.height = maxHeight + "px";
+      input.style.overflowY = "auto";
+    } else {
+      input.style.overflowY = "hidden";
+    }
+  };
+  const adjustWidth = () => {
+    input.style.width = "auto";
+    const maxWidth = svgRect.width - screenPt.x;
+    const contentWidth = Math.max(input.scrollWidth, 150);
+    if (contentWidth > maxWidth) {
+      input.style.width = maxWidth + "px";
+      input.style.overflowX = "auto";
+    } else {
+      input.style.width = contentWidth + "px";
+      input.style.overflowX = "hidden";
+    }
+  };
+  adjustHeight();
+  adjustWidth();
+  setTimeout(() => {
+    input.focus();
+    input.select();
+  }, 50);
+  input.addEventListener("input", adjustHeight);
+  input.addEventListener("input", adjustWidth);
+  input.addEventListener("keydown", function(e) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      renderText(input, textElement, true);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      renderText(input, textElement, true);
+    }
+  });
+  input.originalTextElement = textElement;
+  input.textGroup = groupElement;
+  const handleClickOutside = (event) => {
+    if (!input.contains(event.target)) {
+      renderText(input, textElement, true);
+      document.removeEventListener("pointerdown", handleClickOutside, true);
+    }
+  };
+  document.addEventListener("pointerdown", handleClickOutside, true);
+  input.handleClickOutside = handleClickOutside;
+  const textEl = groupElement.querySelector("text");
+  if (textEl) textEl.setAttribute("cursor", "text");
+  groupElement.style.display = "none";
+}
+function renderText(input, textElement, deleteIfEmpty = false) {
+  if (!input || !document.body.contains(input)) {
+    return;
+  }
+  const text = input.value || "";
+  const gElement = input.textGroup;
+  if (input.handleClickOutside) {
+    document.removeEventListener("pointerdown", input.handleClickOutside, true);
+  }
+  document.body.removeChild(input);
+  if (textElement) textElement.setAttribute("cursor", "default");
+  if (!gElement || !textElement) {
+    return;
+  }
+  if (!gElement.parentNode) {
+    if (selectedElement === gElement) {
+      deselectElement();
+    }
+    return;
+  }
+  if (deleteIfEmpty && text.trim() === "") {
+    let textShape = null;
+    if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+      textShape = shapes.find((shape) => shape.shapeName === "text" && shape.group === gElement);
+      if (textShape) {
+        const idx = shapes.indexOf(textShape);
+        if (idx !== -1) shapes.splice(idx, 1);
+      }
+    }
+    pushDeleteActionWithAttachments({
+      type: "text",
+      element: textShape || gElement,
+      shapeName: "text"
+    });
+    if (typeof cleanupAttachments === "function") {
+      cleanupAttachments(gElement);
+    }
+    svg.removeChild(gElement);
+    if (selectedElement === gElement) {
+      selectedElement = null;
+      removeSelectionFeedback();
+    }
+  } else {
+    while (textElement.firstChild) {
+      textElement.removeChild(textElement.firstChild);
+    }
+    const lines = text.split("\n");
+    const x = textElement.getAttribute("x") || 0;
+    lines.forEach((line, index) => {
+      let tspan = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "tspan"
+      );
+      tspan.setAttribute("x", x);
+      tspan.setAttribute("dy", index === 0 ? "0" : "1.2em");
+      tspan.textContent = line.replace(/\u00A0/g, " ") || " ";
+      textElement.appendChild(tspan);
+    });
+    gElement.style.display = "block";
+    updateAttachedArrows(gElement);
+    if (selectedElement === gElement) {
+      setTimeout(updateSelectionFeedback, 0);
+    }
+  }
+  if (gElement.parentNode) {
+    switchToSelectionTool();
+    requestAnimationFrame(() => selectElement(gElement));
+  }
+}
+function createSelectionFeedback(groupElement) {
+  if (!groupElement) return;
+  removeSelectionFeedback();
+  const textElement = groupElement.querySelector("text");
+  if (!textElement) {
+    return;
+  }
+  const bbox = textElement.getBBox();
+  const zoom = window.currentZoom || 1;
+  const padding = 8 / zoom;
+  const handleSize = 10 / zoom;
+  const handleOffset = handleSize / 2;
+  const anchorStrokeWidth = 2;
+  const selX = bbox.x - padding;
+  const selY = bbox.y - padding;
+  const selWidth = bbox.width + 2 * padding;
+  const selHeight = bbox.height + 2 * padding;
+  const outlinePoints = [
+    [selX, selY],
+    [selX + selWidth, selY],
+    [selX + selWidth, selY + selHeight],
+    [selX, selY + selHeight],
+    [selX, selY]
+  ];
+  const pointsAttr = outlinePoints.map((p) => p.join(",")).join(" ");
+  selectionBox = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
+  selectionBox.setAttribute("class", "selection-box");
+  selectionBox.setAttribute("points", pointsAttr);
+  selectionBox.setAttribute("fill", "none");
+  selectionBox.setAttribute("stroke", "#5B57D1");
+  selectionBox.setAttribute("stroke-width", "1.5");
+  selectionBox.setAttribute("stroke-dasharray", `${4 / zoom} ${2 / zoom}`);
+  selectionBox.setAttribute("vector-effect", "non-scaling-stroke");
+  selectionBox.setAttribute("pointer-events", "none");
+  groupElement.appendChild(selectionBox);
+  const handlesData = [
+    { name: "nw", x: selX, y: selY, cursor: "nwse-resize" },
+    { name: "ne", x: selX + selWidth, y: selY, cursor: "nesw-resize" },
+    { name: "sw", x: selX, y: selY + selHeight, cursor: "nesw-resize" },
+    { name: "se", x: selX + selWidth, y: selY + selHeight, cursor: "nwse-resize" }
+  ];
+  resizeHandles = {};
+  handlesData.forEach((handle) => {
+    const handleRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    handleRect.setAttribute("class", `resize-handle resize-handle-${handle.name}`);
+    handleRect.setAttribute("x", handle.x - handleOffset);
+    handleRect.setAttribute("y", handle.y - handleOffset);
+    handleRect.setAttribute("width", handleSize);
+    handleRect.setAttribute("height", handleSize);
+    handleRect.setAttribute("fill", "#121212");
+    handleRect.setAttribute("stroke", "#5B57D1");
+    handleRect.setAttribute("stroke-width", anchorStrokeWidth);
+    handleRect.setAttribute("vector-effect", "non-scaling-stroke");
+    handleRect.style.cursor = handle.cursor;
+    handleRect.setAttribute("data-anchor", handle.name);
+    groupElement.appendChild(handleRect);
+    resizeHandles[handle.name] = handleRect;
+    handleRect.addEventListener("pointerdown", (e) => {
+      if (window.isSelectionToolActive) {
+        e.stopPropagation();
+        startResize(e, handle.name);
+      }
+    });
+  });
+  const rotationAnchorPos = { x: selX + selWidth / 2, y: selY - 30 };
+  const rotationAnchor = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  rotationAnchor.setAttribute("cx", rotationAnchorPos.x);
+  rotationAnchor.setAttribute("cy", rotationAnchorPos.y);
+  rotationAnchor.setAttribute("r", 8);
+  rotationAnchor.setAttribute("class", "rotate-anchor");
+  rotationAnchor.setAttribute("fill", "#121212");
+  rotationAnchor.setAttribute("stroke", "#5B57D1");
+  rotationAnchor.setAttribute("stroke-width", anchorStrokeWidth);
+  rotationAnchor.setAttribute("vector-effect", "non-scaling-stroke");
+  rotationAnchor.style.cursor = "grab";
+  rotationAnchor.setAttribute("pointer-events", "all");
+  groupElement.appendChild(rotationAnchor);
+  resizeHandles.rotate = rotationAnchor;
+  rotationAnchor.addEventListener("pointerdown", (e) => {
+    if (window.isSelectionToolActive) {
+      e.stopPropagation();
+      startRotation(e);
+    }
+  });
+  rotationAnchor.addEventListener("mouseover", function() {
+    if (!isResizing && !isDragging) {
+      this.style.cursor = "grab";
+    }
+  });
+  rotationAnchor.addEventListener("mouseout", function() {
+    if (!isResizing && !isDragging) {
+      this.style.cursor = "default";
+    }
+  });
+}
+function updateSelectionFeedback() {
+  if (!selectedElement || !selectionBox) return;
+  const textElement = selectedElement.querySelector("text");
+  if (!textElement) return;
+  const wasHidden = selectedElement.style.display === "none";
+  if (wasHidden) selectedElement.style.display = "block";
+  const bbox = textElement.getBBox();
+  if (wasHidden) selectedElement.style.display = "none";
+  if (bbox.width === 0 && bbox.height === 0 && textElement.textContent.trim() !== "") {
+  }
+  const zoom2 = window.currentZoom || 1;
+  const padding = 8 / zoom2;
+  const handleSize = 10 / zoom2;
+  const handleOffset = handleSize / 2;
+  const selX = bbox.x - padding;
+  const selY = bbox.y - padding;
+  const selWidth = Math.max(bbox.width + 2 * padding, handleSize);
+  const selHeight = Math.max(bbox.height + 2 * padding, handleSize);
+  const outlinePoints = [
+    [selX, selY],
+    [selX + selWidth, selY],
+    [selX + selWidth, selY + selHeight],
+    [selX, selY + selHeight],
+    [selX, selY]
+  ];
+  const pointsAttr = outlinePoints.map((p) => p.join(",")).join(" ");
+  selectionBox.setAttribute("points", pointsAttr);
+  const handlesData = [
+    { name: "nw", x: selX, y: selY },
+    { name: "ne", x: selX + selWidth, y: selY },
+    { name: "sw", x: selX, y: selY + selHeight },
+    { name: "se", x: selX + selWidth, y: selY + selHeight }
+  ];
+  handlesData.forEach((handle) => {
+    const handleRect = resizeHandles[handle.name];
+    if (handleRect) {
+      handleRect.setAttribute("x", handle.x - handleOffset);
+      handleRect.setAttribute("y", handle.y - handleOffset);
+    }
+  });
+  const rotationAnchor = resizeHandles.rotate;
+  if (rotationAnchor) {
+    const rotationAnchorPos = { x: selX + selWidth / 2, y: selY - 30 };
+    rotationAnchor.setAttribute("cx", rotationAnchorPos.x);
+    rotationAnchor.setAttribute("cy", rotationAnchorPos.y);
+  }
+}
+function startRotation(event) {
+  if (!selectedElement || event.button !== 0) return;
+  event.preventDefault();
+  event.stopPropagation();
+  isRotating = true;
+  isDragging = false;
+  isResizing = false;
+  const textElement = selectedElement.querySelector("text");
+  if (!textElement) return;
+  const bbox = textElement.getBBox();
+  const centerX = bbox.x + bbox.width / 2;
+  const centerY = bbox.y + bbox.height / 2;
+  const mousePos = getSVGCoordinates(event);
+  let centerPoint = svg.createSVGPoint();
+  centerPoint.x = centerX;
+  centerPoint.y = centerY;
+  const groupTransform = selectedElement.transform.baseVal.consolidate();
+  if (groupTransform) {
+    centerPoint = centerPoint.matrixTransform(groupTransform.matrix);
+  }
+  rotationStartAngle = Math.atan2(mousePos.y - centerPoint.y, mousePos.x - centerPoint.x) * 180 / Math.PI;
+  const currentTransform = selectedElement.transform.baseVal.consolidate();
+  rotationStartTransform = currentTransform ? currentTransform.matrix : svg.createSVGMatrix();
+  svg.style.cursor = "grabbing";
+  window.addEventListener("pointermove", handleMouseMove);
+  window.addEventListener("pointerup", handleMouseUp);
+}
+function removeSelectionFeedback(element) {
+  const target = element || selectedElement;
+  if (target) {
+    target.querySelectorAll(".selection-box, .resize-handle, .rotate-anchor").forEach((el) => el.remove());
+  }
+  svg.querySelectorAll('g[data-type="text-group"] .selection-box, g[data-type="text-group"] .resize-handle, g[data-type="text-group"] .rotate-anchor').forEach((el) => el.remove());
+  selectionBox = null;
+  resizeHandles = {};
+}
+function selectElement(groupElement) {
+  if (!groupElement || !groupElement.parentNode) return;
+  if (groupElement === selectedElement) return;
+  deselectElement();
+  selectedElement = groupElement;
+  selectedElement.classList.add("selected");
+  createSelectionFeedback(selectedElement);
+  updateSelectedElement(selectedElement);
+  updateCodeToggleForShape("text");
+  if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+    const wrapper = shapes.find((s) => s.element === groupElement || s.group === groupElement);
+    if (wrapper) {
+      currentShape = wrapper;
+    }
+  }
+  if (window.__showSidebarForShape) window.__showSidebarForShape("text");
+}
+function deselectElement() {
+  const activeEditor = document.querySelector("textarea.svg-text-editor");
+  if (activeEditor) {
+    let textElement = activeEditor.originalTextElement;
+    if (textElement) {
+      renderText(activeEditor, textElement, true);
+    } else if (document.body.contains(activeEditor)) {
+      document.body.removeChild(activeEditor);
+    }
+  }
+  if (selectedElement) {
+    removeSelectionFeedback();
+    selectedElement.classList.remove("selected");
+    selectedElement = null;
+    updateSelectedElement(null);
+    if (currentShape && (currentShape.shapeName === "text" || currentShape.shapeName === "code")) {
+      currentShape = null;
+    }
+    if (isSelectionToolActive) {
+      textSideBar.classList.add("hidden");
+    }
+  }
+  if (isRotating) {
+    isRotating = false;
+    rotationStartAngle = 0;
+    rotationStartTransform = null;
+    svg.style.cursor = "default";
+    window.removeEventListener("pointermove", handleMouseMove);
+    window.removeEventListener("pointerup", handleMouseUp);
+  }
+}
+function startDrag(event) {
+  if (!selectedElement || event.button !== 0) return;
+  if (event.target.closest(".resize-handle")) {
+    return;
+  }
+  isDragging = true;
+  isResizing = false;
+  event.preventDefault();
+  const currentTransform = selectedElement.transform.baseVal.consolidate();
+  const initialTranslateX = currentTransform ? currentTransform.matrix.e : 0;
+  const initialTranslateY = currentTransform ? currentTransform.matrix.f : 0;
+  startPoint = getSVGCoordinates(event);
+  dragOffsetX = startPoint.x - initialTranslateX;
+  dragOffsetY = startPoint.y - initialTranslateY;
+  let textShape = null;
+  if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+    textShape = shapes.find((shape) => shape.shapeName === "text" && shape.group === selectedElement);
+  }
+  if (textShape) {
+    draggedShapeInitialFrameText = textShape.parentFrame || null;
+    if (textShape.parentFrame) {
+      textShape.parentFrame.temporarilyRemoveFromFrame(textShape);
+    }
+  }
+  svg.style.cursor = "grabbing";
+  svg.addEventListener("pointermove", handleMouseMove);
+  svg.addEventListener("pointerup", handleMouseUp);
+}
+function startResize(event, anchor) {
+  if (!selectedElement || event.button !== 0) return;
+  event.preventDefault();
+  event.stopPropagation();
+  isResizing = true;
+  isDragging = false;
+  currentResizeHandle = anchor;
+  const textElement = selectedElement.querySelector("text");
+  if (!textElement) {
+    isResizing = false;
+    return;
+  }
+  startBBox = textElement.getBBox();
+  startFontSize = parseFloat(textElement.getAttribute("font-size") || 30);
+  if (isNaN(startFontSize)) startFontSize = 30;
+  startPoint = getSVGCoordinates(event, selectedElement);
+  const groupScreenCTM = selectedElement.getScreenCTM();
+  initialInverseScreenCTM = groupScreenCTM ? groupScreenCTM.inverse() : null;
+  const currentTransform = selectedElement.transform.baseVal.consolidate();
+  initialGroupTx = currentTransform ? currentTransform.matrix.e : 0;
+  initialGroupTy = currentTransform ? currentTransform.matrix.f : 0;
+  const padding = 3;
+  const startX = startBBox.x - padding;
+  const startY = startBBox.y - padding;
+  const startWidth = startBBox.width + 2 * padding;
+  const startHeight = startBBox.height + 2 * padding;
+  let hx = startX;
+  let hy = startY;
+  if (anchor.includes("e")) {
+    hx = startX + startWidth;
+  }
+  if (anchor.includes("s")) {
+    hy = startY + startHeight;
+  }
+  initialHandlePosRelGroup = { x: hx, y: hy };
+  svg.style.cursor = resizeHandles[anchor]?.style.cursor || "default";
+  svg.addEventListener("pointermove", handleMouseMove);
+  svg.addEventListener("pointerup", handleMouseUp);
+}
+var handleMouseMove = (event) => {
+  if (!selectedElement) return;
+  event.preventDefault();
+  const svgRect = svg.getBoundingClientRect();
+  lastMousePos = {
+    x: event.clientX - svgRect.left,
+    y: event.clientY - svgRect.top
+  };
+  if (isDragging) {
+    const currentPoint = getSVGCoordinates(event);
+    const newTranslateX = currentPoint.x - dragOffsetX;
+    const newTranslateY = currentPoint.y - dragOffsetY;
+    const currentTransform = selectedElement.transform.baseVal.consolidate();
+    if (currentTransform) {
+      const matrix = currentTransform.matrix;
+      const angle = Math.atan2(matrix.b, matrix.a) * 180 / Math.PI;
+      const textElement = selectedElement.querySelector("text");
+      if (textElement) {
+        const bbox = textElement.getBBox();
+        const centerX = bbox.x + bbox.width / 2;
+        const centerY = bbox.y + bbox.height / 2;
+        selectedElement.setAttribute(
+          "transform",
+          `translate(${newTranslateX}, ${newTranslateY}) rotate(${angle}, ${centerX}, ${centerY})`
+        );
+      } else {
+        selectedElement.setAttribute("transform", `translate(${newTranslateX}, ${newTranslateY})`);
+      }
+    } else {
+      selectedElement.setAttribute("transform", `translate(${newTranslateX}, ${newTranslateY})`);
+    }
+    if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+      const textShape = shapes.find((shape) => shape.shapeName === "text" && shape.group === selectedElement);
+      if (textShape) {
+        textShape.updateFrameContainment();
+      }
+    }
+    updateAttachedArrows(selectedElement);
+  } else if (isResizing) {
+    const textElement = selectedElement.querySelector("text");
+    if (!textElement || !startBBox || startFontSize === null || !startPoint || !initialHandlePosRelGroup) return;
+    let currentPoint;
+    if (initialInverseScreenCTM) {
+      const pt = svg.createSVGPoint();
+      pt.x = event.clientX;
+      pt.y = event.clientY;
+      currentPoint = pt.matrixTransform(initialInverseScreenCTM);
+    } else {
+      currentPoint = getSVGCoordinates(event, selectedElement);
+    }
+    const startX = startBBox.x;
+    const startY = startBBox.y;
+    const startWidth = startBBox.width;
+    const startHeight = startBBox.height;
+    let anchorX, anchorY;
+    switch (currentResizeHandle) {
+      case "nw":
+        anchorX = startX + startWidth;
+        anchorY = startY + startHeight;
+        break;
+      case "ne":
+        anchorX = startX;
+        anchorY = startY + startHeight;
+        break;
+      case "sw":
+        anchorX = startX + startWidth;
+        anchorY = startY;
+        break;
+      case "se":
+        anchorX = startX;
+        anchorY = startY;
+        break;
+    }
+    const newWidth = Math.abs(currentPoint.x - anchorX);
+    const newHeight = Math.abs(currentPoint.y - anchorY);
+    const chosenScale = newHeight / startHeight;
+    const minScale = 0.1;
+    const maxScale = 10;
+    const clampedScale = Math.max(minScale, Math.min(chosenScale, maxScale));
+    const newFontSize = startFontSize * clampedScale;
+    const minFontSize = 5;
+    const finalFontSize = Math.max(newFontSize, minFontSize);
+    textElement.setAttribute("font-size", `${finalFontSize}px`);
+    const currentBBox = textElement.getBBox();
+    let newAnchorX, newAnchorY;
+    switch (currentResizeHandle) {
+      case "nw":
+        newAnchorX = currentBBox.x + currentBBox.width;
+        newAnchorY = currentBBox.y + currentBBox.height;
+        break;
+      case "ne":
+        newAnchorX = currentBBox.x;
+        newAnchorY = currentBBox.y + currentBBox.height;
+        break;
+      case "sw":
+        newAnchorX = currentBBox.x + currentBBox.width;
+        newAnchorY = currentBBox.y;
+        break;
+      case "se":
+        newAnchorX = currentBBox.x;
+        newAnchorY = currentBBox.y;
+        break;
+    }
+    const deltaX = anchorX - newAnchorX;
+    const deltaY = anchorY - newAnchorY;
+    const currentTransform = selectedElement.transform.baseVal.consolidate();
+    if (currentTransform) {
+      const matrix = currentTransform.matrix;
+      const angle = Math.atan2(matrix.b, matrix.a) * 180 / Math.PI;
+      const newGroupTx = initialGroupTx + deltaX;
+      const newGroupTy = initialGroupTy + deltaY;
+      const centerX = currentBBox.x + currentBBox.width / 2;
+      const centerY = currentBBox.y + currentBBox.height / 2;
+      selectedElement.setAttribute(
+        "transform",
+        `translate(${newGroupTx}, ${newGroupTy}) rotate(${angle}, ${centerX}, ${centerY})`
+      );
+    } else {
+      const newGroupTx = initialGroupTx + deltaX;
+      const newGroupTy = initialGroupTy + deltaY;
+      selectedElement.setAttribute("transform", `translate(${newGroupTx}, ${newGroupTy})`);
+    }
+    updateAttachedArrows(selectedElement);
+    clearTimeout(selectedElement.updateFeedbackTimeout);
+    selectedElement.updateFeedbackTimeout = setTimeout(() => {
+      updateSelectionFeedback();
+      delete selectedElement.updateFeedbackTimeout;
+    }, 0);
+  } else if (isRotating) {
+    const textElement = selectedElement.querySelector("text");
+    if (!textElement) return;
+    const bbox = textElement.getBBox();
+    const centerX = bbox.x + bbox.width / 2;
+    const centerY = bbox.y + bbox.height / 2;
+    const mousePos = getSVGCoordinates(event);
+    let centerPoint = svg.createSVGPoint();
+    centerPoint.x = centerX;
+    centerPoint.y = centerY;
+    const groupTransform = selectedElement.transform.baseVal.consolidate();
+    if (groupTransform) {
+      centerPoint = centerPoint.matrixTransform(groupTransform.matrix);
+    }
+    const currentAngle = Math.atan2(mousePos.y - centerPoint.y, mousePos.x - centerPoint.x) * 180 / Math.PI;
+    const rotationDiff = currentAngle - rotationStartAngle;
+    const newTransform = `translate(${rotationStartTransform.e}, ${rotationStartTransform.f}) rotate(${rotationDiff}, ${centerX}, ${centerY})`;
+    selectedElement.setAttribute("transform", newTransform);
+    updateAttachedArrows(selectedElement);
+    updateSelectionFeedback();
+  }
+};
+var handleMouseUp = (event) => {
+  if (event.button !== 0) return;
+  if (isDragging && selectedElement) {
+    const currentTransform = selectedElement.transform.baseVal.consolidate();
+    if (currentTransform) {
+      const finalTranslateX = currentTransform.matrix.e;
+      const finalTranslateY = currentTransform.matrix.f;
+      const initialX = parseFloat(selectedElement.getAttribute("data-x")) || 0;
+      const initialY = parseFloat(selectedElement.getAttribute("data-y")) || 0;
+      let textShape = null;
+      if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+        textShape = shapes.find((shape) => shape.shapeName === "text" && shape.group === selectedElement);
+      }
+      const oldPosWithFrame = {
+        x: initialX,
+        y: initialY,
+        rotation: extractRotationFromTransform(selectedElement) || 0,
+        parentFrame: draggedShapeInitialFrameText
+      };
+      const newPosWithFrame = {
+        x: finalTranslateX,
+        y: finalTranslateY,
+        rotation: extractRotationFromTransform(selectedElement) || 0,
+        parentFrame: hoveredFrameText || null
+      };
+      const stateChanged = initialX !== finalTranslateX || initialY !== finalTranslateY;
+      const frameChanged = oldPosWithFrame.parentFrame !== newPosWithFrame.parentFrame;
+      if (stateChanged || frameChanged) {
+        pushTransformAction(
+          {
+            type: "text",
+            element: selectedElement,
+            shapeName: "text"
+          },
+          oldPosWithFrame,
+          newPosWithFrame
+        );
+      }
+      if (textShape) {
+        const finalFrame = hoveredFrameText;
+        if (draggedShapeInitialFrameText !== finalFrame) {
+          if (draggedShapeInitialFrameText) {
+            draggedShapeInitialFrameText.removeShapeFromFrame(textShape);
+          }
+          if (finalFrame) {
+            finalFrame.addShapeToFrame(textShape);
+          }
+          if (frameChanged) {
+            pushFrameAttachmentAction(
+              finalFrame || draggedShapeInitialFrameText,
+              textShape,
+              finalFrame ? "attach" : "detach",
+              draggedShapeInitialFrameText
+            );
+          }
+        } else if (draggedShapeInitialFrameText) {
+          draggedShapeInitialFrameText.restoreToFrame(textShape);
+        }
+      }
+      selectedElement.setAttribute("data-x", finalTranslateX);
+      selectedElement.setAttribute("data-y", finalTranslateY);
+    }
+    draggedShapeInitialFrameText = null;
+  } else if (isResizing && selectedElement) {
+    const textElement = selectedElement.querySelector("text");
+    if (textElement) {
+      const finalFontSize = textElement.getAttribute("font-size");
+      const initialFontSize = startFontSize;
+      const currentTransform = selectedElement.transform.baseVal.consolidate();
+      if (currentTransform && initialFontSize !== parseFloat(finalFontSize)) {
+        const finalTranslateX = currentTransform.matrix.e;
+        const finalTranslateY = currentTransform.matrix.f;
+        pushTransformAction(
+          {
+            type: "text",
+            element: selectedElement,
+            shapeName: "text"
+          },
+          {
+            x: initialGroupTx,
+            y: initialGroupTy,
+            fontSize: initialFontSize,
+            rotation: extractRotationFromTransform(selectedElement) || 0
+          },
+          {
+            x: finalTranslateX,
+            y: finalTranslateY,
+            fontSize: parseFloat(finalFontSize),
+            rotation: extractRotationFromTransform(selectedElement) || 0
+          }
+        );
+        selectedElement.setAttribute("data-x", finalTranslateX);
+        selectedElement.setAttribute("data-y", finalTranslateY);
+      }
+      clearTimeout(selectedElement.updateFeedbackTimeout);
+      updateSelectionFeedback();
+    }
+  } else if (isRotating && selectedElement) {
+    const currentTransform = selectedElement.transform.baseVal.consolidate();
+    if (currentTransform && rotationStartTransform) {
+      const initialRotation = Math.atan2(rotationStartTransform.b, rotationStartTransform.a) * 180 / Math.PI;
+      const finalRotation = extractRotationFromTransform(selectedElement) || 0;
+      if (Math.abs(initialRotation - finalRotation) > 1) {
+        pushTransformAction(
+          {
+            type: "text",
+            element: selectedElement,
+            shapeName: "text"
+          },
+          {
+            x: rotationStartTransform.e,
+            y: rotationStartTransform.f,
+            rotation: initialRotation
+          },
+          {
+            x: currentTransform.matrix.e,
+            y: currentTransform.matrix.f,
+            rotation: finalRotation
+          }
+        );
+      }
+    }
+    updateSelectionFeedback();
+  }
+  if (hoveredFrameText) {
+    hoveredFrameText.removeHighlight();
+    hoveredFrameText = null;
+  }
+  isDragging = false;
+  isResizing = false;
+  isRotating = false;
+  currentResizeHandle = null;
+  startPoint = null;
+  startBBox = null;
+  startFontSize = null;
+  dragOffsetX = void 0;
+  dragOffsetY = void 0;
+  initialHandlePosRelGroup = null;
+  initialGroupTx = 0;
+  initialGroupTy = 0;
+  rotationStartAngle = 0;
+  rotationStartTransform = null;
+  svg.style.cursor = isSelectionToolActive ? "default" : isTextToolActive ? "text" : "default";
+  if (selectedElement) {
+    setTimeout(updateSelectionFeedback, 0);
+  }
+  svg.removeEventListener("pointermove", handleMouseMove);
+  svg.removeEventListener("pointerup", handleMouseUp);
+  window.removeEventListener("pointermove", handleMouseMove);
+  window.removeEventListener("pointerup", handleMouseUp);
+};
+function extractRotationFromTransform(element) {
+  const currentTransform = element.transform.baseVal.consolidate();
+  if (currentTransform) {
+    const matrix = currentTransform.matrix;
+    return Math.atan2(matrix.b, matrix.a) * 180 / Math.PI;
+  }
+  return 0;
+}
+var handleTextMouseDown = function(e) {
+  if (!e.target) return;
+  const activeEditor = document.querySelector("textarea.svg-text-editor");
+  if (activeEditor && activeEditor.contains(e.target)) {
+    return;
+  }
+  if (activeEditor && !activeEditor.contains(e.target)) {
+    let textElement = activeEditor.originalTextElement;
+    if (textElement) {
+      renderText(activeEditor, textElement, true);
+      return;
+    } else if (document.body.contains(activeEditor)) {
+      document.body.removeChild(activeEditor);
+    }
+  }
+  const targetGroup = e.target.closest('g[data-type="text-group"]');
+  if (isSelectionToolActive && e.button === 0) {
+    if (targetGroup) {
+      if (e.target.closest(".resize-handle")) {
+        return;
+      }
+      if (e.detail >= 2 && targetGroup === selectedElement) {
+        enterEditMode(targetGroup);
+        e.stopPropagation();
+        return;
+      }
+      if (targetGroup === selectedElement) {
+        startDrag(e);
+      } else {
+        selectElement(targetGroup);
+        startDrag(e);
+      }
+    } else {
+      deselectElement();
+    }
+  } else if (isTextToolActive && e.button === 0) {
+    if (targetGroup) {
+      if (e.detail >= 2) {
+        let textEl = targetGroup.querySelector("text");
+        if (textEl) {
+          makeTextEditable(textEl, targetGroup);
+          e.stopPropagation();
+          return;
+        }
+      }
+      if (targetGroup === selectedElement) {
+        startDrag(e);
+      } else {
+        selectElement(targetGroup);
+        startDrag(e);
+      }
+    } else {
+      deselectElement();
+      addText(e);
+    }
+  }
+};
+function enterEditMode(groupElement) {
+  const textEl = groupElement.querySelector("text");
+  if (!textEl) return;
+  if (window.__sketchStoreApi) {
+    window.__sketchStoreApi.setActiveTool("text");
+  } else {
+    window.isTextToolActive = true;
+    window.isSelectionToolActive = false;
+  }
+  toolExtraPopup();
+  deselectElement();
+  makeTextEditable(textEl, groupElement);
+}
+var handleTextMouseMove = function(e) {
+  const svgRect = svg.getBoundingClientRect();
+  lastMousePos = {
+    x: e.clientX - svgRect.left,
+    y: e.clientY - svgRect.top
+  };
+  if (isTextToolActive) {
+    const targetGroup = e.target?.closest?.('g[data-type="text-group"]');
+    if (targetGroup) {
+      svg.style.cursor = "pointer";
+    } else {
+      svg.style.cursor = "crosshair";
+    }
+  } else if (isSelectionToolActive) {
+    const targetGroup = e.target?.closest?.('g[data-type="text-group"]');
+    if (targetGroup) {
+      svg.style.cursor = "default";
+    }
+  }
+  if (isTextToolActive && !isDragging && !isResizing && !isRotating) {
+    const { x, y } = getSVGCoordinates(e);
+    const tempTextBounds = {
+      x: x - 50,
+      y: y - 20,
+      width: 100,
+      height: 40
+    };
+    if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+      shapes.forEach((frame) => {
+        if (frame.shapeName === "frame") {
+          if (frame.isShapeInFrame(tempTextBounds)) {
+            frame.highlightFrame();
+            hoveredFrameText = frame;
+          } else if (hoveredFrameText === frame) {
+            frame.removeHighlight();
+            hoveredFrameText = null;
+          }
+        }
+      });
+    }
+  }
+};
+var handleTextMouseUp = function(e) {
+  if (hoveredFrameText) {
+    hoveredFrameText.removeHighlight();
+    hoveredFrameText = null;
+  }
+};
+textColorOptions.forEach((span) => {
+  span.addEventListener("click", (event) => {
+    event.stopPropagation();
+    textColorOptions.forEach((el) => el.classList.remove("selected"));
+    span.classList.add("selected");
+    const newColor = span.getAttribute("data-id");
+    const oldColor = textColor;
+    textColor = newColor;
+    if (selectedElement) {
+      const textElement = selectedElement.querySelector("text");
+      if (textElement) {
+        const currentColor = textElement.getAttribute("fill");
+        if (currentColor !== newColor) {
+          pushOptionsChangeAction(
+            {
+              type: "text",
+              element: selectedElement,
+              shapeName: "text"
+            },
+            {
+              color: currentColor,
+              font: textElement.getAttribute("font-family"),
+              size: textElement.getAttribute("font-size"),
+              align: textElement.getAttribute("text-anchor")
+            },
+            {
+              color: newColor,
+              font: textElement.getAttribute("font-family"),
+              size: textElement.getAttribute("font-size"),
+              align: textElement.getAttribute("text-anchor")
+            }
+          );
+        }
+        textElement.setAttribute("fill", newColor);
+      }
+    }
+  });
+});
+textFontOptions.forEach((span) => {
+  span.addEventListener("click", (event) => {
+    event.stopPropagation();
+    textFontOptions.forEach((el) => el.classList.remove("selected"));
+    span.classList.add("selected");
+    const newFont = span.getAttribute("data-id");
+    const oldFont = textFont;
+    textFont = newFont;
+    if (selectedElement) {
+      const textElement = selectedElement.querySelector("text");
+      if (textElement) {
+        const currentFont = textElement.getAttribute("font-family");
+        if (currentFont !== newFont) {
+          pushOptionsChangeAction(
+            {
+              type: "text",
+              element: selectedElement,
+              shapeName: "text"
+            },
+            {
+              color: textElement.getAttribute("fill"),
+              font: currentFont,
+              size: textElement.getAttribute("font-size"),
+              align: textElement.getAttribute("text-anchor")
+            },
+            {
+              color: textElement.getAttribute("fill"),
+              font: newFont,
+              size: textElement.getAttribute("font-size"),
+              align: textElement.getAttribute("text-anchor")
+            }
+          );
+        }
+        textElement.setAttribute("font-family", newFont);
+        setTimeout(updateSelectionFeedback, 0);
+      }
+    }
+  });
+});
+textSizeOptions.forEach((span) => {
+  span.addEventListener("click", (event) => {
+    event.stopPropagation();
+    textSizeOptions.forEach((el) => el.classList.remove("selected"));
+    span.classList.add("selected");
+    const newSize = span.getAttribute("data-id") + "px";
+    const oldSize = textSize;
+    textSize = newSize;
+    if (selectedElement) {
+      const textElement = selectedElement.querySelector("text");
+      if (textElement) {
+        const currentSize = textElement.getAttribute("font-size");
+        if (currentSize !== newSize) {
+          pushOptionsChangeAction(
+            {
+              type: "text",
+              element: selectedElement,
+              shapeName: "text"
+            },
+            {
+              color: textElement.getAttribute("fill"),
+              font: textElement.getAttribute("font-family"),
+              size: currentSize,
+              align: textElement.getAttribute("text-anchor")
+            },
+            {
+              color: textElement.getAttribute("fill"),
+              font: textElement.getAttribute("font-family"),
+              size: newSize,
+              align: textElement.getAttribute("text-anchor")
+            }
+          );
+        }
+        textElement.setAttribute("font-size", newSize);
+        setTimeout(updateSelectionFeedback, 0);
+      }
+    }
+  });
+});
+textAlignOptions.forEach((span) => {
+  span.addEventListener("click", (event) => {
+    event.stopPropagation();
+    textAlignOptions.forEach((el) => el.classList.remove("selected"));
+    span.classList.add("selected");
+    const newAlign = span.getAttribute("data-id");
+    const oldAlign = textAlign;
+    textAlign = newAlign;
+    if (selectedElement) {
+      const textElement = selectedElement.querySelector("text");
+      if (textElement) {
+        const currentAnchor = textElement.getAttribute("text-anchor");
+        let newAnchor = "start";
+        if (newAlign === "center") newAnchor = "middle";
+        else if (newAlign === "right") newAnchor = "end";
+        if (currentAnchor !== newAnchor) {
+          pushOptionsChangeAction(
+            {
+              type: "text",
+              element: selectedElement,
+              shapeName: "text"
+            },
+            {
+              color: textElement.getAttribute("fill"),
+              font: textElement.getAttribute("font-family"),
+              size: textElement.getAttribute("font-size"),
+              align: currentAnchor
+            },
+            {
+              color: textElement.getAttribute("fill"),
+              font: textElement.getAttribute("font-family"),
+              size: textElement.getAttribute("font-size"),
+              align: newAnchor
+            }
+          );
+        }
+        textElement.setAttribute("text-anchor", newAnchor);
+        setTimeout(updateSelectionFeedback, 0);
+      }
+    }
+  });
+});
+var textCodeOptions = document.querySelectorAll(".textCodeSpan");
+var languageSelector = document.getElementById("textLanguageSelector");
+var codeLanguageSelect = document.getElementById("codeLanguageSelect");
+textCodeOptions.forEach((span) => {
+  span.addEventListener("click", (event) => {
+    event.stopPropagation();
+    textCodeOptions.forEach((el) => el.classList.remove("selected"));
+    span.classList.add("selected");
+    const isCodeMode = span.getAttribute("data-id") === "true";
+    isTextInCodeMode = isCodeMode;
+    if (languageSelector) {
+      languageSelector.classList.toggle("hidden", !isCodeMode);
+    }
+    if (isTextToolActive) {
+      isCodeToolActive = isCodeMode;
+    }
+    if (isCodeMode && selectedElement) {
+      convertTextToCode(selectedElement);
+    } else if (!isCodeMode && getSelectedCodeBlock()) {
+      convertCodeToText(getSelectedCodeBlock());
+    }
+  });
+});
+if (codeLanguageSelect) {
+  codeLanguageSelect.addEventListener("change", (event) => {
+    const lang = event.target.value;
+    setCodeLanguage(lang);
+    const selectedCode = getSelectedCodeBlock();
+    if (selectedCode) {
+      const codeElement = selectedCode.querySelector("text");
+      if (codeElement) {
+        codeElement.setAttribute("data-language", lang);
+        const content = extractTextFromCodeElement(codeElement);
+        while (codeElement.firstChild) {
+          codeElement.removeChild(codeElement.firstChild);
+        }
+        const highlighted = applySyntaxHighlightingToSVG(content, lang);
+        createHighlightedSVGText(highlighted, codeElement);
+        updateCodeBackground(selectedCode, codeElement);
+      }
+    }
+  });
+}
+function convertTextToCode(textGroupElement) {
+  const textElement = textGroupElement.querySelector("text");
+  if (!textElement) return;
+  let textContent = "";
+  const tspans = textElement.querySelectorAll("tspan");
+  if (tspans.length > 0) {
+    tspans.forEach((tspan, index) => {
+      textContent += tspan.textContent;
+      if (index < tspans.length - 1) textContent += "\n";
+    });
+  } else {
+    textContent = textElement.textContent || "";
+  }
+  const currentTransform = textGroupElement.transform.baseVal.consolidate();
+  const tx = currentTransform ? currentTransform.matrix.e : 0;
+  const ty = currentTransform ? currentTransform.matrix.f : 0;
+  const fontSize = textElement.getAttribute("font-size") || "25px";
+  const color = textElement.getAttribute("fill") || "#fff";
+  let oldTextShape = null;
+  if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+    oldTextShape = shapes.find((s) => s.shapeName === "text" && s.group === textGroupElement);
+    if (oldTextShape) {
+      const idx = shapes.indexOf(oldTextShape);
+      if (idx !== -1) shapes.splice(idx, 1);
+    }
+  }
+  deselectElement();
+  if (textGroupElement.parentNode) {
+    textGroupElement.parentNode.removeChild(textGroupElement);
+  }
+  const gElement = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  gElement.setAttribute("data-type", "code-group");
+  gElement.setAttribute("transform", `translate(${tx}, ${ty})`);
+  const backgroundRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  backgroundRect.setAttribute("class", "code-background");
+  backgroundRect.setAttribute("x", -10);
+  backgroundRect.setAttribute("y", -10);
+  backgroundRect.setAttribute("width", 300);
+  backgroundRect.setAttribute("height", 60);
+  backgroundRect.setAttribute("fill", "#161b22");
+  backgroundRect.setAttribute("stroke", "#30363d");
+  backgroundRect.setAttribute("stroke-width", "1");
+  backgroundRect.setAttribute("rx", "6");
+  backgroundRect.setAttribute("ry", "6");
+  gElement.appendChild(backgroundRect);
+  const codeElement = document.createElementNS("http://www.w3.org/2000/svg", "text");
+  codeElement.setAttribute("x", 0);
+  codeElement.setAttribute("y", 0);
+  codeElement.setAttribute("fill", color);
+  codeElement.setAttribute("font-size", fontSize);
+  codeElement.setAttribute("font-family", "lixCode");
+  codeElement.setAttribute("text-anchor", "start");
+  codeElement.setAttribute("cursor", "default");
+  codeElement.setAttribute("white-space", "pre");
+  codeElement.setAttribute("dominant-baseline", "hanging");
+  codeElement.setAttribute("data-language", getCodeLanguage());
+  codeElement.setAttribute("data-type", "code");
+  const shapeID = `code-${String(Date.now()).slice(0, 8)}-${Math.floor(Math.random() * 1e4)}`;
+  gElement.setAttribute("id", shapeID);
+  gElement.setAttribute("data-x", tx);
+  gElement.setAttribute("data-y", ty);
+  codeElement.setAttribute("id", `${shapeID}-code`);
+  gElement.appendChild(codeElement);
+  svg.appendChild(gElement);
+  if (textContent.trim()) {
+    const lang = getCodeLanguage();
+    const highlighted = applySyntaxHighlightingToSVG(textContent, lang);
+    createHighlightedSVGText(highlighted, codeElement);
+    updateCodeBackground(gElement, codeElement);
+  }
+  const codeShape = wrapCodeElement(gElement);
+  if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+    shapes.push(codeShape);
+  }
+  pushModeConvertAction(oldTextShape, textGroupElement, "text", codeShape, gElement, "code");
+  selectCodeBlock(gElement);
+}
+function convertCodeToText(codeGroupElement) {
+  const codeElement = codeGroupElement.querySelector("text");
+  if (!codeElement) return;
+  const textContent = extractTextFromCodeElement(codeElement);
+  const currentTransform = codeGroupElement.transform.baseVal.consolidate();
+  const tx = currentTransform ? currentTransform.matrix.e : 0;
+  const ty = currentTransform ? currentTransform.matrix.f : 0;
+  const fontSize = codeElement.getAttribute("font-size") || "30px";
+  const color = codeElement.getAttribute("fill") || "#fff";
+  let oldCodeShape = null;
+  if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+    oldCodeShape = shapes.find((s) => s.shapeName === "code" && s.group === codeGroupElement);
+    if (oldCodeShape) {
+      const idx = shapes.indexOf(oldCodeShape);
+      if (idx !== -1) shapes.splice(idx, 1);
+    }
+  }
+  deselectCodeBlock();
+  if (codeGroupElement.parentNode) {
+    codeGroupElement.parentNode.removeChild(codeGroupElement);
+  }
+  const gElement = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  gElement.setAttribute("data-type", "text-group");
+  gElement.setAttribute("transform", `translate(${tx}, ${ty})`);
+  const textElement = document.createElementNS("http://www.w3.org/2000/svg", "text");
+  textElement.setAttribute("x", 0);
+  textElement.setAttribute("y", 0);
+  textElement.setAttribute("fill", color);
+  textElement.setAttribute("font-size", fontSize);
+  textElement.setAttribute("font-family", textFont);
+  textElement.setAttribute("text-anchor", "start");
+  textElement.setAttribute("cursor", "default");
+  textElement.setAttribute("white-space", "pre");
+  textElement.setAttribute("dominant-baseline", "hanging");
+  textElement.setAttribute("data-type", "text");
+  const shapeID = `text-${String(Date.now()).slice(0, 8)}-${Math.floor(Math.random() * 1e4)}`;
+  gElement.setAttribute("id", shapeID);
+  gElement.setAttribute("data-x", tx);
+  gElement.setAttribute("data-y", ty);
+  textElement.setAttribute("id", `${shapeID}-text`);
+  gElement.appendChild(textElement);
+  svg.appendChild(gElement);
+  if (textContent.trim()) {
+    const lines = textContent.split("\n");
+    const x = textElement.getAttribute("x") || 0;
+    lines.forEach((line, index) => {
+      const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
+      tspan.setAttribute("x", x);
+      tspan.setAttribute("dy", index === 0 ? "0" : "1.2em");
+      tspan.textContent = line || " ";
+      textElement.appendChild(tspan);
+    });
+  }
+  const textShape = wrapTextElement(gElement);
+  if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+    shapes.push(textShape);
+  }
+  pushModeConvertAction(oldCodeShape, codeGroupElement, "code", textShape, gElement, "text");
+  selectElement(gElement);
+}
+function pushModeConvertAction(oldShape, oldElement, oldType, newShape, newElement, newType) {
+  pushCreateAction({
+    type: "modeConvert",
+    oldShape,
+    oldElement,
+    oldType,
+    newShape,
+    newElement,
+    newType,
+    element: newShape,
+    shapeName: newType
+  });
+}
+function updateCodeToggleForShape(shapeName) {
+  const isCode = shapeName === "code";
+  textCodeOptions.forEach((el) => el.classList.remove("selected"));
+  textCodeOptions.forEach((el) => {
+    if (el.getAttribute("data-id") === "true" === isCode) {
+      el.classList.add("selected");
+    }
+  });
+  if (languageSelector) {
+    languageSelector.classList.toggle("hidden", !isCode);
+  }
+  if (isCode && codeLanguageSelect) {
+    const selectedCode = getSelectedCodeBlock();
+    if (selectedCode) {
+      const codeEl = selectedCode.querySelector("text");
+      const lang = codeEl?.getAttribute("data-language") || "auto";
+      codeLanguageSelect.value = lang;
+    }
+  }
+}
+window.updateSelectedTextStyle = function(changes) {
+  const el = selectedElement || (window.currentShape && window.currentShape.shapeName === "text" ? window.currentShape.group : null);
+  if (!el) return;
+  const textElement = el.querySelector("text");
+  if (!textElement) return;
+  if (changes.color) {
+    textElement.setAttribute("fill", changes.color);
+    textColor = changes.color;
+  }
+  if (changes.font) {
+    textElement.setAttribute("font-family", changes.font);
+    textFont = changes.font;
+  }
+  if (changes.fontSize) {
+    textElement.setAttribute("font-size", changes.fontSize);
+    textSize = changes.fontSize;
+  }
+};
+window.__deselectTextElement = deselectElement;
+window.__selectTextElement = selectElement;
+window.__convertTextToCode = function() {
+  if (selectedElement && selectedElement.getAttribute("data-type") === "text-group") {
+    convertTextToCode(selectedElement);
+  }
+};
+window.__convertCodeToText = function() {
+  let codeBlock = getSelectedCodeBlock();
+  if (!codeBlock && selectedElement && selectedElement.getAttribute("data-type") === "code-group") {
+    codeBlock = selectedElement;
+  }
+  if (codeBlock) {
+    convertCodeToText(codeBlock);
+  }
+};
+window.__setCodeLanguage = function(lang) {
+  setCodeLanguage(lang);
+  const selectedCode = getSelectedCodeBlock();
+  if (selectedCode) {
+    const codeElement = selectedCode.querySelector("text");
+    if (codeElement) {
+      codeElement.setAttribute("data-language", lang);
+      const textContent = extractTextFromCodeElement(codeElement);
+      while (codeElement.firstChild) codeElement.removeChild(codeElement.firstChild);
+      const highlighted = applySyntaxHighlightingToSVG(textContent, lang);
+      createHighlightedSVGText(highlighted, codeElement);
+      updateCodeBackground(selectedCode, codeElement);
+    }
+  }
+};
+
+export {
+  deselectElement,
+  handleTextMouseDown,
+  enterEditMode,
+  handleTextMouseMove,
+  handleTextMouseUp,
+  updateCodeToggleForShape
+};
+//# sourceMappingURL=chunk-JJCJNLNN.js.map