skema-core 0.2.0 → 2.1.1

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { forwardRef, useState, useRef, useEffect, useCallback, useImperativeHandle, useMemo } from 'react';
-import { StateNode, atom, Box, ArrowShapeKindStyle, Tldraw, TldrawOverlays, useEditor, useTools, useIsToolSelected, useValue, GeoShapeGeoStyle } from 'tldraw';
+import { DefaultColorThemePalette, StateNode, atom, Box, ArrowShapeKindStyle, Tldraw, TldrawOverlays, useEditor, useTools, useIsToolSelected, useValue, GeoShapeGeoStyle } from 'tldraw';
 import 'tldraw/tldraw.css';
 import { motion, AnimatePresence } from 'framer-motion';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -181,11 +181,21 @@ function useDaemon(options = {}) {
     autoReconnect = true,
     reconnectDelay = 2e3
   } = options;
+  const defaultProviderStatus = {
+    gemini: { installed: false, authorized: false, message: "Checking..." },
+    claude: { installed: false, authorized: false, message: "Checking..." }
+  };
   const [state, setState] = useState({
     connected: false,
     provider: "gemini",
+    mode: "direct-cli",
     availableProviders: [],
-    cwd: ""
+    availableModes: ["direct-cli", "mcp"],
+    providerStatus: defaultProviderStatus,
+    cwd: "",
+    mcpServerConnected: false,
+    mcpClientName: null,
+    annotationCounts: { pending: 0, acknowledged: 0, resolved: 0, dismissed: 0 }
   });
   const [isGenerating, setIsGenerating] = useState(false);
   const [error, setError] = useState(null);
@@ -223,12 +233,24 @@ function useDaemon(options = {}) {
           ...prev,
           connected: true,
           provider: msg.provider || prev.provider,
+          mode: msg.mode || prev.mode,
           availableProviders: msg.availableProviders || prev.availableProviders,
-          cwd: msg.cwd || prev.cwd
+          availableModes: msg.availableModes || prev.availableModes,
+          providerStatus: msg.providerStatus || prev.providerStatus,
+          cwd: msg.cwd || prev.cwd,
+          mcpServerConnected: msg.mcpServerConnected ?? prev.mcpServerConnected,
+          mcpClientName: msg.mcpClientName !== void 0 ? msg.mcpClientName : prev.mcpClientName
         }));
         setError(null);
         return;
       }
