@useclickly/react 1.1.0 → 1.3.0

package/dist/index.cjs

@@ -5,6 +5,7 @@ var react = require('react');
 var client = require('react-dom/client');
 var core = require('@useclickly/core');
 var zustand = require('zustand');
+var middleware = require('zustand/middleware');
 var shallow = require('zustand/react/shallow');
 var jsxRuntime = require('react/jsx-runtime');
 var nanoid = require('nanoid');
@@ -146,52 +147,84 @@ async function loadDirHandle() {
 }
 
 // src/state/annotations.ts
-var useAnnotations = zustand.create((set, get) => ({
-  byId: {},
-  order: [],
-  add: (a) => {
-    if (a.strokes && a.strokes.length > 0) void saveStrokes(a.id, a.strokes);
-    set((s) => ({
-      byId: { ...s.byId, [a.id]: a },
-      order: s.order.includes(a.id) ? s.order : [...s.order, a.id]
-    }));
-  },
-  remove: (id) => {
-    void deleteStrokes(id);
-    set((s) => {
-      if (!(id in s.byId)) return s;
-      const next = { ...s.byId };
-      delete next[id];
-      return { byId: next, order: s.order.filter((x) => x !== id) };
-    });
-  },
-  update: (id, patch) => {
-    if (patch.strokes) void saveStrokes(id, patch.strokes);
-    set((s) => {
-      const cur = s.byId[id];
-      if (!cur) return s;
-      return { byId: { ...s.byId, [id]: { ...cur, ...patch } } };
-    });
-  },
-  clear: () => {
-    set({ byId: {}, order: [] });
-  },
-  list: () => {
-    const { byId, order } = get();
-    return order.map((id) => byId[id]).filter(Boolean);
-  },
-  hydrateStrokes: (strokesById) => set((s) => {
-    let touched = false;
-    const next = { ...s.byId };
-    for (const [id, strokes] of Object.entries(strokesById)) {
-      const cur = next[id];
-      if (!cur) continue;
-      next[id] = { ...cur, strokes };
-      touched = true;
+var STORAGE_KEY = "clickly:annotations";
+var useAnnotations = zustand.create()(
+  middleware.persist(
+    (set, get) => ({
+      byId: {},
+      order: [],
+      add: (a) => {
+        if (a.strokes && a.strokes.length > 0) void saveStrokes(a.id, a.strokes);
+        set((s) => ({
+          byId: { ...s.byId, [a.id]: a },
+          order: s.order.includes(a.id) ? s.order : [...s.order, a.id]
+        }));
+      },
+      remove: (id) => {
+        void deleteStrokes(id);
+        set((s) => {
+          if (!(id in s.byId)) return s;
+          const next = { ...s.byId };
+          delete next[id];
+          return { byId: next, order: s.order.filter((x) => x !== id) };
+        });
+      },
+      update: (id, patch) => {
+        if (patch.strokes) void saveStrokes(id, patch.strokes);
+        set((s) => {
+          const cur = s.byId[id];
+          if (!cur) return s;
+          return { byId: { ...s.byId, [id]: { ...cur, ...patch } } };
+        });
+      },
+      clear: () => {
+        set({ byId: {}, order: [] });
+      },
+      list: () => {
+        const { byId, order } = get();
+        return order.map((id) => byId[id]).filter(Boolean);
+      },
+      hydrateStrokes: (strokesById) => set((s) => {
+        let touched = false;
+        const next = { ...s.byId };
+        for (const [id, strokes] of Object.entries(strokesById)) {
+          const cur = next[id];
+          if (!cur) continue;
+          next[id] = { ...cur, strokes };
+          touched = true;
+        }
+        return touched ? { byId: next } : s;
+      })
+    }),
+    {
+      name: STORAGE_KEY,
+      storage: middleware.createJSONStorage(() => {
+        if (typeof localStorage !== "undefined") return localStorage;
+        return {
+          getItem: () => null,
+          setItem: () => void 0,
+          removeItem: () => void 0
+        };
+      }),
+      // Skip strokes — they live in IndexedDB and are reattached by
+      // hydrateStrokes(). Persisting them in JSON would blow the
+      // localStorage quota (5MB) on a single freehand drawing.
+      partialize: (state) => ({
+        byId: Object.fromEntries(
+          Object.entries(state.byId).map(([id, ann]) => {
+            const { strokes: _strokes, ...rest } = ann;
+            return [id, rest];
+          })
+        ),
+        order: state.order
+      }),
+      // Bump this if the persisted shape changes; old payloads are
+      // ignored and the store starts empty rather than crashing on
+      // a mismatched schema.
+      version: 1
     }
-    return touched ? { byId: next } : s;
-  })
-}));
+  )
+);
 function useAnnotationsList() {
   return useAnnotations(
     shallow.useShallow((s) => s.order.map((id) => s.byId[id]).filter(Boolean))
@@ -207,11 +240,11 @@ var DEFAULTS = {
   mcpEndpoint: "http://localhost:4747",
   mcpSessionId: null
 };
-var STORAGE_KEY = "clickly:settings";
+var STORAGE_KEY2 = "clickly:settings";
 function load() {
   if (typeof localStorage === "undefined") return DEFAULTS;
   try {
-    const raw = localStorage.getItem(STORAGE_KEY);
+    const raw = localStorage.getItem(STORAGE_KEY2);
     if (!raw) return DEFAULTS;
     const parsed = JSON.parse(raw);
     return { ...DEFAULTS, ...parsed };
@@ -219,10 +252,10 @@ function load() {
     return DEFAULTS;
   }
 }
-function persist(s) {
+function persist2(s) {
   if (typeof localStorage === "undefined") return;
   try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+    localStorage.setItem(STORAGE_KEY2, JSON.stringify(s));
   } catch {
   }
 }
@@ -230,11 +263,11 @@ var useSettings = zustand.create((set) => ({
   ...load(),
   set: (patch) => set((cur) => {
     const next = { ...cur, ...patch };
-    persist(next);
+    persist2(next);
     return next;
   }),
   reset: () => {
-    persist(DEFAULTS);
+    persist2(DEFAULTS);
     set(DEFAULTS);
   }
 }));
@@ -499,9 +532,15 @@ async function safeReadText(res) {
     return "";
   }
 }
+var PANEL_W = 284;
+var PANEL_H = 340;
+var PANEL_GAP = 12;
+var VIEWPORT_PAD = 8;
+var TOOLBAR_H = 46;
 function SettingsPopover({ anchor, width, onClose }) {
   const ref = react.useRef(null);
-  const s = useSettings();
+  const [view, setView] = react.useState("main");
+  const [detailMenuOpen, setDetailMenuOpen] = react.useState(false);
   react.useEffect(() => {
     const onDown = (e) => {
       if (ref.current && e.composedPath().includes(ref.current)) return;
@@ -510,95 +549,162 @@ function SettingsPopover({ anchor, width, onClose }) {
     window.addEventListener("pointerdown", onDown, true);
     return () => window.removeEventListener("pointerdown", onDown, true);
   }, [onClose]);
-  const PANEL_H = 330;
-  const top = Math.max(8, anchor.y - PANEL_H - 12);
-  const left = Math.min(window.innerWidth - 300, Math.max(8, anchor.x + width - 284));
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: "clickly-settings", style: { left, top }, children: [
+  react.useEffect(() => {
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      if (view !== "main") {
+        e.preventDefault();
+        setView("main");
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [view]);
+  const vw = typeof window !== "undefined" ? window.innerWidth : 1024;
+  const vh = typeof window !== "undefined" ? window.innerHeight : 768;
+  const spaceAbove = anchor.y - VIEWPORT_PAD;
+  const spaceBelow = vh - anchor.y - TOOLBAR_H - VIEWPORT_PAD;
+  const placeAbove = spaceAbove >= PANEL_H + PANEL_GAP || spaceAbove >= spaceBelow;
+  const top = placeAbove ? Math.max(VIEWPORT_PAD, anchor.y - PANEL_H - PANEL_GAP) : Math.min(vh - PANEL_H - VIEWPORT_PAD, anchor.y + TOOLBAR_H + PANEL_GAP);
+  const desiredLeft = anchor.x + width - PANEL_W;
+  const left = Math.min(
+    vw - PANEL_W - VIEWPORT_PAD,
+    Math.max(VIEWPORT_PAD, desiredLeft)
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: "clickly-settings",
+      style: { left, top, width: PANEL_W, height: PANEL_H },
+      children: view === "main" ? /* @__PURE__ */ jsxRuntime.jsx(
+        MainView,
+        {
+          onClose,
+          onOpenMcp: () => setView("mcp"),
+          detailMenuOpen,
+          setDetailMenuOpen
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(McpSubView, { onBack: () => setView("main"), onClose })
+    }
+  );
+}
+function MainView({
+  onClose,
+  onOpenMcp,
+  detailMenuOpen,
+  setDetailMenuOpen
+}) {
+  const s = useSettings();
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-header", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-title", children: "Settings" }),
       /* @__PURE__ */ jsxRuntime.jsx("button", { className: "settings-close", onClick: onClose, "aria-label": "Close settings", children: /* @__PURE__ */ jsxRuntime.jsx(IconClose, {}) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-section", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "settings-label", htmlFor: "clickly-detail", children: [
-        "Output detail",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-hint", children: "How much metadata is captured" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "select",
-        {
-          id: "clickly-detail",
-          className: "settings-select",
-          value: s.outputDetail,
-          onChange: (e) => s.set({ outputDetail: e.target.value }),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "compact", children: "Compact" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "standard", children: "Standard" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "detailed", children: "Detailed" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "forensic", children: "Forensic" })
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "settings-divider" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-section", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row-label", children: [
-          "Copy on add",
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-hint", children: "Auto-copy markdown when annotating" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "clickly-toggle", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-scroll", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row-compact", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RowLabel, { hint: "How much metadata the markdown output captures.", children: "Output Detail" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-inline-select", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
             {
-              type: "checkbox",
-              checked: s.copyOnAdd,
-              onChange: (e) => s.set({ copyOnAdd: e.target.checked })
+              type: "button",
+              className: "settings-inline-select-trigger",
+              onClick: () => setDetailMenuOpen((v) => !v),
+              "aria-haspopup": "menu",
+              "aria-expanded": detailMenuOpen,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: labelForDetail(s.outputDetail) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-inline-chev", "aria-hidden": true, children: "\u22EE" })
+              ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "toggle-track" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row-label", children: [
-          "React components",
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-hint", children: "Include component tree in output" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "clickly-toggle", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
+          detailMenuOpen ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "settings-inline-menu", role: "menu", children: ["compact", "standard", "detailed", "forensic"].map((v) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
             {
-              type: "checkbox",
-              checked: s.showReactComponents,
-              onChange: (e) => s.set({ showReactComponents: e.target.checked })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "toggle-track" })
+              type: "button",
+              role: "menuitemradio",
+              "aria-checked": s.outputDetail === v,
+              className: `settings-inline-menu-item${s.outputDetail === v ? " is-active" : ""}`,
+              onClick: () => {
+                s.set({ outputDetail: v });
+                setDetailMenuOpen(false);
+              },
+              children: labelForDetail(v)
+            },
+            v
+          )) }) : null
         ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "settings-divider" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "settings-section", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row-label", children: [
-        "Marker color",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-hint", children: "Color used for annotation pins" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "settings-color-wrap", "aria-label": "Marker color", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "color-swatch", style: { background: s.markerColor } }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row-compact", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RowLabel, { hint: "Auto-copy markdown to the clipboard every time you submit an annotation.", children: "Copy on Add" }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
+          Toggle,
           {
-            type: "color",
-            value: s.markerColor,
-            onChange: (e) => s.set({ markerColor: e.target.value })
+            checked: s.copyOnAdd,
+            onChange: (v) => s.set({ copyOnAdd: v })
           }
         )
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "settings-divider" }),
-    /* @__PURE__ */ jsxRuntime.jsx(McpSection, {})
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row-compact", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RowLabel, { hint: "Include the React component tree (App \u203A Page \u203A Button) in the output.", children: "React Components" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Toggle,
+          {
+            checked: s.showReactComponents,
+            onChange: (v) => s.set({ showReactComponents: v })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row-compact settings-row-stacked", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RowLabel, { hint: "Color used for the floating annotation pins on the page.", children: "Marker Color" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-color-presets", role: "radiogroup", "aria-label": "Marker color", children: [
+          MARKER_PRESETS.map((color) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": s.markerColor.toLowerCase() === color.toLowerCase(),
+              className: `settings-color-preset${s.markerColor.toLowerCase() === color.toLowerCase() ? " is-active" : ""}`,
+              style: { "--preset": color },
+              onClick: () => s.set({ markerColor: color }),
+              title: color,
+              "aria-label": `Use color ${color}`
+            },
+            color
+          )),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "settings-color-preset is-custom", title: "Custom color", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "color",
+                value: s.markerColor,
+                onChange: (e) => s.set({ markerColor: e.target.value }),
+                "aria-label": "Pick a custom marker color"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-color-custom-glyph", children: "+" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: "settings-disclosure",
+          onClick: onOpenMcp,
+          "aria-haspopup": "menu",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-disclosure-label", children: "Manage MCP & Webhooks" }),
+            /* @__PURE__ */ jsxRuntime.jsx(McpStatusDot, {}),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-disclosure-chev", "aria-hidden": true, children: "\u203A" })
+          ]
+        }
+      )
+    ] })
   ] });
 }
