skema-core 0.1.0

package/dist/index.mjs

@@ -0,0 +1,2307 @@
+import { forwardRef, useState, useRef, useEffect, useCallback, useImperativeHandle, useMemo } from 'react';
+import { StateNode, atom, Box, ArrowShapeKindStyle, Tldraw, TldrawOverlays, useEditor, useTools, useIsToolSelected, useValue } from 'tldraw';
+import 'tldraw/tldraw.css';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+// src/components/Skema.tsx
+var IdleState = class extends StateNode {
+  constructor() {
+    super(...arguments);
+    this.onPointerDown = (info) => {
+      this.parent.transition("lassoing", info);
+    };
+    this.onCancel = () => {
+      this.editor.setCurrentTool("select");
+    };
+  }
+};
+IdleState.id = "idle";
+var LassoingState = class extends StateNode {
+  constructor() {
+    super(...arguments);
+    // Reactive atom to store lasso points for rendering
+    this.points = atom("lasso points", []);
+    // Track starting point to detect clicks vs drags
+    this.startPoint = null;
+    this.onEnter = (info) => {
+      const { currentPagePoint } = this.editor.inputs;
+      this.startPoint = { x: currentPagePoint.x, y: currentPagePoint.y };
+      this.points.set([{ x: currentPagePoint.x, y: currentPagePoint.y }]);
+    };
+    this.onPointerMove = () => {
+      const { currentPagePoint } = this.editor.inputs;
+      const currentPoints = this.points.get();
+      const lastPoint = currentPoints[currentPoints.length - 1];
+      if (lastPoint) {
+        const dx = currentPagePoint.x - lastPoint.x;
+        const dy = currentPagePoint.y - lastPoint.y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist > 3) {
+          this.points.set([...currentPoints, { x: currentPagePoint.x, y: currentPagePoint.y }]);
+        }
+      }
+    };
+    this.onPointerUp = () => {
+      this.complete();
+    };
+    this.onCancel = () => {
+      this.cancel();
+    };
+    this.onComplete = () => {
+      this.complete();
+    };
+  }
+  complete() {
+    const points = this.points.get();
+    const { currentPagePoint } = this.editor.inputs;
+    if (this.startPoint) {
+      const dx = currentPagePoint.x - this.startPoint.x;
+      const dy = currentPagePoint.y - this.startPoint.y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      if (dist < 10 || points.length < 3) {
+        this.editor.setSelectedShapes([]);
+        const tool = this.parent;
+        tool.onClearSelections?.();
+        this.points.set([]);
+        this.startPoint = null;
+        this.parent.transition("idle");
+        return;
+      }
+    }
+    if (points.length > 2) {
+      this.selectShapesInLasso(points);
+      const tool = this.parent;
+      tool.onLassoComplete?.(points);
+    }
+    this.points.set([]);
+    this.startPoint = null;
+    this.parent.transition("idle");
+  }
+  cancel() {
+    this.points.set([]);
+    this.startPoint = null;
+    this.parent.transition("idle");
+  }
+  /**
+   * Select shapes that intersect with the lasso area (any overlap counts)
+   */
+  selectShapesInLasso(points) {
+    const allShapes = this.editor.getCurrentPageShapes();
+    if (allShapes.length === 0) {
+      return;
+    }
+    let minX = Infinity, minY = Infinity;
+    let maxX = -Infinity, maxY = -Infinity;
+    for (const p of points) {
+      minX = Math.min(minX, p.x);
+      minY = Math.min(minY, p.y);
+      maxX = Math.max(maxX, p.x);
+      maxY = Math.max(maxY, p.y);
+    }
+    const selectedIds = [];
+    for (const shape of allShapes) {
+      const shapeBounds = this.editor.getShapePageBounds(shape.id);
+      if (!shapeBounds) continue;
+      const boundsOverlap = !(shapeBounds.x > maxX || shapeBounds.x + shapeBounds.width < minX || shapeBounds.y > maxY || shapeBounds.y + shapeBounds.height < minY);
+      if (boundsOverlap) {
+        selectedIds.push(shape.id);
+      }
+    }
+    if (selectedIds.length > 0) {
+      this.editor.setSelectedShapes(selectedIds);
+    }
+  }
+  /**
+   * Ray casting algorithm to check if a point is inside a polygon
+   */
+  isPointInPolygon(point, polygon) {
+    let inside = false;
+    const n = polygon.length;
+    for (let i = 0, j = n - 1; i < n; j = i++) {
+      const xi = polygon[i].x;
+      const yi = polygon[i].y;
+      const xj = polygon[j].x;
+      const yj = polygon[j].y;
+      const intersect = yi > point.y !== yj > point.y && point.x < (xj - xi) * (point.y - yi) / (yj - yi) + xi;
+      if (intersect) {
+        inside = !inside;
+      }
+    }
+    return inside;
+  }
+  /**
+   * Get the bounding box of the lasso in page coordinates
+   */
+  getLassoBounds() {
+    const points = this.points.get();
+    if (points.length < 2) return null;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const point of points) {
+      minX = Math.min(minX, point.x);
+      minY = Math.min(minY, point.y);
+      maxX = Math.max(maxX, point.x);
+      maxY = Math.max(maxY, point.y);
+    }
+    return new Box(minX, minY, maxX - minX, maxY - minY);
+  }
+};
+LassoingState.id = "lassoing";
+var LassoSelectTool = class extends StateNode {
+  constructor() {
+    super(...arguments);
+    // Callback to clear DOM selections (set by Skema component)
+    this.onClearSelections = null;
+    // Callback when lasso selection completes (set by Skema component)
+    this.onLassoComplete = null;
+  }
+  /**
+   * Set callback for clearing DOM selections
+   */
+  setOnClearSelections(callback) {
+    this.onClearSelections = callback;
+  }
+  /**
+   * Set callback for when lasso selection completes
+   */
+  setOnLassoComplete(callback) {
+    this.onLassoComplete = callback;
+  }
+};
+LassoSelectTool.id = "lasso-select";
+LassoSelectTool.initial = "idle";
+LassoSelectTool.children = () => [IdleState, LassoingState];
+
+// src/utils/coordinates.ts
+function getViewportInfo() {
+  if (typeof window === "undefined") {
+    return { width: 0, height: 0, scrollX: 0, scrollY: 0 };
+  }
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    scrollX: window.scrollX,
+    scrollY: window.scrollY
+  };
+}
+function viewportToDocument(x, y, viewport = getViewportInfo()) {
+  return {
+    x: x + viewport.scrollX,
+    y: y + viewport.scrollY
+  };
+}
+function documentToViewport(x, y, viewport = getViewportInfo()) {
+  return {
+    x: x - viewport.scrollX,
+    y: y - viewport.scrollY
+  };
+}
+function bboxViewportToDocument(bbox, viewport = getViewportInfo()) {
+  const { x, y } = viewportToDocument(bbox.x, bbox.y, viewport);
+  return {
+    x,
+    y,
+    width: bbox.width,
+    height: bbox.height
+  };
+}
+function bboxDocumentToViewport(bbox, viewport = getViewportInfo()) {
+  const { x, y } = documentToViewport(bbox.x, bbox.y, viewport);
+  return {
+    x,
+    y,
+    width: bbox.width,
+    height: bbox.height
+  };
+}
+function bboxIntersects(a, b) {
+  return !(a.x + a.width < b.x || b.x + b.width < a.x || a.y + a.height < b.y || b.y + b.height < a.y);
+}
+function pointInBbox(x, y, bbox) {
+  return x >= bbox.x && x <= bbox.x + bbox.width && y >= bbox.y && y <= bbox.y + bbox.height;
+}
+function bboxCenter(bbox) {
+  return {
+    x: bbox.x + bbox.width / 2,
+    y: bbox.y + bbox.height / 2
+  };
+}
+function expandBbox(bbox, padding) {
+  return {
+    x: bbox.x - padding,
+    y: bbox.y - padding,
+    width: bbox.width + padding * 2,
+    height: bbox.height + padding * 2
+  };
+}
+function bboxFromPoints(x1, y1, x2, y2) {
+  return {
+    x: Math.min(x1, x2),
+    y: Math.min(y1, y2),
+    width: Math.abs(x2 - x1),
+    height: Math.abs(y2 - y1)
+  };
+}
+
+// src/utils/element-identification.ts
+function generateSelector(element) {
+  if (element.id) {
+    return `#${element.id}`;
+  }
+  const path = [];
+  let current = element;
+  while (current && current !== document.body && current !== document.documentElement) {
+    let selector = current.tagName.toLowerCase();
+    if (current.id) {
+      selector = `#${current.id}`;
+      path.unshift(selector);
+      break;
+    }
+    if (current.className && typeof current.className === "string") {
+      const meaningfulClasses = current.className.split(/\s+/).filter((c) => c.length > 2 && !c.match(/^[a-z]{1,2}$/) && !c.match(/[A-Z0-9]{5,}/)).slice(0, 2);
+      if (meaningfulClasses.length > 0) {
+        selector += "." + meaningfulClasses.join(".");
+      }
+    }
+    const parent = current.parentElement;
+    if (parent) {
+      const siblings = Array.from(parent.children).filter(
+        (child) => child.tagName === current.tagName
+      );
+      if (siblings.length > 1) {
+        const index = siblings.indexOf(current) + 1;
+        selector += `:nth-child(${index})`;
+      }
+    }
+    path.unshift(selector);
+    current = current.parentElement;
+  }
+  return path.join(" > ");
+}
+function getElementPath(target, maxDepth = 4) {
+  const parts = [];
+  let current = target;
+  let depth = 0;
+  while (current && depth < maxDepth) {
+    const tag = current.tagName.toLowerCase();
+    if (tag === "html" || tag === "body") break;
+    let identifier = tag;
+    if (current.id) {
+      identifier = `#${current.id}`;
+    } else if (current.className && typeof current.className === "string") {
+      const meaningfulClass = current.className.split(/\s+/).find((c) => c.length > 2 && !c.match(/^[a-z]{1,2}$/) && !c.match(/[A-Z0-9]{5,}/));
+      if (meaningfulClass) {
+        identifier = `.${meaningfulClass.split("_")[0]}`;
+      }
+    }
+    parts.unshift(identifier);
+    current = current.parentElement;
+    depth++;
+  }
+  return parts.join(" > ");
+}
+function identifyElement(target) {
+  const tag = target.tagName.toLowerCase();
+  if (tag === "button") {
+    const text = target.textContent?.trim();
+    const ariaLabel = target.getAttribute("aria-label");
+    if (ariaLabel) return `button [${ariaLabel}]`;
+    return text ? `button "${text.slice(0, 25)}"` : "button";
+  }
+  if (tag === "a") {
+    const text = target.textContent?.trim();
+    const href = target.getAttribute("href");
+    if (text) return `link "${text.slice(0, 25)}"`;
+    if (href) return `link to ${href.slice(0, 30)}`;
+    return "link";
+  }
+  if (tag === "input") {
+    const type = target.getAttribute("type") || "text";
+    const placeholder = target.getAttribute("placeholder");
+    const name = target.getAttribute("name");
+    if (placeholder) return `input "${placeholder}"`;
+    if (name) return `input [${name}]`;
+    return `${type} input`;
+  }
+  if (["h1", "h2", "h3", "h4", "h5", "h6"].includes(tag)) {
+    const text = target.textContent?.trim();
+    return text ? `${tag} "${text.slice(0, 35)}"` : tag;
+  }
+  if (tag === "p") {
+    const text = target.textContent?.trim();
+    if (text) return `paragraph: "${text.slice(0, 40)}${text.length > 40 ? "..." : ""}"`;
+    return "paragraph";
+  }
+  if (tag === "img") {
+    const alt = target.getAttribute("alt");
+    return alt ? `image "${alt.slice(0, 30)}"` : "image";
+  }
+  if (["div", "section", "article", "nav", "header", "footer", "aside", "main"].includes(tag)) {
+    const className = target.className;
+    const role = target.getAttribute("role");
+    const ariaLabel = target.getAttribute("aria-label");
+    if (ariaLabel) return `${tag} [${ariaLabel}]`;
+    if (role) return role;
+    if (typeof className === "string" && className) {
+      const words = className.split(/[\s_-]+/).map((c) => c.replace(/[A-Z0-9]{5,}.*$/, "")).filter((c) => c.length > 2 && !/^[a-z]{1,2}$/.test(c)).slice(0, 2);
+      if (words.length > 0) return words.join(" ");
+    }
+    return tag === "div" ? "container" : tag;
+  }
+  return tag;
+}
+function getBoundingBox(element) {
+  const rect = element.getBoundingClientRect();
+  return {
+    x: rect.left + window.scrollX,
+    y: rect.top + window.scrollY,
+    width: rect.width,
+    height: rect.height
+  };
+}
+function getElementClasses(target) {
+  const className = target.className;
+  if (typeof className !== "string" || !className) return "";
+  const classes = className.split(/\s+/).filter((c) => c.length > 0).map((c) => {
+    const match = c.match(/^([a-zA-Z][a-zA-Z0-9_-]*?)(?:_[a-zA-Z0-9]{5,})?$/);
+    return match ? match[1] : c;
+  }).filter((c, i, arr) => arr.indexOf(c) === i);
+  return classes.join(", ");
+}
+function createDOMSelection(element) {
+  return {
+    id: `dom-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+    selector: generateSelector(element),
+    tagName: element.tagName.toLowerCase(),
+    elementPath: getElementPath(element),
+    text: element.textContent?.trim().slice(0, 100) || "",
+    boundingBox: getBoundingBox(element),
+    timestamp: Date.now(),
+    pathname: typeof window !== "undefined" ? window.location.pathname : "",
+    cssClasses: getElementClasses(element) || void 0,
+    attributes: getElementAttributes(element)
+  };
+}
+function getElementAttributes(element) {
+  const attrs = {};
+  const relevantAttrs = ["id", "href", "src", "alt", "type", "name", "placeholder", "role", "aria-label"];
+  for (const attr of relevantAttrs) {
+    const value = element.getAttribute(attr);
+    if (value) {
+      attrs[attr] = value;
+    }
+  }
+  return Object.keys(attrs).length > 0 ? attrs : void 0;
+}
+function shouldIgnoreElement(element) {
+  if (element.closest("[data-skema]")) return true;
+  if (element.closest(".tl-container")) return true;
+  const tag = element.tagName.toLowerCase();
+  if (["script", "style", "noscript", "meta", "link"].includes(tag)) return true;
+  if (tag === "section" || tag === "main" || tag === "body" || tag === "html") return true;
+  return false;
+}
+function getComputedElementStyles(element) {
+  const computed = window.getComputedStyle(element);
+  return {
+    // Typography
+    fontFamily: computed.fontFamily,
+    fontSize: computed.fontSize,
+    fontWeight: computed.fontWeight,
+    lineHeight: computed.lineHeight,
+    letterSpacing: computed.letterSpacing !== "normal" ? computed.letterSpacing : void 0,
+    textAlign: computed.textAlign !== "start" ? computed.textAlign : void 0,
+    color: computed.color,
+    // Spacing
+    padding: computed.padding !== "0px" ? computed.padding : void 0,
+    margin: computed.margin !== "0px" ? computed.margin : void 0,
+    gap: computed.gap !== "normal" ? computed.gap : void 0,
+    // Layout
+    display: computed.display,
+    flexDirection: computed.flexDirection !== "row" ? computed.flexDirection : void 0,
+    alignItems: computed.alignItems !== "normal" ? computed.alignItems : void 0,
+    justifyContent: computed.justifyContent !== "normal" ? computed.justifyContent : void 0,
+    // Visual
+    backgroundColor: computed.backgroundColor !== "rgba(0, 0, 0, 0)" ? computed.backgroundColor : void 0,
+    borderRadius: computed.borderRadius !== "0px" ? computed.borderRadius : void 0,
+    border: computed.border !== "none" && computed.borderWidth !== "0px" ? computed.border : void 0,
+    boxShadow: computed.boxShadow !== "none" ? computed.boxShadow : void 0,
+    // Sizing
+    width: computed.width,
+    height: computed.height,
+    maxWidth: computed.maxWidth !== "none" ? computed.maxWidth : void 0
+  };
+}
+function extractTailwindClasses(element) {
+  const className = element.className;
+  if (typeof className !== "string" || !className) return void 0;
+  const tailwindPatterns = [
+    /^(flex|grid|block|inline|hidden)$/,
+    /^(flex|grid|items|justify|gap|space|p|m|px|py|mx|my|pt|pb|pl|pr|mt|mb|ml|mr)-/,
+    /^(w|h|min-w|min-h|max-w|max-h)-/,
+    /^(text|font|leading|tracking|bg|border|rounded|shadow|opacity)-/,
+    /^(sm|md|lg|xl|2xl):/,
+    /^(hover|focus|active|disabled):/,
+    /^(dark|light):/
+  ];
+  const classes = className.split(/\s+/).filter(
+    (c) => tailwindPatterns.some((pattern) => pattern.test(c))
+  );
+  return classes.length > 0 ? classes : void 0;
+}
+function createNearbyElement(element) {
+  return {
+    selector: generateSelector(element),
+    tagName: element.tagName.toLowerCase(),
+    text: element.textContent?.trim().slice(0, 100),
+    styles: getComputedElementStyles(element),
+    tailwindClasses: extractTailwindClasses(element)
+  };
+}
+function detectCSSFramework() {
+  const hasTailwind = document.querySelector('[class*="flex"]') !== null || document.querySelector('[class*="grid-"]') !== null || document.querySelector('[class*="text-"]') !== null || document.querySelector('[class*="bg-"]') !== null || // Check for Tailwind's reset stylesheet
+  document.querySelector("style[data-precedence]") !== null;
+  if (hasTailwind) {
+    const allClasses = Array.from(document.querySelectorAll("[class]")).slice(0, 50).flatMap((el) => {
+      const className = el.className;
+      if (typeof className !== "string") return [];
+      return className.split(/\s+/);
+    });
+    const tailwindIndicators = allClasses.filter(
+      (c) => /^(flex|grid|block|inline-block|hidden|p-|m-|px-|py-|mx-|my-|w-|h-|text-|bg-|border-|rounded-|shadow-|gap-)/.test(c)
+    );
+    if (tailwindIndicators.length > 5) {
+      return "tailwind";
+    }
+  }
+  const hasModuleClasses = Array.from(document.querySelectorAll("[class]")).slice(0, 20).some((el) => {
+    const className = el.className;
+    if (typeof className !== "string") return false;
+    return /[a-zA-Z]+_[a-zA-Z0-9]{5,}/.test(className);
+  });
+  if (hasModuleClasses) {
+    return "css-modules";
+  }
+  if (document.querySelector("[data-styled]") !== null || document.querySelector("style[data-styled-components]") !== null) {
+    return "styled-components";
+  }
+  return "vanilla";
+}
+function extractCSSVariables() {
+  const variables = {};
+  try {
+    const rootStyles = getComputedStyle(document.documentElement);
+    for (const sheet of document.styleSheets) {
+      try {
+        const rules = sheet.cssRules || sheet.rules;
+        for (const rule of rules) {
+          if (rule instanceof CSSStyleRule && rule.selectorText === ":root") {
+            for (let i = 0; i < rule.style.length; i++) {
+              const prop = rule.style[i];
+              if (prop.startsWith("--")) {
+                variables[prop] = rule.style.getPropertyValue(prop).trim();
+              }
+            }
+          }
+        }
+      } catch {
+      }
+    }
+    const htmlStyle = document.documentElement.getAttribute("style");
+    if (htmlStyle) {
+      const matches = htmlStyle.matchAll(/--([a-zA-Z0-9-]+)\s*:\s*([^;]+)/g);
+      for (const match of matches) {
+        variables[`--${match[1]}`] = match[2].trim();
+      }
+    }
+  } catch {
+  }
+  return Object.keys(variables).length > 0 ? variables : void 0;
+}
+function extractColorPalette() {
+  const colors = /* @__PURE__ */ new Set();
+  const elements = document.querySelectorAll("*");
+  const sampleSize = Math.min(elements.length, 100);
+  for (let i = 0; i < sampleSize; i++) {
+    const el = elements[i];
+    if (shouldIgnoreElement(el)) continue;
+    const computed = window.getComputedStyle(el);
+    if (computed.backgroundColor && computed.backgroundColor !== "rgba(0, 0, 0, 0)") {
+      colors.add(computed.backgroundColor);
+    }
+    if (computed.color) {
+      colors.add(computed.color);
+    }
+    if (computed.borderColor && computed.borderColor !== "rgb(0, 0, 0)") {
+      colors.add(computed.borderColor);
+    }
+  }
+  const uniqueColors = Array.from(colors).slice(0, 20);
+  return uniqueColors.length > 0 ? uniqueColors : void 0;
+}
+function extractProjectStyleContext() {
+  const bodyStyles = window.getComputedStyle(document.body);
+  const htmlStyles = window.getComputedStyle(document.documentElement);
+  return {
+    cssFramework: detectCSSFramework(),
+    cssVariables: extractCSSVariables(),
+    colorPalette: extractColorPalette(),
+    baseFontFamily: bodyStyles.fontFamily,
+    baseFontSize: htmlStyles.fontSize
+  };
+}
+function findNearbyElementsWithStyles(bounds, maxElements = 5) {
+  const elements = [];
+  const allElements = document.querySelectorAll("*");
+  const boundsCenter = {
+    x: bounds.x + bounds.width / 2,
+    y: bounds.y + bounds.height / 2
+  };
+  allElements.forEach((el) => {
+    if (!(el instanceof HTMLElement)) return;
+    if (shouldIgnoreElement(el)) return;
+    const rect = el.getBoundingClientRect();
+    if (rect.width < 10 || rect.height < 10) return;
+    const elCenter = {
+      x: rect.left + window.scrollX + rect.width / 2,
+      y: rect.top + window.scrollY + rect.height / 2
+    };
+    const distance = Math.sqrt(
+      Math.pow(boundsCenter.x - elCenter.x, 2) + Math.pow(boundsCenter.y - elCenter.y, 2)
+    );
+    if (distance < 500) {
+      elements.push({ element: el, distance });
+    }
+  });
+  elements.sort((a, b) => a.distance - b.distance);
+  const seen = /* @__PURE__ */ new Set();
+  const diverse = [];
+  for (const { element } of elements) {
+    const key = `${element.tagName}-${element.className}`;
+    if (!seen.has(key)) {
+      seen.add(key);
+      diverse.push(element);
+      if (diverse.length >= maxElements) break;
+    }
+  }
+  return diverse.map(createNearbyElement);
+}
+var styles = {
+  popup: {
+    position: "fixed",
+    transform: "translateX(-50%)",
+    width: 280,
+    padding: "12px 16px 14px",
+    background: "#1a1a1a",
+    borderRadius: 16,
+    boxShadow: "0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08)",
+    cursor: "default",
+    zIndex: 100001,
+    fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    opacity: 0,
+    transition: "opacity 0.2s ease, transform 0.2s ease"
+  },
+  popupEnter: {
+    opacity: 1,
+    transform: "translateX(-50%) scale(1) translateY(0)"
+  },
+  popupExit: {
+    opacity: 0,
+    transform: "translateX(-50%) scale(0.95) translateY(4px)"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 9
+  },
+  element: {
+    fontSize: 12,
+    fontWeight: 400,
+    color: "rgba(255, 255, 255, 0.5)",
+    maxWidth: "100%",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    flex: 1
+  },
+  quote: {
+    fontSize: 12,
+    fontStyle: "italic",
+    color: "rgba(255, 255, 255, 0.6)",
+    marginBottom: 8,
+    padding: "6px 8px",
+    background: "rgba(255, 255, 255, 0.05)",
+    borderRadius: 4,
+    lineHeight: 1.45
+  },
+  textarea: {
+    width: "100%",
+    padding: "8px 10px",
+    fontSize: 13,
+    fontFamily: "inherit",
+    background: "rgba(255, 255, 255, 0.05)",
+    color: "#fff",
+    border: "1px solid rgba(255, 255, 255, 0.15)",
+    borderRadius: 8,
+    resize: "none",
+    outline: "none",
+    transition: "border-color 0.15s ease",
+    boxSizing: "border-box"
+  },
+  actions: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: 6,
+    marginTop: 8
+  },
+  button: {
+    padding: "6px 14px",
+    fontSize: 12,
+    fontWeight: 500,
+    borderRadius: 16,
+    border: "none",
+    cursor: "pointer",
+    transition: "background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease"
+  },
+  cancelButton: {
+    background: "transparent",
+    color: "rgba(255, 255, 255, 0.5)"
+  },
+  submitButton: {
+    color: "white"
+  }
+};
+var AnnotationPopup = forwardRef(
+  function AnnotationPopup2({
+    element,
+    selectedText,
+    placeholder = "What should change?",
+    initialValue = "",
+    submitLabel = "Add",
+    onSubmit,
+    onCancel,
+    style,
+    accentColor = "#3c82f7",
+    isExiting = false,
+    isMultiSelect = false
+  }, ref) {
+    const [text, setText] = useState(initialValue);
+    const [isShaking, setIsShaking] = useState(false);
+    const [animState, setAnimState] = useState("initial");
+    const [isFocused, setIsFocused] = useState(false);
+    const textareaRef = useRef(null);
+    const popupRef = useRef(null);
+    useEffect(() => {
+      if (isExiting && animState !== "exit") {
+        setAnimState("exit");
+      }
+    }, [isExiting, animState]);
+    useEffect(() => {
+      requestAnimationFrame(() => {
+        setAnimState("enter");
+      });
+      const enterTimer = setTimeout(() => {
+        setAnimState("entered");
+      }, 200);
+      const focusTimer = setTimeout(() => {
+        const textarea = textareaRef.current;
+        if (textarea) {
+          textarea.focus();
+          textarea.selectionStart = textarea.selectionEnd = textarea.value.length;
+          textarea.scrollTop = textarea.scrollHeight;
+        }
+      }, 50);
+      return () => {
+        clearTimeout(enterTimer);
+        clearTimeout(focusTimer);
+      };
+    }, []);
+    const shake = useCallback(() => {
+      setIsShaking(true);
+      setTimeout(() => {
+        setIsShaking(false);
+        textareaRef.current?.focus();
+      }, 250);
+    }, []);
+    useImperativeHandle(ref, () => ({
+      shake
+    }), [shake]);
+    const handleCancel = useCallback(() => {
+      setAnimState("exit");
+      setTimeout(() => {
+        onCancel();
+      }, 150);
+    }, [onCancel]);
+    const handleSubmit = useCallback(() => {
+      if (!text.trim()) return;
+      onSubmit(text.trim());
+    }, [text, onSubmit]);
+    const handleKeyDown = useCallback(
+      (e) => {
+        if (e.nativeEvent.isComposing) return;
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          handleSubmit();
+        }
+        if (e.key === "Escape") {
+          handleCancel();
+        }
+      },
+      [handleSubmit, handleCancel]
+    );
+    const popupStyle = {
+      ...styles.popup,
+      ...animState === "enter" || animState === "entered" ? styles.popupEnter : {},
+      ...animState === "exit" ? styles.popupExit : {},
+      ...isShaking ? {
+        animation: "skema-shake 0.25s ease-out"
+      } : {},
+      ...style
+    };
+    const textareaStyle = {
+      ...styles.textarea,
+      ...isFocused ? { borderColor: accentColor } : {}
+    };
+    const effectiveAccentColor = isMultiSelect ? "#34C759" : accentColor;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("style", { children: `
+          @keyframes skema-shake {
+            0%, 100% { transform: translateX(-50%) scale(1) translateY(0) translateX(0); }
+            20% { transform: translateX(-50%) scale(1) translateY(0) translateX(-3px); }
+            40% { transform: translateX(-50%) scale(1) translateY(0) translateX(3px); }
+            60% { transform: translateX(-50%) scale(1) translateY(0) translateX(-2px); }
+            80% { transform: translateX(-50%) scale(1) translateY(0) translateX(2px); }
+          }
+        ` }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: popupRef,
+          "data-skema": "annotation-popup",
+          style: popupStyle,
+          onClick: (e) => e.stopPropagation(),
+          onPointerDown: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx("div", { style: styles.header, children: /* @__PURE__ */ jsx("span", { style: styles.element, children: element }) }),
+            selectedText && /* @__PURE__ */ jsxs("div", { style: styles.quote, children: [
+              "\u201C",
+              selectedText.slice(0, 80),
+              selectedText.length > 80 ? "..." : "",
+              "\u201D"
+            ] }),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: textareaRef,
+                style: textareaStyle,
+                placeholder,
+                value: text,
+                onChange: (e) => setText(e.target.value),
+                onFocus: () => setIsFocused(true),
+                onBlur: () => setIsFocused(false),
+                rows: 2,
+                onKeyDown: handleKeyDown
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { style: styles.actions, children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  style: { ...styles.button, ...styles.cancelButton },
+                  onClick: handleCancel,
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.background = "rgba(255, 255, 255, 0.1)";
+                    e.currentTarget.style.color = "rgba(255, 255, 255, 0.8)";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.background = "transparent";
+                    e.currentTarget.style.color = "rgba(255, 255, 255, 0.5)";
+                  },
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  style: {
+                    ...styles.button,
+                    ...styles.submitButton,
+                    backgroundColor: effectiveAccentColor,
+                    opacity: text.trim() ? 1 : 0.4
+                  },
+                  onClick: handleSubmit,
+                  disabled: !text.trim(),
+                  onMouseEnter: (e) => {
+                    if (text.trim()) {
+                      e.currentTarget.style.filter = "brightness(0.9)";
+                    }
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.filter = "none";
+                  },
+                  children: submitLabel
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+);
+
+// src/lib/utils.ts
+async function blobToBase64(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      resolve(result);
+    };
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(blob);
+  });
+}
+function addGridToSvg(svgString, opts = {}) {
+  const { color = "#0066FF", size = 100, labels = true } = opts;
+  const viewBoxMatch = svgString.match(/viewBox="([^"]+)"/);
+  if (!viewBoxMatch) return svgString;
+  const [x, y, w, h] = viewBoxMatch[1].split(" ").map(Number);
+  const gridElements = [];
+  for (let i = 0; i <= Math.ceil(w / size); i++) {
+    const xPos = i * size;
+    if (i > 0) {
+      gridElements.push(
+        `<line x1="${xPos}" y1="0" x2="${xPos}" y2="${h}" stroke="${color}" stroke-width="1" stroke-opacity="0.5"/>`
+      );
+    }
+    if (labels) {
+      const colLabel = String.fromCharCode(65 + i);
+      gridElements.push(
+        `<text x="${xPos + size / 2}" y="16" fill="${color}" font-size="12" font-family="sans-serif" text-anchor="middle">${colLabel}</text>`
+      );
+    }
+  }
+  for (let i = 0; i <= Math.ceil(h / size); i++) {
+    const yPos = i * size;
+    gridElements.push(
+      `<line x1="0" y1="${yPos}" x2="${w}" y2="${yPos}" stroke="${color}" stroke-width="1" stroke-opacity="0.5"/>`
+    );
+    if (labels && i < Math.ceil(h / size)) {
+      gridElements.push(
+        `<text x="8" y="${yPos + size / 2 + 4}" fill="${color}" font-size="12" font-family="sans-serif">${i}</text>`
+      );
+    }
+  }
+  const gridGroup = `<g id="skema-grid" transform="translate(${x}, ${y})">${gridElements.join("")}</g>`;
+  return svgString.replace("</svg>", `${gridGroup}</svg>`);
+}
+function getGridCellReference(x, y, gridSize = 100) {
+  const col = Math.floor(x / gridSize);
+  const row = Math.floor(y / gridSize);
+  const colLabel = String.fromCharCode(65 + col);
+  return `${colLabel}${row}`;
+}
+function extractTextFromShapes(shapes) {
+  const textContent = [];
+  for (const shape of shapes) {
+    const s = shape;
+    if (s.type === "text" || s.type === "note") {
+      if (s.props?.text) {
+        textContent.push(s.props.text);
+      }
+      if (s.props?.richText && typeof s.props.richText === "object") {
+        const rt = s.props.richText;
+        if (rt.content) {
+          for (const block of rt.content) {
+            if (block.content) {
+              for (const inline of block.content) {
+                if (inline.text) {
+                  textContent.push(inline.text);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  return textContent.filter(Boolean).join("\n");
+}
+var AnnotationMarker = ({
+  annotation,
+  index,
+  scrollOffset,
+  onHover,
+  onClick,
+  isHovered,
+  accentColor = "#3b82f6"
+}) => {
+  let markerX;
+  let markerY;
+  if (annotation.type === "dom_selection") {
+    const sel = annotation;
+    markerX = sel.boundingBox.x + sel.boundingBox.width / 2;
+    markerY = sel.boundingBox.y;
+  } else if (annotation.type === "drawing") {
+    markerX = annotation.boundingBox.x + annotation.boundingBox.width / 2;
+    markerY = annotation.boundingBox.y;
+  } else {
+    markerX = annotation.boundingBox.x + annotation.boundingBox.width / 2;
+    markerY = annotation.boundingBox.y;
+  }
+  const viewportX = markerX - scrollOffset.x;
+  const viewportY = markerY - scrollOffset.y - 12;
+  const isDrawing = annotation.type === "drawing";
+  const markerColor = isDrawing ? "#8B5CF6" : accentColor;
+  const comment = annotation.type === "dom_selection" ? annotation.comment : void 0;
+  const elementName = annotation.type === "dom_selection" ? annotation.tagName : "Drawing";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-skema": "annotation-marker",
+      style: {
+        position: "fixed",
+        left: viewportX,
+        top: viewportY,
+        transform: "translate(-50%, -100%)",
+        zIndex: 999998,
+        pointerEvents: "auto"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: isHovered ? 26 : 22,
+              height: isHovered ? 26 : 22,
+              borderRadius: "50%",
+              backgroundColor: isHovered ? "#ef4444" : markerColor,
+              color: "white",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 11,
+              fontWeight: 600,
+              fontFamily: "system-ui, -apple-system, sans-serif",
+              cursor: "pointer",
+              boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
+              transition: "all 0.15s ease",
+              userSelect: "none"
+            },
+            onMouseEnter: () => onHover(annotation.id),
+            onMouseLeave: () => onHover(null),
+            onClick: (e) => {
+              e.stopPropagation();
+              onClick(annotation);
+            },
+            children: isHovered ? "\xD7" : index + 1
+          }
+        ),
+        isHovered && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: "50%",
+              bottom: "100%",
+              transform: "translateX(-50%)",
+              marginBottom: 8,
+              padding: "8px 12px",
+              backgroundColor: "#1a1a1a",
+              borderRadius: 8,
+              boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+              whiteSpace: "nowrap",
+              maxWidth: 200,
+              zIndex: 999999
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { style: {
+                fontSize: 11,
+                color: "rgba(255,255,255,0.6)",
+                marginBottom: comment ? 4 : 0
+              }, children: elementName }),
+              comment && /* @__PURE__ */ jsx("div", { style: {
+                fontSize: 12,
+                color: "white",
+                whiteSpace: "normal",
+                wordBreak: "break-word"
+              }, children: comment.length > 50 ? comment.slice(0, 50) + "..." : comment }),
+              /* @__PURE__ */ jsx("div", { style: {
+                fontSize: 10,
+                color: "rgba(255,255,255,0.4)",
+                marginTop: 4
+              }, children: "Click to delete" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var AnnotationMarkersLayer = ({ annotations, scrollOffset, hoveredMarkerId, onHover, onDelete }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: annotations.map((annotation, index) => /* @__PURE__ */ jsx(
+    AnnotationMarker,
+    {
+      annotation,
+      index,
+      scrollOffset,
+      onHover,
+      onClick: onDelete,
+      isHovered: hoveredMarkerId === annotation.id
+    },
+    annotation.id
+  )) });
+};
+var SelectIcon = ({ isSelected }) => /* @__PURE__ */ jsxs("svg", { width: "42", height: "42", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M11.268 3C12.0378 1.6667 13.9623 1.6667 14.7321 3L25.1244 21C25.8942 22.3333 24.9319 24 23.3923 24H2.6077C1.0681 24 0.1058 22.3333 0.8756 21L11.268 3Z",
+      fill: "#F24E1E",
+      opacity: isSelected ? 1 : 0.7
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M9 10L9 18.5L11.5 16L14 20L15.5 19L13 15L16 14.5L9 10Z",
+      fill: "white"
+    }
+  )
+] });
+var DrawIcon = ({ isSelected }) => /* @__PURE__ */ jsxs("svg", { width: "42", height: "42", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx("rect", { width: "25", height: "25", rx: "2", fill: isSelected ? "#00C851" : "#00C851", opacity: isSelected ? 1 : 0.7 }),
+  /* @__PURE__ */ jsx("g", { transform: "translate(12.5, 12.5) scale(1.4) translate(-12.5, -12.5)", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M13.6919 10.2852L14.2593 9.6908L14.8282 10.2864L14.2605 10.8808L13.6919 10.2852ZM9.5682 15.7944L8.9992 15.1988L13.1233 10.8808L13.6919 11.476L9.5682 15.7944ZM14.3284 8.5L8 15.1988V16.5H9.5682L16 10.0436L14.3284 8.5Z",
+      fill: "white"
+    }
+  ) })
+] });
+var LassoIcon = ({ isSelected }) => /* @__PURE__ */ jsxs("svg", { width: "42", height: "42", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx("rect", { width: "25", height: "25", rx: "12.5", fill: isSelected ? "#2C7FFF" : "#2C7FFF", opacity: isSelected ? 1 : 0.7 }),
+  /* @__PURE__ */ jsx("g", { transform: "translate(12.5, 12.5) scale(1.4) translate(-12.5, -12.5)", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M9.219 11.3C9.219 10.8021 9.504 10.3117 10.043 9.9297C10.582 9.5484 11.347 9.3 12.211 9.3C13.074 9.3 13.839 9.5484 14.378 9.9297C14.918 10.3117 15.202 10.8021 15.202 11.3C15.202 11.7979 14.918 12.2882 14.378 12.6702C13.839 13.0515 13.074 13.2999 12.211 13.2999C12.005 13.2999 11.805 13.2859 11.612 13.2591C11.586 12.5417 10.887 12.0999 10.216 12.0999C9.988 12.0999 9.768 12.147 9.572 12.234C9.339 11.9444 9.219 11.625 9.219 11.3ZM12.211 14.0999C11.908 14.0999 11.614 14.074 11.331 14.0249C11.298 14.0629 11.262 14.0988 11.224 14.1325C11.226 14.154 11.228 14.1774 11.229 14.2026C11.232 14.3182 11.216 14.4769 11.137 14.6456C10.97 15.0066 10.586 15.2824 9.919 15.3874C9.091 15.5175 8.878 15.7607 8.827 15.8497C8.8 15.8961 8.797 15.9328 8.798 15.9542C8.798 15.9629 8.799 15.9695 8.8 15.973C8.805 15.9901 8.81 16.0079 8.813 16.026C8.833 16.1321 8.809 16.2395 8.751 16.3254C8.718 16.3733 8.675 16.4145 8.623 16.445C8.584 16.4681 8.54 16.4847 8.494 16.4932C8.447 16.502 8.4 16.5021 8.355 16.4944C8.296 16.4846 8.242 16.4619 8.195 16.4294C8.148 16.3972 8.108 16.3549 8.078 16.304C8.063 16.278 8.05 16.2501 8.041 16.2208C8.04 16.217 8.038 16.2128 8.037 16.2083C8.032 16.1931 8.027 16.1741 8.022 16.1517C8.012 16.1071 8.002 16.0477 8 15.977C7.996 15.8338 8.023 15.6452 8.136 15.4492C8.365 15.0533 8.87 14.7426 9.795 14.5971C9.958 14.5714 10.079 14.5362 10.167 14.4992C9.499 14.478 8.82 14.0237 8.82 13.2999C8.82 13.0999 8.876 12.9166 8.969 12.758C8.629 12.344 8.421 11.8466 8.421 11.3C8.421 10.4724 8.896 9.7627 9.583 9.2761C10.272 8.7888 11.202 8.5 12.211 8.5C13.219 8.5 14.15 8.7888 14.838 9.2761C15.526 9.7627 16 10.4724 16 11.3C16 12.1275 15.526 12.8372 14.838 13.3238C14.15 13.8111 13.219 14.0999 12.211 14.0999ZM9.754 13.0514C9.859 12.9649 10.021 12.8999 10.216 12.8999C10.634 12.8999 10.815 13.1577 10.815 13.2999C10.815 13.3371 10.806 13.3739 10.789 13.4108C10.757 13.4794 10.69 13.5552 10.58 13.6136C10.482 13.666 10.357 13.6999 10.216 13.6999C9.798 13.6999 9.618 13.4422 9.618 13.2999C9.618 13.2236 9.655 13.1338 9.754 13.0514Z",
+      fill: "white"
+    }
+  ) })
+] });
+var EraseIcon = ({ isSelected }) => /* @__PURE__ */ jsxs("svg", { width: "50", height: "42", viewBox: "0 0 30 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M0.308 1.2407C0.151 0.61 0.628 0 1.278 0H23.664C24.118 0 24.516 0.3065 24.631 0.746L30.671 23.746C30.837 24.38 30.359 25 29.704 25H6.982C6.523 25 6.122 24.6868 6.012 24.2407L0.308 1.2407Z",
+      fill: "#FFBA00",
+      opacity: isSelected ? 1 : 0.7
+    }
+  ),
+  /* @__PURE__ */ jsx("g", { transform: "translate(15, 12.5)", children: /* @__PURE__ */ jsxs("g", { transform: "rotate(-45)", children: [
+    /* @__PURE__ */ jsx("rect", { x: "-6", y: "-3", width: "12", height: "6", rx: "1", fill: "none", stroke: "white", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "-2", y1: "-3", x2: "-2", y2: "3", stroke: "white", strokeWidth: "1.5" })
+  ] }) })
+] });
+var StarIcon = ({ isSelected }) => /* @__PURE__ */ jsxs("svg", { width: "42", height: "42", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M12.253 0.8403C12.65 0.393 13.35 0.393 13.747 0.8403L16.628 4.0796C16.805 4.2791 17.055 4.3993 17.321 4.4136L21.65 4.6461C22.248 4.6782 22.684 5.2247 22.582 5.8146L21.845 10.0863C21.8 10.3493 21.862 10.6196 22.017 10.8369L24.534 14.366C24.881 14.8533 24.726 15.5348 24.201 15.8231L20.402 17.9105C20.168 18.0391 19.995 18.2558 19.922 18.5125L18.732 22.6808C18.568 23.2564 17.938 23.5596 17.386 23.3292L13.385 21.6606C13.139 21.5578 12.861 21.5578 12.615 21.6606L8.614 23.3292C8.062 23.5596 7.432 23.2564 7.268 22.6808L6.078 18.5125C6.005 18.2558 5.832 18.0391 5.598 17.9105L1.799 15.8231C1.274 15.5348 1.119 14.8533 1.466 14.366L3.983 10.8369C4.138 10.6196 4.2 10.3493 4.155 10.0863L3.418 5.8146C3.316 5.2247 3.752 4.6782 4.35 4.6461L8.679 4.4136C8.945 4.3993 9.195 4.2791 9.372 4.0796L12.253 0.8403Z",
+      fill: "#FF6800",
+      opacity: isSelected ? 1 : 0.7
+    }
+  ),
+  /* @__PURE__ */ jsx("g", { transform: "translate(6.5, 6) scale(0.5)", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M23.546 10.93L13.067 0.452c-0.604-0.603-1.582-0.603-2.188 0L8.708 2.627l2.76 2.76c0.645-0.215 1.379-0.07 1.889 0.441 0.516 0.516 0.658 1.258 0.438 1.9l2.658 2.66c0.645-0.223 1.387-0.078 1.9 0.435 0.721 0.72 0.721 1.884 0 2.604-0.719 0.719-1.881 0.719-2.6 0-0.539-0.541-0.674-1.337-0.404-1.996L12.86 8.955v6.525c0.176 0.086 0.342 0.203 0.488 0.348 0.713 0.721 0.713 1.883 0 2.6-0.719 0.721-1.889 0.721-2.609 0-0.719-0.719-0.719-1.879 0-2.598 0.182-0.18 0.387-0.316 0.605-0.406V8.835c-0.217-0.091-0.424-0.222-0.6-0.401-0.545-0.545-0.676-1.342-0.396-2.009L7.636 3.7 0.45 10.881c-0.6 0.605-0.6 1.584 0 2.189l10.48 10.477c0.604 0.604 1.582 0.604 2.186 0l10.43-10.43c0.605-0.603 0.605-1.582 0-2.187",
+      fill: "white"
+    }
+  ) })
+] });
+var ToolbarButton = ({ onClick, isSelected, icon, label }) => {
+  const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onClick();
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: handleClick,
+      title: label,
+      type: "button",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 56,
+        height: 56,
+        border: "none",
+        borderRadius: 11,
+        backgroundColor: isSelected ? "rgba(255,255,255,0.15)" : "transparent",
+        cursor: "pointer",
+        transition: "background-color 0.15s ease",
+        pointerEvents: "auto"
+      },
+      children: icon
+    }
+  );
+};
+var SkemaToolbar = () => {
+  const editor = useEditor();
+  const tools = useTools();
+  const isSelectSelected = useIsToolSelected(tools["select"]);
+  const isDrawSelected = useIsToolSelected(tools["draw"]);
+  const isLassoSelected = useIsToolSelected(tools["lasso-select"]);
+  const isEraseSelected = useIsToolSelected(tools["eraser"]);
+  const [isStarSelected] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-skema": "toolbar",
+      style: {
+        position: "absolute",
+        bottom: 16,
+        left: "50%",
+        transform: "translateX(-50%)",
+        display: "flex",
+        alignItems: "center",
+        gap: 11,
+        padding: "11px 17px",
+        backgroundColor: "white",
+        borderRadius: 36,
+        boxShadow: "0 2px 10px rgba(0,0,0,0.15)",
+        pointerEvents: "auto",
+        zIndex: 99999
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            onClick: () => editor.setCurrentTool("select"),
+            isSelected: isSelectSelected,
+            icon: /* @__PURE__ */ jsx(SelectIcon, { isSelected: isSelectSelected }),
+            label: "Select (V)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            onClick: () => editor.setCurrentTool("lasso-select"),
+            isSelected: isLassoSelected,
+            icon: /* @__PURE__ */ jsx(LassoIcon, { isSelected: isLassoSelected }),
+            label: "Lasso Select (L)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            onClick: () => editor.setCurrentTool("draw"),
+            isSelected: isDrawSelected,
+            icon: /* @__PURE__ */ jsx(DrawIcon, { isSelected: isDrawSelected }),
+            label: "Draw (D)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            onClick: () => editor.setCurrentTool("eraser"),
+            isSelected: isEraseSelected,
+            icon: /* @__PURE__ */ jsx(EraseIcon, { isSelected: isEraseSelected }),
+            label: "Eraser (E)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: 3,
+              height: 36,
+              backgroundColor: "#C4C2C2",
+              borderRadius: 1.5,
+              margin: "0 6px"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            onClick: () => {
+              console.log("Star button clicked - placeholder for future feature");
+            },
+            isSelected: isStarSelected,
+            icon: /* @__PURE__ */ jsx(StarIcon, { isSelected: isStarSelected }),
+            label: "Special (Coming Soon)"
+          }
+        )
+      ]
+    }
+  );
+};
+var LassoOverlay = () => {
+  const editor = useEditor();
+  const lassoPoints = useValue(
+    "lasso points",
+    () => {
+      if (!editor.isIn("lasso-select.lassoing")) return [];
+      const lassoing = editor.getStateDescendant("lasso-select.lassoing");
+      return lassoing?.points?.get() ?? [];
+    },
+    [editor]
+  );
+  const svgPath = useMemo(() => {
+    if (lassoPoints.length < 2) return "";
+    let path = `M ${lassoPoints[0].x} ${lassoPoints[0].y}`;
+    for (let i = 1; i < lassoPoints.length; i++) {
+      path += ` L ${lassoPoints[i].x} ${lassoPoints[i].y}`;
+    }
+    path += " Z";
+    return path;
+  }, [lassoPoints]);
+  if (lassoPoints.length === 0) return null;
+  return /* @__PURE__ */ jsx("svg", { className: "tl-overlays__item", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: svgPath,
+      fill: "none",
+      stroke: "rgba(59, 130, 246, 1)",
+      strokeWidth: "calc(2px / var(--tl-zoom))",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeDasharray: "4 4"
+    }
+  ) });
+};
+var SkemaOverlays = () => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(TldrawOverlays, {}),
+    /* @__PURE__ */ jsx(LassoOverlay, {})
+  ] });
+};
+var SelectionOverlay = ({ selections }) => {
+  const [scrollPos, setScrollPos] = useState({ x: 0, y: 0 });
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrollPos({ x: window.scrollX, y: window.scrollY });
+    };
+    handleScroll();
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+  return /* @__PURE__ */ jsx(Fragment, { children: selections.map((selection) => {
+    const viewportX = selection.boundingBox.x - scrollPos.x;
+    const viewportY = selection.boundingBox.y - scrollPos.y;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-skema": "selection",
+        style: {
+          position: "fixed",
+          left: viewportX,
+          top: viewportY,
+          width: selection.boundingBox.width,
+          height: selection.boundingBox.height,
+          border: "2px solid #10b981",
+          backgroundColor: "rgba(16, 185, 129, 0.1)",
+          pointerEvents: "none",
+          zIndex: 999997
+        },
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              top: -20,
+              left: 0,
+              backgroundColor: "#10b981",
+              color: "white",
+              padding: "2px 6px",
+              fontSize: "11px",
+              borderRadius: "3px",
+              whiteSpace: "nowrap"
+            },
+            children: selection.tagName
+          }
+        )
+      },
+      selection.id
+    );
+  }) });
+};
+var AnnotationsSidebar = ({ annotations, onClear, onExport }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-skema": "sidebar",
+      style: {
+        position: "fixed",
+        right: isOpen ? 0 : -280,
+        top: 60,
+        width: 280,
+        maxHeight: "calc(100vh - 120px)",
+        backgroundColor: "white",
+        borderRadius: "8px 0 0 8px",
+        boxShadow: "-2px 0 10px rgba(0,0,0,0.1)",
+        transition: "right 0.2s ease-out",
+        zIndex: 999996,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setIsOpen(!isOpen),
+            style: {
+              position: "absolute",
+              left: -32,
+              top: 10,
+              width: 32,
+              height: 32,
+              backgroundColor: "#3b82f6",
+              border: "none",
+              borderRadius: "8px 0 0 8px",
+              color: "white",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: isOpen ? "\u2192" : "\u2190"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "12px 16px",
+              borderBottom: "1px solid #e5e7eb",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600, fontSize: "14px" }, children: [
+                "Annotations (",
+                annotations.length,
+                ")"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: onExport,
+                    style: {
+                      padding: "4px 8px",
+                      fontSize: "12px",
+                      backgroundColor: "#3b82f6",
+                      color: "white",
+                      border: "none",
+                      borderRadius: "4px",
+                      cursor: "pointer"
+                    },
+                    children: "Export"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: onClear,
+                    style: {
+                      padding: "4px 8px",
+                      fontSize: "12px",
+                      backgroundColor: "#ef4444",
+                      color: "white",
+                      border: "none",
+                      borderRadius: "4px",
+                      cursor: "pointer"
+                    },
+                    children: "Clear"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { overflowY: "auto", maxHeight: "calc(100vh - 200px)" }, children: annotations.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: "16px", color: "#6b7280", fontSize: "13px" }, children: "No annotations yet. Use the DOM picker or drawing tools to annotate." }) : annotations.map((annotation) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "12px 16px",
+              borderBottom: "1px solid #f3f4f6",
+              fontSize: "13px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { fontWeight: 500, marginBottom: "4px" }, children: [
+                annotation.type === "dom_selection" && `\u{1F3AF} ${annotation.tagName}`,
+                annotation.type === "drawing" && `\u270F\uFE0F ${annotation.comment || "Drawing"}`,
+                annotation.type === "gesture" && `\u{1F446} ${annotation.gesture}`
+              ] }),
+              annotation.type === "dom_selection" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                annotation.comment && /* @__PURE__ */ jsx("div", { style: { color: "#374151", fontSize: "12px", marginBottom: "4px" }, children: annotation.comment }),
+                /* @__PURE__ */ jsx("div", { style: { color: "#6b7280", fontSize: "11px" }, children: annotation.selector.slice(0, 50) })
+              ] })
+            ]
+          },
+          annotation.id
+        )) })
+      ]
+    }
+  );
+};
+var Skema = ({
+  enabled = true,
+  onAnnotationsChange,
+  onAnnotationSubmit,
+  onAnnotationDelete,
+  toggleShortcut = "mod+shift+e",
+  initialAnnotations = [],
+  zIndex = 99999
+}) => {
+  const [isActive, setIsActive] = useState(enabled);
+  const [annotations, setAnnotations] = useState(initialAnnotations);
+  const [domSelections, setDomSelections] = useState([]);
+  const [pendingAnnotation, setPendingAnnotation] = useState(null);
+  const [pendingExiting, setPendingExiting] = useState(false);
+  const [hoveredMarkerId, setHoveredMarkerId] = useState(null);
+  const editorRef = useRef(null);
+  const popupRef = useRef(null);
+  const lastDoubleClickRef = useRef(0);
+  useRef(false);
+  const cleanupRef = useRef(null);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      const isMod = e.metaKey || e.ctrlKey;
+      if (isMod && e.shiftKey && e.key.toLowerCase() === "e") {
+        e.preventDefault();
+        setIsActive((prev) => !prev);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+  const [scrollOffset, setScrollOffset] = useState({ x: 0, y: 0 });
+  useEffect(() => {
+    if (!isActive) return;
+    const syncScroll = () => {
+      const newOffset = { x: window.scrollX, y: window.scrollY };
+      setScrollOffset(newOffset);
+      if (editorRef.current) {
+        editorRef.current.setCamera({ x: -newOffset.x, y: -newOffset.y, z: 1 });
+      }
+    };
+    syncScroll();
+    window.addEventListener("scroll", syncScroll, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", syncScroll);
+    };
+  }, [isActive]);
+  useEffect(() => {
+    if (!isActive) return;
+    const handleWheel = (e) => {
+      const target = e.target;
+      if (target.closest(".tl-container") || target.closest('[data-skema="container"]')) {
+        e.stopPropagation();
+        window.scrollBy({
+          top: e.deltaY,
+          left: e.deltaX,
+          behavior: "auto"
+        });
+      }
+    };
+    document.addEventListener("wheel", handleWheel, { capture: true, passive: false });
+    return () => {
+      document.removeEventListener("wheel", handleWheel, { capture: true });
+    };
+  }, [isActive]);
+  useEffect(() => {
+    onAnnotationsChange?.(annotations);
+  }, [annotations, onAnnotationsChange]);
+  const getSelectedDrawings = useCallback(() => {
+    if (!editorRef.current) return [];
+    const editor = editorRef.current;
+    const selectedIds = editor.getSelectedShapeIds();
+    const shapes = selectedIds.map((id) => editor.getShape(id)).filter(Boolean);
+    return shapes.filter(
+      (shape) => shape && ["draw", "line", "arrow", "geo", "text", "note"].includes(shape.type)
+    );
+  }, []);
+  const handleDOMSelect = useCallback((selection) => {
+    const selectedDrawings = getSelectedDrawings();
+    const hasDrawings = selectedDrawings.length > 0;
+    const rect = selection.boundingBox;
+    const x = (rect.x + rect.width / 2) / window.innerWidth * 100;
+    const clientY = rect.y - window.scrollY + rect.height / 2;
+    let elementDesc = selection.tagName;
+    if (hasDrawings) {
+      elementDesc = `Drawing + ${selection.tagName}`;
+    }
+    setPendingAnnotation({
+      x,
+      y: rect.y + rect.height / 2,
+      clientY,
+      element: elementDesc,
+      elementPath: selection.elementPath,
+      selectedText: selection.text?.slice(0, 100),
+      boundingBox: rect,
+      isMultiSelect: hasDrawings,
+      selections: [selection],
+      annotationType: hasDrawings ? "drawing" : "dom_selection",
+      shapeIds: hasDrawings ? editorRef.current?.getSelectedShapeIds() : void 0
+    });
+  }, [getSelectedDrawings]);
+  const handleMultiDOMSelect = useCallback((selections) => {
+    if (selections.length === 0) return;
+    const selectedDrawings = getSelectedDrawings();
+    const hasDrawings = selectedDrawings.length > 0;
+    const minX = Math.min(...selections.map((s) => s.boundingBox.x));
+    const minY = Math.min(...selections.map((s) => s.boundingBox.y));
+    const maxX = Math.max(...selections.map((s) => s.boundingBox.x + s.boundingBox.width));
+    const maxY = Math.max(...selections.map((s) => s.boundingBox.y + s.boundingBox.height));
+    const combinedBounds = {
+      x: minX,
+      y: minY,
+      width: maxX - minX,
+      height: maxY - minY
+    };
+    const centerX = minX + (maxX - minX) / 2;
+    const centerY = minY + (maxY - minY) / 2;
+    const x = centerX / window.innerWidth * 100;
+    const clientY = centerY - window.scrollY;
+    const elementNames = selections.slice(0, 3).map((s) => s.tagName).join(", ");
+    const suffix = selections.length > 3 ? ` +${selections.length - 3} more` : "";
+    let element = `${selections.length} elements: ${elementNames}${suffix}`;
+    if (hasDrawings) {
+      const drawingCount = selectedDrawings.length;
+      element = `Drawing (${drawingCount}) + ${element}`;
+    }
+    setPendingAnnotation({
+      x,
+      y: centerY,
+      clientY,
+      element,
+      elementPath: "multi-select",
+      boundingBox: combinedBounds,
+      isMultiSelect: true,
+      selections,
+      annotationType: hasDrawings ? "drawing" : "dom_selection",
+      shapeIds: hasDrawings ? editorRef.current?.getSelectedShapeIds() : void 0
+    });
+  }, [getSelectedDrawings]);
+  const handleAnnotationSubmit = useCallback(async (comment) => {
+    if (!pendingAnnotation) return;
+    if (pendingAnnotation.annotationType === "dom_selection" && pendingAnnotation.selections) {
+      const selections = pendingAnnotation.selections;
+      if (selections.length === 1) {
+        const selection = { ...selections[0], comment };
+        setDomSelections((prev) => [...prev, selection]);
+        setAnnotations((prev) => [...prev, { type: "dom_selection", ...selection }]);
+      } else {
+        const groupedSelection = {
+          id: `group-${Date.now()}`,
+          selector: selections.map((s) => s.selector).join(", "),
+          tagName: pendingAnnotation.element,
+          // Already formatted as "3 elements: div, span, p"
+          elementPath: selections[0].elementPath,
+          // Use first element's path as reference
+          text: selections.map((s) => s.text).filter(Boolean).join(" | ").slice(0, 200),
+          boundingBox: pendingAnnotation.boundingBox,
+          timestamp: Date.now(),
+          pathname: selections[0].pathname,
+          comment,
+          isMultiSelect: true,
+          elements: selections.map((s) => ({
+            selector: s.selector,
+            tagName: s.tagName,
+            elementPath: s.elementPath,
+            text: s.text,
+            boundingBox: s.boundingBox,
+            cssClasses: s.cssClasses,
+            attributes: s.attributes
+          }))
+        };
+        setDomSelections((prev) => [...prev, groupedSelection]);
+        setAnnotations((prev) => [...prev, { type: "dom_selection", ...groupedSelection }]);
+      }
+    } else if (pendingAnnotation.annotationType === "drawing" && pendingAnnotation.shapeIds) {
+      const bbox = pendingAnnotation.boundingBox;
+      const nearbyElements = pendingAnnotation.selections?.map((s) => ({
+        selector: s.selector,
+        tagName: s.tagName,
+        text: s.text?.slice(0, 100)
+      })) || [];
+      const drawingAnnotation = {
+        id: `drawing-${Date.now()}`,
+        type: "drawing",
+        tool: "draw",
+        shapes: pendingAnnotation.shapeIds,
+        boundingBox: bbox,
+        timestamp: Date.now(),
+        comment,
+        nearbyElements
+      };
+      setAnnotations((prev) => [...prev, drawingAnnotation]);
+      const drawingLog = `
+### ${annotations.length + 1}. Drawing (${pendingAnnotation.shapeIds?.length || 0} shapes)
+**Position:** x:${Math.round(bbox.x)}, y:${Math.round(bbox.y)} (${Math.round(bbox.width)}\xD7${Math.round(bbox.height)}px)
+**Annotation at:** ${((bbox.x + bbox.width / 2) / window.innerWidth * 100).toFixed(1)}% from left, ${Math.round(bbox.y + bbox.height / 2)}px from top
+**Shape IDs:** ${pendingAnnotation.shapeIds?.join(", ") || "none"}
+**Nearby Elements:** ${nearbyElements.map((e) => e.tagName).join(", ") || "none"}
+**Feedback:** ${comment}
+`;
+      console.log(drawingLog);
+    }
+    if (pendingAnnotation.annotationType === "dom_selection" && pendingAnnotation.selections) {
+      const selections = pendingAnnotation.selections;
+      const annotationIndex = annotations.length + 1;
+      const elementDescs = selections.map((s) => {
+        const textPreview = s.text?.slice(0, 50) || "";
+        return `${s.tagName.toLowerCase()}${textPreview ? `: "${textPreview}..."` : ""}`;
+      }).join(", ");
+      const firstSelection = selections[0];
+      const firstElement = document.querySelector(firstSelection.selector);
+      let computedStylesStr = "N/A";
+      let nearbyElements = "N/A";
+      if (firstElement) {
+        const styles2 = window.getComputedStyle(firstElement);
+        computedStylesStr = [
+          `color: ${styles2.color}`,
+          `border-color: ${styles2.borderColor}`,
+          `font-size: ${styles2.fontSize}`,
+          `font-weight: ${styles2.fontWeight}`,
+          `font-family: ${styles2.fontFamily}`,
+          `line-height: ${styles2.lineHeight}`,
+          `letter-spacing: ${styles2.letterSpacing}`,
+          `text-align: ${styles2.textAlign}`,
+          `width: ${styles2.width}`,
+          `height: ${styles2.height}`,
+          `border: ${styles2.border}`,
+          `display: ${styles2.display}`,
+          `flex-direction: ${styles2.flexDirection}`,
+          `opacity: ${styles2.opacity}`
+        ].join("; ");
+        const parent = firstElement.parentElement;
+        if (parent) {
+          const siblings = Array.from(parent.children).filter((el) => el !== firstElement).slice(0, 3).map((el) => el.tagName.toLowerCase());
+          nearbyElements = siblings.length > 0 ? siblings.join(", ") : "none";
+        }
+      }
+      const bbox = pendingAnnotation.boundingBox;
+      const forensicLog = `
+### ${annotationIndex}. ${selections.length > 1 ? `${selections.length} elements: ` : ""}${elementDescs}
+${selections.length > 1 ? "*Forensic data shown for first element of selection*\n" : ""}**Full DOM Path:** ${firstSelection.elementPath}
+**Position:** x:${Math.round(bbox.x)}, y:${Math.round(bbox.y)} (${Math.round(bbox.width)}\xD7${Math.round(bbox.height)}px)
+**Annotation at:** ${((bbox.x + bbox.width / 2) / window.innerWidth * 100).toFixed(1)}% from left, ${Math.round(bbox.y + bbox.height / 2)}px from top
+**Computed Styles:** ${computedStylesStr}
+**Nearby Elements:** ${nearbyElements}
+**Feedback:** ${comment}
+`;
+      console.log(forensicLog);
+    }
+    if (onAnnotationSubmit) {
+      let submittedAnnotation;
+      if (pendingAnnotation.annotationType === "dom_selection" && pendingAnnotation.selections) {
+        const selections = pendingAnnotation.selections;
+        if (selections.length === 1) {
+          submittedAnnotation = { type: "dom_selection", ...selections[0], comment };
+        } else {
+          submittedAnnotation = {
+            type: "dom_selection",
+            id: `group-${Date.now()}`,
+            selector: selections.map((s) => s.selector).join(", "),
+            tagName: pendingAnnotation.element,
+            elementPath: selections[0].elementPath,
+            text: selections.map((s) => s.text).filter(Boolean).join(" | ").slice(0, 200),
+            boundingBox: pendingAnnotation.boundingBox,
+            timestamp: Date.now(),
+            pathname: selections[0].pathname,
+            comment,
+            isMultiSelect: true,
+            elements: selections.map((s) => ({
+              selector: s.selector,
+              tagName: s.tagName,
+              elementPath: s.elementPath,
+              text: s.text,
+              boundingBox: s.boundingBox,
+              cssClasses: s.cssClasses,
+              attributes: s.attributes
+            }))
+          };
+        }
+      } else {
+        const editor = editorRef.current;
+        let drawingSvg;
+        let drawingImage;
+        let extractedText;
+        const gridConfig = { color: "#0066FF", size: 100, labels: true };
+        console.log("[Skema] Drawing annotation - shapeIds:", pendingAnnotation.shapeIds);
+        if (editor && pendingAnnotation.shapeIds && pendingAnnotation.shapeIds.length > 0) {
+          const shapeIds = pendingAnnotation.shapeIds;
+          console.log("[Skema] Exporting", shapeIds.length, "shapes for image...");
+          try {
+            const svgResult = await editor.getSvgString(shapeIds, {
+              padding: 20,
+              background: false
+            });
+            if (svgResult?.svg) {
+              drawingSvg = addGridToSvg(svgResult.svg, gridConfig);
+              console.log("[Skema] SVG export successful");
+            }
+          } catch (e) {
+            console.warn("[Skema] Failed to export drawing SVG:", e);
+          }
+          try {
+            const imageResult = await editor.toImage(shapeIds, {
+              format: "png",
+              padding: 20,
+              background: true
+            });
+            console.log("[Skema] toImage result:", imageResult ? "got result" : "null", imageResult?.blob ? "has blob" : "no blob");
+            if (imageResult?.blob) {
+              drawingImage = await blobToBase64(imageResult.blob);
+              console.log("[Skema] Image export successful, base64 length:", drawingImage?.length);
+            }
+          } catch (e) {
+            console.warn("[Skema] Failed to export drawing image:", e);
+          }
+          try {
+            const shapes = shapeIds.map((id) => editor.getShape(id)).filter(Boolean);
+            extractedText = extractTextFromShapes(shapes);
+          } catch (e) {
+            console.warn("[Skema] Failed to extract text from shapes:", e);
+          }
+        }
+        const nearbyElements = pendingAnnotation.boundingBox ? findNearbyElementsWithStyles(pendingAnnotation.boundingBox, 5) : [];
+        const projectStyles = extractProjectStyleContext();
+        const viewport = getViewportInfo();
+        submittedAnnotation = {
+          id: `drawing-${Date.now()}`,
+          type: "drawing",
+          tool: "draw",
+          shapes: pendingAnnotation.shapeIds || [],
+          boundingBox: pendingAnnotation.boundingBox,
+          timestamp: Date.now(),
+          comment,
+          drawingSvg,
+          drawingImage,
+          extractedText: extractedText || void 0,
+          gridConfig,
+          nearbyElements,
+          viewport,
+          projectStyles
+        };
+      }
+      onAnnotationSubmit(submittedAnnotation, comment);
+    }
+    setPendingExiting(true);
+    setTimeout(() => {
+      setPendingAnnotation(null);
+      setPendingExiting(false);
+    }, 150);
+  }, [pendingAnnotation, onAnnotationSubmit]);
+  const handleAnnotationCancel = useCallback(() => {
+    setPendingExiting(true);
+    setTimeout(() => {
+      setPendingAnnotation(null);
+      setPendingExiting(false);
+    }, 150);
+  }, []);
+  const handleDeleteAnnotation = useCallback((annotation) => {
+    setAnnotations((prev) => prev.filter((a) => a.id !== annotation.id));
+    if (annotation.type === "dom_selection") {
+      setDomSelections((prev) => prev.filter((s) => s.id !== annotation.id));
+    }
+    setHoveredMarkerId(null);
+    onAnnotationDelete?.(annotation.id);
+  }, [onAnnotationDelete]);
+  const handleClear = useCallback(() => {
+    setAnnotations([]);
+    setDomSelections([]);
+    if (editorRef.current) {
+      editorRef.current.selectAll();
+      editorRef.current.deleteShapes(editorRef.current.getSelectedShapeIds());
+    }
+  }, []);
+  const handleExport = useCallback(() => {
+    const exportData = {
+      version: "1.0.0",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      viewport: getViewportInfo(),
+      pathname: window.location.pathname,
+      annotations
+    };
+    navigator.clipboard.writeText(JSON.stringify(exportData, null, 2));
+    console.log("[Skema] Exported annotations:", exportData);
+    alert("Annotations copied to clipboard!");
+  }, [annotations]);
+  const findDOMElementsInBounds = useCallback((bounds) => {
+    const elements = [];
+    const allElements = document.querySelectorAll("*");
+    allElements.forEach((el) => {
+      if (!(el instanceof HTMLElement)) return;
+      if (shouldIgnoreElement(el)) return;
+      const rect = el.getBoundingClientRect();
+      const elBounds = {
+        x: rect.left,
+        y: rect.top,
+        width: rect.width,
+        height: rect.height
+      };
+      if (elBounds.width < 10 || elBounds.height < 10) return;
+      if (bboxIntersects(bounds, elBounds)) {
+        const isParent = elements.some((existing) => el.contains(existing));
+        if (!isParent) {
+          const filtered = elements.filter((existing) => !existing.contains(el) && !el.contains(existing));
+          filtered.push(el);
+          elements.length = 0;
+          elements.push(...filtered);
+        }
+      }
+    });
+    return elements;
+  }, []);
+  const handleDrawingAnnotation = useCallback((selectedIds) => {
+    if (!editorRef.current || selectedIds.length === 0) return;
+    if (pendingAnnotation) return;
+    const editor = editorRef.current;
+    const selectedShapes = selectedIds.map((id) => editor.getShape(id)).filter(Boolean);
+    if (selectedShapes.length === 0) return;
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const shape of selectedShapes) {
+      if (!shape) continue;
+      const bounds = editor.getShapePageBounds(shape.id);
+      if (bounds) {
+        minX = Math.min(minX, bounds.x);
+        minY = Math.min(minY, bounds.y);
+        maxX = Math.max(maxX, bounds.x + bounds.width);
+        maxY = Math.max(maxY, bounds.y + bounds.height);
+      }
+    }
+    if (minX === Infinity) return;
+    const selectionBounds = {
+      x: minX,
+      y: minY,
+      width: maxX - minX,
+      height: maxY - minY
+    };
+    const drawingShapes = selectedShapes.filter(
+      (shape) => shape && ["draw", "line", "arrow", "geo", "text", "note"].includes(shape.type)
+    );
+    if (drawingShapes.length === 0) return;
+    const viewportBounds = {
+      x: selectionBounds.x - window.scrollX,
+      y: selectionBounds.y - window.scrollY,
+      width: selectionBounds.width,
+      height: selectionBounds.height
+    };
+    const domElements = findDOMElementsInBounds(viewportBounds);
+    const centerX = selectionBounds.x + selectionBounds.width / 2;
+    const centerY = selectionBounds.y + selectionBounds.height / 2;
+    const x = (centerX - window.scrollX) / window.innerWidth * 100;
+    const clientY = centerY - window.scrollY;
+    let elementDesc = `Drawing (${drawingShapes.length} shape${drawingShapes.length > 1 ? "s" : ""})`;
+    if (domElements.length > 0) {
+      const domNames = domElements.slice(0, 2).map((el) => el.tagName.toLowerCase()).join(", ");
+      const domSuffix = domElements.length > 2 ? ` +${domElements.length - 2} more` : "";
+      elementDesc += ` + ${domNames}${domSuffix}`;
+    }
+    const newDomSelections = domElements.map((el) => createDOMSelection(el));
+    setPendingAnnotation({
+      x,
+      y: centerY,
+      clientY,
+      element: elementDesc,
+      elementPath: "drawing",
+      boundingBox: {
+        x: selectionBounds.x,
+        y: selectionBounds.y,
+        width: selectionBounds.width,
+        height: selectionBounds.height
+      },
+      isMultiSelect: drawingShapes.length > 1 || domElements.length > 0,
+      annotationType: "drawing",
+      shapeIds: selectedIds,
+      selections: newDomSelections.length > 0 ? newDomSelections : void 0
+    });
+  }, [pendingAnnotation, findDOMElementsInBounds]);
+  const handleBrushSelection = useCallback((brushBounds) => {
+    const viewportBounds = {
+      x: brushBounds.x - window.scrollX,
+      y: brushBounds.y - window.scrollY,
+      width: brushBounds.width,
+      height: brushBounds.height
+    };
+    const foundElements = findDOMElementsInBounds(viewportBounds);
+    const newElements = foundElements.filter((el) => {
+      const rect = el.getBoundingClientRect();
+      return !domSelections.some(
+        (s) => Math.abs(s.boundingBox.x - (rect.left + window.scrollX)) < 5 && Math.abs(s.boundingBox.y - (rect.top + window.scrollY)) < 5
+      );
+    });
+    if (newElements.length === 0) return;
+    const selections = newElements.map((el) => createDOMSelection(el));
+    if (selections.length === 1) {
+      handleDOMSelect(selections[0]);
+    } else {
+      handleMultiDOMSelect(selections);
+    }
+  }, [findDOMElementsInBounds, domSelections, handleDOMSelect, handleMultiDOMSelect]);
+  const isPointInPolygon = useCallback((point, polygon) => {
+    let inside = false;
+    const n = polygon.length;
+    for (let i = 0, j = n - 1; i < n; j = i++) {
+      const xi = polygon[i].x;
+      const yi = polygon[i].y;
+      const xj = polygon[j].x;
+      const yj = polygon[j].y;
+      const intersect = yi > point.y !== yj > point.y && point.x < (xj - xi) * (point.y - yi) / (yj - yi) + xi;
+      if (intersect) {
+        inside = !inside;
+      }
+    }
+    return inside;
+  }, []);
+  const handleLassoSelection = useCallback((lassoPoints) => {
+    if (lassoPoints.length < 3) return;
+    const viewportPoints = lassoPoints.map((p) => ({
+      x: p.x - window.scrollX,
+      y: p.y - window.scrollY
+    }));
+    let lassoMinX = Infinity, lassoMinY = Infinity;
+    let lassoMaxX = -Infinity, lassoMaxY = -Infinity;
+    for (const p of viewportPoints) {
+      lassoMinX = Math.min(lassoMinX, p.x);
+      lassoMinY = Math.min(lassoMinY, p.y);
+      lassoMaxX = Math.max(lassoMaxX, p.x);
+      lassoMaxY = Math.max(lassoMaxY, p.y);
+    }
+    const allElements = document.querySelectorAll("*");
+    const foundElements = [];
+    allElements.forEach((el) => {
+      if (!(el instanceof HTMLElement)) return;
+      if (shouldIgnoreElement(el)) return;
+      const rect = el.getBoundingClientRect();
+      if (rect.width < 10 || rect.height < 10) return;
+      const boundsOverlap = !(rect.left > lassoMaxX || rect.right < lassoMinX || rect.top > lassoMaxY || rect.bottom < lassoMinY);
+      if (boundsOverlap) {
+        const isParent = foundElements.some((existing) => el.contains(existing));
+        if (!isParent) {
+          const filtered = foundElements.filter((existing) => !existing.contains(el) && !el.contains(existing));
+          filtered.push(el);
+          foundElements.length = 0;
+          foundElements.push(...filtered);
+        }
+      }
+    });
+    const newElements = foundElements.filter((el) => {
+      const rect = el.getBoundingClientRect();
+      return !domSelections.some(
+        (s) => Math.abs(s.boundingBox.x - (rect.left + window.scrollX)) < 5 && Math.abs(s.boundingBox.y - (rect.top + window.scrollY)) < 5
+      );
+    });
+    if (newElements.length === 0) return;
+    const selections = newElements.map((el) => createDOMSelection(el));
+    if (selections.length === 1) {
+      handleDOMSelect(selections[0]);
+    } else {
+      handleMultiDOMSelect(selections);
+    }
+  }, [isPointInPolygon, domSelections, handleDOMSelect, handleMultiDOMSelect]);
+  const handleMount = useCallback((editor) => {
+    editorRef.current = editor;
+    editor.setStyleForNextShapes(ArrowShapeKindStyle, "arc");
+    try {
+      const selectIdleState = editor.getStateDescendant("select.idle");
+      if (selectIdleState) {
+        selectIdleState.handleDoubleClickOnCanvas = (info) => {
+          lastDoubleClickRef.current = Date.now();
+          const point = editor.pageToViewport(info.point);
+          const elements = document.elementsFromPoint(point.x, point.y);
+          const target = elements.find(
+            (el) => el instanceof HTMLElement && !shouldIgnoreElement(el)
+          );
+          if (target) {
+            const selection = createDOMSelection(target);
+            const rect = selection.boundingBox;
+            const x = (rect.x + rect.width / 2) / window.innerWidth * 100;
+            const clientY = rect.y - window.scrollY + rect.height / 2;
+            setPendingAnnotation({
+              x,
+              y: rect.y + rect.height / 2,
+              clientY,
+              element: selection.tagName,
+              elementPath: selection.elementPath,
+              selectedText: selection.text?.slice(0, 100),
+              boundingBox: rect,
+              isMultiSelect: false,
+              selections: [selection],
+              annotationType: "dom_selection"
+            });
+          }
+        };
+      }
+    } catch (e) {
+      console.warn("Failed to override double click behavior", e);
+    }
+    editor.setCamera({ x: -window.scrollX, y: -window.scrollY, z: 1 });
+    editor.sideEffects.registerAfterChangeHandler("camera", () => {
+      const camera = editor.getCamera();
+      if (camera.z !== 1) {
+        editor.setCamera({ x: camera.x, y: camera.y, z: 1 });
+      }
+    });
+    const lassoSelectTool = editor.root.children?.["lasso-select"];
+    if (lassoSelectTool) {
+      if ("setOnLassoComplete" in lassoSelectTool) {
+        lassoSelectTool.setOnLassoComplete((points) => {
+          handleLassoSelection(points);
+        });
+      }
+    }
+    let lastBrush = null;
+    editor.sideEffects.registerAfterChangeHandler("instance", (prev, next) => {
+      if (prev.brush && !next.brush && lastBrush) {
+        const brushBounds = {
+          x: lastBrush.x,
+          y: lastBrush.y,
+          width: lastBrush.w,
+          height: lastBrush.h
+        };
+        handleBrushSelection(brushBounds);
+        lastBrush = null;
+      } else if (next.brush) {
+        lastBrush = next.brush;
+      }
+      return;
+    });
+  }, [handleDOMSelect, handleBrushSelection, handleLassoSelection, handleMultiDOMSelect, handleDrawingAnnotation]);
+  useEffect(() => {
+    return () => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (!isActive) return;
+    const handlePointerDown = (e) => {
+      if (e.button !== 0) return;
+      const target = e.target;
+      if (target.closest('[data-skema="annotation-popup"]')) return;
+      if (pendingAnnotation) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleAnnotationCancel();
+        return;
+      }
+      if (e.shiftKey) return;
+      if (!target.closest(".tl-canvas")) return;
+    };
+    document.addEventListener("pointerdown", handlePointerDown, { capture: true });
+    return () => document.removeEventListener("pointerdown", handlePointerDown, { capture: true });
+  }, [isActive, pendingAnnotation, handleAnnotationCancel]);
+  const components = {
+    Toolbar: null,
+    Overlays: SkemaOverlays,
+    // Hide background to make canvas transparent (so website shows through)
+    Background: null,
+    // Hide UI elements we don't need
+    SharePanel: null,
+    MenuPanel: null,
+    TopPanel: null,
+    PageMenu: null,
+    NavigationPanel: null,
+    HelpMenu: null,
+    Minimap: null,
+    // Hide "Back to Content" button (HelperButtons contains this)
+    HelperButtons: null,
+    QuickActions: null,
+    ZoomMenu: null,
+    ActionsMenu: null,
+    DebugPanel: null,
+    DebugMenu: null,
+    // Hide canvas overlays
+    OnTheCanvas: null,
+    InFrontOfTheCanvas: null
+  };
+  const overrides = {
+    tools(editor, tools) {
+      return {
+        ...tools,
+        "lasso-select": {
+          id: "lasso-select",
+          label: "Lasso Select",
+          icon: "blob",
+          kbd: "l",
+          onSelect: () => {
+            editor.setCurrentTool("lasso-select");
+          }
+        }
+      };
+    }
+  };
+  if (!isActive) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-skema": "container",
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex,
+        pointerEvents: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        .tlui-button[data-testid="back-to-content"],
+        .tlui-offscreen-indicator,
+        [class*="back-to-content"],
+        .tl-offscreen-indicator {
+          display: none !important;
+        }
+      ` }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              pointerEvents: "auto"
+            },
+            children: /* @__PURE__ */ jsx(
+              Tldraw,
+              {
+                tools: [LassoSelectTool],
+                components,
+                overrides,
+                onMount: handleMount,
+                hideUi: false,
+                inferDarkMode: false,
+                options: {
+                  // Disable camera constraints that would interfere with overlay mode
+                  maxPages: 1
+                },
+                children: /* @__PURE__ */ jsx(SkemaToolbar, {})
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectionOverlay, { selections: domSelections }),
+        /* @__PURE__ */ jsx(
+          AnnotationMarkersLayer,
+          {
+            annotations,
+            scrollOffset,
+            hoveredMarkerId,
+            onHover: setHoveredMarkerId,
+            onDelete: handleDeleteAnnotation
+          }
+        ),
+        pendingAnnotation && pendingAnnotation.boundingBox && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-skema": "pending-highlight",
+              style: {
+                position: "fixed",
+                left: pendingAnnotation.boundingBox.x - scrollOffset.x,
+                top: pendingAnnotation.boundingBox.y - scrollOffset.y,
+                width: pendingAnnotation.boundingBox.width,
+                height: pendingAnnotation.boundingBox.height,
+                border: `2px solid ${pendingAnnotation.isMultiSelect ? "#34C759" : "#3b82f6"}`,
+                backgroundColor: pendingAnnotation.isMultiSelect ? "rgba(52, 199, 89, 0.1)" : "rgba(59, 130, 246, 0.1)",
+                borderRadius: 4,
+                pointerEvents: "none",
+                zIndex: zIndex + 2,
+                transition: "opacity 0.15s ease",
+                opacity: pendingExiting ? 0 : 1
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AnnotationPopup,
+            {
+              ref: popupRef,
+              element: pendingAnnotation.element,
+              selectedText: pendingAnnotation.selectedText,
+              placeholder: pendingAnnotation.annotationType === "drawing" ? "What does this drawing mean?" : pendingAnnotation.isMultiSelect ? "What should change about these elements?" : "What should change?",
+              onSubmit: handleAnnotationSubmit,
+              onCancel: handleAnnotationCancel,
+              isExiting: pendingExiting,
+              isMultiSelect: pendingAnnotation.isMultiSelect,
+              accentColor: pendingAnnotation.isMultiSelect ? "#34C759" : "#3b82f6",
+              style: {
+                // Position popup centered horizontally
+                left: Math.max(
+                  160,
+                  Math.min(
+                    window.innerWidth - 160,
+                    pendingAnnotation.x / 100 * window.innerWidth
+                  )
+                ),
+                // Position above or below based on viewport space
+                ...pendingAnnotation.clientY > window.innerHeight - 250 ? { bottom: window.innerHeight - pendingAnnotation.clientY + 30 } : { top: pendingAnnotation.clientY + 30 },
+                zIndex: zIndex + 3,
+                pointerEvents: "auto"
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          AnnotationsSidebar,
+          {
+            annotations,
+            onClear: handleClear,
+            onExport: handleExport
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-skema": "toggle-hint",
+            style: {
+              position: "fixed",
+              bottom: 16,
+              left: 16,
+              padding: "8px 12px",
+              backgroundColor: "rgba(0, 0, 0, 0.7)",
+              color: "white",
+              borderRadius: "6px",
+              fontSize: "12px",
+              pointerEvents: "none",
+              zIndex: zIndex + 1
+            },
+            children: [
+              "Press ",
+              /* @__PURE__ */ jsx("kbd", { style: {
+                backgroundColor: "rgba(255,255,255,0.2)",
+                padding: "2px 6px",
+                borderRadius: "3px",
+                marginLeft: "4px",
+                marginRight: "4px"
+              }, children: "\u2318\u21E7E" }),
+              " to toggle Skema"
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var Skema_default = Skema;
+
+export { AnnotationPopup, Skema, addGridToSvg, bboxCenter, bboxDocumentToViewport, bboxFromPoints, bboxIntersects, bboxViewportToDocument, blobToBase64, createDOMSelection, Skema_default as default, documentToViewport, expandBbox, extractTextFromShapes, generateSelector, getBoundingBox, getElementClasses, getElementPath, getGridCellReference, getViewportInfo, identifyElement, pointInBbox, shouldIgnoreElement, viewportToDocument };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map