skema-core 0.1.0 → 0.1.2

package/dist/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var tldraw = require('tldraw');
 require('tldraw/tldraw.css');
+var framerMotion = require('framer-motion');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/components/Skema.tsx
@@ -177,6 +178,217 @@ var LassoSelectTool = class extends tldraw.StateNode {
 LassoSelectTool.id = "lasso-select";
 LassoSelectTool.initial = "idle";
 LassoSelectTool.children = () => [IdleState, LassoingState];
+function useDaemon(options = {}) {
+  const {
+    url = "ws://localhost:9999",
+    autoConnect = true,
+    autoReconnect = true,
+    reconnectDelay = 2e3
+  } = options;
+  const [state, setState] = react.useState({
+    connected: false,
+    provider: "gemini",
+    availableProviders: [],
+    cwd: ""
+  });
+  const [isGenerating, setIsGenerating] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const wsRef = react.useRef(null);
+  const pendingRequests = react.useRef(/* @__PURE__ */ new Map());
+  const eventCallbacks = react.useRef(/* @__PURE__ */ new Map());
+  const reconnectTimeoutRef = react.useRef(null);
+  const messageIdRef = react.useRef(0);
+  const nextId = react.useCallback(() => {
+    messageIdRef.current += 1;
+    return `msg-${messageIdRef.current}-${Date.now()}`;
+  }, []);
+  const sendRequest = react.useCallback((type, payload = {}) => {
+    return new Promise((resolve, reject) => {
+      if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+        reject(new Error("Not connected to daemon"));
+        return;
+      }
+      const id = nextId();
+      pendingRequests.current.set(id, { resolve, reject });
+      wsRef.current.send(JSON.stringify({ id, type, ...payload }));
+      setTimeout(() => {
+        if (pendingRequests.current.has(id)) {
+          pendingRequests.current.delete(id);
+          reject(new Error("Request timeout"));
+        }
+      }, 3e4);
+    });
+  }, [nextId]);
+  const handleMessage = react.useCallback((event) => {
+    try {
+      const msg = JSON.parse(event.data);
+      if (msg.type === "connected") {
+        setState((prev) => ({
+          ...prev,
+          connected: true,
+          provider: msg.provider || prev.provider,
+          availableProviders: msg.availableProviders || prev.availableProviders,
+          cwd: msg.cwd || prev.cwd
+        }));
+        setError(null);
+        return;
+      }
+      if (msg.type === "ai-event" && msg.id) {
+        const callback = eventCallbacks.current.get(msg.id);
+        if (callback) {
+          callback(msg.event);
+        }
+        return;
+      }
+      if (msg.type === "generate-complete" && msg.id) {
+        const pending = pendingRequests.current.get(msg.id);
+        if (pending) {
+          pendingRequests.current.delete(msg.id);
+          eventCallbacks.current.delete(msg.id);
+          pending.resolve({ success: msg.success, annotationId: msg.annotationId });
+        }
+        setIsGenerating(false);
+        return;
+      }
+      if (msg.type === "provider-changed") {
+        setState((prev) => ({ ...prev, provider: msg.provider }));
+      }
+      if (msg.type === "error" && msg.id) {
+        const pending = pendingRequests.current.get(msg.id);
+        if (pending) {
+          pendingRequests.current.delete(msg.id);
+          eventCallbacks.current.delete(msg.id);
+          pending.reject(new Error(msg.error));
+        }
+        setIsGenerating(false);
+        return;
+      }
+      if (msg.id) {
+        const pending = pendingRequests.current.get(msg.id);
+        if (pending) {
+          pendingRequests.current.delete(msg.id);
+          pending.resolve(msg);
+        }
+      }
+    } catch (e) {
+      console.error("[useDaemon] Failed to parse message:", e);
+    }
+  }, []);
+  const connect = react.useCallback(() => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) return;
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+    try {
+      const ws = new WebSocket(url);
+      ws.onopen = () => {
+        console.log("[useDaemon] Connected to daemon");
+      };
+      ws.onmessage = handleMessage;
+      ws.onclose = () => {
+        console.log("[useDaemon] Disconnected from daemon");
+        setState((prev) => ({ ...prev, connected: false }));
+        wsRef.current = null;
+        if (autoReconnect) {
+          reconnectTimeoutRef.current = setTimeout(() => {
+            console.log("[useDaemon] Attempting to reconnect...");
+            connect();
+          }, reconnectDelay);
+        }
+      };
+      ws.onerror = (e) => {
+        console.error("[useDaemon] WebSocket error:", e);
+        setError("Failed to connect to Skema daemon. Is it running?");
+      };
+      wsRef.current = ws;
+    } catch (e) {
+      console.error("[useDaemon] Failed to create WebSocket:", e);
+      setError("Failed to connect to Skema daemon");
+    }
+  }, [url, autoReconnect, reconnectDelay, handleMessage]);
+  const disconnect = react.useCallback(() => {
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+    if (wsRef.current) {
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+    setState((prev) => ({ ...prev, connected: false }));
+  }, []);
+  const setProvider = react.useCallback(async (provider) => {
+    try {
+      const response = await sendRequest("set-provider", { provider });
+      return response.type === "provider-changed";
+    } catch (e) {
+      console.error("[useDaemon] Failed to set provider:", e);
+      return false;
+    }
+  }, [sendRequest]);
+  const generate = react.useCallback(async (annotation, onEvent) => {
+    const id = nextId();
+    if (onEvent) {
+      eventCallbacks.current.set(id, onEvent);
+    }
+    setIsGenerating(true);
+    return new Promise((resolve, reject) => {
+      if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+        setIsGenerating(false);
+        reject(new Error("Not connected to daemon"));
+        return;
+      }
+      pendingRequests.current.set(id, { resolve, reject });
+      wsRef.current.send(JSON.stringify({
+        id,
+        type: "generate",
+        annotation
+      }));
+    });
+  }, [nextId]);
+  const revert = react.useCallback(async (annotationId) => {
+    const response = await sendRequest("revert", { annotationId });
+    return { success: response.success, message: response.message || "" };
+  }, [sendRequest]);
+  const readFile = react.useCallback(async (path) => {
+    const response = await sendRequest("read-file", { path });
+    return response.content;
+  }, [sendRequest]);
+  const writeFile = react.useCallback(async (path, content) => {
+    const response = await sendRequest("write-file", { path, content });
+    return response.type === "write-success";
+  }, [sendRequest]);
+  const runCommand = react.useCallback(async (command) => {
+    const response = await sendRequest("run-command", { command });
+    return {
+      stdout: response.stdout || "",
+      stderr: response.stderr || "",
+      exitCode: response.exitCode ?? 0
+    };
+  }, [sendRequest]);
+  react.useEffect(() => {
+    if (autoConnect) {
+      connect();
+    }
+    return () => {
+      disconnect();
+    };
+  }, [autoConnect, connect, disconnect]);
+  return {
+    state,
+    isGenerating,
+    error,
+    connect,
+    disconnect,
+    setProvider,
+    generate,
+    revert,
+    readFile,
+    writeFile,
+    runCommand
+  };
+}
 
 // src/utils/coordinates.ts
 function getViewportInfo() {
@@ -592,349 +804,777 @@ function findNearbyElementsWithStyles(bounds, maxElements = 5) {
   }
   return diverse.map(createNearbyElement);
 }