-function McpSection() {
+function McpSubView({ onBack, onClose }) {
   const s = useSettings();
   const status = useMcpStatus((m) => m.status);
   const lastError = useMcpStatus((m) => m.lastError);
@@ -611,64 +717,177 @@ function McpSection() {
     error: { label: "Error", modifier: "is-error" }
   };
   const meta = statusMeta[status];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-section", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row-label", children: [
-        "MCP sync",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-hint", children: "Push annotations to a running mcp-server so the agent reads them live" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "clickly-toggle", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: s.mcpEnabled,
-            onChange: (e) => s.set({ mcpEnabled: e.target.checked })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "toggle-track" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row", style: { marginTop: 8 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "settings-row-label", style: { flex: "0 0 auto", minWidth: 72 }, children: "Endpoint" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "text",
-          className: "settings-input",
-          value: s.mcpEndpoint,
-          onChange: (e) => s.set({ mcpEndpoint: e.target.value }),
-          placeholder: "http://localhost:4747",
-          disabled: !s.mcpEnabled,
-          spellCheck: false
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `settings-mcp-status ${meta.modifier}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mcp-dot", "aria-hidden": true }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mcp-status-label", children: meta.label }),
-      status === "connected" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mcp-status-detail", children: [
-        serverVersion ? `v${serverVersion}` : "",
-        lastPingAt ? ` \xB7 pinged ${formatRelative(Date.now() - lastPingAt)} ago` : ""
-      ] }),
-      status === "error" && lastError ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mcp-status-detail mcp-status-error", children: lastError }) : null
-    ] }),
-    status === "connected" && s.mcpSessionId ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-mcp-session", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mcp-status-label", style: { opacity: 0.7 }, children: "Session" }),
-      /* @__PURE__ */ jsxRuntime.jsx("code", { className: "mcp-session-id", children: s.mcpSessionId }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-header settings-subview-header", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
-          className: "mcp-session-reset",
-          onClick: () => s.set({ mcpSessionId: null }),
-          title: "Start a fresh session on the next ping",
-          children: "Reset"
+          className: "settings-back",
+          onClick: onBack,
+          "aria-label": "Back to settings",
+          title: "Back (Esc)",
+          children: "\u2039"
         }
-      )
-    ] }) : null
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-title", children: "Manage MCP & Webhooks" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { className: "settings-close", onClick: onClose, "aria-label": "Close settings", children: /* @__PURE__ */ jsxRuntime.jsx(IconClose, {}) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-scroll", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-subview-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-subview-section-head", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-subview-section-title", children: "MCP Connection" }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoTip, { children: "Lets a running mcp-server bridge annotations to your AI agent. Requires the @useclickly/mcp-server CLI running on your machine." }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Toggle,
+            {
+              checked: s.mcpEnabled,
+              onChange: (v) => s.set({ mcpEnabled: v })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "settings-subview-desc", children: [
+          "MCP connection allows agents to receive and act on annotations.",
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: "https://www.useclickly.com/docs/mcp",
+              target: "_blank",
+              rel: "noreferrer",
+              className: "settings-subview-link",
+              children: "Learn more"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-subview-field", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "settings-subview-field-label", htmlFor: "clickly-mcp-endpoint", children: "Endpoint" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: "clickly-mcp-endpoint",
+              type: "text",
+              className: "settings-input",
+              value: s.mcpEndpoint,
+              onChange: (e) => s.set({ mcpEndpoint: e.target.value }),
+              placeholder: "http://localhost:4747",
+              disabled: !s.mcpEnabled,
+              spellCheck: false
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `settings-mcp-status ${meta.modifier}`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mcp-dot", "aria-hidden": true }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mcp-status-label", children: meta.label }),
+          status === "connected" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mcp-status-detail", children: [
+            serverVersion ? `v${serverVersion}` : "",
+            lastPingAt ? ` \xB7 pinged ${formatRelative(Date.now() - lastPingAt)} ago` : ""
+          ] }),
+          status === "error" && lastError ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mcp-status-detail mcp-status-error", children: lastError }) : null
+        ] }),
+        status === "connected" && s.mcpSessionId ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-mcp-session", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mcp-status-label", style: { opacity: 0.7 }, children: "Session" }),
+          /* @__PURE__ */ jsxRuntime.jsx("code", { className: "mcp-session-id", children: s.mcpSessionId }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "mcp-session-reset",
+              onClick: () => s.set({ mcpSessionId: null }),
+              title: "Start a fresh session on the next ping",
+              children: "Reset"
+            }
+          )
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-subview-section is-dim", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-subview-section-head", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-subview-section-title", children: "Webhooks" }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoTip, { children: "Forward annotation events to your own server. Not yet available \u2014 open an issue if you want this." }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-subview-badge", children: "Soon" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "settings-subview-desc", children: "The webhook URL will receive live annotation changes." }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            className: "settings-input settings-subview-textarea",
+            placeholder: "Webhook URL",
+            disabled: true,
+            rows: 2
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function RowLabel({ children, hint }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row-label-compact", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+    hint ? /* @__PURE__ */ jsxRuntime.jsx(InfoTip, { children: hint }) : null
+  ] });
+}
+function InfoTip({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "settings-infotip", tabIndex: 0, "aria-label": "More info", children: [
+    "?",
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-infotip-bubble", role: "tooltip", children })
   ] });
 }
+function Toggle({
+  checked,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "clickly-toggle", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "checkbox",
+        checked,
+        onChange: (e) => onChange(e.target.checked)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "toggle-track" })
+  ] });
+}
+function McpStatusDot() {
+  const s = useSettings();
+  const status = useMcpStatus((m) => m.status);
+  if (!s.mcpEnabled) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: `settings-mcp-mini-dot is-${status}`,
+      "aria-label": `MCP sync: ${status}`
+    }
+  );
+}
+function labelForDetail(d) {
+  switch (d) {
+    case "compact":
+      return "Compact";
+    case "standard":
+      return "Standard";
+    case "detailed":
+      return "Detailed";
+    case "forensic":
+      return "Forensic";
+  }
+}
+var MARKER_PRESETS = [
+  "#6366f1",
+  // indigo
+  "#0ea5e9",
+  // sky
+  "#06b6d4",
+  // cyan (current default)
+  "#10b981",
+  // emerald
+  "#f59e0b",
+  // amber
+  "#f97316",
+  // orange
+  "#ef4444"
+  // red
+];
 function formatRelative(ms) {
   if (ms < 1500) return "just now";
   const s = Math.round(ms / 1e3);
@@ -1182,6 +1401,11 @@ function downloadViaAnchor(dataUrl, filename) {
     return false;
   }
 }
+var PANEL_W2 = 336;
+var PANEL_H2 = 420;
+var PANEL_GAP2 = 12;
+var VIEWPORT_PAD2 = 8;
+var TOOLBAR_H2 = 46;
 function AnnotationList({ anchor, width, onClose }) {
   const items = useAnnotationsList();
   const remove = useAnnotations((s) => s.remove);
@@ -1195,9 +1419,17 @@ function AnnotationList({ anchor, width, onClose }) {
     window.addEventListener("pointerdown", onDown, true);
     return () => window.removeEventListener("pointerdown", onDown, true);
   }, [onClose]);
-  const estimatedHeight = Math.min(window.innerHeight * 0.55, items.length * 88 + 48);
-  const top = Math.max(8, anchor.y - estimatedHeight - 12);
-  const left = Math.min(window.innerWidth - 336, Math.max(8, anchor.x));
+  const vw = typeof window !== "undefined" ? window.innerWidth : 1024;
+  const vh = typeof window !== "undefined" ? window.innerHeight : 768;
+  const spaceAbove = anchor.y - VIEWPORT_PAD2;
+  const spaceBelow = vh - anchor.y - TOOLBAR_H2 - VIEWPORT_PAD2;
+  const placeAbove = spaceAbove >= PANEL_H2 + PANEL_GAP2 || spaceAbove >= spaceBelow;
+  const top = placeAbove ? Math.max(VIEWPORT_PAD2, anchor.y - PANEL_H2 - PANEL_GAP2) : Math.min(vh - PANEL_H2 - VIEWPORT_PAD2, anchor.y + TOOLBAR_H2 + PANEL_GAP2);
+  const desiredLeft = anchor.x + width - PANEL_W2;
+  const left = Math.min(
+    vw - PANEL_W2 - VIEWPORT_PAD2,
+    Math.max(VIEWPORT_PAD2, desiredLeft)
+  );
   const [exporting, setExporting] = react.useState(false);
   const update = useAnnotations((s) => s.update);
   const exportComposite = async () => {
@@ -1221,36 +1453,55 @@ function AnnotationList({ anchor, width, onClose }) {
       setExporting(false);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: "clickly-list", style: { left, top }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "list-header", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "list-title", children: "Annotations" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "list-count", children: items.length }),
-      items.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          className: "list-action-btn",
-          onClick: exportComposite,
-          title: "Export all screenshots as a numbered image strip",
-          disabled: exporting,
-          style: { marginLeft: "auto" },
-          children: /* @__PURE__ */ jsxRuntime.jsx(IconDownload, {})
-        }
-      )
-    ] }),
-    items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "list-empty", children: "No annotations yet." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "list-items", children: items.map((a, i) => /* @__PURE__ */ jsxRuntime.jsx(
-      AnnotationCard,
-      {
-        annotation: a,
-        index: i + 1,
-        outputDetail,
-        onRemove: () => remove(a.id),
-        onCaptured: (data) => update(a.id, {
-          screenshot: { mimeType: "image/jpeg", dataUrl: data, width: 0, height: 0 }
-        })
-      },
-      a.id
-    )) })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: "clickly-list",
+      style: { left, top, width: PANEL_W2, height: PANEL_H2 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "list-header", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "list-title", children: "Annotations" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "list-count", children: items.length }),
+          items.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: "list-action-btn",
+              onClick: exportComposite,
+              title: "Export all screenshots as a numbered image strip",
+              disabled: exporting,
+              style: { marginLeft: "auto" },
+              children: /* @__PURE__ */ jsxRuntime.jsx(IconDownload, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: "list-action-btn",
+              onClick: onClose,
+              "aria-label": "Close annotation list",
+              title: "Close",
+              style: items.length > 0 ? void 0 : { marginLeft: "auto" },
+              children: /* @__PURE__ */ jsxRuntime.jsx(IconClose, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "list-scroll", children: items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "list-empty", children: "No annotations yet." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "list-items", children: items.map((a, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          AnnotationCard,
+          {
+            annotation: a,
+            index: i + 1,
+            outputDetail,
+            onRemove: () => remove(a.id),
+            onCaptured: (data) => update(a.id, {
+              screenshot: { mimeType: "image/jpeg", dataUrl: data, width: 0, height: 0 }
+            })
+          },
+          a.id
+        )) }) })
+      ]
+    }
+  );
 }
 function AnnotationCard({
   annotation: a,
@@ -4427,8 +4678,12 @@ var REACT_UI_CSS = `
 /* \u2500\u2500\u2500 Settings panel (redesigned) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .clickly-settings {
+  /* Fixed-size frame. Width/height are also set inline by SettingsPopover
+     so the values stay in one place (TS source of truth). The flex
+     column splits: header (fixed) on top, scroll body underneath. */
   position: fixed;
-  width: 284px;
+  display: flex;
+  flex-direction: column;
   background: #fff;
   border-radius: 14px;
   box-shadow: 0 16px 48px rgba(2,6,23,0.20), 0 0 0 1px rgba(15,23,42,0.07);
@@ -4440,12 +4695,48 @@ var REACT_UI_CSS = `
   overflow: hidden;
 }
 
+/* Scrollable body \u2014 wraps everything below the header. Header stays
+   pinned; this region grows to fill the remaining height of the
+   fixed-size .clickly-settings frame and scrolls internally when
+   content overflows.
+
+   The overscroll-behavior:contain rule prevents wheel/touch scroll from
+   bubbling into the host page once you reach the top/bottom of the
+   panel \u2014 without this, scrolling past the end would scroll the user's
+   actual app underneath, which is jarring. */
+.settings-scroll {
+  flex: 1 1 auto;
+  min-height: 0; /* required for flex children to allow overflow */
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  /* Thin scrollbar in both light + dark themes */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(15,23,42,0.20) transparent;
+}
+.settings-scroll::-webkit-scrollbar { width: 6px; }
+.settings-scroll::-webkit-scrollbar-thumb {
+  background: rgba(15,23,42,0.18);
+  border-radius: 3px;
+}
+.settings-scroll::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.32); }
+:host([data-clickly-theme="dark"]) .settings-scroll {
+  scrollbar-color: rgba(255,255,255,0.18) transparent;
+}
+:host([data-clickly-theme="dark"]) .settings-scroll::-webkit-scrollbar-thumb {
+  background: rgba(255,255,255,0.18);
+}
+:host([data-clickly-theme="dark"]) .settings-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(255,255,255,0.32);
+}
+
 .settings-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 14px 14px 12px;
   border-bottom: 1px solid #f1f5f9;
+  /* Header never shrinks \u2014 body scrolls instead */
+  flex-shrink: 0;
 }
 
 .settings-title {
@@ -4540,6 +4831,415 @@ var REACT_UI_CSS = `
   min-width: 0;
 }
 
+/* \u2500\u2500\u2500 Dense Agentation-style rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+ * One row per setting, single-line label on the left, control on the
+ * right. Hints move into (?) hover tooltips so the row stays compact.
+ * Used by the refactored SettingsPopover.
+ */
+
+.settings-row-compact {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 14px;
+  border-top: 1px solid #f1f5f9;
+}
+.settings-row-compact:first-of-type { border-top: none; }
+.settings-row-compact.settings-row-stacked {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+}
+
+.settings-row-label-compact {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #1e293b;
+  min-width: 0;
+}
+
+/* Info tooltip \u2014 small (?) circle + hover bubble */
+.settings-infotip {
+  display: inline-grid;
+  place-items: center;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #e2e8f0;
+  color: #64748b;
+  font: 600 9px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  cursor: help;
+  position: relative;
+  flex-shrink: 0;
+  user-select: none;
+  outline: none;
+}
+.settings-infotip:hover,
+.settings-infotip:focus-visible {
+  background: #cbd5e1;
+  color: #1e293b;
+}
+.settings-infotip-bubble {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(15, 23, 42, 0.98);
+  color: #f1f5f9;
+  font: 400 12px/1.4 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  padding: 6px 10px;
+  border-radius: 6px;
+  width: max-content;
+  max-width: 220px;
+  white-space: normal;
+  text-align: left;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 100ms ease 150ms;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.30);
+  z-index: 10;
+}
+.settings-infotip-bubble::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: rgba(15,23,42,0.98);
+}
+.settings-infotip:hover .settings-infotip-bubble,
+.settings-infotip:focus-visible .settings-infotip-bubble { opacity: 1; }
+
+/* Inline-value selector (Output Detail) */
+.settings-inline-select { position: relative; }
+.settings-inline-select-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  border: none;
+  font: inherit;
+  font-size: 13px;
+  color: #475569;
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: 6px;
+  transition: background 100ms, color 100ms;
+}
+.settings-inline-select-trigger:hover { background: #f1f5f9; color: #0f172a; }
+.settings-inline-chev {
+  font-size: 14px;
+  line-height: 1;
+  color: #94a3b8;
+  transform: rotate(0deg);
+}
+.settings-inline-menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 6px);
+  min-width: 140px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 12px 32px rgba(2,6,23,0.22), 0 0 0 1px rgba(15,23,42,0.06);
+  padding: 4px;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  animation: clickly-fade-in 80ms ease;
+}
+.settings-inline-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  background: transparent;
+  border: none;
+  font: inherit;
+  font-size: 13px;
+  color: #1e293b;
+  cursor: pointer;
+  padding: 7px 10px;
+  border-radius: 6px;
+  text-align: left;
+  transition: background 100ms, color 100ms;
+}
+.settings-inline-menu-item:hover { background: #f1f5f9; }
+.settings-inline-menu-item.is-active {
+  background: rgba(14,165,233,0.10);
+  color: #0284c7;
+  font-weight: 600;
+}
+
+/* Marker color preset circles */
+.settings-color-presets {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.settings-color-preset {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--preset, #94a3b8);
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  transition: transform 100ms ease;
+  box-shadow:
+    0 0 0 1.5px rgba(15,23,42,0.06),
+    0 1px 2px rgba(15,23,42,0.10);
+}
+.settings-color-preset:hover { transform: scale(1.08); }
+.settings-color-preset.is-active {
+  /* Ring around the active preset \u2014 matches Agentation's selected style. */
+  box-shadow:
+    0 0 0 2px #fff,
+    0 0 0 4px currentColor,
+    0 0 0 5px rgba(15,23,42,0.10);
+  color: var(--preset, #0ea5e9);
+}
+.settings-color-preset.is-custom {
+  display: inline-grid;
+  place-items: center;
+  background: #f1f5f9;
+  border: 1.5px dashed #cbd5e1;
+}
+.settings-color-preset.is-custom input[type="color"] {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: 0;
+}
+.settings-color-custom-glyph {
+  font: 600 13px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  color: #64748b;
+}
+
+/* MCP disclosure (collapsible footer row) */
+.settings-disclosure {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  background: transparent;
+  border: none;
+  border-top: 1px solid #f1f5f9;
+  padding: 12px 14px;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  color: #1e293b;
+  cursor: pointer;
+  text-align: left;
+  transition: background 100ms ease;
+}
+.settings-disclosure:hover { background: #f8fafc; }
+.settings-disclosure-label { flex: 1; }
+.settings-disclosure-chev {
+  color: #94a3b8;
+  font-size: 16px;
+  line-height: 1;
+  transition: transform 160ms ease;
+}
+.settings-disclosure.is-open .settings-disclosure-chev {
+  transform: rotate(90deg);
+}
+
+.settings-mcp-mini-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #94a3b8;
+  flex-shrink: 0;
+}
+.settings-mcp-mini-dot.is-connecting {
+  background: #f59e0b;
+  animation: mcp-dot-pulse 1.2s ease-in-out infinite;
+}
+.settings-mcp-mini-dot.is-connected { background: #10b981; }
+.settings-mcp-mini-dot.is-error { background: #ef4444; }
+
+.settings-mcp-panel {
+  background: rgba(15, 23, 42, 0.02);
+  border-top: 1px solid #f1f5f9;
+  padding: 4px 0 10px;
+}
+
+/* \u2500\u2500\u2500 Sub-view (MCP / Webhooks page swap) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+/* Header gets a back arrow on the left + title centered.
+   Re-uses .settings-header but with a 3-column layout. */
+.settings-header.settings-subview-header {
+  display: grid;
+  grid-template-columns: 24px 1fr 24px;
+  align-items: center;
+  gap: 8px;
+}
+.settings-header.settings-subview-header .settings-title {
+  text-align: center;
+}
+
+.settings-back {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  border: none;
+  color: #64748b;
+  font: 600 18px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  cursor: pointer;
+  padding: 0;
+  border-radius: 6px;
+  transition: background 100ms, color 100ms;
+}
+.settings-back:hover { background: #f1f5f9; color: #0f172a; }
+
+.settings-subview-section {
+  padding: 14px 16px 16px;
+  border-top: 1px solid #f1f5f9;
+}
+.settings-subview-section:first-of-type { border-top: none; }
+.settings-subview-section.is-dim { opacity: 0.65; }
+
+.settings-subview-section-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+.settings-subview-section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #0f172a;
+  flex: 1;
+}
+.settings-subview-section-head .clickly-toggle { margin-left: auto; }
+
+.settings-subview-desc {
+  margin: 0 0 12px;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: #64748b;
+}
+
+.settings-subview-link {
+  color: #0ea5e9;
+  text-decoration: none;
+  font-weight: 500;
+}
+.settings-subview-link:hover {
+  color: #0284c7;
+  text-decoration: underline;
+}
+
+.settings-subview-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+.settings-subview-field-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #475569;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.settings-subview-textarea {
+  resize: none;
+  min-height: 56px;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+}
+
+.settings-subview-badge {
+  margin-left: auto;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: #fef3c7;
+  color: #b45309;
+}
+
+:host([data-clickly-theme="dark"]) .settings-back { color: #94a3b8; }
+:host([data-clickly-theme="dark"]) .settings-back:hover {
+  background: rgba(255,255,255,0.06);
+  color: #f8fafc;
+}
+:host([data-clickly-theme="dark"]) .settings-subview-section {
+  border-top-color: rgba(255,255,255,0.06);
+}
+:host([data-clickly-theme="dark"]) .settings-subview-section-title { color: #f1f5f9; }
+:host([data-clickly-theme="dark"]) .settings-subview-desc { color: #94a3b8; }
+:host([data-clickly-theme="dark"]) .settings-subview-field-label { color: #94a3b8; }
+:host([data-clickly-theme="dark"]) .settings-subview-link { color: #38bdf8; }
+:host([data-clickly-theme="dark"]) .settings-subview-link:hover { color: #7dd3fc; }
+:host([data-clickly-theme="dark"]) .settings-subview-badge {
+  background: rgba(245, 158, 11, 0.18);
+  color: #fbbf24;
+}
+
+/* Dark-mode overrides for the new compact rows */
+:host([data-clickly-theme="dark"]) .settings-row-compact { border-top-color: rgba(255,255,255,0.06); }
+:host([data-clickly-theme="dark"]) .settings-row-label-compact { color: #e2e8f0; }
+:host([data-clickly-theme="dark"]) .settings-infotip { background: rgba(255,255,255,0.10); color: #94a3b8; }
+:host([data-clickly-theme="dark"]) .settings-infotip:hover { background: rgba(255,255,255,0.18); color: #f8fafc; }
+:host([data-clickly-theme="dark"]) .settings-inline-select-trigger { color: #cbd5e1; }
+:host([data-clickly-theme="dark"]) .settings-inline-select-trigger:hover {
+  background: rgba(255,255,255,0.06);
+  color: #f8fafc;
+}
+:host([data-clickly-theme="dark"]) .settings-inline-menu {
+  background: #1e293b;
+  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08);
+}
+:host([data-clickly-theme="dark"]) .settings-inline-menu-item { color: #e2e8f0; }
+:host([data-clickly-theme="dark"]) .settings-inline-menu-item:hover { background: rgba(255,255,255,0.06); }
+:host([data-clickly-theme="dark"]) .settings-inline-menu-item.is-active {
+  background: rgba(14,165,233,0.20);
+  color: #7dd3fc;
+}
+:host([data-clickly-theme="dark"]) .settings-color-preset {
+  box-shadow:
+    0 0 0 1.5px rgba(255,255,255,0.10),
+    0 1px 2px rgba(0,0,0,0.40);
+}
+:host([data-clickly-theme="dark"]) .settings-color-preset.is-active {
+  box-shadow:
+    0 0 0 2px #0f172a,
+    0 0 0 4px currentColor,
+    0 0 0 5px rgba(255,255,255,0.10);
+}
+:host([data-clickly-theme="dark"]) .settings-color-preset.is-custom {
+  background: rgba(255,255,255,0.05);
+  border-color: rgba(255,255,255,0.20);
+}
+:host([data-clickly-theme="dark"]) .settings-color-custom-glyph { color: #cbd5e1; }
+:host([data-clickly-theme="dark"]) .settings-disclosure {
+  color: #e2e8f0;
+  border-top-color: rgba(255,255,255,0.06);
+}
+:host([data-clickly-theme="dark"]) .settings-disclosure:hover { background: rgba(255,255,255,0.04); }
+:host([data-clickly-theme="dark"]) .settings-mcp-panel {
+  background: rgba(255,255,255,0.02);
+  border-top-color: rgba(255,255,255,0.06);
+}
+
 /* Toggle switch */
 .clickly-toggle {
   position: relative;
@@ -4769,9 +5469,11 @@ var REACT_UI_CSS = `
 /* \u2500\u2500\u2500 Annotation list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .clickly-list {
+  /* Fixed-size frame. Width/height set inline by AnnotationList so the
+     values stay in one place (TS source of truth). Header is pinned;
+     .list-scroll fills the remainder and scrolls internally \u2014 matches
+     the SettingsPopover layout. */
   position: fixed;
-  width: 320px;
-  max-height: 55vh;
   background: #fff;
   border-radius: 14px;
   box-shadow: 0 16px 48px rgba(2,6,23,0.20), 0 0 0 1px rgba(15,23,42,0.07);
@@ -4785,6 +5487,34 @@ var REACT_UI_CSS = `
   overflow: hidden;
 }
 
+/* Scrollable body \u2014 mirrors .settings-scroll. min-height:0 is the
+   classic fix that lets a flex child shrink small enough to overflow
+   inside its parent (otherwise the auto min-content size pushes the
+   layout taller than the frame, defeating overflow:auto). */
+.list-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(15,23,42,0.20) transparent;
+}
+.list-scroll::-webkit-scrollbar { width: 6px; }
+.list-scroll::-webkit-scrollbar-thumb {
+  background: rgba(15,23,42,0.18);
+  border-radius: 3px;
+}
+.list-scroll::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.32); }
+:host([data-clickly-theme="dark"]) .list-scroll {
+  scrollbar-color: rgba(255,255,255,0.18) transparent;
+}
+:host([data-clickly-theme="dark"]) .list-scroll::-webkit-scrollbar-thumb {
+  background: rgba(255,255,255,0.18);
+}
+:host([data-clickly-theme="dark"]) .list-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(255,255,255,0.32);
+}
+
 .list-header {
   display: flex;
   align-items: center;
@@ -4816,9 +5546,10 @@ var REACT_UI_CSS = `
 }
 
 .list-items {
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  flex: 1;
+  /* Cards container \u2014 scrolling moved up to .list-scroll so the
+     empty state shares the same scroll region. */
+  display: flex;
+  flex-direction: column;
 }
 
 .list-empty {