+      if (msg.type === "provider-statuses") {
+        setState((prev) => ({
+          ...prev,
+          providerStatus: msg.providerStatus || prev.providerStatus
+        }));
+        return;
+      }
       if (msg.type === "ai-event" && msg.id) {
         const callback = eventCallbacks.current.get(msg.id);
         if (callback) {
@@ -246,9 +268,40 @@ function useDaemon(options = {}) {
         setIsGenerating(false);
         return;
       }
+      if (msg.type === "annotation-queued" && msg.id) {
+        const pending = pendingRequests.current.get(msg.id);
+        if (pending) {
+          pendingRequests.current.delete(msg.id);
+          eventCallbacks.current.delete(msg.id);
+          pending.resolve({ success: true, annotationId: msg.annotationId, queued: true });
+        }
+        setIsGenerating(false);
+        return;
+      }
+      if (msg.type === "annotation-status-changed") {
+        return;
+      }
+      if (msg.type === "mcp-server-status") {
+        setState((prev) => ({
+          ...prev,
+          mcpServerConnected: msg.connected,
+          mcpClientName: msg.clientName !== void 0 ? msg.clientName : prev.mcpClientName
+        }));
+        return;
+      }
+      if (msg.type === "mcp-annotation-counts") {
+        setState((prev) => ({
+          ...prev,
+          annotationCounts: msg.counts
+        }));
+        return;
+      }
       if (msg.type === "provider-changed") {
         setState((prev) => ({ ...prev, provider: msg.provider }));
       }
+      if (msg.type === "mode-changed") {
+        setState((prev) => ({ ...prev, mode: msg.mode }));
+      }
       if (msg.type === "error" && msg.id) {
         const pending = pendingRequests.current.get(msg.id);
         if (pending) {
@@ -323,7 +376,23 @@ function useDaemon(options = {}) {
       return false;
     }
   }, [sendRequest]);
-  const generate = useCallback(async (annotation, onEvent) => {
+  const setMode = useCallback(async (mode) => {
+    try {
+      const response = await sendRequest("set-mode", { mode });
+      return response.type === "mode-changed";
+    } catch (e) {
+      console.error("[useDaemon] Failed to set mode:", e);
+      return false;
+    }
+  }, [sendRequest]);
+  const refreshProviderStatus = useCallback(async () => {
+    try {
+      await sendRequest("check-providers", {});
+    } catch (e) {
+      console.error("[useDaemon] Failed to refresh provider status:", e);
+    }
+  }, [sendRequest]);
+  const generate = useCallback(async (annotation, onEvent, options2) => {
     const id = nextId();
     if (onEvent) {
       eventCallbacks.current.set(id, onEvent);
@@ -339,7 +408,10 @@ function useDaemon(options = {}) {
       wsRef.current.send(JSON.stringify({
         id,
         type: "generate",
-        annotation
+        annotation,
+        // Include optional overrides
+        ...options2?.mode && { mode: options2.mode },
+        ...options2?.provider && { provider: options2.provider }
       }));
     });
   }, [nextId]);
@@ -378,6 +450,8 @@ function useDaemon(options = {}) {
     connect,
     disconnect,
     setProvider,
+    setMode,
+    refreshProviderStatus,
     generate,
     revert,
     readFile,
@@ -1424,11 +1498,12 @@ var CollapseButton = ({ onClick }) => {
     }
   );
 };
-var SkemaToolbar = ({ onExpandedChange, onStylePanelChange }) => {
+var SkemaToolbar = ({ isExpanded: controlledExpanded, onExpandedChange, onStylePanelChange, isDark = false }) => {
   const editor = useEditor();
   const tools = useTools();
   const shapesButtonRef = useRef(null);
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [internalExpanded, setInternalExpanded] = useState(false);
+  const isExpanded = controlledExpanded !== void 0 ? controlledExpanded : internalExpanded;
   const [isLogoHovered, setIsLogoHovered] = useState(false);
   const [isShapePickerOpen, setIsShapePickerOpen] = useState(false);
   const [isStylePanelOpen, setIsStylePanelOpen] = useState(false);
@@ -1438,7 +1513,7 @@ var SkemaToolbar = ({ onExpandedChange, onStylePanelChange }) => {
   const isEraseSelected = useIsToolSelected(tools["eraser"]);
   const isGeoSelected = useIsToolSelected(tools["geo"]);
   const handleExpand = (expanded) => {
-    setIsExpanded(expanded);
+    setInternalExpanded(expanded);
     onExpandedChange?.(expanded);
     if (!expanded) {
       setIsStylePanelOpen(false);
@@ -1483,9 +1558,9 @@ var SkemaToolbar = ({ onExpandedChange, onStylePanelChange }) => {
               alignItems: "center",
               gap: 6,
               padding: "6px 12px",
-              backgroundColor: "white",
+              backgroundColor: isDark ? "#1a1a1a" : "white",
               borderRadius: 28,
-              boxShadow: "0 2px 10px rgba(0,0,0,0.15)",
+              boxShadow: isDark ? "0 2px 10px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08)" : "0 2px 10px rgba(0,0,0,0.15)",
               pointerEvents: "auto"
             },
             children: [
@@ -1801,7 +1876,7 @@ var AnnotationsSidebar = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { style: { overflowY: "auto", maxHeight: "calc(100vh - 200px)" }, children: annotations.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: "16px", color: "#6b7280", fontSize: "13px" }, children: "No annotations yet. Use the DOM picker or drawing tools to annotate." }) : annotations.map((annotation) => /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { style: { overflowY: "auto", maxHeight: "calc(100vh - 200px)" }, children: annotations.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: "16px", color: "#6b7280", fontSize: "13px" }, children: "No annotations yet. Double-click to select an element, or use draw/lasso to annotate." }) : annotations.map((annotation) => /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
@@ -2097,15 +2172,31 @@ var ProcessingOverlay = ({ boundingBox, scrollOffset }) => {
     )
   ] });
 };
+var AccentShape = ({ color, isMultiSelect }) => {
+  const isDrawing = color === "#8B5CF6";
+  if (isMultiSelect && !isDrawing) {
+    return /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "8", height: "8", rx: "1.5", fill: color }) });
+  }
+  if (isDrawing) {
+    return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M6 1L7.4 4.2L10.8 4.6L8.2 7L8.9 10.4L6 8.7L3.1 10.4L3.8 7L1.2 4.6L4.6 4.2L6 1Z",
+        fill: color
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx("circle", { cx: "5", cy: "5", r: "4", fill: color }) });
+};
 var styles = {
   popup: {
     position: "fixed",
     transform: "translateX(-50%)",
     width: 280,
-    padding: "12px 16px 14px",
-    background: "#1a1a1a",
+    padding: "14px 16px 14px",
+    background: "#FFFFFF",
     borderRadius: 16,
-    boxShadow: "0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08)",
+    boxShadow: "0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06)",
     cursor: "default",
     zIndex: 100001,
     fontFamily: '"Clash Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
@@ -2118,53 +2209,67 @@ var styles = {
   },
   popupExit: {
     opacity: 0,
-    transform: "translateX(-50%) scale(0.95) translateY(4px)"
+    transform: "translateX(-50%) scale(0.96) translateY(4px)"
   },
   header: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: 9
+    gap: 7,
+    marginBottom: 10
   },
   element: {
     fontSize: 12,
-    fontWeight: 400,
-    color: "rgba(255, 255, 255, 0.5)",
+    fontWeight: 500,
+    color: "#9CA3AF",
     maxWidth: "100%",
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
-    flex: 1
+    flex: 1,
+    letterSpacing: "0.01em"
   },
   quote: {
     fontSize: 12,
     fontStyle: "italic",
-    color: "rgba(255, 255, 255, 0.6)",
+    color: "#6B7280",
     marginBottom: 8,
-    padding: "6px 8px",
-    background: "rgba(255, 255, 255, 0.05)",
-    borderRadius: 4,
-    lineHeight: 1.45
+    padding: "6px 9px",
+    background: "#F9FAFB",
+    borderRadius: 6,
+    lineHeight: 1.45,
+    borderLeft: "2px solid"
   },
   textarea: {
     width: "100%",
-    padding: "8px 10px",
+    padding: "9px 11px",
     fontSize: 13,
     fontFamily: "inherit",
-    background: "rgba(255, 255, 255, 0.05)",
-    color: "#fff",
-    border: "1px solid rgba(255, 255, 255, 0.15)",
-    borderRadius: 8,
+    background: "#F9FAFB",
+    color: "#1a1a1a",
+    border: "1px solid #E5E7EB",
+    borderRadius: 10,
     resize: "none",
     outline: "none",
-    transition: "border-color 0.15s ease",
-    boxSizing: "border-box"
+    transition: "border-color 0.15s ease, box-shadow 0.15s ease",
+    boxSizing: "border-box",
+    lineHeight: 1.5
   },
   actions: {
     display: "flex",
-    justifyContent: "flex-end",
-    gap: 6,
-    marginTop: 8
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginTop: 10
+  },
+  hint: {
+    fontSize: 11,
+    color: "#C0C5CE",
+    fontWeight: 400,
+    letterSpacing: "0.01em",
+    userSelect: "none"
+  },
+  buttonGroup: {
+    display: "flex",
+    gap: 6
   },
   button: {
     padding: "6px 14px",
@@ -2173,11 +2278,11 @@ var styles = {
     borderRadius: 16,
     border: "none",
     cursor: "pointer",
-    transition: "background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease"
+    transition: "background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.1s ease"
   },
   cancelButton: {
     background: "transparent",
-    color: "rgba(255, 255, 255, 0.5)"
+    color: "#9CA3AF"
   },
   submitButton: {
     color: "white"
@@ -2187,7 +2292,7 @@ var AnnotationPopup = forwardRef(
   function AnnotationPopup2({
     element,
     selectedText,
-    placeholder = "What should change?",
+    placeholder = "Write your changes?",
     initialValue = "",
     submitLabel = "Add",
     onSubmit,
@@ -2195,7 +2300,8 @@ var AnnotationPopup = forwardRef(
     style,
     accentColor = "#3c82f7",
     isExiting = false,
-    isMultiSelect = false
+    isMultiSelect = false,
+    isDark = false
   }, ref) {
     const [text, setText] = useState(initialValue);
     const [isShaking, setIsShaking] = useState(false);
@@ -2261,8 +2367,24 @@ var AnnotationPopup = forwardRef(
       },
       [handleSubmit, handleCancel]
     );
+    const popupBg = isDark ? "#1a1a1a" : "#FFFFFF";
+    const popupBorder = isDark ? "rgba(255,255,255,0.08)" : "rgba(0, 0, 0, 0.06)";
+    const elementColor = isDark ? "#9CA3AF" : "#9CA3AF";
+    const quoteBg = isDark ? "#2a2a2a" : "#F9FAFB";
+    const quoteColor = isDark ? "#a1a1aa" : "#6B7280";
+    const textareaBg = isDark ? "#2a2a2a" : "#F9FAFB";
+    const textareaColor = isDark ? "#f0f0f0" : "#1a1a1a";
+    const textareaBorder = isDark ? "#444444" : "#E5E7EB";
+    const hintColor = isDark ? "#666666" : "#C0C5CE";
+    const kbdBg = isDark ? "#333333" : "#F3F4F6";
+    const kbdBorder = isDark ? "#555555" : "#E5E7EB";
+    const cancelColor = isDark ? "#888888" : "#9CA3AF";
+    const cancelHoverBg = isDark ? "#333333" : "#F3F4F6";
+    const cancelHoverColor = isDark ? "#cccccc" : "#6B7280";
     const popupStyle = {
       ...styles.popup,
+      background: popupBg,
+      boxShadow: isDark ? `0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px ${popupBorder}` : `0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px ${popupBorder}`,
       ...animState === "enter" || animState === "entered" ? styles.popupEnter : {},
       ...animState === "exit" ? styles.popupExit : {},
       ...isShaking ? {
@@ -2270,11 +2392,17 @@ var AnnotationPopup = forwardRef(
       } : {},
       ...style
     };
+    const effectiveAccentColor = isMultiSelect ? "#34C759" : accentColor;
     const textareaStyle = {
       ...styles.textarea,
-      ...isFocused ? { borderColor: accentColor } : {}
+      background: textareaBg,
+      color: textareaColor,
+      border: `1px solid ${textareaBorder}`,
+      ...isFocused ? {
+        borderColor: effectiveAccentColor,
+        boxShadow: `0 0 0 2px ${effectiveAccentColor}18`
+      } : {}
     };
-    const effectiveAccentColor = isMultiSelect ? "#34C759" : accentColor;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("style", { children: `
           @keyframes skema-shake {
@@ -2294,8 +2422,11 @@ var AnnotationPopup = forwardRef(
           onClick: (e) => e.stopPropagation(),
           onPointerDown: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsx("div", { style: styles.header, children: /* @__PURE__ */ jsx("span", { style: styles.element, children: element }) }),
-            selectedText && /* @__PURE__ */ jsxs("div", { style: styles.quote, children: [
+            /* @__PURE__ */ jsxs("div", { style: styles.header, children: [
+              /* @__PURE__ */ jsx(AccentShape, { color: effectiveAccentColor, isMultiSelect }),
+              /* @__PURE__ */ jsx("span", { style: { ...styles.element, color: elementColor }, children: element })
+            ] }),
+            selectedText && /* @__PURE__ */ jsxs("div", { style: { ...styles.quote, borderLeftColor: effectiveAccentColor, background: quoteBg, color: quoteColor }, children: [
               "\u201C",
               selectedText.slice(0, 80),
               selectedText.length > 80 ? "..." : "",
@@ -2316,51 +2447,504 @@ var AnnotationPopup = forwardRef(
               }
             ),
             /* @__PURE__ */ jsxs("div", { style: styles.actions, children: [
+              /* @__PURE__ */ jsxs("span", { style: { ...styles.hint, color: hintColor }, children: [
+                /* @__PURE__ */ jsx("kbd", { style: {
+                  fontFamily: "inherit",
+                  fontSize: 10,
+                  padding: "1px 4px",
+                  background: kbdBg,
+                  borderRadius: 3,
+                  border: `1px solid ${kbdBorder}`
+                }, children: "\u21B5" }),
+                " to send"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: styles.buttonGroup, children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    style: { ...styles.button, ...styles.cancelButton, color: cancelColor },
+                    onClick: handleCancel,
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.background = cancelHoverBg;
+                      e.currentTarget.style.color = cancelHoverColor;
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.background = "transparent";
+                      e.currentTarget.style.color = cancelColor;
+                    },
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    style: {
+                      ...styles.button,
+                      ...styles.submitButton,
+                      backgroundColor: effectiveAccentColor,
+                      opacity: text.trim() ? 1 : 0.4
+                    },
+                    onClick: handleSubmit,
+                    disabled: !text.trim(),
+                    onMouseEnter: (e) => {
+                      if (text.trim()) {
+                        e.currentTarget.style.filter = "brightness(0.92)";
+                        e.currentTarget.style.transform = "scale(1.02)";
+                      }
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.filter = "none";
+                      e.currentTarget.style.transform = "scale(1)";
+                    },
+                    children: submitLabel
+                  }
+                )
+              ] })
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+);
+
+// src/assets/logo-dark.ts
+var svg = `<svg width="560" height="132" viewBox="430 210 560 132" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M932.899 341.531C914.746 341.531 903.291 329.319 903.291 308.457C903.291 288.867 914.218 278.691 931.489 275.892L971.319 269.787V262.409C971.319 241.547 964.974 234.169 948.232 234.169C932.018 234.169 924.087 241.801 924.087 260.373V261.391H905.23V260.373C905.23 231.625 921.796 210 949.642 210C977.487 210 990 231.879 990 262.154V338.986H972.552V307.439H971.319C966.737 328.81 952.814 341.531 932.899 341.531ZM922.325 306.676C922.325 316.853 927.083 321.687 938.01 321.687C957.925 321.687 971.319 311.001 971.319 286.069L936.952 291.666C927.083 293.447 922.325 296.754 922.325 306.676Z" fill="#1a1a1a"/>
+<path d="M754.267 338.986H735.233V212.544H752.68V250.706H753.738C756.029 229.59 765.546 210 787.399 210C807.314 210 818.065 227.554 820.532 251.723H821.589C823.881 230.098 833.75 210 855.956 210C878.691 210 890.146 232.388 890.146 262.918V338.986H871.289V270.295C871.289 245.363 864.415 234.678 847.496 234.678C828.815 234.678 822.118 248.416 822.118 276.401V338.986H803.261V270.295C803.261 245.363 796.564 234.678 779.645 234.678C760.787 234.678 754.267 248.416 754.267 276.401V338.986Z" fill="#1a1a1a"/>
+<path d="M675.684 341.531C646.957 341.531 628.1 318.125 628.1 275.892C628.1 236.459 646.781 210 675.331 210C702.472 210 720.977 231.625 720.977 270.041C720.977 274.62 720.801 278.182 720.272 281.998H645.9C646.605 306.422 654.888 319.397 675.155 319.397C693.484 319.397 701.062 310.747 701.062 295.737V293.701H720.096V295.991C720.096 322.959 701.767 341.531 675.684 341.531ZM674.979 231.625C655.593 231.625 647.133 244.091 646.076 266.734H703.001V266.225C703.001 242.819 693.66 231.625 674.979 231.625Z" fill="#1a1a1a"/>
+<path d="M548.771 338.986H529.737L529.737 212.544H548.771L548.771 262.663H573.796L600.056 212.544H622.262L589.305 273.348L622.085 338.986H599.703L573.796 287.341H548.771V338.986Z" fill="#1a1a1a"/>
+<path d="M475.117 341.531C446.919 341.531 430.881 325.503 430.881 296.245V295.482H449.915V297.517C449.915 314.054 456.788 319.397 475.117 319.397C492.212 319.397 497.323 314.309 497.323 303.114C497.323 292.684 493.093 289.376 480.58 286.832L456.612 282.253C440.046 279.2 430 269.023 430 247.907C430 225.773 443.923 210 470.887 210C497.675 210 513.889 225.519 513.889 255.54V256.303H495.032V254.776C495.032 239.766 489.745 231.879 470.358 231.879C454.321 231.879 448.681 236.968 448.681 248.925C448.681 258.847 452.206 262.409 465.424 264.953L485.691 269.023C506.487 272.84 516.004 283.016 516.004 303.878C516.004 327.538 499.79 341.531 475.117 341.531Z" fill="#1a1a1a"/>
+</svg>`;
+var logo_dark_default = "data:image/svg+xml," + encodeURIComponent(svg);
+
+// src/assets/logo-light.ts
+var svg2 = `<svg width="560" height="132" viewBox="378 168 560 132" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M880.899 299.531C862.746 299.531 851.291 287.319 851.291 266.457C851.291 246.867 862.218 236.691 879.489 233.892L919.319 227.787V220.409C919.319 199.547 912.974 192.169 896.232 192.169C880.018 192.169 872.087 199.801 872.087 218.373V219.391H853.23V218.373C853.23 189.625 869.796 168 897.642 168C925.487 168 938 189.879 938 220.154V296.986H920.552V265.439H919.319C914.737 286.81 900.814 299.531 880.899 299.531ZM870.325 264.676C870.325 274.853 875.083 279.687 886.01 279.687C905.925 279.687 919.319 269.001 919.319 244.069L884.952 249.666C875.083 251.447 870.325 254.754 870.325 264.676Z" fill="#FFFCFC"/>
+<path d="M702.267 296.986H683.233V170.544H700.68V208.706H701.738C704.029 187.59 713.546 168 735.399 168C755.314 168 766.065 185.554 768.532 209.723H769.589C771.881 188.098 781.75 168 803.956 168C826.691 168 838.146 190.388 838.146 220.918V296.986H819.289V228.295C819.289 203.363 812.415 192.678 795.496 192.678C776.815 192.678 770.118 206.416 770.118 234.401V296.986H751.261V228.295C751.261 203.363 744.564 192.678 727.645 192.678C708.787 192.678 702.267 206.416 702.267 234.401V296.986Z" fill="#FFFCFC"/>
+<path d="M623.684 299.531C594.957 299.531 576.1 276.125 576.1 233.892C576.1 194.459 594.781 168 623.331 168C650.472 168 668.977 189.625 668.977 228.041C668.977 232.62 668.801 236.182 668.272 239.998H593.9C594.605 264.422 602.888 277.397 623.155 277.397C641.484 277.397 649.062 268.747 649.062 253.737V251.701H668.096V253.991C668.096 280.959 649.767 299.531 623.684 299.531ZM622.979 189.625C603.593 189.625 595.133 202.091 594.076 224.734H651.001V224.225C651.001 200.819 641.66 189.625 622.979 189.625Z" fill="#FFFCFC"/>
+<path d="M496.771 296.986H477.737L477.737 170.544H496.771L496.771 220.663H521.796L548.056 170.544H570.262L537.305 231.348L570.085 296.986H547.703L521.796 245.341H496.771V296.986Z" fill="#FFFCFC"/>
+<path d="M423.117 299.531C394.919 299.531 378.881 283.503 378.881 254.245V253.482H397.915V255.517C397.915 272.054 404.788 277.397 423.117 277.397C440.212 277.397 445.323 272.309 445.323 261.114C445.323 250.684 441.093 247.376 428.58 244.832L404.612 240.253C388.046 237.2 378 227.023 378 205.907C378 183.773 391.923 168 418.887 168C445.675 168 461.889 183.519 461.889 213.54V214.303H443.032V212.776C443.032 197.766 437.745 189.879 418.358 189.879C402.321 189.879 396.681 194.968 396.681 206.925C396.681 216.847 400.206 220.409 413.424 222.953L433.691 227.023C454.487 230.84 464.004 241.016 464.004 261.878C464.004 285.538 447.79 299.531 423.117 299.531Z" fill="#FFFCFC"/>
+</svg>`;
+var logo_light_default = "data:image/svg+xml," + encodeURIComponent(svg2);
+var SKEMA_VERSION = "0.2.0";
+var SettingsPanel = ({
+  isOpen,
+  onClose,
+  zIndex,
+  connected,
+  mode,
+  provider,
+  availableProviders,
+  providerStatus,
+  mcpServerConnected,
+  mcpClientName,
+  annotationCounts,
+  onModeChange,
+  onProviderChange,
+  theme,
+  onThemeChange
+}) => {
+  if (!isOpen) return null;
+  const isDark = theme === "dark";
+  const bgColor = isDark ? "#1a1a1a" : "#ffffff";
+  const textColor = isDark ? "#ffffff" : "#1a1a1a";
+  const borderColor = isDark ? "#333333" : "#e5e5e5";
+  const mutedColor = isDark ? "#888888" : "#666666";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        bottom: 70,
+        right: 16,
+        width: 320,
+        backgroundColor: bgColor,
+        borderRadius: 16,
+        boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
+        zIndex: zIndex + 10,
+        pointerEvents: "auto",
+        overflow: "hidden",
+        border: `1px solid ${borderColor}`
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "16px 20px",
+              borderBottom: `1px solid ${borderColor}`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+                /* @__PURE__ */ jsx(SkemaWordmark, { isDark, height: 24 }),
+                /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, color: mutedColor }, children: [
+                  "v",
+                  SKEMA_VERSION
+                ] })
+              ] }),
               /* @__PURE__ */ jsx(
-                "button",
+                "div",
                 {
-                  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)";
+                  style: {
+                    fontSize: 11,
+                    padding: "4px 8px",
+                    borderRadius: 6,
+                    backgroundColor: connected ? "#10b98120" : "#ef444420",
+                    color: connected ? "#10b981" : "#ef4444"
                   },
-                  children: "Cancel"
+                  children: connected ? "Connected" : "Disconnected"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { padding: "16px 20px" }, children: [
+          /* @__PURE__ */ jsx(SettingRow, { label: "Theme", isDark, textColor, mutedColor, children: /* @__PURE__ */ jsx(ThemeIconToggle, { isDark, onToggle: () => onThemeChange(isDark ? "light" : "dark") }) }),
+          !connected && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                padding: "10px 12px",
+                borderRadius: 10,
+                backgroundColor: isDark ? "#2a1a1a" : "#fef2f2",
+                border: `1px solid ${isDark ? "#3d2020" : "#fecaca"}`,
+                marginBottom: 12
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      width: 7,
+                      height: 7,
+                      borderRadius: "50%",
+                      backgroundColor: "#ef4444",
+                      flexShrink: 0,
+                      boxShadow: "0 0 6px #ef444460"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx("div", { style: { fontSize: 12, fontWeight: 500, color: isDark ? "#fca5a5" : "#dc2626" }, children: "Daemon not running" }),
+                  /* @__PURE__ */ jsxs("div", { style: { fontSize: 10, color: isDark ? "#888" : "#999", marginTop: 2, lineHeight: 1.3 }, children: [
+                    "Run ",
+                    /* @__PURE__ */ jsx("span", { style: { fontFamily: "monospace", fontSize: 10, color: isDark ? "#aaa" : "#666" }, children: "npx skema-core" }),
+                    " to start"
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(SettingRow, { label: "Mode", isDark, textColor, mutedColor, disabled: !connected, children: /* @__PURE__ */ jsx(
+            ToggleSwitch,
+            {
+              options: ["CLI", "MCP"],
+              value: mode === "mcp" ? 1 : 0,
+              onChange: (idx) => onModeChange(idx === 1 ? "mcp" : "direct-cli"),
+              isDark,
+              disabled: !connected
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: mutedColor, marginTop: -6, marginBottom: 12, lineHeight: 1.4, opacity: connected ? 1 : 0.4 }, children: mode === "mcp" ? "Annotations are queued for your AI agent to process" : "Annotations processed instantly via CLI agents" }),
+          mode === "mcp" && connected && /* @__PURE__ */ jsx(
+            McpStatusPanel,
+            {
+              mcpServerConnected,
+              mcpClientName,
+              annotationCounts,
+              isDark,
+              mutedColor
+            }
+          ),
+          mode === "direct-cli" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(SettingRow, { label: "Provider", isDark, textColor, mutedColor, disabled: !connected, children: /* @__PURE__ */ jsx(
+              ToggleSwitch,
+              {
+                options: ["Gemini", "Claude"],
+                value: provider === "claude" ? 1 : 0,
+                onChange: (idx) => onProviderChange(idx === 1 ? "claude" : "gemini"),
+                isDark,
+                disabled: !connected
+              }
+            ) }),
+            connected && /* @__PURE__ */ jsx(
+              ProviderStatusIndicator,
+              {
+                provider,
+                status: providerStatus[provider],
+                isDark,
+                mutedColor
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var SettingRow = ({ label, textColor, disabled, children }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: 12
+    },
+    children: [
+      /* @__PURE__ */ jsx("span", { style: { fontSize: 14, color: textColor, opacity: disabled ? 0.4 : 1, transition: "opacity 0.2s ease" }, children: label }),
+      children
+    ]
+  }
+);
+var ToggleSwitch = ({ options, value, onChange, isDark, disabled }) => {
+  const bgColor = isDark ? "#2a2a2a" : "#f0f0f0";
+  const activeColor = disabled ? isDark ? "#555" : "#aaa" : "#FF6800";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        backgroundColor: bgColor,
+        borderRadius: 8,
+        padding: 2,
+        opacity: disabled ? 0.5 : 1,
+        transition: "opacity 0.2s ease"
+      },
+      children: options.map((option, idx) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => !disabled && onChange(idx),
+          disabled,
+          style: {
+            padding: "6px 12px",
+            fontSize: 12,
+            fontWeight: 500,
+            border: "none",
+            borderRadius: 6,
+            cursor: disabled ? "not-allowed" : "pointer",
+            backgroundColor: value === idx ? activeColor : "transparent",
+            color: value === idx ? "white" : isDark ? "#888" : "#666",
+            transition: "all 0.2s ease"
+          },
+          children: option
+        },
+        option
+      ))
+    }
+  );
+};
+var CLIENT_NAME_MAP = {
+  "cursor": "Cursor",
+  "claude-desktop": "Claude Desktop",
+  "claude-code": "Claude Code",
+  "windsurf": "Windsurf",
+  "cline": "Cline",
+  "continue": "Continue",
+  "zed": "Zed",
+  "anti-gravity": "Anti-Gravity"
+};
+function formatClientName(name) {
+  const lower = name.toLowerCase();
+  return CLIENT_NAME_MAP[lower] || name.charAt(0).toUpperCase() + name.slice(1);
+}
+var McpStatusPanel = ({
+  mcpServerConnected,
+  mcpClientName,
+  annotationCounts,
+  isDark,
+  mutedColor
+}) => {
+  const serverDotColor = mcpServerConnected ? "#10b981" : "#ef4444";
+  const serverStatusText = mcpServerConnected ? mcpClientName ? formatClientName(mcpClientName) : "Connected" : "Not detected";
+  const totalActive = annotationCounts.pending + annotationCounts.acknowledged;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        borderRadius: 10,
+        backgroundColor: isDark ? "#1a2332" : "#f0f7ff",
+        border: `1px solid ${isDark ? "#2a3a4a" : "#d0e4ff"}`,
+        marginBottom: 12,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "10px 14px",
+              borderBottom: totalActive > 0 ? `1px solid ${isDark ? "#2a3a4a" : "#d0e4ff"}` : "none"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    width: 7,
+                    height: 7,
+                    borderRadius: "50%",
+                    backgroundColor: serverDotColor,
+                    flexShrink: 0,
+                    boxShadow: `0 0 6px ${serverDotColor}60`
+                  }
                 }
               ),
+              /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: isDark ? "#c8d6e5" : "#333", fontWeight: 500 }, children: "MCP Server" }),
               /* @__PURE__ */ jsx(
-                "button",
+                "span",
                 {
                   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";
+                    marginLeft: "auto",
+                    fontSize: 11,
+                    color: serverDotColor,
+                    fontWeight: 500
                   },
-                  children: submitLabel
+                  children: serverStatusText
                 }
               )
-            ] })
-          ]
+            ]
+          }
+        ),
+        totalActive > 0 && /* @__PURE__ */ jsx("div", { style: { padding: "8px 14px 10px" }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12 }, children: [
+          /* @__PURE__ */ jsx(CountBadge, { label: "Queued", count: annotationCounts.pending, color: "#f59e0b", isDark }),
+          /* @__PURE__ */ jsx(CountBadge, { label: "In Progress", count: annotationCounts.acknowledged, color: "#3b82f6", isDark }),
+          /* @__PURE__ */ jsx(CountBadge, { label: "Done", count: annotationCounts.resolved, color: "#10b981", isDark })
+        ] }) }),
+        !mcpServerConnected && /* @__PURE__ */ jsx("div", { style: { padding: "0 14px 10px", fontSize: 10, color: mutedColor, lineHeight: 1.4 }, children: "Configure the Skema MCP server in your AI agent (Cursor, Claude Desktop, etc.) to connect." })
+      ]
+    }
+  );
+};
+var CountBadge = ({ label, count, color, isDark }) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", flex: 1 }, children: [
+  /* @__PURE__ */ jsx("span", { style: { fontSize: 16, fontWeight: 600, color, lineHeight: 1 }, children: count }),
+  /* @__PURE__ */ jsx("span", { style: { fontSize: 9, color: isDark ? "#778899" : "#888", marginTop: 2 }, children: label })
+] });
+var ProviderStatusIndicator = ({ provider, status, isDark, mutedColor }) => {
+  let dotColor;
+  let statusText;
+  let bgTint;
+  if (!status || status.message === "Checking...") {
+    dotColor = mutedColor;
+    statusText = "Checking...";
+    bgTint = isDark ? "#2a2a2a" : "#f5f5f5";
+  } else if (status.installed && status.authorized) {
+    dotColor = "#10b981";
+    statusText = "Ready";
+    bgTint = isDark ? "#10b98110" : "#10b98110";
+  } else if (status.installed && !status.authorized) {
+    dotColor = "#f59e0b";
+    statusText = "Not authorized";
+    bgTint = isDark ? "#f59e0b10" : "#f59e0b10";
+  } else {
+    dotColor = "#ef4444";
+    statusText = "Not installed";
+    bgTint = isDark ? "#ef444410" : "#ef444410";
+  }
+  const label = provider === "gemini" ? "Gemini CLI" : "Claude Code";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        fontSize: 11,
+        color: mutedColor,
+        marginTop: -6,
+        marginBottom: 12,
+        padding: "6px 10px",
+        borderRadius: 8,
+        backgroundColor: bgTint
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              width: 6,
+              height: 6,
+              borderRadius: "50%",
+              backgroundColor: dotColor,
+              flexShrink: 0,
+              boxShadow: `0 0 4px ${dotColor}60`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: label }),
+        /* @__PURE__ */ jsx("span", { style: { marginLeft: "auto", fontSize: 10, color: dotColor, fontWeight: 500 }, children: statusText })
+      ]
+    }
+  );
+};
+var ThemeIconToggle = ({ isDark, onToggle }) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    onClick: onToggle,
+    title: isDark ? "Switch to light mode" : "Switch to dark mode",
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: 36,
+      height: 36,
+      border: "none",
+      borderRadius: 10,
+      backgroundColor: isDark ? "#333333" : "#f0f0f0",
+      cursor: "pointer",
+      transition: "all 0.2s ease"
+    },
+    children: isDark ? (
+      // Moon icon
+      /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z",
+          fill: "#fbbf24",
+          stroke: "#fbbf24",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
         }
-      )
-    ] });
+      ) })
+    ) : (
+      // Sun icon
+      /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "5", fill: "#FF6800", stroke: "#FF6800", strokeWidth: "2" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3", stroke: "#FF6800", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23", stroke: "#FF6800", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64", stroke: "#FF6800", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78", stroke: "#FF6800", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12", stroke: "#FF6800", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12", stroke: "#FF6800", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36", stroke: "#FF6800", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22", stroke: "#FF6800", strokeWidth: "2", strokeLinecap: "round" })
+      ] })
+    )
   }
 );
+var SkemaWordmark = ({ isDark, height = 24 }) => {
+  const src = isDark ? logo_light_default : logo_dark_default;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt: "Skema",
+      height,
+      style: { height, width: "auto", display: "block" }
+    }
+  );
+};
 function useKeyboardShortcuts({ onToggle, shortcut = "mod+shift+e" }) {
   useEffect(() => {
     const handleKeyDown = (e) => {
@@ -2733,6 +3317,7 @@ var SkemaOverlays = () => {
 };
 
 // src/lib/tldrawConfig.ts
+DefaultColorThemePalette.darkMode.black = DefaultColorThemePalette.lightMode.black;
 var skemaComponents = {
   Toolbar: null,
   Overlays: SkemaOverlays,
@@ -2813,7 +3398,6 @@ var Skema = ({
   zIndex = 99999,
   isProcessing: externalIsProcessing
 }) => {
-  const [isActive, setIsActive] = useState(enabled);
   const [annotations, setAnnotations] = useState(initialAnnotations);
   const [domSelections, setDomSelections] = useState([]);
   const [pendingAnnotation, setPendingAnnotation] = useState(null);
@@ -2824,12 +3408,30 @@ var Skema = ({
   const [internalIsProcessing, setInternalIsProcessing] = useState(false);
   const [isToolbarExpanded, setIsToolbarExpanded] = useState(false);
   const [isStylePanelOpen, setIsStylePanelOpen] = useState(false);
+  const [currentToolId, setCurrentToolId] = useState("select");
+  const [theme, setTheme] = useState(() => {
+    if (typeof window !== "undefined") {
+      return localStorage.getItem("skema-theme") || "light";
+    }
+    return "light";
+  });
+  const isDark = theme === "dark";
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      localStorage.setItem("skema-theme", theme);
+    }
+    if (editorRef.current) {
+      editorRef.current.user.updateUserPreferences({ colorScheme: theme });
+    }
+  }, [theme]);
   const annotationChangesRef = useRef(/* @__PURE__ */ new Map());
   const {
     state: daemonState,
     isGenerating,
     generate,
-    revert
+    revert,
+    setMode,
+    setProvider
   } = useDaemon({
     url: daemonUrl || "ws://localhost:9999",
     autoConnect: daemonUrl !== null,
@@ -2885,14 +3487,17 @@ var Skema = ({
   const lastDoubleClickRef = useRef(0);
   const cleanupRef = useRef(null);
   useKeyboardShortcuts({
-    onToggle: useCallback(() => setIsActive((prev) => !prev), []),
+    onToggle: useCallback(() => {
+      setIsToolbarExpanded((prev) => !prev);
+      setIsStylePanelOpen(false);
+    }, []),
     shortcut: toggleShortcut
   });
-  const scrollOffset = useScrollSync(isActive, editorRef);
-  useWheelIntercept(isActive);
-  useShapePersistence(isActive, editorRef);
+  const scrollOffset = useScrollSync(isToolbarExpanded, editorRef);
+  useWheelIntercept(isToolbarExpanded);
+  useShapePersistence(isToolbarExpanded, editorRef);
   useScribbleDelete({
-    isActive,
+    isActive: isToolbarExpanded,
     editorRef,
     setAnnotations,
     setScribbleToast
@@ -2913,7 +3518,7 @@ var Skema = ({
     };
   }, []);
   useEffect(() => {
-    if (!isActive) return;
+    if (!isToolbarExpanded) return;
     const handleResize = () => {
       setDomSelections((prevSelections) => {
         if (prevSelections.length === 0) return prevSelections;
@@ -2999,7 +3604,7 @@ var Skema = ({
     };
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
-  }, [isActive]);
+  }, [isToolbarExpanded]);
   const getSelectedDrawings = useCallback(() => {
     if (!editorRef.current) return [];
     const editor = editorRef.current;
@@ -3262,6 +3867,9 @@ var Skema = ({
       onProcessingCancel?.();
     }
     setProcessingBoundingBox(null);
+    if (editorRef.current) {
+      editorRef.current.setSelectedShapes([]);
+    }
     setTimeout(() => {
       setPendingAnnotation(null);
       setPendingExiting(false);
@@ -3383,6 +3991,7 @@ var Skema = ({
   }, [domSelections, handleDOMSelect, handleMultiDOMSelect, handleDrawingAnnotation]);
   const handleMount = useCallback((editor) => {
     editorRef.current = editor;
+    editor.user.updateUserPreferences({ colorScheme: theme });
     editor.setStyleForNextShapes(ArrowShapeKindStyle, "arc");
     try {
       const selectIdleState = editor.getStateDescendant("select.idle");
@@ -3453,9 +4062,14 @@ var Skema = ({
         lastBrush = next.brush;
       }
     });
-  }, [handleDOMSelect, handleBrushSelection, handleLassoSelection, handleMultiDOMSelect, handleDrawingAnnotation]);
+    const handleToolChange = () => {
+      const toolId = editor.getCurrentToolId();
+      setCurrentToolId((prev) => prev !== toolId ? toolId : prev);
+    };
+    editor.sideEffects.registerAfterChangeHandler("instance", handleToolChange);
+  }, [handleDOMSelect, handleBrushSelection, handleLassoSelection, handleMultiDOMSelect, handleDrawingAnnotation, theme]);
   useEffect(() => {
-    if (!isActive) return;
+    if (!isToolbarExpanded) return;
     const handlePointerDown = (e) => {
       if (e.button !== 0) return;
       const target = e.target;
@@ -3471,8 +4085,8 @@ var Skema = ({
     };
     document.addEventListener("pointerdown", handlePointerDown, { capture: true });
     return () => document.removeEventListener("pointerdown", handlePointerDown, { capture: true });
-  }, [isActive, pendingAnnotation, handleAnnotationCancel]);
-  if (!isActive) {
+  }, [isToolbarExpanded, pendingAnnotation, handleAnnotationCancel]);
+  if (!enabled) {
     return null;
   }
   return /* @__PURE__ */ jsxs(
@@ -3487,21 +4101,16 @@ var Skema = ({
       },
       children: [
         /* @__PURE__ */ jsx("style", { children: skemaHiddenUiStyles }),
-        !isStylePanelOpen && /* @__PURE__ */ jsx("style", { children: `
-          .tlui-style-panel__wrapper,
-          .tlui-style-panel {
-            display: none !important;
-          }
-        ` }),
-        isStylePanelOpen && /* @__PURE__ */ jsx("style", { children: `
-          .tlui-style-panel__wrapper {
-            position: fixed !important;
-            bottom: 68px !important;
-            right: 16px !important;
-            top: auto !important;
-            left: auto !important;
-          }
-        ` }),
+        /* @__PURE__ */ jsx("style", { children: `
+        .tlui-style-panel__wrapper {
+          position: fixed !important;
+          top: 16px !important;
+          right: 16px !important;
+          bottom: auto !important;
+          left: auto !important;
+          ${isToolbarExpanded && (currentToolId === "draw" || currentToolId === "geo") ? "" : "display: none !important;"}
+        }
+      ` }),
         isToolbarExpanded && /* @__PURE__ */ jsx(
           "button",
           {
@@ -3516,7 +4125,7 @@ var Skema = ({
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              backgroundColor: isStylePanelOpen ? "#FF6800" : "white",
+              backgroundColor: isStylePanelOpen ? "#FF6800" : isDark ? "#2a2a2a" : "white",
               border: "none",
               borderRadius: 12,
               boxShadow: "0 2px 10px rgba(0,0,0,0.15)",
@@ -3530,7 +4139,7 @@ var Skema = ({
                 "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",
+                  stroke: isStylePanelOpen ? "white" : isDark ? "#9CA3AF" : "#6B7280",
                   strokeWidth: "2",
                   strokeLinecap: "round",
                   strokeLinejoin: "round"
@@ -3540,7 +4149,7 @@ var Skema = ({
                 "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",
+                  stroke: isStylePanelOpen ? "white" : isDark ? "#9CA3AF" : "#6B7280",
                   strokeWidth: "2",
                   strokeLinecap: "round",
                   strokeLinejoin: "round"
@@ -3549,13 +4158,33 @@ var Skema = ({
             ] })
           }
         ),
+        /* @__PURE__ */ jsx(
+          SettingsPanel,
+          {
+            isOpen: isStylePanelOpen,
+            onClose: () => setIsStylePanelOpen(false),
+            zIndex,
+            connected: daemonState.connected,
+            mode: daemonState.mode,
+            provider: daemonState.provider,
+            availableProviders: daemonState.availableProviders,
+            providerStatus: daemonState.providerStatus,
+            mcpServerConnected: daemonState.mcpServerConnected,
+            mcpClientName: daemonState.mcpClientName,
+            annotationCounts: daemonState.annotationCounts,
+            onModeChange: setMode,
+            onProviderChange: setProvider,
+            theme,
+            onThemeChange: setTheme
+          }
+        ),
         /* @__PURE__ */ jsx(
           "div",
           {
             style: {
               position: "absolute",
               inset: 0,
-              pointerEvents: "auto"
+              pointerEvents: isToolbarExpanded ? "auto" : "none"
             },
             children: /* @__PURE__ */ jsx(
               Tldraw,
@@ -3570,8 +4199,10 @@ var Skema = ({
                 children: /* @__PURE__ */ jsx(
                   SkemaToolbar,
                   {
+                    isExpanded: isToolbarExpanded,
                     onExpandedChange: setIsToolbarExpanded,
-                    onStylePanelChange: setIsStylePanelOpen
+                    onStylePanelChange: setIsStylePanelOpen,
+                    isDark
                   }
                 )
               }
@@ -3623,12 +4254,13 @@ var Skema = ({
               ref: popupRef,
               element: pendingAnnotation.element,
               selectedText: pendingAnnotation.selectedText,
-              placeholder: pendingAnnotation.annotationType === "drawing" ? "What does this drawing mean?" : pendingAnnotation.isMultiSelect ? "What should change about these elements?" : "What should change?",
+              placeholder: pendingAnnotation.annotationType === "drawing" ? "What does this drawing mean?" : pendingAnnotation.isMultiSelect ? "What should change about these elements?" : "Write your changes",
               onSubmit: handleAnnotationSubmit,
               onCancel: handleAnnotationCancel,
               isExiting: pendingExiting,
               isMultiSelect: pendingAnnotation.isMultiSelect,
               accentColor: pendingAnnotation.isMultiSelect ? "#34C759" : "#3b82f6",
+              isDark,
               style: {
                 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 },
@@ -3646,35 +4278,6 @@ var Skema = ({
             onExport: handleExport
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-skema": "toggle-hint",
-            style: {
-              position: "fixed",
-              bottom: 16,
-              left: 16,
-              padding: "8px 12px",
-              backgroundColor: "rgba(0, 0, 0, 0.7)",
-              color: "white",
-              borderRadius: "6px",
-              fontSize: "12px",
-              pointerEvents: "none",
-              zIndex: zIndex + 1
-            },
-            children: [
-              "Press ",
-              /* @__PURE__ */ jsx("kbd", { style: {
-                backgroundColor: "rgba(255,255,255,0.2)",
-                padding: "2px 6px",
-                borderRadius: "3px",
-                marginLeft: "4px",
-                marginRight: "4px"
-              }, children: "\u2318\u21E7E" }),
-              " to toggle Skema"
-            ]
-          }
-        ),
         scribbleToast && /* @__PURE__ */ jsx(
           "div",
           {