-var styles = {
-  popup: {
+
+// 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 SLogoIcon = ({ size = 32 }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 166 161", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M77.0782 5.17419C80.4699 2.21068 85.5301 2.21067 88.9218 5.17419L109.929 23.529C111.161 24.6057 112.663 25.3261 114.274 25.6126L141.769 30.5023C146.225 31.2947 149.399 35.2725 149.183 39.7929L147.86 67.4755C147.782 69.1226 148.157 70.7596 148.945 72.2079L162.203 96.5644C164.372 100.55 163.236 105.527 159.551 108.175L136.957 124.416C135.623 125.375 134.577 126.681 133.932 128.193L123.03 153.753C121.26 157.902 116.692 160.1 112.346 158.894L85.4054 151.422C83.8315 150.985 82.1685 150.985 80.5946 151.422L53.6541 158.894C49.3075 160.1 44.7399 157.902 42.9702 153.753L32.0681 128.193C31.4234 126.681 30.3771 125.375 29.0427 124.416L6.4487 108.175C2.76426 105.527 1.62755 100.55 3.79688 96.5644L17.0547 72.2079C17.8431 70.7596 18.2184 69.1226 18.1397 67.4755L16.8169 39.7929C16.6009 35.2725 19.7752 31.2947 24.2308 30.5023L51.7255 25.6126C53.3366 25.3261 54.8392 24.6057 56.0714 23.529L77.0782 5.17419Z",
+      fill: "#FF6800"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M65.0888 64.1092C65.0888 68.461 73.1316 69.0511 83.5428 69.7887C102.046 71.1901 128.049 73.1078 128 97.9645C128 126.288 106.289 133 83 133C59.7599 132.926 40.4672 128.722 38.0001 97.9645H65.0888C68.0494 105.635 74.9079 107.627 83 107.627C91.0428 107.627 100.911 105.635 100.911 97.9645C100.911 93.6128 92.8684 92.9489 82.4572 92.2113C63.954 90.8099 37.9507 88.8922 38.0001 64.1092C38.0001 35.7858 59.7106 29 83 29C106.24 29.2213 125.533 33.1305 128 64.1092H100.911C97.9506 56.2908 91.0921 54.4468 83 54.4468C74.9572 54.4468 65.0888 56.217 65.0888 64.1092Z",
+      fill: "white"
+    }
+  )
+] });
+var ChevronLeftIcon = ({ size = 24 }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    d: "M15 18L9 12L15 6",
+    stroke: "#9CA3AF",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var ChevronRightIcon = ({ size = 24 }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    d: "M9 6L15 12L9 18",
+    stroke: "#9CA3AF",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var SelectIcon = ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "30", height: "30", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M9 10L9 18.5L11.5 16L14 20L15.5 19L13 15L16 14.5L9 10Z",
+      fill: "white"
+    }
+  )
+] });
+var DrawIcon = ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "30", height: "30", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "25", height: "25", rx: "2", fill: isSelected ? "#00C851" : "#00C851", opacity: isSelected ? 1 : 0.7 }),
+  /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(12.5, 12.5) scale(1.4) translate(-12.5, -12.5)", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { width: "30", height: "30", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "25", height: "25", rx: "12.5", fill: isSelected ? "#2C7FFF" : "#2C7FFF", opacity: isSelected ? 1 : 0.7 }),
+  /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(12.5, 12.5) scale(1.4) translate(-12.5, -12.5)", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { width: "36", height: "30", viewBox: "0 0 30 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("g", { transform: "translate(15, 12.5)", children: /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: "rotate(-45)", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "-6", y: "-3", width: "12", height: "6", rx: "1", fill: "none", stroke: "white", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "-2", y1: "-3", x2: "-2", y2: "3", stroke: "white", strokeWidth: "1.5" })
+  ] }) })
+] });
+var ShapesIcon = ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "30", height: "30", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { transform: "translate(5.5, 7)", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "6", width: "4", height: "4", rx: "0.5", fill: "white" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "4", r: "3", fill: "white" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 11L7.5 6.5L10 11H5Z", fill: "white" })
+  ] })
+] });
+var GEO_SHAPES = [
+  "rectangle",
+  "ellipse",
+  "triangle",
+  "diamond",
+  "pentagon",
+  "hexagon",
+  "octagon",
+  "star",
+  "rhombus",
+  "rhombus-2",
+  "oval",
+  "trapezoid",
+  "arrow-right",
+  "arrow-left",
+  "arrow-up",
+  "arrow-down",
+  "x-box",
+  "check-box",
+  "cloud",
+  "heart"
+];
+var ShapeIcon = ({ shape, size = 20 }) => {
+  const stroke = "currentColor";
+  const strokeWidth = 1.5;
+  const fill = "none";
+  switch (shape) {
+    case "rectangle":
+      return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "5", width: "18", height: "14", rx: "1" }) });
+    case "ellipse":
+      return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, children: /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "9", ry: "7" }) });
+    case "triangle":
+      return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 4L21 20H3L12 4Z" }) });
+    case "diamond":
+      return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2L22 12L12 22L2 12L12 2Z" }) });
+    case "pentagon":
+      return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2L22 9L18 21H6L2 9L12 2Z" }) });
+    case "hexagon":
+      return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2L21 7V17L12 22L3 17V7L12 2Z" }) });
+    case "octagon":
+      return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 2H16L22 8V16L16 22H8L2 16V8L8 2Z" }) });
+    case "star":
+      return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2L14.5 9H22L16 13.5L18.5 21L12 16.5L5.5 21L8 13.5L2 9H9.5L12 2Z" }) });
+    case "rhombus":
+      return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3L20 12L12 21L4 12L12 3Z" }) });
+    case "rhombus-2":
+      return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 12L12 4L22 12L12 20L2 12Z" }) });
+    case "oval":
+      return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, children: /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "6", ry: "9" }) });
+    case "trapezoid":
+      return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 6H18L21 18H3L6 6Z" }) });
+    case "arrow-right":
+      return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 8V16H12V20L20 12L12 4V8H4Z" }) });
+    case "arrow-left":
+      return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 8V16H12V20L4 12L12 4V8H20Z" }) });
+    case "arrow-up":
+      return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 22V10L4 10L12 2L20 10H16V22H8Z" }) });
+    case "arrow-down":
+      return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 2V14L4 14L12 22L20 14H16V2H8Z" }) });
+    case "x-box":
+      return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 8L16 16M16 8L8 16" })
+      ] });
+    case "check-box":
+      return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 12L10 15L17 8" })
+      ] });
+    case "cloud":
+      return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.5 19C4 19 2 17 2 14.5C2 12.5 3.5 10.5 5.5 10C5.5 7 8 4 12 4C15.5 4 18 6.5 18.5 9.5C20.5 10 22 11.5 22 14C22 16.5 20 19 17.5 19H6.5Z" }) });
+    case "heart":
+      return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 21C12 21 3 15 3 9C3 6 5.5 3 8.5 3C10.5 3 12 4.5 12 4.5C12 4.5 13.5 3 15.5 3C18.5 3 21 6 21 9C21 15 12 21 12 21Z" }) });
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "1" }) });
+  }
+};
+var ShapePicker = ({ isOpen, onClose, onSelectShape, anchorRef }) => {
+  const editor = tldraw.useEditor();
+  const pickerRef = react.useRef(null);
+  const [selectedShape, setSelectedShape] = react.useState("rectangle");
+  react.useEffect(() => {
+    const currentGeo = editor.getStyleForNextShape(tldraw.GeoShapeGeoStyle);
+    if (currentGeo && GEO_SHAPES.includes(currentGeo)) {
+      setSelectedShape(currentGeo);
+    }
+  }, [editor, isOpen]);
+  react.useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (e) => {
+      if (pickerRef.current && !pickerRef.current.contains(e.target) && anchorRef.current && !anchorRef.current.contains(e.target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen, onClose, anchorRef]);
+  react.useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  const handleShapeClick = (e, shape) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setSelectedShape(shape);
+    onSelectShape(shape);
+  };
+  const stopAllEvents = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const anchorRect = anchorRef.current?.getBoundingClientRect();
+  const pickerStyle = anchorRect ? {
     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',
+    bottom: window.innerHeight - anchorRect.top + 8,
+    left: anchorRect.left + anchorRect.width / 2,
+    transform: "translateX(-50%)"
+  } : {};
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: pickerRef,
+      style: {
+        ...pickerStyle,
+        backgroundColor: "white",
+        borderRadius: 8,
+        boxShadow: "0 4px 20px rgba(0,0,0,0.15)",
+        padding: 8,
+        zIndex: 1e5,
+        pointerEvents: "auto"
+      },
+      onClick: stopAllEvents,
+      onPointerDown: stopAllEvents,
+      onMouseDown: stopAllEvents,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gridTemplateColumns: "repeat(4, 1fr)",
+            gap: 2
+          },
+          children: GEO_SHAPES.map((shape) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: (e) => handleShapeClick(e, shape),
+              onPointerDown: stopAllEvents,
+              onMouseDown: stopAllEvents,
+              title: shape.replace(/-/g, " "),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 32,
+                height: 32,
+                border: "none",
+                borderRadius: 4,
+                backgroundColor: selectedShape === shape ? "#e8f4ff" : "transparent",
+                color: selectedShape === shape ? "#2c7fff" : "#333",
+                cursor: "pointer",
+                transition: "background-color 0.1s"
+              },
+              onMouseEnter: (e) => {
+                if (selectedShape !== shape) {
+                  e.currentTarget.style.backgroundColor = "#f5f5f5";
+                }
+              },
+              onMouseLeave: (e) => {
+                if (selectedShape !== shape) {
+                  e.currentTarget.style.backgroundColor = "transparent";
+                }
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(ShapeIcon, { shape, size: 18 })
+            },
+            shape
+          ))
+        }
+      )
+    }
+  );
+};
+var TOOL_COUNT = 4;
+var EXIT_DURATION = 0.12;
+var EXIT_STAGGER = 0.01;
+var smoothEasing = [0.4, 0, 0.2, 1];
+var toolVariants = {
+  hidden: {
     opacity: 0,
-    transition: "opacity 0.2s ease, transform 0.2s ease"
+    scale: 0.8,
+    width: 0,
+    marginRight: -6
   },
-  popupEnter: {
+  visible: (i) => ({
     opacity: 1,
-    transform: "translateX(-50%) scale(1) translateY(0)"
-  },
-  popupExit: {
+    scale: 1,
+    width: 40,
+    marginRight: 0,
+    transition: {
+      opacity: { duration: 0.15, delay: i * 0.04 },
+      scale: { type: "spring", stiffness: 400, damping: 25, delay: i * 0.04 },
+      width: { type: "spring", stiffness: 400, damping: 30, delay: i * 0.03 },
+      marginRight: { duration: 0.1, delay: i * 0.03 }
+    }
+  }),
+  exit: (i) => ({
     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"
+    scale: 0.8,
+    width: 0,
+    marginRight: -6,
+    transition: {
+      opacity: { duration: 0.06, ease: "easeOut" },
+      scale: { duration: EXIT_DURATION, ease: smoothEasing },
+      width: { duration: EXIT_DURATION, ease: smoothEasing, delay: EXIT_STAGGER * (TOOL_COUNT - 1 - i) },
+      marginRight: { duration: EXIT_DURATION, ease: smoothEasing, delay: EXIT_STAGGER * (TOOL_COUNT - 1 - i) }
+    }
+  })
+};
+var chevronVariants = {
+  hidden: {
+    opacity: 0,
+    scale: 0.8,
+    width: 0
   },
-  cancelButton: {
-    background: "transparent",
-    color: "rgba(255, 255, 255, 0.5)"
+  visible: {
+    opacity: 0.6,
+    scale: 1,
+    width: 28,
+    transition: {
+      opacity: { delay: 0.1, duration: 0.1 },
+      scale: { delay: 0.1, type: "spring", stiffness: 500, damping: 30 },
+      width: { delay: 0.08, duration: 0.12, ease: "easeOut" }
+    }
   },
-  submitButton: {
-    color: "white"
+  exit: {
+    opacity: 0,
+    scale: 0.8,
+    width: 0,
+    transition: {
+      opacity: { duration: 0.06 },
+      scale: { duration: 0.08 },
+      width: { duration: 0.1, ease: smoothEasing }
+    }
   }
 };
-var AnnotationPopup = react.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] = react.useState(initialValue);
-    const [isShaking, setIsShaking] = react.useState(false);
-    const [animState, setAnimState] = react.useState("initial");
-    const [isFocused, setIsFocused] = react.useState(false);
-    const textareaRef = react.useRef(null);
-    const popupRef = react.useRef(null);
-    react.useEffect(() => {
-      if (isExiting && animState !== "exit") {
-        setAnimState("exit");
-      }
-    }, [isExiting, animState]);
-    react.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 = react.useCallback(() => {
-      setIsShaking(true);
-      setTimeout(() => {
-        setIsShaking(false);
-        textareaRef.current?.focus();
-      }, 250);
-    }, []);
-    react.useImperativeHandle(ref, () => ({
-      shake
-    }), [shake]);
-    const handleCancel = react.useCallback(() => {
-      setAnimState("exit");
-      setTimeout(() => {
-        onCancel();
-      }, 150);
-    }, [onCancel]);
-    const handleSubmit = react.useCallback(() => {
-      if (!text.trim()) return;
-      onSubmit(text.trim());
-    }, [text, onSubmit]);
-    const handleKeyDown = react.useCallback(
-      (e) => {
-        if (e.nativeEvent.isComposing) return;
-        if (e.key === "Enter" && !e.shiftKey) {
-          e.preventDefault();
-          handleSubmit();
-        }
-        if (e.key === "Escape") {
-          handleCancel();
+var ToolbarButton = ({
+  onClick,
+  isSelected,
+  icon,
+  label,
+  buttonRef,
+  index = 0
+}) => {
+  const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onClick();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.button,
+    {
+      ref: buttonRef,
+      custom: index,
+      variants: toolVariants,
+      initial: "hidden",
+      animate: "visible",
+      exit: "exit",
+      onClick: handleClick,
+      title: label,
+      type: "button",
+      whileHover: { scale: 1.05 },
+      whileTap: { scale: 0.95 },
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: 40,
+        minWidth: 0,
+        border: "none",
+        borderRadius: 8,
+        backgroundColor: isSelected ? "rgba(255,255,255,0.15)" : "transparent",
+        cursor: "pointer",
+        pointerEvents: "auto",
+        overflow: "hidden",
+        flexShrink: 0
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.span,
+        {
+          style: { display: "flex", alignItems: "center", justifyContent: "center" },
+          initial: { opacity: 0, scale: 0.8 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.8 },
+          transition: { duration: 0.12 },
+          children: icon
         }
+      )
+    }
+  );
+};
+var LogoShapesButton = ({
+  isExpanded,
+  isHovered,
+  isSelected,
+  onClick,
+  onShapesClick,
+  onMouseEnter,
+  onMouseLeave,
+  buttonRef
+}) => {
+  const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (isExpanded) {
+      onShapesClick();
+    } else {
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.button,
+    {
+      ref: buttonRef,
+      onClick: handleClick,
+      onMouseEnter,
+      onMouseLeave,
+      title: isExpanded ? "Shapes (G)" : "Expand toolbar",
+      type: "button",
+      whileHover: { scale: 1.08 },
+      whileTap: { scale: 0.95 },
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 40,
+        height: 40,
+        border: "none",
+        borderRadius: 8,
+        backgroundColor: isSelected ? "rgba(255,255,255,0.15)" : "transparent",
+        cursor: "pointer",
+        pointerEvents: "auto",
+        position: "relative"
       },
-      [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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-        "div",
+      children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "popLayout", children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.div,
         {
-          ref: popupRef,
-          "data-skema": "annotation-popup",
-          style: popupStyle,
-          onClick: (e) => e.stopPropagation(),
-          onPointerDown: (e) => e.stopPropagation(),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.header, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles.element, children: element }) }),
-            selectedText && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.quote, children: [
-              "\u201C",
-              selectedText.slice(0, 80),
-              selectedText.length > 80 ? "..." : "",
-              "\u201D"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: styles.actions, children: [
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
-                }
-              )
-            ] })
-          ]
+          initial: { opacity: 0, scale: 0.8 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.85 },
+          transition: {
+            type: "spring",
+            stiffness: 500,
+            damping: 30,
+            opacity: { duration: 0.08 }
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(ShapesIcon, { isSelected })
+        },
+        "shapes"
+      ) : isHovered ? /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.div,
+        {
+          initial: { opacity: 0, x: -3 },
+          animate: { opacity: 1, x: 0 },
+          exit: { opacity: 0, x: 3 },
+          transition: { duration: 0.08, ease: "easeOut" },
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { size: 20 })
+        },
+        "chevron"
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.div,
+        {
+          initial: { opacity: 0, scale: 0.9 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.85 },
+          transition: {
+            type: "spring",
+            stiffness: 500,
+            damping: 30,
+            opacity: { duration: 0.06 }
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(SLogoIcon, { size: 32 })
+        },
+        "s"
+      ) })
+    }
+  );
+};
+var CollapseButton = ({ onClick }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.button,
+    {
+      variants: chevronVariants,
+      initial: "hidden",
+      animate: "visible",
+      exit: "exit",
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick();
+      },
+      title: "Collapse toolbar",
+      type: "button",
+      whileHover: { opacity: 1, scale: 1.1 },
+      whileTap: { scale: 0.9 },
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: 40,
+        minWidth: 0,
+        border: "none",
+        borderRadius: 6,
+        backgroundColor: "transparent",
+        cursor: "pointer",
+        pointerEvents: "auto",
+        marginLeft: 2,
+        overflow: "hidden",
+        flexShrink: 0
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.span,
+        {
+          style: { display: "flex", alignItems: "center", justifyContent: "center" },
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 0.1 },
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: 20 })
         }
       )
