@useclickly/react 1.2.0 → 1.3.0

package/dist/index.d.cts

@@ -1,3 +1,4 @@
+import * as zustand_middleware from 'zustand/middleware';
 import * as zustand from 'zustand';
 import { Annotation } from '@useclickly/core';
 export { Annotation, AnnotationKind, AnnotationStatus, ScreenshotData } from '@useclickly/core';
@@ -49,7 +50,19 @@ interface AnnotationsStore {
      *  a save back — these annotations already exist on disk. */
     hydrateStrokes: (strokesById: Record<string, NonNullable<Annotation["strokes"]>>) => void;
 }
-declare const useAnnotations: zustand.UseBoundStore<zustand.StoreApi<AnnotationsStore>>;
+declare const useAnnotations: zustand.UseBoundStore<Omit<zustand.StoreApi<AnnotationsStore>, "setState" | "persist"> & {
+    setState(partial: AnnotationsStore | Partial<AnnotationsStore> | ((state: AnnotationsStore) => AnnotationsStore | Partial<AnnotationsStore>), replace?: false | undefined): unknown;
+    setState(state: AnnotationsStore | ((state: AnnotationsStore) => AnnotationsStore), replace: true): unknown;
+    persist: {
+        setOptions: (options: Partial<zustand_middleware.PersistOptions<AnnotationsStore, unknown, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: AnnotationsStore) => void) => () => void;
+        onFinishHydration: (fn: (state: AnnotationsStore) => void) => () => void;
+        getOptions: () => Partial<zustand_middleware.PersistOptions<AnnotationsStore, unknown, unknown>>;
+    };
+}>;
 /**
  * Subscribe to the annotation list with shallow equality — re-renders
  * only when items add/remove/reorder/update. Always use this from

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import * as zustand_middleware from 'zustand/middleware';
 import * as zustand from 'zustand';
 import { Annotation } from '@useclickly/core';
 export { Annotation, AnnotationKind, AnnotationStatus, ScreenshotData } from '@useclickly/core';
@@ -49,7 +50,19 @@ interface AnnotationsStore {
      *  a save back — these annotations already exist on disk. */
     hydrateStrokes: (strokesById: Record<string, NonNullable<Annotation["strokes"]>>) => void;
 }
-declare const useAnnotations: zustand.UseBoundStore<zustand.StoreApi<AnnotationsStore>>;
+declare const useAnnotations: zustand.UseBoundStore<Omit<zustand.StoreApi<AnnotationsStore>, "setState" | "persist"> & {
+    setState(partial: AnnotationsStore | Partial<AnnotationsStore> | ((state: AnnotationsStore) => AnnotationsStore | Partial<AnnotationsStore>), replace?: false | undefined): unknown;
+    setState(state: AnnotationsStore | ((state: AnnotationsStore) => AnnotationsStore), replace: true): unknown;
+    persist: {
+        setOptions: (options: Partial<zustand_middleware.PersistOptions<AnnotationsStore, unknown, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: AnnotationsStore) => void) => () => void;
+        onFinishHydration: (fn: (state: AnnotationsStore) => void) => () => void;
+        getOptions: () => Partial<zustand_middleware.PersistOptions<AnnotationsStore, unknown, unknown>>;
+    };
+}>;
 /**
  * Subscribe to the annotation list with shallow equality — re-renders
  * only when items add/remove/reorder/update. Always use this from

package/dist/index.js

@@ -3,6 +3,7 @@ import { useState, useEffect, useSyncExternalStore, useRef, useCallback } from '
 import { createRoot } from 'react-dom/client';
 import { isPlacementAnnotation, isRearrangeAnnotation, createShadowHost, SelectionEngine, Overlay, collectComputedStyles, collectMetadata, getReadableElementPath, identifyElement } from '@useclickly/core';
 import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
 import { useShallow } from 'zustand/react/shallow';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { nanoid } from 'nanoid';
@@ -144,52 +145,84 @@ async function loadDirHandle() {
 }
 
 // src/state/annotations.ts
-var useAnnotations = 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 = create()(
+  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: 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(
     useShallow((s) => s.order.map((id) => s.byId[id]).filter(Boolean))
@@ -205,11 +238,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 };
@@ -217,10 +250,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 {
   }
 }
@@ -228,11 +261,11 @@ var useSettings = create((set) => ({
   ...load(),
   set: (patch) => set((cur) => {
     const next = { ...cur, ...patch };
-    persist(next);
+    persist2(next);
     return next;
   }),
   reset: () => {
-    persist(DEFAULTS);
+    persist2(DEFAULTS);
     set(DEFAULTS);
   }
 }));
@@ -1366,6 +1399,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);
@@ -1379,9 +1417,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] = useState(false);
   const update = useAnnotations((s) => s.update);
   const exportComposite = async () => {
@@ -1405,36 +1451,55 @@ function AnnotationList({ anchor, width, onClose }) {
       setExporting(false);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { ref, className: "clickly-list", style: { left, top }, children: [
-    /* @__PURE__ */ jsxs("div", { className: "list-header", children: [
-      /* @__PURE__ */ jsx("span", { className: "list-title", children: "Annotations" }),
-      /* @__PURE__ */ jsx("span", { className: "list-count", children: items.length }),
-      items.length > 0 && /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: "list-action-btn",
-          onClick: exportComposite,
-          title: "Export all screenshots as a numbered image strip",
-          disabled: exporting,
-          style: { marginLeft: "auto" },
-          children: /* @__PURE__ */ jsx(IconDownload, {})
-        }
-      )
-    ] }),
-    items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "list-empty", children: "No annotations yet." }) : /* @__PURE__ */ jsx("div", { className: "list-items", children: items.map((a, i) => /* @__PURE__ */ 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__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: "clickly-list",
+      style: { left, top, width: PANEL_W2, height: PANEL_H2 },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "list-header", children: [
+          /* @__PURE__ */ jsx("span", { className: "list-title", children: "Annotations" }),
+          /* @__PURE__ */ jsx("span", { className: "list-count", children: items.length }),
+          items.length > 0 && /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "list-action-btn",
+              onClick: exportComposite,
+              title: "Export all screenshots as a numbered image strip",
+              disabled: exporting,
+              style: { marginLeft: "auto" },
+              children: /* @__PURE__ */ jsx(IconDownload, {})
+            }
+          ),
+          /* @__PURE__ */ 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__ */ jsx(IconClose, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "list-scroll", children: items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "list-empty", children: "No annotations yet." }) : /* @__PURE__ */ jsx("div", { className: "list-items", children: items.map((a, i) => /* @__PURE__ */ 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,
@@ -5402,9 +5467,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);
@@ -5418,6 +5485,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;
@@ -5449,9 +5544,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 {