stickyflow 0.0.0-stage → 0.2.0

package/dist/chunk-34PK7HEU.cjs

@@ -0,0 +1,842 @@
+'use strict';
+
+var chunkYM3XFBI4_cjs = require('./chunk-YM3XFBI4.cjs');
+
+// src/runtime/eventing/emitter.ts
+var Emitter = class {
+  handlers = /* @__PURE__ */ new Map();
+  on(name, handler) {
+    const eventHandlers = this.handlers.get(name) ?? /* @__PURE__ */ new Set();
+    this.handlers.set(name, eventHandlers);
+    const storedHandler = handler;
+    eventHandlers.add(storedHandler);
+    return () => eventHandlers.delete(storedHandler);
+  }
+  emit(name, event) {
+    const registered = this.handlers.get(name);
+    if (registered === void 0) {
+      return;
+    }
+    for (const handler of [...registered]) {
+      try {
+        handler(event);
+      } catch (error) {
+        queueMicrotask(() => {
+          throw error;
+        });
+      }
+    }
+  }
+  clear() {
+    this.handlers.clear();
+  }
+};
+
+// src/runtime/dom/contract.ts
+function isCameraGesture(e) {
+  return e.ctrlKey || e.metaKey;
+}
+function parseContractVersion(svg) {
+  const match = /data-sf-contract="(\d+)"/.exec(svg);
+  return match ? Number(match[1]) : null;
+}
+function isContractCompatible(version) {
+  return version === chunkYM3XFBI4_cjs.DOM_CONTRACT_VERSION;
+}
+var ROLES = /* @__PURE__ */ new Set([
+  "entity",
+  "link",
+  "frame",
+  "swimlane",
+  "chart",
+  "path",
+  "widget",
+  "isometric"
+]);
+function sceneRole(domRole) {
+  return domRole === "entity" ? "shape" : domRole;
+}
+function symbolDeclaredBounds(el2) {
+  const raw = el2.getAttribute(chunkYM3XFBI4_cjs.SYMBOL_BOUNDS_ATTR);
+  if (!raw) {
+    return null;
+  }
+  const [x, y, width, height] = raw.split(",").map(Number);
+  return Number.isFinite(x) && Number.isFinite(y) && Number.isFinite(width) && Number.isFinite(height) ? { x, y, width, height } : null;
+}
+function pathGeometryOf(el2) {
+  const raw = el2.getAttribute(chunkYM3XFBI4_cjs.PATH_POINTS_ATTR);
+  if (!raw) {
+    return null;
+  }
+  let points;
+  try {
+    points = JSON.parse(raw);
+  } catch {
+    return null;
+  }
+  if (!Array.isArray(points) || !points.every((point) => Array.isArray(point) && point.length === 2)) {
+    return null;
+  }
+  return {
+    points,
+    tension: Number(el2.getAttribute(chunkYM3XFBI4_cjs.PATH_TENSION_ATTR)) || 0,
+    closed: el2.getAttribute(chunkYM3XFBI4_cjs.PATH_CLOSED_ATTR) === "true"
+  };
+}
+function isometricGeometryOf(el2) {
+  const raw = el2.getAttribute(chunkYM3XFBI4_cjs.ISOMETRIC_SIZE_ATTR);
+  if (raw === null) {
+    return null;
+  }
+  const [width, height, depth] = raw.split(",").map(Number);
+  if (!Number.isFinite(width) || !Number.isFinite(height) || !Number.isFinite(depth)) {
+    return null;
+  }
+  const cornerRadius = Number(el2.getAttribute(chunkYM3XFBI4_cjs.CORNER_RADIUS_ATTR)) || 0;
+  const [labelOffsetX, labelOffsetY] = (el2.getAttribute(chunkYM3XFBI4_cjs.ISOMETRIC_LABEL_OFFSET_ATTR) ?? "0,0").split(",").map(Number);
+  return {
+    width,
+    height,
+    depth,
+    cornerRadius,
+    bounds: symbolDeclaredBounds(el2),
+    labelOffsetX: Number.isFinite(labelOffsetX) ? labelOffsetX : 0,
+    labelOffsetY: Number.isFinite(labelOffsetY) ? labelOffsetY : 0
+  };
+}
+function resolveOwner(target) {
+  const el2 = target?.closest("[data-sf-id]");
+  if (!el2) {
+    return null;
+  }
+  const id = el2.getAttribute("data-sf-id");
+  const role = el2.getAttribute("data-sf-role");
+  if (!id || !role || !ROLES.has(role)) {
+    return null;
+  }
+  return {
+    role: sceneRole(role),
+    id,
+    kind: el2.getAttribute("data-sf-kind") ?? void 0,
+    label: el2.getAttribute("aria-label") ?? void 0
+  };
+}
+
+// src/runtime/dom/svgNamespace.ts
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+
+// src/runtime/dom/alignmentGuideOverlay.ts
+var NS = SVG_NAMESPACE;
+var DASH = "8 4";
+function el(doc, tag) {
+  return doc.createElementNS(NS, tag);
+}
+function updateAlignmentGuides(svg, guides, color) {
+  svg.querySelectorAll("[data-sf-alignment-guides]").forEach((g2) => {
+    g2.remove();
+  });
+  if (!guides.length) {
+    return;
+  }
+  const doc = svg.ownerDocument;
+  const g = el(doc, "g");
+  g.setAttribute("data-sf-alignment-guides", "");
+  g.setAttribute("pointer-events", "none");
+  guides.forEach((guide) => {
+    const line = el(doc, "line");
+    if (guide.orientation === "segment") {
+      line.setAttribute("x1", String(guide.x1));
+      line.setAttribute("y1", String(guide.y1));
+      line.setAttribute("x2", String(guide.x2));
+      line.setAttribute("y2", String(guide.y2));
+    } else if (guide.orientation === "vertical") {
+      line.setAttribute("x1", String(guide.position));
+      line.setAttribute("x2", String(guide.position));
+      line.setAttribute("y1", String(guide.from));
+      line.setAttribute("y2", String(guide.to));
+    } else {
+      line.setAttribute("y1", String(guide.position));
+      line.setAttribute("y2", String(guide.position));
+      line.setAttribute("x1", String(guide.from));
+      line.setAttribute("x2", String(guide.to));
+    }
+    line.setAttribute("stroke", color);
+    line.setAttribute("stroke-width", "1");
+    line.setAttribute("stroke-dasharray", DASH);
+    line.setAttribute("opacity", "0.8");
+    line.setAttribute("vector-effect", "non-scaling-stroke");
+    g.appendChild(line);
+  });
+  svg.appendChild(g);
+}
+function clearAlignmentGuides(svg) {
+  svg.querySelectorAll("[data-sf-alignment-guides]").forEach((g) => {
+    g.remove();
+  });
+}
+
+// src/runtime/dom/canvasObjectRoles.ts
+var DERIVED_HEIGHT_ROLES = /* @__PURE__ */ new Set([]);
+
+// src/runtime/dom/selectionOverlay/dom.ts
+function svgElement(document, tag) {
+  return document.createElementNS(SVG_NAMESPACE, tag);
+}
+function selectionOverlayGroup(document, id, primary) {
+  const group = svgElement(document, "g");
+  group.setAttribute("data-sf-selection-overlay", id);
+  group.setAttribute("pointer-events", "none");
+  const transform = primary.getAttribute("transform");
+  if (transform) {
+    group.setAttribute("transform", transform);
+  }
+  return group;
+}
+
+// src/runtime/dom/changeOverlay.ts
+var OVERLAY_ATTR = "data-sf-change-overlay";
+var CHANGE_COLOR = "#f59e0b";
+var FLASH_DURATION_MS = 1300;
+var REDUCED_MOTION_DURATION_MS = 400;
+function changeOverlayGroup(document, id, primary) {
+  const group = svgElement(document, "g");
+  group.setAttribute(OVERLAY_ATTR, id);
+  group.setAttribute("pointer-events", "none");
+  const transform = primary.getAttribute("transform");
+  if (transform) {
+    group.setAttribute("transform", transform);
+  }
+  return group;
+}
+function startChangeFade(target, reducedMotion) {
+  if (reducedMotion) {
+    return;
+  }
+  target.animate([{ opacity: 1 }, { opacity: 0 }], {
+    duration: FLASH_DURATION_MS,
+    easing: "linear",
+    fill: "forwards"
+  });
+}
+function shapeChangeOverlay(document, primary, id, color = CHANGE_COLOR) {
+  const bounds = primary.getBBox();
+  const group = changeOverlayGroup(document, id, primary);
+  const ring = svgElement(document, "rect");
+  ring.setAttribute("x", String(bounds.x - 4));
+  ring.setAttribute("y", String(bounds.y - 4));
+  ring.setAttribute("width", String(bounds.width + 8));
+  ring.setAttribute("height", String(bounds.height + 8));
+  ring.setAttribute("fill", "none");
+  ring.setAttribute("stroke", color);
+  ring.setAttribute("stroke-width", "3");
+  group.appendChild(ring);
+  return group;
+}
+function linkChangeOverlay(document, primary, id, color = CHANGE_COLOR) {
+  const group = changeOverlayGroup(document, id, primary);
+  const halo = svgElement(document, "path");
+  halo.setAttribute("d", primary.getAttribute("d") ?? "");
+  halo.setAttribute("fill", "none");
+  halo.setAttribute("stroke", color);
+  const baseWidth = Number(primary.getAttribute("stroke-width")) || 2;
+  halo.setAttribute("stroke-width", String(baseWidth + 6));
+  halo.setAttribute("stroke-linecap", "round");
+  halo.setAttribute("opacity", "0.6");
+  group.appendChild(halo);
+  return group;
+}
+
+// src/runtime/dom/domQuery.ts
+function findOwnerNode(svg, id, predicate) {
+  const nodes = svg.querySelectorAll(`[data-sf-id="${CSS.escape(id)}"]`);
+  for (const el2 of nodes) {
+    if (predicate(el2)) {
+      return el2;
+    }
+  }
+  return null;
+}
+function findAllOwnerNodes(svg, id) {
+  return Array.from(svg.querySelectorAll(`[data-sf-id="${CSS.escape(id)}"]`));
+}
+var isPrimary = (el2) => el2.hasAttribute("data-sf-primary");
+var isTextLabel = (el2) => el2.tagName.toLowerCase() === "text" && !el2.hasAttribute("data-sf-primary");
+function pointerUserPoint(svg, event) {
+  const ctm = svg.getScreenCTM();
+  if (!ctm) {
+    return null;
+  }
+  const point = new DOMPoint(event.clientX, event.clientY).matrixTransform(ctm.inverse());
+  return { x: point.x, y: point.y };
+}
+function screenRectOf(el2) {
+  const bbox = el2.getBBox();
+  const ctm = el2.getScreenCTM();
+  if (!ctm) {
+    return { left: 0, top: 0, width: 0, height: 0 };
+  }
+  const topLeft = new DOMPoint(bbox.x, bbox.y).matrixTransform(ctm);
+  const bottomRight = new DOMPoint(bbox.x + bbox.width, bbox.y + bbox.height).matrixTransform(ctm);
+  return { left: topLeft.x, top: topLeft.y, width: bottomRight.x - topLeft.x, height: bottomRight.y - topLeft.y };
+}
+function pxPerUnit(svg) {
+  const rect = svg.getBoundingClientRect();
+  const { width: viewBoxWidth, height: viewBoxHeight } = svg.viewBox.baseVal;
+  if (rect.width <= 0 || viewBoxWidth <= 0) {
+    return 1;
+  }
+  const horizontal = rect.width / viewBoxWidth;
+  return rect.height > 0 && viewBoxHeight > 0 ? Math.min(horizontal, rect.height / viewBoxHeight) : horizontal;
+}
+function findIsometricApexCandidates(svg, excludeIds) {
+  const results = [];
+  svg.querySelectorAll('[data-sf-primary][data-sf-id][data-sf-role="isometric"]').forEach((node) => {
+    const id = node.getAttribute("data-sf-id");
+    if (!id || excludeIds.has(id)) {
+      return;
+    }
+    const geometry = isometricGeometryOf(node);
+    const bounds = geometry?.bounds ?? node.getBBox();
+    results.push({ id, apex: { x: bounds.x + (geometry?.depth ?? 0) * chunkYM3XFBI4_cjs.AXIS_COS, y: bounds.y } });
+  });
+  return results;
+}
+function findSnapCandidateBounds(svg, excludeIds) {
+  const results = [];
+  svg.querySelectorAll("[data-sf-primary][data-sf-id]").forEach((node) => {
+    const id = node.getAttribute("data-sf-id");
+    const role = node.getAttribute("data-sf-role");
+    if (!id || role === "link" || excludeIds.has(id)) {
+      return;
+    }
+    const bbox = node.getBBox();
+    results.push({ x: bbox.x, y: bbox.y, width: bbox.width, height: bbox.height });
+  });
+  return results;
+}
+
+// src/runtime/dom/selectionOverlay/scale.ts
+function screenPx(svg, px) {
+  return px / pxPerUnit(svg);
+}
+
+// src/runtime/dom/selectionOverlay/quickDuplicate.ts
+var BUBBLE_RADIUS_PX = 8;
+var BUBBLE_MARGIN_PX = 15;
+var PLUS_HALF_SIZE_PX = 4;
+var BUBBLE_STROKE_WIDTH_PX = 1.5;
+function quickDuplicatePositions(bounds, offset) {
+  const centerX = bounds.x + bounds.width / 2;
+  const centerY = bounds.y + bounds.height / 2;
+  return [
+    [centerX, bounds.y - offset, "top"],
+    [bounds.x + bounds.width + offset, centerY, "right"],
+    [centerX, bounds.y + bounds.height + offset, "bottom"],
+    [bounds.x - offset, centerY, "left"]
+  ];
+}
+function plusPath(x, y, halfSize) {
+  return `M ${x - halfSize} ${y} L ${x + halfSize} ${y} M ${x} ${y - halfSize} L ${x} ${y + halfSize}`;
+}
+var BUBBLE_FILL = "#e8e8e8";
+var BUBBLE_STROKE = "#ccc";
+var BUBBLE_HOVER_FILL = "#9b42df";
+var BUBBLE_HOVER_STROKE = "#7c2fb5";
+var BUBBLE_HOVER_SCALE = 1.2;
+function duplicateBubble(document, x, y, radius, strokeWidth, direction) {
+  const bubble = svgElement(document, "circle");
+  bubble.setAttribute("cx", String(x));
+  bubble.setAttribute("cy", String(y));
+  bubble.setAttribute("r", String(radius));
+  bubble.setAttribute("fill", BUBBLE_FILL);
+  bubble.setAttribute("stroke", BUBBLE_STROKE);
+  bubble.setAttribute("stroke-width", String(strokeWidth));
+  bubble.setAttribute("data-sf-quick-duplicate", direction);
+  bubble.style.pointerEvents = "auto";
+  bubble.style.cursor = "pointer";
+  bubble.style.transition = "r 120ms ease, fill 120ms ease, stroke 120ms ease";
+  bubble.addEventListener("pointerenter", () => {
+    bubble.setAttribute("r", String(radius * BUBBLE_HOVER_SCALE));
+    bubble.setAttribute("fill", BUBBLE_HOVER_FILL);
+    bubble.setAttribute("stroke", BUBBLE_HOVER_STROKE);
+    const plus = bubble.nextElementSibling;
+    plus?.setAttribute("stroke", "#ffffff");
+  });
+  bubble.addEventListener("pointerleave", () => {
+    bubble.setAttribute("r", String(radius));
+    bubble.setAttribute("fill", BUBBLE_FILL);
+    bubble.setAttribute("stroke", BUBBLE_STROKE);
+    const plus = bubble.nextElementSibling;
+    plus?.setAttribute("stroke", "#999");
+  });
+  return bubble;
+}
+function duplicatePlus(document, x, y, halfSize, strokeWidth) {
+  const plus = svgElement(document, "path");
+  plus.setAttribute("d", plusPath(x, y, halfSize));
+  plus.setAttribute("stroke", "#999");
+  plus.setAttribute("stroke-width", String(strokeWidth));
+  plus.setAttribute("stroke-linecap", "round");
+  return plus;
+}
+function quickDuplicateBubbles(document, primary, id, svg) {
+  const group = selectionOverlayGroup(document, id, primary);
+  const radius = screenPx(svg, BUBBLE_RADIUS_PX);
+  const offset = radius + screenPx(svg, BUBBLE_MARGIN_PX);
+  const halfSize = screenPx(svg, PLUS_HALF_SIZE_PX);
+  const strokeWidth = screenPx(svg, BUBBLE_STROKE_WIDTH_PX);
+  const bounds = symbolDeclaredBounds(primary) ?? primary.getBBox();
+  for (const [x, y, direction] of quickDuplicatePositions(bounds, offset)) {
+    group.append(
+      duplicateBubble(document, x, y, radius, strokeWidth, direction),
+      duplicatePlus(document, x, y, halfSize, strokeWidth)
+    );
+  }
+  return group;
+}
+function updateQuickDuplicateBubbles(group, bounds) {
+  const bubbles = group.querySelectorAll("circle[data-sf-quick-duplicate]");
+  const firstRadius = Number(bubbles[0]?.getAttribute("r")) || BUBBLE_RADIUS_PX;
+  const offset = firstRadius * ((BUBBLE_RADIUS_PX + BUBBLE_MARGIN_PX) / BUBBLE_RADIUS_PX);
+  const halfSize = firstRadius * (PLUS_HALF_SIZE_PX / BUBBLE_RADIUS_PX);
+  for (const [index, [x, y]] of quickDuplicatePositions(bounds, offset).entries()) {
+    const bubble = bubbles[index];
+    if (!bubble) {
+      continue;
+    }
+    bubble.setAttribute("cx", String(x));
+    bubble.setAttribute("cy", String(y));
+    const plus = bubble.nextElementSibling;
+    if (plus) {
+      plus.setAttribute("d", plusPath(x, y, halfSize));
+    }
+  }
+}
+
+// src/runtime/dom/selectionOverlay/isometric.ts
+var RING_COLOR = "#9b42df";
+var HALO_EXTRA_WIDTH_PX = 2;
+var SHAFT_WIDTH_PX = 3.25;
+var HIT_WIDTH_PX = 14;
+var ARROW_LENGTH_PX = 34;
+var ARROWHEAD_LENGTH_PX = 10.5;
+var ARROWHEAD_WIDTH_PX = 8.5;
+function normalizeVec(v) {
+  const length = Math.hypot(v.x, v.y) || 1;
+  return { x: v.x / length, y: v.y / length };
+}
+function axisCursorUrl(direction) {
+  const angleDeg = Math.atan2(direction.y, direction.x) * 180 / Math.PI;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><g transform="rotate(${angleDeg} 13 13)" stroke-linejoin="round" stroke-linecap="round"><line x1="4" y1="13" x2="22" y2="13" stroke="white" stroke-width="4.5"/><line x1="4" y1="13" x2="22" y2="13" stroke="black" stroke-width="1.6"/><path d="M4 13 L9.5 8.5 L9.5 17.5 Z" fill="black" stroke="white" stroke-width="1.5"/><path d="M22 13 L16.5 8.5 L16.5 17.5 Z" fill="black" stroke="white" stroke-width="1.5"/></g></svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}") 13 13, pointer`;
+}
+function centroid(points) {
+  const sum = points.reduce((acc, p) => ({ x: acc.x + p.x, y: acc.y + p.y }), { x: 0, y: 0 });
+  return { x: sum.x / points.length, y: sum.y / points.length };
+}
+var ISO_HALO_ATTR = "data-sf-iso-halo";
+function createAxisArrow(document, axis, direction, svg) {
+  const group = svgElement(document, "g");
+  group.setAttribute("data-sf-resize-handle", `iso-${axis}`);
+  group.style.cursor = axisCursorUrl(direction);
+  const hit = svgElement(document, "line");
+  hit.setAttribute("stroke", "transparent");
+  hit.setAttribute("stroke-width", String(screenPx(svg, HIT_WIDTH_PX)));
+  hit.setAttribute("stroke-linecap", "round");
+  hit.style.pointerEvents = "stroke";
+  group.appendChild(hit);
+  const shaft = svgElement(document, "line");
+  shaft.setAttribute("stroke", RING_COLOR);
+  shaft.setAttribute("stroke-width", String(screenPx(svg, SHAFT_WIDTH_PX)));
+  shaft.setAttribute("stroke-linecap", "round");
+  shaft.style.pointerEvents = "none";
+  group.appendChild(shaft);
+  const head = svgElement(document, "polygon");
+  head.setAttribute("fill", RING_COLOR);
+  head.style.pointerEvents = "none";
+  group.appendChild(head);
+  return { group, hit, shaft, head };
+}
+function positionAxisArrow(elements, origin, direction, svg) {
+  const length = screenPx(svg, ARROW_LENGTH_PX);
+  const headLength = screenPx(svg, ARROWHEAD_LENGTH_PX);
+  const headWidth = screenPx(svg, ARROWHEAD_WIDTH_PX);
+  const tip = { x: origin.x + direction.x * length, y: origin.y + direction.y * length };
+  const shaftEnd = {
+    x: origin.x + direction.x * (length - headLength),
+    y: origin.y + direction.y * (length - headLength)
+  };
+  const normal = { x: -direction.y, y: direction.x };
+  const headLeft = { x: shaftEnd.x + normal.x * headWidth / 2, y: shaftEnd.y + normal.y * headWidth / 2 };
+  const headRight = { x: shaftEnd.x - normal.x * headWidth / 2, y: shaftEnd.y - normal.y * headWidth / 2 };
+  elements.hit.setAttribute("x1", String(origin.x));
+  elements.hit.setAttribute("y1", String(origin.y));
+  elements.hit.setAttribute("x2", String(tip.x));
+  elements.hit.setAttribute("y2", String(tip.y));
+  elements.shaft.setAttribute("x1", String(origin.x));
+  elements.shaft.setAttribute("y1", String(origin.y));
+  elements.shaft.setAttribute("x2", String(shaftEnd.x));
+  elements.shaft.setAttribute("y2", String(shaftEnd.y));
+  elements.head.setAttribute("points", `${tip.x},${tip.y} ${headLeft.x},${headLeft.y} ${headRight.x},${headRight.y}`);
+}
+function axisArrow(document, origin, direction, axis, svg) {
+  const elements = createAxisArrow(document, axis, direction, svg);
+  positionAxisArrow(elements, origin, direction, svg);
+  return elements.group;
+}
+function updateAxisArrowGroup(group, origin, direction, svg) {
+  const hit = group.querySelector("line:nth-child(1)");
+  const shaft = group.querySelector("line:nth-child(2)");
+  const head = group.querySelector("polygon");
+  if (!hit || !shaft || !head) {
+    return;
+  }
+  positionAxisArrow({ hit, shaft, head }, origin, direction, svg);
+}
+function updateHalo(halo, d) {
+  halo.setAttribute("d", d);
+}
+function axisArrowPlacements(object) {
+  const faces = chunkYM3XFBI4_cjs.isometricFaces(object);
+  const apex = faces.top[0];
+  const right = faces.top[1];
+  const left = faces.top[3];
+  const bottom = faces.front[2];
+  return {
+    width: { origin: centroid(faces.right), direction: normalizeVec({ x: right.x - apex.x, y: right.y - apex.y }) },
+    height: { origin: bottom, direction: { x: 0, y: 1 } },
+    depth: { origin: centroid(faces.front), direction: normalizeVec({ x: left.x - apex.x, y: left.y - apex.y }) }
+  };
+}
+var DUPLICATE_MARGIN_PX = ARROW_LENGTH_PX + BUBBLE_RADIUS_PX + 10;
+function reflect(point, through) {
+  return { x: through.x * 2 - point.x, y: through.y * 2 - point.y };
+}
+function quickDuplicatePlacements(object) {
+  const faces = chunkYM3XFBI4_cjs.isometricFaces(object);
+  const placements = axisArrowPlacements(object);
+  const visualCenter = centroid([
+    faces.top[0],
+    faces.top[1],
+    faces.top[2],
+    faces.top[3],
+    faces.front[2],
+    faces.front[3],
+    faces.right[2]
+  ]);
+  return {
+    "iso-width-pos": placements.width,
+    "iso-width-neg": {
+      origin: reflect(placements.width.origin, visualCenter),
+      direction: { x: -placements.width.direction.x, y: -placements.width.direction.y }
+    },
+    "iso-depth-pos": placements.depth,
+    "iso-depth-neg": {
+      origin: reflect(placements.depth.origin, visualCenter),
+      direction: { x: -placements.depth.direction.x, y: -placements.depth.direction.y }
+    },
+    "iso-height-pos": placements.height,
+    "iso-height-neg": {
+      origin: reflect(placements.height.origin, visualCenter),
+      direction: { x: -placements.height.direction.x, y: -placements.height.direction.y }
+    }
+  };
+}
+var ISO_DUPLICATE_BUBBLES_ATTR = "data-sf-iso-duplicate-bubbles";
+var VISIBLE_FACE_DIRECTIONS = [
+  "iso-height-neg",
+  "iso-depth-pos",
+  "iso-width-pos"
+];
+function isometricQuickDuplicateBubbles(document, object, svg) {
+  const group = svgElement(document, "g");
+  group.setAttribute(ISO_DUPLICATE_BUBBLES_ATTR, "");
+  const radius = screenPx(svg, BUBBLE_RADIUS_PX);
+  const margin = screenPx(svg, DUPLICATE_MARGIN_PX);
+  const halfSize = screenPx(svg, PLUS_HALF_SIZE_PX);
+  const strokeWidth = screenPx(svg, BUBBLE_STROKE_WIDTH_PX);
+  const placements = quickDuplicatePlacements(object);
+  for (const direction of VISIBLE_FACE_DIRECTIONS) {
+    const { origin, direction: dir } = placements[direction];
+    const x = origin.x + dir.x * margin;
+    const y = origin.y + dir.y * margin;
+    group.append(
+      duplicateBubble(document, x, y, radius, strokeWidth, direction),
+      duplicatePlus(document, x, y, halfSize, strokeWidth)
+    );
+  }
+  return group;
+}
+function isometricSelectionOverlay(document, primary, id, svg) {
+  const bounds = symbolDeclaredBounds(primary) ?? primary.getBBox();
+  const geometry = isometricGeometryOf(primary);
+  const group = selectionOverlayGroup(document, id, primary);
+  const halo = svgElement(document, "path");
+  halo.setAttribute(ISO_HALO_ATTR, "");
+  halo.setAttribute("d", primary.getAttribute("d") ?? "");
+  halo.setAttribute("fill", "none");
+  halo.setAttribute("stroke", RING_COLOR);
+  const baseWidth = Number(primary.getAttribute("stroke-width")) || 2;
+  halo.setAttribute("stroke-width", String(baseWidth + screenPx(svg, HALO_EXTRA_WIDTH_PX)));
+  halo.setAttribute("opacity", "0.6");
+  halo.style.pointerEvents = "none";
+  group.appendChild(halo);
+  const placements = axisArrowPlacements({
+    x: bounds.x,
+    y: bounds.y,
+    width: geometry?.width ?? bounds.width,
+    height: geometry?.height ?? bounds.height,
+    depth: geometry?.depth ?? 0
+  });
+  group.appendChild(axisArrow(document, placements.width.origin, placements.width.direction, "width", svg));
+  group.appendChild(axisArrow(document, placements.height.origin, placements.height.direction, "height", svg));
+  group.appendChild(axisArrow(document, placements.depth.origin, placements.depth.direction, "depth", svg));
+  group.appendChild(
+    isometricQuickDuplicateBubbles(
+      document,
+      {
+        x: bounds.x,
+        y: bounds.y,
+        width: geometry?.width ?? bounds.width,
+        height: geometry?.height ?? bounds.height,
+        depth: geometry?.depth ?? 0
+      },
+      svg
+    )
+  );
+  return group;
+}
+
+// src/runtime/dom/selectionOverlay/link.ts
+var RING_COLOR2 = "#9b42df";
+var HALO_EXTRA_WIDTH_PX2 = 4;
+var ENDPOINT_RADIUS_PX = 5;
+var ENDPOINT_STROKE_WIDTH_PX = 1.5;
+function linkHalo(document, primary, svg) {
+  const halo = svgElement(document, "path");
+  halo.setAttribute("d", primary.getAttribute("d") ?? "");
+  halo.setAttribute("fill", "none");
+  halo.setAttribute("stroke", RING_COLOR2);
+  const baseWidth = Number(primary.getAttribute("stroke-width")) || 2;
+  halo.setAttribute("stroke-width", String(baseWidth + screenPx(svg, HALO_EXTRA_WIDTH_PX2)));
+  halo.setAttribute("stroke-linecap", "round");
+  halo.setAttribute("opacity", "0.5");
+  return halo;
+}
+function endpointHandle(document, primary, atLength, endpoint, svg) {
+  const point = primary.getPointAtLength(atLength);
+  const handle = svgElement(document, "circle");
+  handle.setAttribute("cx", String(point.x));
+  handle.setAttribute("cy", String(point.y));
+  handle.setAttribute("r", String(screenPx(svg, ENDPOINT_RADIUS_PX)));
+  handle.setAttribute("fill", RING_COLOR2);
+  handle.setAttribute("stroke", "white");
+  handle.setAttribute("stroke-width", String(screenPx(svg, ENDPOINT_STROKE_WIDTH_PX)));
+  handle.setAttribute("data-sf-link-endpoint", endpoint);
+  handle.style.pointerEvents = "auto";
+  handle.style.cursor = "crosshair";
+  return handle;
+}
+var SEGMENT_LENGTH_PX = 22;
+var SEGMENT_THICKNESS_PX = 8;
+function readSegments(primary) {
+  try {
+    return JSON.parse(primary.getAttribute("data-sf-link-segments") ?? "[]");
+  } catch {
+    return [];
+  }
+}
+function segmentHandles(document, primary, svg) {
+  const handles = [];
+  readSegments(primary).forEach((segment, index) => {
+    if (!segment.movable) {
+      return;
+    }
+    const horizontal = Math.abs(segment.bx - segment.ax) > Math.abs(segment.by - segment.ay);
+    const length = screenPx(svg, SEGMENT_LENGTH_PX);
+    const thickness = screenPx(svg, SEGMENT_THICKNESS_PX);
+    const width = horizontal ? length : thickness;
+    const height = horizontal ? thickness : length;
+    const handle = svgElement(document, "rect");
+    handle.setAttribute("x", String((segment.ax + segment.bx) / 2 - width / 2));
+    handle.setAttribute("y", String((segment.ay + segment.by) / 2 - height / 2));
+    handle.setAttribute("width", String(width));
+    handle.setAttribute("height", String(height));
+    handle.setAttribute("rx", String(thickness / 2));
+    handle.setAttribute("fill", "white");
+    handle.setAttribute("stroke", RING_COLOR2);
+    handle.setAttribute("stroke-width", String(screenPx(svg, ENDPOINT_STROKE_WIDTH_PX)));
+    handle.setAttribute("data-sf-link-segment", String(index));
+    handle.setAttribute("data-sf-link-segment-axis", horizontal ? "y" : "x");
+    handle.style.pointerEvents = "auto";
+    handle.style.cursor = horizontal ? "ns-resize" : "ew-resize";
+    handles.push(handle);
+  });
+  return handles;
+}
+function linkSelectionOverlay(document, primary, id, svg) {
+  const group = selectionOverlayGroup(document, id, primary);
+  const length = primary.getTotalLength();
+  group.append(
+    linkHalo(document, primary, svg),
+    ...segmentHandles(document, primary, svg),
+    endpointHandle(document, primary, 0, "from", svg),
+    endpointHandle(document, primary, length, "to", svg)
+  );
+  return group;
+}
+
+// src/runtime/dom/selectionOverlay/path.ts
+var RING_COLOR3 = "#9b42df";
+var HALO_EXTRA_WIDTH_PX3 = 4;
+var POINT_RADIUS_PX = 5;
+var POINT_STROKE_WIDTH_PX = 1.5;
+var PATH_HALO_ATTR = "data-sf-path-halo";
+function pathHalo(document, primary, svg) {
+  const halo = svgElement(document, "path");
+  halo.setAttribute(PATH_HALO_ATTR, "");
+  halo.setAttribute("d", primary.getAttribute("d") ?? "");
+  halo.setAttribute("fill", "none");
+  halo.setAttribute("stroke", RING_COLOR3);
+  const baseWidth = Number(primary.getAttribute("stroke-width")) || 2;
+  halo.setAttribute("stroke-width", String(baseWidth + screenPx(svg, HALO_EXTRA_WIDTH_PX3)));
+  halo.setAttribute("stroke-linecap", "round");
+  halo.setAttribute("opacity", "0.5");
+  return halo;
+}
+function pointHandle(document, x, y, index, svg) {
+  const handle = svgElement(document, "circle");
+  handle.setAttribute("cx", String(x));
+  handle.setAttribute("cy", String(y));
+  handle.setAttribute("r", String(screenPx(svg, POINT_RADIUS_PX)));
+  handle.setAttribute("fill", "#ffffff");
+  handle.setAttribute("stroke", RING_COLOR3);
+  handle.setAttribute("stroke-width", String(screenPx(svg, POINT_STROKE_WIDTH_PX)));
+  handle.setAttribute(chunkYM3XFBI4_cjs.PATH_POINT_INDEX_ATTR, String(index));
+  handle.style.pointerEvents = "auto";
+  handle.style.cursor = "move";
+  return handle;
+}
+function pathSelectionOverlay(document, primary, id, svg) {
+  const group = selectionOverlayGroup(document, id, primary);
+  group.appendChild(pathHalo(document, primary, svg));
+  const geometry = pathGeometryOf(primary);
+  for (const [index, [x, y]] of (geometry?.points ?? []).entries()) {
+    group.appendChild(pointHandle(document, x, y, index, svg));
+  }
+  return group;
+}
+
+// src/runtime/dom/selectionOverlay/resizeHandles.ts
+var HANDLE_SIZE_PX = 6;
+var HANDLE_STROKE_WIDTH_PX = 1;
+var HANDLE_STROKE = "#992dff";
+var HANDLE_CURSORS = {
+  "top-left": "nwse-resize",
+  top: "ns-resize",
+  "top-right": "nesw-resize",
+  right: "ew-resize",
+  "bottom-right": "nwse-resize",
+  bottom: "ns-resize",
+  "bottom-left": "nesw-resize",
+  left: "ew-resize"
+};
+function resizeHandlePositions(bounds) {
+  const centerX = bounds.x + bounds.width / 2;
+  const centerY = bounds.y + bounds.height / 2;
+  return [
+    [bounds.x, bounds.y, "top-left"],
+    [centerX, bounds.y, "top"],
+    [bounds.x + bounds.width, bounds.y, "top-right"],
+    [bounds.x + bounds.width, centerY, "right"],
+    [bounds.x + bounds.width, bounds.y + bounds.height, "bottom-right"],
+    [centerX, bounds.y + bounds.height, "bottom"],
+    [bounds.x, bounds.y + bounds.height, "bottom-left"],
+    [bounds.x, centerY, "left"]
+  ];
+}
+var LOCKED_HEIGHT_HANDLES = /* @__PURE__ */ new Set(["top", "bottom"]);
+function renderResizeHandles(document, bounds, svg, lockHeight = false) {
+  const size = screenPx(svg, HANDLE_SIZE_PX);
+  const strokeWidth = screenPx(svg, HANDLE_STROKE_WIDTH_PX);
+  const positions = lockHeight ? resizeHandlePositions(bounds).filter(([, , name]) => !LOCKED_HEIGHT_HANDLES.has(name)) : resizeHandlePositions(bounds);
+  return positions.map(([centerX, centerY, name]) => {
+    const handle = svgElement(document, "rect");
+    handle.setAttribute("x", String(centerX - size / 2));
+    handle.setAttribute("y", String(centerY - size / 2));
+    handle.setAttribute("width", String(size));
+    handle.setAttribute("height", String(size));
+    handle.setAttribute("fill", "white");
+    handle.setAttribute("stroke", HANDLE_STROKE);
+    handle.setAttribute("stroke-width", String(strokeWidth));
+    handle.setAttribute("data-sf-resize-handle", name);
+    handle.style.pointerEvents = "auto";
+    handle.style.cursor = lockHeight ? "ew-resize" : HANDLE_CURSORS[name];
+    return handle;
+  });
+}
+
+// src/runtime/dom/selectionOverlay/shape.ts
+var RING_COLOR4 = "#9b42df";
+var RING_STROKE_WIDTH_PX = 3;
+var RING_OFFSET_PX = 1;
+function shapeSelectionOverlay(document, primary, id, svg, lockHeight = false) {
+  const bounds = symbolDeclaredBounds(primary) ?? primary.getBBox();
+  const group = selectionOverlayGroup(document, id, primary);
+  const offset = screenPx(svg, RING_OFFSET_PX);
+  const ring = svgElement(document, "rect");
+  ring.setAttribute("x", String(bounds.x - offset));
+  ring.setAttribute("y", String(bounds.y - offset));
+  ring.setAttribute("width", String(bounds.width + offset * 2));
+  ring.setAttribute("height", String(bounds.height + offset * 2));
+  ring.setAttribute("fill", "none");
+  ring.setAttribute("stroke", RING_COLOR4);
+  ring.setAttribute("stroke-width", String(screenPx(svg, RING_STROKE_WIDTH_PX)));
+  group.appendChild(ring);
+  group.append(...renderResizeHandles(document, bounds, svg, lockHeight));
+  return group;
+}
+
+exports.CHANGE_COLOR = CHANGE_COLOR;
+exports.DERIVED_HEIGHT_ROLES = DERIVED_HEIGHT_ROLES;
+exports.Emitter = Emitter;
+exports.FLASH_DURATION_MS = FLASH_DURATION_MS;
+exports.ISO_DUPLICATE_BUBBLES_ATTR = ISO_DUPLICATE_BUBBLES_ATTR;
+exports.ISO_HALO_ATTR = ISO_HALO_ATTR;
+exports.PATH_HALO_ATTR = PATH_HALO_ATTR;
+exports.REDUCED_MOTION_DURATION_MS = REDUCED_MOTION_DURATION_MS;
+exports.SVG_NAMESPACE = SVG_NAMESPACE;
+exports.axisArrowPlacements = axisArrowPlacements;
+exports.clearAlignmentGuides = clearAlignmentGuides;
+exports.findAllOwnerNodes = findAllOwnerNodes;
+exports.findIsometricApexCandidates = findIsometricApexCandidates;
+exports.findOwnerNode = findOwnerNode;
+exports.findSnapCandidateBounds = findSnapCandidateBounds;
+exports.isCameraGesture = isCameraGesture;
+exports.isContractCompatible = isContractCompatible;
+exports.isPrimary = isPrimary;
+exports.isTextLabel = isTextLabel;
+exports.isometricGeometryOf = isometricGeometryOf;
+exports.isometricSelectionOverlay = isometricSelectionOverlay;
+exports.linkChangeOverlay = linkChangeOverlay;
+exports.linkSelectionOverlay = linkSelectionOverlay;
+exports.parseContractVersion = parseContractVersion;
+exports.pathGeometryOf = pathGeometryOf;
+exports.pathSelectionOverlay = pathSelectionOverlay;
+exports.pointerUserPoint = pointerUserPoint;
+exports.pxPerUnit = pxPerUnit;
+exports.quickDuplicateBubbles = quickDuplicateBubbles;
+exports.resizeHandlePositions = resizeHandlePositions;
+exports.resolveOwner = resolveOwner;
+exports.screenRectOf = screenRectOf;
+exports.shapeChangeOverlay = shapeChangeOverlay;
+exports.shapeSelectionOverlay = shapeSelectionOverlay;
+exports.startChangeFade = startChangeFade;
+exports.symbolDeclaredBounds = symbolDeclaredBounds;
+exports.updateAlignmentGuides = updateAlignmentGuides;
+exports.updateAxisArrowGroup = updateAxisArrowGroup;
+exports.updateHalo = updateHalo;
+exports.updateQuickDuplicateBubbles = updateQuickDuplicateBubbles;
+//# sourceMappingURL=chunk-34PK7HEU.cjs.map
+//# sourceMappingURL=chunk-34PK7HEU.cjs.map