-    ] });
-  }
-);
-
-// 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>`
-      );
+  );
+};
+var SkemaToolbar = ({ onExpandedChange, onStylePanelChange }) => {
+  const editor = tldraw.useEditor();
+  const tools = tldraw.useTools();
+  const shapesButtonRef = react.useRef(null);
+  const [isExpanded, setIsExpanded] = react.useState(false);
+  const [isLogoHovered, setIsLogoHovered] = react.useState(false);
+  const [isShapePickerOpen, setIsShapePickerOpen] = react.useState(false);
+  const [isStylePanelOpen, setIsStylePanelOpen] = react.useState(false);
+  const isSelectSelected = tldraw.useIsToolSelected(tools["select"]);
+  const isDrawSelected = tldraw.useIsToolSelected(tools["draw"]);
+  const isLassoSelected = tldraw.useIsToolSelected(tools["lasso-select"]);
+  const isEraseSelected = tldraw.useIsToolSelected(tools["eraser"]);
+  const isGeoSelected = tldraw.useIsToolSelected(tools["geo"]);
+  const handleExpand = (expanded) => {
+    setIsExpanded(expanded);
+    onExpandedChange?.(expanded);
+    if (!expanded) {
+      setIsStylePanelOpen(false);
+      onStylePanelChange?.(false);
     }
-  }
-  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);
+  };
+  const handleLogoClick = () => {
+    handleExpand(true);
+  };
+  const handleCollapse = () => {
+    handleExpand(false);
+    setIsShapePickerOpen(false);
+  };
+  const handleShapesClick = () => {
+    setIsShapePickerOpen((prev) => !prev);
+  };
+  const handleSelectShape = (shape) => {
+    editor.setStyleForNextShapes(tldraw.GeoShapeGeoStyle, shape);
+    editor.setCurrentTool("geo");
+    setIsShapePickerOpen(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          bottom: 16,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "center",
+          pointerEvents: "none",
+          zIndex: 99999
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          framerMotion.motion.div,
+          {
+            "data-skema": "toolbar",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              padding: "6px 12px",
+              backgroundColor: "white",
+              borderRadius: 28,
+              boxShadow: "0 2px 10px rgba(0,0,0,0.15)",
+              pointerEvents: "auto"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                LogoShapesButton,
+                {
+                  isExpanded,
+                  isHovered: isLogoHovered,
+                  isSelected: isGeoSelected || isShapePickerOpen,
+                  onClick: handleLogoClick,
+                  onShapesClick: handleShapesClick,
+                  onMouseEnter: () => setIsLogoHovered(true),
+                  onMouseLeave: () => setIsLogoHovered(false),
+                  buttonRef: shapesButtonRef
                 }
-              }
-            }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "popLayout", children: isExpanded && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ToolbarButton,
+                  {
+                    onClick: () => editor.setCurrentTool("select"),
+                    isSelected: isSelectSelected,
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(SelectIcon, { isSelected: isSelectSelected }),
+                    label: "Select (S)",
+                    index: 0
+                  },
+                  "select"
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ToolbarButton,
+                  {
+                    onClick: () => editor.setCurrentTool("draw"),
+                    isSelected: isDrawSelected,
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(DrawIcon, { isSelected: isDrawSelected }),
+                    label: "Draw (D)",
+                    index: 1
+                  },
+                  "draw"
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ToolbarButton,
+                  {
+                    onClick: () => editor.setCurrentTool("lasso-select"),
+                    isSelected: isLassoSelected,
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(LassoIcon, { isSelected: isLassoSelected }),
+                    label: "Lasso Select (L)",
+                    index: 2
+                  },
+                  "lasso"
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ToolbarButton,
+                  {
+                    onClick: () => editor.setCurrentTool("eraser"),
+                    isSelected: isEraseSelected,
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(EraseIcon, { isSelected: isEraseSelected }),
+                    label: "Eraser (E)",
+                    index: 3
+                  },
+                  "erase"
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  CollapseButton,
+                  {
+                    onClick: handleCollapse
+                  },
+                  "collapse"
+                )
+              ] }) })
+            ]
           }
-        }
+        )
       }
-    }
-  }
-  return textContent.filter(Boolean).join("\n");
-}
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ShapePicker,
+      {
+        isOpen: isShapePickerOpen,
+        onClose: () => setIsShapePickerOpen(false),
+        onSelectShape: handleSelectShape,
+        anchorRef: shapesButtonRef
+      }
+    )
+  ] });
+};
 var AnnotationMarker = ({
   annotation,
   index,
@@ -990,7 +1630,7 @@ var AnnotationMarker = ({
               justifyContent: "center",
               fontSize: 11,
               fontWeight: 600,
-              fontFamily: "system-ui, -apple-system, sans-serif",
+              fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
               cursor: "pointer",
               boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
               transition: "all 0.15s ease",
@@ -1046,7 +1686,13 @@ var AnnotationMarker = ({
     }
   );
 };
-var AnnotationMarkersLayer = ({ annotations, scrollOffset, hoveredMarkerId, onHover, onDelete }) => {
+var AnnotationMarkersLayer = ({
+  annotations,
+  scrollOffset,
+  hoveredMarkerId,
+  onHover,
+  onDelete
+}) => {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: annotations.map((annotation, index) => /* @__PURE__ */ jsxRuntime.jsx(
     AnnotationMarker,
     {
@@ -1060,292 +1706,14 @@ var AnnotationMarkersLayer = ({ annotations, scrollOffset, hoveredMarkerId, onHo
     annotation.id
   )) });
 };
-var SelectIcon = ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "42", height: "42", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-    "path",
-    {
-      d: "M9 10L9 18.5L11.5 16L14 20L15.5 19L13 15L16 14.5L9 10Z",
-      fill: "white"
-    }
-  )
-] });
-var DrawIcon = ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "42", height: "42", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "25", height: "25", rx: "2", fill: isSelected ? "#00C851" : "#00C851", opacity: isSelected ? 1 : 0.7 }),
-  /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(12.5, 12.5) scale(1.4) translate(-12.5, -12.5)", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { width: "42", height: "42", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "25", height: "25", rx: "12.5", fill: isSelected ? "#2C7FFF" : "#2C7FFF", opacity: isSelected ? 1 : 0.7 }),
-  /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(12.5, 12.5) scale(1.4) translate(-12.5, -12.5)", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { width: "50", height: "42", viewBox: "0 0 30 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("g", { transform: "translate(15, 12.5)", children: /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: "rotate(-45)", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "-6", y: "-3", width: "12", height: "6", rx: "1", fill: "none", stroke: "white", strokeWidth: "1.5" }),
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "-2", y1: "-3", x2: "-2", y2: "3", stroke: "white", strokeWidth: "1.5" })
-  ] }) })
-] });
-var StarIcon = ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "42", height: "42", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("g", { transform: "translate(6.5, 6) scale(0.5)", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = tldraw.useEditor();
-  const tools = tldraw.useTools();
-  const isSelectSelected = tldraw.useIsToolSelected(tools["select"]);
-  const isDrawSelected = tldraw.useIsToolSelected(tools["draw"]);
-  const isLassoSelected = tldraw.useIsToolSelected(tools["lasso-select"]);
-  const isEraseSelected = tldraw.useIsToolSelected(tools["eraser"]);
-  const [isStarSelected] = react.useState(false);
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          ToolbarButton,
-          {
-            onClick: () => editor.setCurrentTool("select"),
-            isSelected: isSelectSelected,
-            icon: /* @__PURE__ */ jsxRuntime.jsx(SelectIcon, { isSelected: isSelectSelected }),
-            label: "Select (V)"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ToolbarButton,
-          {
-            onClick: () => editor.setCurrentTool("lasso-select"),
-            isSelected: isLassoSelected,
-            icon: /* @__PURE__ */ jsxRuntime.jsx(LassoIcon, { isSelected: isLassoSelected }),
-            label: "Lasso Select (L)"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ToolbarButton,
-          {
-            onClick: () => editor.setCurrentTool("draw"),
-            isSelected: isDrawSelected,
-            icon: /* @__PURE__ */ jsxRuntime.jsx(DrawIcon, { isSelected: isDrawSelected }),
-            label: "Draw (D)"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ToolbarButton,
-          {
-            onClick: () => editor.setCurrentTool("eraser"),
-            isSelected: isEraseSelected,
-            icon: /* @__PURE__ */ jsxRuntime.jsx(EraseIcon, { isSelected: isEraseSelected }),
-            label: "Eraser (E)"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            style: {
-              width: 3,
-              height: 36,
-              backgroundColor: "#C4C2C2",
-              borderRadius: 1.5,
-              margin: "0 6px"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ToolbarButton,
-          {
-            onClick: () => {
-              console.log("Star button clicked - placeholder for future feature");
-            },
-            isSelected: isStarSelected,
-            icon: /* @__PURE__ */ jsxRuntime.jsx(StarIcon, { isSelected: isStarSelected }),
-            label: "Special (Coming Soon)"
-          }
-        )
-      ]
-    }
-  );
-};
-var LassoOverlay = () => {
-  const editor = tldraw.useEditor();
-  const lassoPoints = tldraw.useValue(
-    "lasso points",
-    () => {
-      if (!editor.isIn("lasso-select.lassoing")) return [];
-      const lassoing = editor.getStateDescendant("lasso-select.lassoing");
-      return lassoing?.points?.get() ?? [];
-    },
-    [editor]
-  );
-  const svgPath = react.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__ */ jsxRuntime.jsx("svg", { className: "tl-overlays__item", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(tldraw.TldrawOverlays, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(LassoOverlay, {})
-  ] });
-};
-var SelectionOverlay = ({ selections }) => {
-  const [scrollPos, setScrollPos] = react.useState({ x: 0, y: 0 });
-  react.useEffect(() => {
-    const handleScroll = () => {
-      setScrollPos({ x: window.scrollX, y: window.scrollY });
-    };
-    handleScroll();
-    window.addEventListener("scroll", handleScroll, { passive: true });
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: selections.map((selection) => {
-    const viewportX = selection.boundingBox.x - scrollPos.x;
-    const viewportY = selection.boundingBox.y - scrollPos.y;
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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] = react.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+var AnnotationsSidebar = ({
+  annotations,
+  onClear,
+  onExport
+}) => {
+  const [isOpen, setIsOpen] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
       "data-skema": "sidebar",
       style: {
@@ -1447,9 +1815,9 @@ var AnnotationsSidebar = ({ annotations, onClear, onExport }) => {
             },
             children: [
               /* @__PURE__ */ jsxRuntime.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" && `[DOM] ${annotation.tagName}`,
+                annotation.type === "drawing" && `[Draw] ${annotation.comment || "Drawing"}`,
+                annotation.type === "gesture" && `[Gesture] ${annotation.gesture}`
               ] }),
               annotation.type === "dom_selection" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 annotation.comment && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#374151", fontSize: "12px", marginBottom: "4px" }, children: annotation.comment }),
@@ -1463,37 +1831,556 @@ var AnnotationsSidebar = ({ annotations, onClear, onExport }) => {
     }
   );
 };
-var Skema = ({
-  enabled = true,
-  onAnnotationsChange,
-  onAnnotationSubmit,
-  onAnnotationDelete,
-  toggleShortcut = "mod+shift+e",
-  initialAnnotations = [],
-  zIndex = 99999
-}) => {
-  const [isActive, setIsActive] = react.useState(enabled);
-  const [annotations, setAnnotations] = react.useState(initialAnnotations);
-  const [domSelections, setDomSelections] = react.useState([]);
-  const [pendingAnnotation, setPendingAnnotation] = react.useState(null);
-  const [pendingExiting, setPendingExiting] = react.useState(false);
-  const [hoveredMarkerId, setHoveredMarkerId] = react.useState(null);
-  const editorRef = react.useRef(null);
-  const popupRef = react.useRef(null);
-  const lastDoubleClickRef = react.useRef(0);
-  react.useRef(false);
-  const cleanupRef = react.useRef(null);
+var SelectionOverlay = ({ selections }) => {
+  const [scrollPos, setScrollPos] = react.useState({ x: 0, y: 0 });
+  react.useEffect(() => {
+    const handleScrollOrResize = () => {
+      setScrollPos({ x: window.scrollX, y: window.scrollY });
+    };
+    handleScrollOrResize();
+    window.addEventListener("scroll", handleScrollOrResize, { passive: true });
+    window.addEventListener("resize", handleScrollOrResize);
+    return () => {
+      window.removeEventListener("scroll", handleScrollOrResize);
+      window.removeEventListener("resize", handleScrollOrResize);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: selections.map((selection) => {
+    const viewportX = selection.boundingBox.x - scrollPos.x;
+    const viewportY = selection.boundingBox.y - scrollPos.y;
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 ShapeLoader = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width: 28,
+        height: 28,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "skema-shape skema-shape-1",
+            viewBox: "0 0 24 24",
+            style: {
+              position: "absolute",
+              width: 24,
+              height: 24
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "polygon",
+              {
+                points: "12,2 15,9 22,9 16,14 18,22 12,17 6,22 8,14 2,9 9,9",
+                fill: "#F97316"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "skema-shape skema-shape-2",
+            viewBox: "0 0 24 24",
+            style: {
+              position: "absolute",
+              width: 24,
+              height: 24
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "polygon",
+              {
+                points: "6,4 22,4 18,20 2,20",
+                fill: "#FACC15"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "skema-shape skema-shape-3",
+            viewBox: "0 0 24 24",
+            style: {
+              position: "absolute",
+              width: 24,
+              height: 24
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "polygon",
+              {
+                points: "12,3 22,21 2,21",
+                fill: "#EF4444"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "skema-shape skema-shape-4",
+            viewBox: "0 0 24 24",
+            style: {
+              position: "absolute",
+              width: 24,
+              height: 24
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: "#3B82F6" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "skema-shape skema-shape-5",
+            viewBox: "0 0 24 24",
+            style: {
+              position: "absolute",
+              width: 24,
+              height: 24
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", fill: "#22C55E" })
+          }
+        )
+      ]
+    }
+  );
+};
+var ProcessingOverlayStyles = `
+  @keyframes skema-processing-pulse {
+    0%, 100% {
+      opacity: 0.7;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.95;
+      transform: scale(1.02);
+    }
+  }
+  @keyframes skema-processing-shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+    100% {
+      background-position: 200% 0;
+    }
+  }
+  @keyframes skema-processing-border {
+    0%, 100% {
+      border-color: rgba(139, 92, 246, 0.85);
+    }
+    50% {
+      border-color: rgba(139, 92, 246, 1);
+    }
+  }
+  
+  /* Shape loader animations */
+  .skema-shape {
+    opacity: 0;
+    transform: scale(0.5) rotate(-180deg);
+    animation: skema-shape-cycle 2.5s ease-in-out infinite;
+  }
+  .skema-shape-1 { animation-delay: 0s; }
+  .skema-shape-2 { animation-delay: 0.5s; }
+  .skema-shape-3 { animation-delay: 1s; }
+  .skema-shape-4 { animation-delay: 1.5s; }
+  .skema-shape-5 { animation-delay: 2s; }
+  
+  @keyframes skema-shape-cycle {
+    0%, 100% {
+      opacity: 0;
+      transform: scale(0.5) rotate(-180deg);
+    }
+    10%, 30% {
+      opacity: 1;
+      transform: scale(1) rotate(0deg);
+    }
+    40% {
+      opacity: 0;
+      transform: scale(0.5) rotate(180deg);
+    }
+  }
+`;
+var ProcessingOverlay = ({ boundingBox, scrollOffset }) => {
+  const viewportX = boundingBox.x - scrollOffset.x;
+  const viewportY = boundingBox.y - scrollOffset.y;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: ProcessingOverlayStyles }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-skema": "processing-overlay",
+        style: {
+          position: "fixed",
+          left: viewportX,
+          top: viewportY,
+          width: boundingBox.width,
+          height: boundingBox.height,
+          border: "3px solid rgba(139, 92, 246, 0.95)",
+          borderRadius: 4,
+          pointerEvents: "none",
+          zIndex: 999998,
+          animation: "skema-processing-pulse 1.5s ease-in-out infinite, skema-processing-border 1.5s ease-in-out infinite",
+          background: "linear-gradient(90deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.35) 50%, rgba(139, 92, 246, 0.15) 100%)",
+          backgroundSize: "200% 100%"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                background: "linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%)",
+                backgroundSize: "200% 100%",
+                animation: "skema-processing-shimmer 2s linear infinite",
+                borderRadius: 2
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: -18,
+                left: "50%",
+                transform: "translateX(-50%)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "8px 14px",
+                backgroundColor: "#FFFFFF",
+                borderRadius: 20,
+                boxShadow: "0 4px 16px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08)"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(ShapeLoader, {})
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+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: '"Clash Display", 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 = react.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] = react.useState(initialValue);
+    const [isShaking, setIsShaking] = react.useState(false);
+    const [animState, setAnimState] = react.useState("initial");
+    const [isFocused, setIsFocused] = react.useState(false);
+    const textareaRef = react.useRef(null);
+    const popupRef = react.useRef(null);
+    react.useEffect(() => {
+      if (isExiting && animState !== "exit") {
+        setAnimState("exit");
+      }
+    }, [isExiting, animState]);
+    react.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 = react.useCallback(() => {
+      setIsShaking(true);
+      setTimeout(() => {
+        setIsShaking(false);
+        textareaRef.current?.focus();
+      }, 250);
+    }, []);
+    react.useImperativeHandle(ref, () => ({
+      shake
+    }), [shake]);
+    const handleCancel = react.useCallback(() => {
+      setAnimState("exit");
+      setTimeout(() => {
+        onCancel();
+      }, 150);
+    }, [onCancel]);
+    const handleSubmit = react.useCallback(() => {
+      if (!text.trim()) return;
+      onSubmit(text.trim());
+    }, [text, onSubmit]);
+    const handleKeyDown = react.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: popupRef,
+          "data-skema": "annotation-popup",
+          style: popupStyle,
+          onClick: (e) => e.stopPropagation(),
+          onPointerDown: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.header, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles.element, children: element }) }),
+            selectedText && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.quote, children: [
+              "\u201C",
+              selectedText.slice(0, 80),
+              selectedText.length > 80 ? "..." : "",
+              "\u201D"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: styles.actions, children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+);
+function useKeyboardShortcuts({ onToggle, shortcut = "mod+shift+e" }) {
   react.useEffect(() => {
     const handleKeyDown = (e) => {
       const isMod = e.metaKey || e.ctrlKey;
-      if (isMod && e.shiftKey && e.key.toLowerCase() === "e") {
-        e.preventDefault();
-        setIsActive((prev) => !prev);
+      if (shortcut === "mod+shift+e") {
+        if (isMod && e.shiftKey && e.key.toLowerCase() === "e") {
+          e.preventDefault();
+          onToggle();
+        }
       }
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, []);
+  }, [onToggle, shortcut]);
+}
+function useScrollSync(isActive, editorRef) {
   const [scrollOffset, setScrollOffset] = react.useState({ x: 0, y: 0 });
   react.useEffect(() => {
     if (!isActive) return;
@@ -1506,10 +2393,15 @@ var Skema = ({
     };
     syncScroll();
     window.addEventListener("scroll", syncScroll, { passive: true });
+    window.addEventListener("resize", syncScroll);
     return () => {
       window.removeEventListener("scroll", syncScroll);
+      window.removeEventListener("resize", syncScroll);
     };
-  }, [isActive]);
+  }, [isActive, editorRef]);
+  return scrollOffset;
+}
+function useWheelIntercept(isActive) {
   react.useEffect(() => {
     if (!isActive) return;
     const handleWheel = (e) => {
@@ -1528,9 +2420,586 @@ var Skema = ({
       document.removeEventListener("wheel", handleWheel, { capture: true });
     };
   }, [isActive]);
+}
+function useShapePersistence(isActive, editorRef) {
+  const savedShapesRef = react.useRef(null);
+  const wasActiveRef = react.useRef(isActive);
+  react.useEffect(() => {
+    const editor = editorRef.current;
+    if (wasActiveRef.current && !isActive && editor) {
+      const allShapes = editor.getCurrentPageShapes();
+      const drawingShapes = allShapes.filter(
+        (shape) => ["draw", "line", "arrow", "geo", "text", "note", "frame"].includes(shape.type)
+      );
+      if (drawingShapes.length > 0) {
+        const shapeRecords = {};
+        for (const shape of drawingShapes) {
+          shapeRecords[shape.id] = shape;
+        }
+        savedShapesRef.current = shapeRecords;
+        const shapeIds = drawingShapes.map((s) => s.id);
+        editor.deleteShapes(shapeIds);
+        console.log(`[Skema] Hiding: saved ${drawingShapes.length} shape(s) to memory`);
+      }
+    }
+    wasActiveRef.current = isActive;
+  }, [isActive, editorRef]);
+  react.useEffect(() => {
+    if (!isActive) return;
+    const editor = editorRef.current;
+    if (!editor || !savedShapesRef.current) return;
+    const timeoutId = setTimeout(() => {
+      const savedShapes = savedShapesRef.current;
+      const currentEditor = editorRef.current;
+      if (!savedShapes || !currentEditor) return;
+      const shapesToRestore = Object.values(savedShapes);
+      if (shapesToRestore.length > 0) {
+        currentEditor.createShapes(shapesToRestore);
+        console.log(`[Skema] Restoring: loaded ${shapesToRestore.length} shape(s) from memory`);
+        savedShapesRef.current = null;
+      }
+    }, 100);
+    return () => clearTimeout(timeoutId);
+  }, [isActive, editorRef]);
+}
+
+// src/utils/gesture-recognizer.ts
+function angleBetweenVectors(v1, v2) {
+  const dot = v1.x * v2.x + v1.y * v2.y;
+  const mag1 = Math.sqrt(v1.x * v1.x + v1.y * v1.y);
+  const mag2 = Math.sqrt(v2.x * v2.x + v2.y * v2.y);
+  if (mag1 === 0 || mag2 === 0) return 0;
+  const cosAngle = Math.max(-1, Math.min(1, dot / (mag1 * mag2)));
+  return Math.acos(cosAngle);
+}
+function calculatePathLength(points) {
+  let length = 0;
+  for (let i = 1; i < points.length; i++) {
+    const dx = points[i].x - points[i - 1].x;
+    const dy = points[i].y - points[i - 1].y;
+    length += Math.sqrt(dx * dx + dy * dy);
+  }
+  return length;
+}
+function calculateBoundingBox(points) {
+  if (points.length === 0) {
+    return { width: 0, height: 0, diagonal: 0 };
+  }
+  let minX = Infinity, maxX = -Infinity;
+  let minY = Infinity, maxY = -Infinity;
+  for (const point of points) {
+    minX = Math.min(minX, point.x);
+    maxX = Math.max(maxX, point.x);
+    minY = Math.min(minY, point.y);
+    maxY = Math.max(maxY, point.y);
+  }
+  const width = maxX - minX;
+  const height = maxY - minY;
+  const diagonal = Math.sqrt(width * width + height * height);
+  return { width, height, diagonal };
+}
+function getPointsBounds(points) {
+  if (points.length === 0) {
+    return null;
+  }
+  let minX = Infinity, maxX = -Infinity;
+  let minY = Infinity, maxY = -Infinity;
+  for (const point of points) {
+    minX = Math.min(minX, point.x);
+    maxX = Math.max(maxX, point.x);
+    minY = Math.min(minY, point.y);
+    maxY = Math.max(maxY, point.y);
+  }
+  return {
+    minX,
+    minY,
+    maxX,
+    maxY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
+}
+function countDirectionChanges(points, angleThreshold = Math.PI / 2) {
+  if (points.length < 3) return 0;
+  let changes = 0;
+  const sampleRate = Math.max(1, Math.floor(points.length / 50));
+  const sampledPoints = [];
+  for (let i = 0; i < points.length; i += sampleRate) {
+    sampledPoints.push(points[i]);
+  }
+  if (sampledPoints[sampledPoints.length - 1] !== points[points.length - 1]) {
+    sampledPoints.push(points[points.length - 1]);
+  }
+  for (let i = 1; i < sampledPoints.length - 1; i++) {
+    const v1 = {
+      x: sampledPoints[i].x - sampledPoints[i - 1].x,
+      y: sampledPoints[i].y - sampledPoints[i - 1].y
+    };
+    const v2 = {
+      x: sampledPoints[i + 1].x - sampledPoints[i].x,
+      y: sampledPoints[i + 1].y - sampledPoints[i].y
+    };
+    const angle = angleBetweenVectors(v1, v2);
+    if (angle > angleThreshold) {
+      changes++;
+    }
+  }
+  return changes;
+}
+function isRealtimeScribble(points) {
+  if (points.length < 15) {
+    return {
+      isScribble: false,
+      confidence: 0,
+      directionChanges: 0,
+      compactness: 0
+    };
+  }
+  const directionChanges = countDirectionChanges(points, Math.PI / 3);
+  const pathLength = calculatePathLength(points);
+  const { diagonal } = calculateBoundingBox(points);
+  const compactness = diagonal > 0 ? pathLength / diagonal : 0;
+  const minDirectionChanges = 5;
+  const minCompactness = 1.8;
+  const minPathLength = 80;
+  const meetsDirectionCriteria = directionChanges >= minDirectionChanges;
+  const meetsCompactnessCriteria = compactness >= minCompactness;
+  const meetsLengthCriteria = pathLength >= minPathLength;
+  const isScribble = meetsDirectionCriteria && meetsCompactnessCriteria && meetsLengthCriteria;
+  let confidence = 0;
+  if (isScribble) {
+    const directionScore = Math.min(1, (directionChanges - minDirectionChanges) / 4);
+    const compactnessScore = Math.min(1, (compactness - minCompactness) / 2);
+    confidence = (directionScore + compactnessScore) / 2;
+  }
+  return {
+    isScribble,
+    confidence,
+    directionChanges,
+    compactness
+  };
+}
+function findOverlappingShapesFromBounds(editor, bounds, excludeIds = []) {
+  const allShapes = editor.getCurrentPageShapes();
+  const overlapping = [];
+  for (const shape of allShapes) {
+    if (excludeIds.includes(shape.id)) continue;
+    if (!["draw", "line", "arrow", "geo", "text", "note", "frame"].includes(shape.type)) {
+      continue;
+    }
+    const shapeBounds = editor.getShapePageBounds(shape.id);
+    if (shapeBounds) {
+      const intersects = !(bounds.maxX < shapeBounds.x || bounds.minX > shapeBounds.x + shapeBounds.w || bounds.maxY < shapeBounds.y || bounds.minY > shapeBounds.y + shapeBounds.h);
+      if (intersects) {
+        overlapping.push(shape.id);
+      }
+    }
+  }
+  return overlapping;
+}
+
+// src/hooks/useScribbleDelete.ts
+function useScribbleDelete({
+  isActive,
+  editorRef,
+  setAnnotations,
+  setScribbleToast
+}) {
+  const scribblePointsRef = react.useRef([]);
+  const isDrawingRef = react.useRef(false);
+  const scribbleDetectedRef = react.useRef(false);
+  react.useEffect(() => {
+    if (!isActive) return;
+    const handleScribbleDelete = (overlappingIds) => {
+      const editor = editorRef.current;
+      if (!editor || overlappingIds.length === 0) return;
+      editor.cancel();
+      editor.deleteShapes(overlappingIds);
+      setAnnotations((prev) => prev.filter((annotation) => {
+        if (annotation.type === "drawing") {
+          const drawingShapes = annotation.shapes;
+          return !drawingShapes.some(
+            (shapeId) => overlappingIds.includes(shapeId)
+          );
+        }
+        return true;
+      }));
+      const message = overlappingIds.length === 1 ? "Deleted 1 shape" : `Deleted ${overlappingIds.length} shapes`;
+      setScribbleToast(message);
+      setTimeout(() => setScribbleToast(null), 2e3);
+      console.log(`[Skema] Scribble-delete: removed ${overlappingIds.length} shape(s)`);
+    };
+    const handlePointerDown = (e) => {
+      const editor = editorRef.current;
+      if (!editor) return;
+      const currentTool = editor.getCurrentToolId();
+      if (currentTool !== "draw") return;
+      isDrawingRef.current = true;
+      scribbleDetectedRef.current = false;
+      scribblePointsRef.current = [{
+        x: e.clientX + window.scrollX,
+        y: e.clientY + window.scrollY
+      }];
+    };
+    const handlePointerMove = (e) => {
+      const editor = editorRef.current;
+      if (!editor || !isDrawingRef.current || scribbleDetectedRef.current) return;
+      const currentTool = editor.getCurrentToolId();
+      if (currentTool !== "draw") {
+        isDrawingRef.current = false;
+        return;
+      }
+      const newPoint = {
+        x: e.clientX + window.scrollX,
+        y: e.clientY + window.scrollY
+      };
+      const points = scribblePointsRef.current;
+      const lastPoint = points[points.length - 1];
+      if (lastPoint) {
+        const dx = newPoint.x - lastPoint.x;
+        const dy = newPoint.y - lastPoint.y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist < 3) return;
+      }
+      points.push(newPoint);
+      scribblePointsRef.current = points;
+      if (points.length >= 20 && points.length % 5 === 0) {
+        const gestureResult = isRealtimeScribble(points);
+        if (gestureResult.isScribble) {
+          const bounds = getPointsBounds(points);
+          if (bounds) {
+            const overlappingIds = findOverlappingShapesFromBounds(editor, bounds, []);
+            if (overlappingIds.length > 0) {
+              scribbleDetectedRef.current = true;
+              isDrawingRef.current = false;
+              handleScribbleDelete(overlappingIds);
+            }
+          }
+        }
+      }
+    };
+    const handlePointerUp = () => {
+      isDrawingRef.current = false;
+      scribblePointsRef.current = [];
+      scribbleDetectedRef.current = false;
+    };
+    document.addEventListener("pointerdown", handlePointerDown, { capture: true });
+    document.addEventListener("pointermove", handlePointerMove, { capture: true });
+    document.addEventListener("pointerup", handlePointerUp, { capture: true });
+    document.addEventListener("pointercancel", handlePointerUp, { capture: true });
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown, { capture: true });
+      document.removeEventListener("pointermove", handlePointerMove, { capture: true });
+      document.removeEventListener("pointerup", handlePointerUp, { capture: true });
+      document.removeEventListener("pointercancel", handlePointerUp, { capture: true });
+    };
+  }, [isActive, editorRef, setAnnotations, setScribbleToast]);
+}
+var LassoOverlay = () => {
+  const editor = tldraw.useEditor();
+  const lassoPoints = tldraw.useValue(
+    "lasso points",
+    () => {
+      if (!editor.isIn("lasso-select.lassoing")) return [];
+      const lassoing = editor.getStateDescendant("lasso-select.lassoing");
+      return lassoing?.points?.get() ?? [];
+    },
+    [editor]
+  );
+  const svgPath = react.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__ */ jsxRuntime.jsx("svg", { className: "tl-overlays__item", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(tldraw.TldrawOverlays, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(LassoOverlay, {})
+  ] });
+};
+
+// src/lib/tldrawConfig.ts
+var skemaComponents = {
+  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
+};
+var skemaOverrides = {
+  tools(editor, tools) {
+    return {
+      ...tools,
+      "select": {
+        ...tools["select"],
+        kbd: "s"
+      },
+      "lasso-select": {
+        id: "lasso-select",
+        label: "Lasso Select",
+        icon: "blob",
+        kbd: "l",
+        onSelect: () => {
+          editor.setCurrentTool("lasso-select");
+        }
+      }
+    };
+  }
+};
+var skemaHiddenUiStyles = `
+  .tlui-button[data-testid="back-to-content"],
+  .tlui-offscreen-indicator,
+  [class*="back-to-content"],
+  .tl-offscreen-indicator {
+    display: none !important;
+  }
+`;
+var skemaToastStyles = `
+  @keyframes skema-toast-fade {
+    from {
+      opacity: 0;
+      transform: translateX(-50%) translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+  }
+`;
+var Skema = ({
+  enabled = true,
+  daemonUrl = "ws://localhost:9999",
+  onAnnotationsChange,
+  onAnnotationSubmit: externalOnAnnotationSubmit,
+  onAnnotationDelete: externalOnAnnotationDelete,
+  onProcessingCancel: externalOnProcessingCancel,
+  toggleShortcut = "mod+shift+e",
+  initialAnnotations = [],
+  zIndex = 99999,
+  isProcessing: externalIsProcessing
+}) => {
+  const [isActive, setIsActive] = react.useState(enabled);
+  const [annotations, setAnnotations] = react.useState(initialAnnotations);
+  const [domSelections, setDomSelections] = react.useState([]);
+  const [pendingAnnotation, setPendingAnnotation] = react.useState(null);
+  const [pendingExiting, setPendingExiting] = react.useState(false);
+  const [hoveredMarkerId, setHoveredMarkerId] = react.useState(null);
+  const [processingBoundingBox, setProcessingBoundingBox] = react.useState(null);
+  const [scribbleToast, setScribbleToast] = react.useState(null);
+  const [internalIsProcessing, setInternalIsProcessing] = react.useState(false);
+  const [isToolbarExpanded, setIsToolbarExpanded] = react.useState(false);
+  const [isStylePanelOpen, setIsStylePanelOpen] = react.useState(false);
+  const annotationChangesRef = react.useRef(/* @__PURE__ */ new Map());
+  const {
+    state: daemonState,
+    isGenerating,
+    generate,
+    revert
+  } = useDaemon({
+    url: daemonUrl || "ws://localhost:9999",
+    autoConnect: daemonUrl !== null,
+    autoReconnect: daemonUrl !== null
+  });
+  const isProcessing = externalIsProcessing !== void 0 ? externalIsProcessing : internalIsProcessing || isGenerating;
+  const internalOnAnnotationSubmit = react.useCallback(async (annotation, comment) => {
+    if (!daemonState.connected) {
+      console.warn("[Skema] Not connected to daemon. Run: npx skema-serve");
+      return;
+    }
+    setInternalIsProcessing(true);
+    try {
+      const result = await generate(
+        { ...annotation, comment },
+        (event) => {
+          if (event.type === "text") {
+            console.log(`%c[Skema ${daemonState.provider}]`, "color: #10b981", event.content);
+          } else if (event.type === "error") {
+            console.error("[Skema Error]", event.content);
+          }
+        }
+      );
+      if (result.annotationId) {
+        annotationChangesRef.current.set(annotation.id, result.annotationId);
+      }
+    } catch (error) {
+      console.error("[Skema] Failed to generate:", error);
+    } finally {
+      setInternalIsProcessing(false);
+    }
+  }, [daemonState.connected, daemonState.provider, generate]);
+  const internalOnAnnotationDelete = react.useCallback(async (annotationId) => {
+    const trackedId = annotationChangesRef.current.get(annotationId);
+    if (!trackedId) {
+      return;
+    }
+    try {
+      await revert(trackedId);
+      annotationChangesRef.current.delete(annotationId);
+    } catch (error) {
+      console.error("[Skema] Failed to revert:", error);
+    }
+  }, [revert]);
+  const internalOnProcessingCancel = react.useCallback(() => {
+    setInternalIsProcessing(false);
+  }, []);
+  const onAnnotationSubmit = externalOnAnnotationSubmit || (daemonUrl !== null ? internalOnAnnotationSubmit : void 0);
+  const onAnnotationDelete = externalOnAnnotationDelete || (daemonUrl !== null ? internalOnAnnotationDelete : void 0);
+  const onProcessingCancel = externalOnProcessingCancel || internalOnProcessingCancel;
+  const editorRef = react.useRef(null);
+  const popupRef = react.useRef(null);
+  const lastDoubleClickRef = react.useRef(0);
+  const cleanupRef = react.useRef(null);
+  useKeyboardShortcuts({
+    onToggle: react.useCallback(() => setIsActive((prev) => !prev), []),
+    shortcut: toggleShortcut
+  });
+  const scrollOffset = useScrollSync(isActive, editorRef);
+  useWheelIntercept(isActive);
+  useShapePersistence(isActive, editorRef);
+  useScribbleDelete({
+    isActive,
+    editorRef,
+    setAnnotations,
+    setScribbleToast
+  });
   react.useEffect(() => {
     onAnnotationsChange?.(annotations);
   }, [annotations, onAnnotationsChange]);
+  react.useEffect(() => {
+    if (!isProcessing) {
+      setProcessingBoundingBox(null);
+    }
+  }, [isProcessing]);
+  react.useEffect(() => {
+    return () => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+      }
+    };
+  }, []);
+  react.useEffect(() => {
+    if (!isActive) return;
+    const handleResize = () => {
+      setDomSelections((prevSelections) => {
+        if (prevSelections.length === 0) return prevSelections;
+        return prevSelections.map((selection) => {
+          if (selection.isMultiSelect && selection.elements) {
+            const updatedElements = selection.elements.map((el) => {
+              const domElement2 = document.querySelector(el.selector);
+              if (domElement2) {
+                return { ...el, boundingBox: getBoundingBox(domElement2) };
+              }
+              return el;
+            });
+            const validElements = updatedElements.filter((el) => {
+              const domEl = document.querySelector(el.selector);
+              return domEl !== null;
+            });
+            if (validElements.length > 0) {
+              const minX = Math.min(...updatedElements.map((e) => e.boundingBox.x));
+              const minY = Math.min(...updatedElements.map((e) => e.boundingBox.y));
+              const maxX = Math.max(...updatedElements.map((e) => e.boundingBox.x + e.boundingBox.width));
+              const maxY = Math.max(...updatedElements.map((e) => e.boundingBox.y + e.boundingBox.height));
+              return {
+                ...selection,
+                elements: updatedElements,
+                boundingBox: {
+                  x: minX,
+                  y: minY,
+                  width: maxX - minX,
+                  height: maxY - minY
+                }
+              };
+            }
+            return selection;
+          }
+          const domElement = document.querySelector(selection.selector);
+          if (domElement) {
+            return { ...selection, boundingBox: getBoundingBox(domElement) };
+          }
+          return selection;
+        });
+      });
+      setAnnotations((prevAnnotations) => {
+        if (prevAnnotations.length === 0) return prevAnnotations;
+        return prevAnnotations.map((annotation) => {
+          if (annotation.type !== "dom_selection") return annotation;
+          if (annotation.isMultiSelect && annotation.elements) {
+            const updatedElements = annotation.elements.map((el) => {
+              const domElement2 = document.querySelector(el.selector);
+              if (domElement2) {
+                return { ...el, boundingBox: getBoundingBox(domElement2) };
+              }
+              return el;
+            });
+            const validElements = updatedElements.filter((el) => {
+              const domEl = document.querySelector(el.selector);
+              return domEl !== null;
+            });
+            if (validElements.length > 0) {
+              const minX = Math.min(...updatedElements.map((e) => e.boundingBox.x));
+              const minY = Math.min(...updatedElements.map((e) => e.boundingBox.y));
+              const maxX = Math.max(...updatedElements.map((e) => e.boundingBox.x + e.boundingBox.width));
+              const maxY = Math.max(...updatedElements.map((e) => e.boundingBox.y + e.boundingBox.height));
+              return {
+                ...annotation,
+                elements: updatedElements,
+                boundingBox: {
+                  x: minX,
+                  y: minY,
+                  width: maxX - minX,
+                  height: maxY - minY
+                }
+              };
+            }
+            return annotation;
+          }
+          const domElement = document.querySelector(annotation.selector);
+          if (domElement) {
+            return { ...annotation, boundingBox: getBoundingBox(domElement) };
+          }
+          return annotation;
+        });
+      });
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [isActive]);
   const getSelectedDrawings = react.useCallback(() => {
     if (!editorRef.current) return [];
     const editor = editorRef.current;
@@ -1540,6 +3009,32 @@ var Skema = ({
       (shape) => shape && ["draw", "line", "arrow", "geo", "text", "note"].includes(shape.type)
     );
   }, []);
+  const findDOMElementsInBounds = react.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 handleDOMSelect = react.useCallback((selection) => {
     const selectedDrawings = getSelectedDrawings();
     const hasDrawings = selectedDrawings.length > 0;
@@ -1602,25 +3097,83 @@ var Skema = ({
       shapeIds: hasDrawings ? editorRef.current?.getSelectedShapeIds() : void 0
     });
   }, [getSelectedDrawings]);
+  const handleDrawingAnnotation = react.useCallback((selectedIds, skipDomElements = false) => {
+    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;
+    let domElements = [];
+    if (!skipDomElements) {
+      const viewportBounds = {
+        x: selectionBounds.x - window.scrollX,
+        y: selectionBounds.y - window.scrollY,
+        width: selectionBounds.width,
+        height: selectionBounds.height
+      };
+      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: selectionBounds,
+      isMultiSelect: drawingShapes.length > 1 || domElements.length > 0,
+      annotationType: "drawing",
+      shapeIds: selectedIds,
+      selections: newDomSelections.length > 0 ? newDomSelections : void 0
+    });
+  }, [pendingAnnotation, findDOMElementsInBounds]);
   const handleAnnotationSubmit = react.useCallback(async (comment) => {
     if (!pendingAnnotation) return;
+    const now = Date.now();
+    let submittedAnnotation;
     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 }]);
+        submittedAnnotation = { type: "dom_selection", ...selections[0], comment };
       } else {
         const groupedSelection = {
-          id: `group-${Date.now()}`,
+          id: `group-${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(),
+          timestamp: now,
           pathname: selections[0].pathname,
           comment,
           isMultiSelect: true,
@@ -1636,174 +3189,64 @@ var Skema = ({
         };
         setDomSelections((prev) => [...prev, groupedSelection]);
         setAnnotations((prev) => [...prev, { type: "dom_selection", ...groupedSelection }]);
+        submittedAnnotation = { 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 editor = editorRef.current;
+      let drawingSvg;
+      let drawingImage;
+      let extractedText;
+      const gridConfig = { color: "#0066FF", size: 100, labels: true };
+      if (editor && pendingAnnotation.shapeIds && pendingAnnotation.shapeIds.length > 0) {
+        const shapeIds = pendingAnnotation.shapeIds;
+        try {
+          const svgResult = await editor.getSvgString(shapeIds, { padding: 20, background: false });
+          if (svgResult?.svg) {
+            drawingSvg = addGridToSvg(svgResult.svg, gridConfig);
+          }
+        } catch (e) {
+          console.warn("[Skema] Failed to export drawing SVG:", e);
+        }
+        try {
+          const imageResult = await editor.toImage(shapeIds, { format: "png", padding: 20, background: true });
+          if (imageResult?.blob) {
+            drawingImage = await blobToBase64(imageResult.blob);
+          }
+        } 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();
       const drawingAnnotation = {
-        id: `drawing-${Date.now()}`,
+        id: `drawing-${now}`,
         type: "drawing",
         tool: "draw",
         shapes: pendingAnnotation.shapeIds,
-        boundingBox: bbox,
-        timestamp: Date.now(),
+        boundingBox: pendingAnnotation.boundingBox,
+        timestamp: now,
         comment,
-        nearbyElements
+        drawingSvg,
+        drawingImage,
+        extractedText: extractedText || void 0,
+        gridConfig,
+        nearbyElements,
+        viewport,
+        projectStyles
       };
       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);
+      submittedAnnotation = drawingAnnotation;
     }
-    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
-        };
+    if (onAnnotationSubmit && submittedAnnotation) {
+      if (pendingAnnotation.boundingBox) {
+        setProcessingBoundingBox(pendingAnnotation.boundingBox);
       }
       onAnnotationSubmit(submittedAnnotation, comment);
     }
@@ -1815,19 +3258,27 @@ ${selections.length > 1 ? "*Forensic data shown for first element of selection*\
   }, [pendingAnnotation, onAnnotationSubmit]);
   const handleAnnotationCancel = react.useCallback(() => {
     setPendingExiting(true);
+    if (isProcessing) {
+      onProcessingCancel?.();
+    }
+    setProcessingBoundingBox(null);
     setTimeout(() => {
       setPendingAnnotation(null);
       setPendingExiting(false);
     }, 150);
-  }, []);
+  }, [isProcessing, onProcessingCancel]);
   const handleDeleteAnnotation = react.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);
+    if (isProcessing) {
+      onProcessingCancel?.();
+      setProcessingBoundingBox(null);
+    }
     onAnnotationDelete?.(annotation.id);
-  }, [onAnnotationDelete]);
+  }, [onAnnotationDelete, isProcessing, onProcessingCancel]);
   const handleClear = react.useCallback(() => {
     setAnnotations([]);
     setDomSelections([]);
@@ -1848,97 +3299,14 @@ ${selections.length > 1 ? "*Forensic data shown for first element of selection*\
     console.log("[Skema] Exported annotations:", exportData);
     alert("Annotations copied to clipboard!");
   }, [annotations]);
-  const findDOMElementsInBounds = react.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 = react.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);
+  const handleBrushSelection = react.useCallback((brushBounds) => {
+    if (editorRef.current) {
+      const selectedShapeIds = editorRef.current.getSelectedShapeIds();
+      if (selectedShapeIds.length > 0) {
+        handleDrawingAnnotation(selectedShapeIds, true);
+        return;
       }
     }
-    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 = react.useCallback((brushBounds) => {
     const viewportBounds = {
       x: brushBounds.x - window.scrollX,
       y: brushBounds.y - window.scrollY,
@@ -1959,24 +3327,16 @@ ${selections.length > 1 ? "*Forensic data shown for first element of selection*\
     } else {
       handleMultiDOMSelect(selections);
     }
-  }, [findDOMElementsInBounds, domSelections, handleDOMSelect, handleMultiDOMSelect]);
-  const isPointInPolygon = react.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;
-  }, []);
+  }, [findDOMElementsInBounds, domSelections, handleDOMSelect, handleMultiDOMSelect, handleDrawingAnnotation]);
   const handleLassoSelection = react.useCallback((lassoPoints) => {
     if (lassoPoints.length < 3) return;
+    if (editorRef.current) {
+      const selectedShapeIds = editorRef.current.getSelectedShapeIds();
+      if (selectedShapeIds.length > 0) {
+        handleDrawingAnnotation(selectedShapeIds, true);
+        return;
+      }
+    }
     const viewportPoints = lassoPoints.map((p) => ({
       x: p.x - window.scrollX,
       y: p.y - window.scrollY
@@ -2020,16 +3380,16 @@ ${selections.length > 1 ? "*Forensic data shown for first element of selection*\
     } else {
       handleMultiDOMSelect(selections);
     }
-  }, [isPointInPolygon, domSelections, handleDOMSelect, handleMultiDOMSelect]);
+  }, [domSelections, handleDOMSelect, handleMultiDOMSelect, handleDrawingAnnotation]);
   const handleMount = react.useCallback((editor) => {
     editorRef.current = editor;
     editor.setStyleForNextShapes(tldraw.ArrowShapeKindStyle, "arc");
     try {
       const selectIdleState = editor.getStateDescendant("select.idle");
       if (selectIdleState) {
-        selectIdleState.handleDoubleClickOnCanvas = (info) => {
+        selectIdleState.handleDoubleClickOnCanvas = (_info) => {
           lastDoubleClickRef.current = Date.now();
-          const point = editor.pageToViewport(info.point);
+          const point = editor.inputs.currentScreenPoint;
           const elements = document.elementsFromPoint(point.x, point.y);
           const target = elements.find(
             (el) => el instanceof HTMLElement && !shouldIgnoreElement(el)
@@ -2053,6 +3413,14 @@ ${selections.length > 1 ? "*Forensic data shown for first element of selection*\
             });
           }
         };
+        selectIdleState.handleDoubleClickOnShape = (_info, shape) => {
+          lastDoubleClickRef.current = Date.now();
+          if (shape && ["draw", "line", "arrow", "geo", "text", "note"].includes(shape.type)) {
+            const selectedIds = editor.getSelectedShapeIds();
+            const shapeIds = selectedIds.length > 0 ? selectedIds : [shape.id];
+            handleDrawingAnnotation(shapeIds, true);
+          }
+        };
       }
     } catch (e) {
       console.warn("Failed to override double click behavior", e);
@@ -2065,12 +3433,10 @@ ${selections.length > 1 ? "*Forensic data shown for first element of selection*\
       }
     });
     const lassoSelectTool = editor.root.children?.["lasso-select"];
-    if (lassoSelectTool) {
-      if ("setOnLassoComplete" in lassoSelectTool) {
-        lassoSelectTool.setOnLassoComplete((points) => {
-          handleLassoSelection(points);
-        });
-      }
+    if (lassoSelectTool && "setOnLassoComplete" in lassoSelectTool) {
+      lassoSelectTool.setOnLassoComplete((points) => {
+        handleLassoSelection(points);
+      });
     }
     let lastBrush = null;
     editor.sideEffects.registerAfterChangeHandler("instance", (prev, next) => {
@@ -2086,16 +3452,8 @@ ${selections.length > 1 ? "*Forensic data shown for first element of selection*\
       } else if (next.brush) {
         lastBrush = next.brush;
       }
-      return;
     });
   }, [handleDOMSelect, handleBrushSelection, handleLassoSelection, handleMultiDOMSelect, handleDrawingAnnotation]);
-  react.useEffect(() => {
-    return () => {
-      if (cleanupRef.current) {
-        cleanupRef.current();
-      }
-    };
-  }, []);
   react.useEffect(() => {
     if (!isActive) return;
     const handlePointerDown = (e) => {
@@ -2114,46 +3472,6 @@ ${selections.length > 1 ? "*Forensic data shown for first element of selection*\
     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;
   }
@@ -2168,14 +3486,66 @@ ${selections.length > 1 ? "*Forensic data shown for first element of selection*\
         pointerEvents: "none"
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
-        .tlui-button[data-testid="back-to-content"],
-        .tlui-offscreen-indicator,
-        [class*="back-to-content"],
-        .tl-offscreen-indicator {
-          display: none !important;
-        }
-      ` }),
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: skemaHiddenUiStyles }),
+        !isStylePanelOpen && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          .tlui-style-panel__wrapper,
+          .tlui-style-panel {
+            display: none !important;
+          }
+        ` }),
+        isStylePanelOpen && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          .tlui-style-panel__wrapper {
+            top: 68px !important;
+            right: 16px !important;
+          }
+        ` }),
+        isToolbarExpanded && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => setIsStylePanelOpen((prev) => !prev),
+            title: isStylePanelOpen ? "Hide style settings" : "Show style settings",
+            style: {
+              position: "fixed",
+              top: 16,
+              right: 16,
+              width: 44,
+              height: 44,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: isStylePanelOpen ? "#FF6800" : "white",
+              border: "none",
+              borderRadius: 12,
+              boxShadow: "0 2px 10px rgba(0,0,0,0.15)",
+              cursor: "pointer",
+              pointerEvents: "auto",
+              zIndex: zIndex + 5,
+              transition: "all 0.2s ease"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z",
+                  stroke: isStylePanelOpen ? "white" : "#6B7280",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z",
+                  stroke: isStylePanelOpen ? "white" : "#6B7280",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            ] })
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -2188,21 +3558,31 @@ ${selections.length > 1 ? "*Forensic data shown for first element of selection*\
               tldraw.Tldraw,
               {
                 tools: [LassoSelectTool],
-                components,
-                overrides,
+                components: skemaComponents,
+                overrides: skemaOverrides,
                 onMount: handleMount,
                 hideUi: false,
                 inferDarkMode: false,
-                options: {
-                  // Disable camera constraints that would interfere with overlay mode
-                  maxPages: 1
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(SkemaToolbar, {})
+                options: { maxPages: 1 },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  SkemaToolbar,
+                  {
+                    onExpandedChange: setIsToolbarExpanded,
+                    onStylePanelChange: setIsStylePanelOpen
+                  }
+                )
               }
             )
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(SelectionOverlay, { selections: domSelections }),
+        isProcessing && processingBoundingBox && /* @__PURE__ */ jsxRuntime.jsx(
+          ProcessingOverlay,
+          {
+            boundingBox: processingBoundingBox,
+            scrollOffset
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           AnnotationMarkersLayer,
           {
@@ -2247,15 +3627,7 @@ ${selections.length > 1 ? "*Forensic data shown for first element of selection*\
               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
+                left: Math.max(160, Math.min(window.innerWidth - 160, pendingAnnotation.x / 100 * window.innerWidth)),
                 ...pendingAnnotation.clientY > window.innerHeight - 250 ? { bottom: window.innerHeight - pendingAnnotation.clientY + 30 } : { top: pendingAnnotation.clientY + 30 },
                 zIndex: zIndex + 3,
                 pointerEvents: "auto"
@@ -2299,7 +3671,31 @@ ${selections.length > 1 ? "*Forensic data shown for first element of selection*\
               " to toggle Skema"
             ]
           }
-        )
+        ),
+        scribbleToast && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-skema": "scribble-toast",
+            style: {
+              position: "fixed",
+              bottom: 60,
+              left: "50%",
+              transform: "translateX(-50%)",
+              padding: "10px 20px",
+              backgroundColor: "rgba(239, 68, 68, 0.95)",
+              color: "white",
+              borderRadius: "8px",
+              fontSize: "14px",
+              fontWeight: 500,
+              pointerEvents: "none",
+              zIndex: zIndex + 10,
+              boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+              animation: "skema-toast-fade 0.2s ease-out"
+            },
+            children: scribbleToast
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: skemaToastStyles })
       ]
     }
   );
@@ -2329,6 +3725,7 @@ exports.getViewportInfo = getViewportInfo;
 exports.identifyElement = identifyElement;
 exports.pointInBbox = pointInBbox;
 exports.shouldIgnoreElement = shouldIgnoreElement;
+exports.useDaemon = useDaemon;
 exports.viewportToDocument = viewportToDocument;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map