feedtack 1.0.1 → 1.1.0

package/dist/react/index.js

@@ -1,33 +1,9 @@
 import {
-  SCHEMA_VERSION,
-  getDeviceMeta,
-  getPageMeta,
-  getPinCoords,
-  getTargetMeta,
-  getViewportMeta,
-  themeToCSS
-} from "../chunk-2A5LLDLP.js";
-
-// src/ui/colors.ts
-var PIN_PALETTE = [
-  "#ef4444",
-  // red
-  "#3b82f6",
-  // blue
-  "#22c55e",
-  // green
-  "#f59e0b",
-  // amber
-  "#a855f7",
-  // purple
-  "#ec4899"
-  // pink
-];
+  FeedtackEngine,
+  PIN_PALETTE
+} from "../chunk-3INDOI4N.js";
 
 // src/react/utils.ts
-function generateId() {
-  return `ft_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`;
-}
 function getAnchoredPosition(x, y) {
   const FORM_HEIGHT = 220;
   const EDGE = 300;
@@ -611,822 +587,7 @@ function resolvePin(pin) {
 }
 
 // src/react/useFeedtackState.ts
-import { useCallback as useCallback5, useEffect as useEffect6, useState as useState3 } from "react";
-
-// src/react/useFeedtackActions.ts
-import { useCallback as useCallback2 } from "react";
-function useFeedtackActions(deps) {
-  const { adapter, currentUser, onError } = deps;
-  const updateItem = useCallback2(
-    (id, fn) => deps.setFeedbackItems(
-      (prev) => prev.map((i) => i.payload.id === id ? fn(i) : i)
-    ),
-    [deps.setFeedbackItems]
-  );
-  const handleSubmit = useCallback2(async () => {
-    const comment = deps.getComment();
-    if (!comment.trim()) {
-      deps.setCommentError(true);
-      return;
-    }
-    deps.setSubmitting(true);
-    const payload = {
-      schemaVersion: SCHEMA_VERSION,
-      id: generateId(),
-      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      scope: deps.getScope(),
-      submittedBy: currentUser,
-      comment: comment.trim(),
-      sentiment: deps.getSentiment(),
-      pins: deps.getPendingPins().map((p, i) => ({ ...p, index: i + 1 })),
-      page: getPageMeta(),
-      viewport: getViewportMeta(),
-      device: getDeviceMeta()
-    };
-    try {
-      await adapter.submit(payload);
-      deps.setFeedbackItems((prev) => [
-        ...prev,
-        { payload, replies: [], resolutions: [], archives: [] }
-      ]);
-      deps.deactivatePinMode();
-    } catch (err) {
-      onError?.(err);
-    } finally {
-      deps.setSubmitting(false);
-    }
-  }, [adapter, currentUser, onError, deps]);
-  const handleReply = useCallback2(
-    async (feedbackId) => {
-      const body = deps.getReplyBody().trim();
-      if (!body) return;
-      const ts = (/* @__PURE__ */ new Date()).toISOString();
-      try {
-        await adapter.reply(feedbackId, {
-          author: currentUser,
-          body,
-          timestamp: ts
-        });
-        updateItem(feedbackId, (item) => {
-          const updated = {
-            ...item,
-            replies: [
-              ...item.replies,
-              {
-                id: generateId(),
-                feedbackId,
-                author: currentUser,
-                body,
-                timestamp: ts
-              }
-            ]
-          };
-          const rescope = deps.shouldRescope?.(currentUser.role) ?? currentUser.role !== "agent";
-          if (rescope && updated.resolutions.length === 0 && deps.hasFlush) {
-            deps.clearFlushed?.(deps.getPathname());
-          }
-          return updated;
-        });
-        deps.setReplyBody("");
-      } catch (err) {
-        onError?.(err);
-      }
-    },
-    [adapter, currentUser, onError, updateItem, deps]
-  );
-  const handleResolve = useCallback2(
-    async (feedbackId) => {
-      const ts = (/* @__PURE__ */ new Date()).toISOString();
-      try {
-        await adapter.resolve(feedbackId, {
-          resolvedBy: currentUser,
-          timestamp: ts
-        });
-        updateItem(feedbackId, (item) => ({
-          ...item,
-          resolutions: [
-            ...item.resolutions,
-            { feedbackId, resolvedBy: currentUser, timestamp: ts }
-          ]
-        }));
-      } catch (err) {
-        onError?.(err);
-      }
-    },
-    [adapter, currentUser, onError, updateItem]
-  );
-  const handleArchive = useCallback2(
-    async (feedbackId) => {
-      const ts = (/* @__PURE__ */ new Date()).toISOString();
-      try {
-        await adapter.archive(feedbackId, currentUser.id);
-        updateItem(feedbackId, (item) => ({
-          ...item,
-          archives: [
-            ...item.archives,
-            { feedbackId, archivedBy: currentUser, timestamp: ts }
-          ]
-        }));
-        deps.setOpenThreadId(null);
-      } catch (err) {
-        onError?.(err);
-      }
-    },
-    [adapter, currentUser, onError, updateItem, deps]
-  );
-  return { handleSubmit, handleReply, handleResolve, handleArchive };
-}
-
-// src/react/useFeedtackDom.ts
-import { useEffect as useEffect3, useRef as useRef2 } from "react";
-
-// src/ui/modalStyles.ts
-var FEEDTACK_MODAL_STYLES = `
-  .feedtack-loading {
-    position: fixed;
-    bottom: 70px;
-    right: 24px;
-    font-size: 12px;
-    color: var(--ft-text-muted);
-    z-index: 2147483640;
-  }
-
-  .feedtack-modal {
-    position: fixed;
-    bottom: 72px;
-    right: 24px;
-    width: 360px;
-    max-height: 70vh;
-    background: var(--ft-bg);
-    border: 1px solid var(--ft-border);
-    border-radius: calc(var(--ft-radius) + 4px);
-    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
-    z-index: 2147483643;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  .feedtack-modal-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 14px 16px 0;
-  }
-
-  .feedtack-modal-title {
-    font-size: 15px;
-    font-weight: 600;
-    color: var(--ft-text);
-  }
-
-  .feedtack-modal-close {
-    background: none;
-    border: none;
-    font-size: 20px;
-    cursor: pointer;
-    color: var(--ft-text-muted);
-    line-height: 1;
-    padding: 0 4px;
-  }
-
-  .feedtack-modal-tabs {
-    display: flex;
-    gap: 0;
-    padding: 12px 16px 0;
-    border-bottom: 1px solid var(--ft-border);
-  }
-
-  .feedtack-modal-tab {
-    flex: 1;
-    padding: 8px 12px;
-    border: none;
-    background: none;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    color: var(--ft-text-muted);
-    border-bottom: 2px solid transparent;
-    margin-bottom: -1px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-  }
-
-  .feedtack-modal-tab.active {
-    color: var(--ft-primary);
-    border-bottom-color: var(--ft-primary);
-  }
-
-  .feedtack-tab-count {
-    font-size: 11px;
-    background: var(--ft-surface);
-    color: var(--ft-text-muted);
-    padding: 1px 6px;
-    border-radius: 10px;
-  }
-
-  .feedtack-modal-body {
-    flex: 1;
-    overflow-y: auto;
-    padding: 12px 16px;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  .feedtack-modal-threads {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-  }
-
-  .feedtack-modal-thread-item {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    text-align: left;
-    padding: 10px 12px;
-    background: var(--ft-surface);
-    border: 1px solid var(--ft-border);
-    border-radius: var(--ft-radius);
-    cursor: pointer;
-  }
-
-  .feedtack-modal-thread-item:hover {
-    border-color: var(--ft-primary);
-  }
-
-  .feedtack-thread-author {
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--ft-text);
-  }
-
-  .feedtack-thread-comment {
-    font-size: 13px;
-    color: var(--ft-text);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .feedtack-thread-meta {
-    font-size: 11px;
-    color: var(--ft-text-muted);
-  }
-
-  .feedtack-modal-compose {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .feedtack-modal-textarea {
-    width: 100%;
-    border: 1.5px solid var(--ft-border);
-    border-radius: var(--ft-radius);
-    padding: 8px;
-    font-size: 13px;
-    resize: vertical;
-    min-height: 72px;
-    outline: none;
-    background: var(--ft-surface);
-    color: var(--ft-text);
-  }
-
-  .feedtack-modal-textarea:focus {
-    border-color: var(--ft-primary);
-  }
-
-  .feedtack-modal-textarea.error {
-    border-color: var(--ft-error);
-  }
-
-  .feedtack-modal-footer {
-    padding: 10px 16px 14px;
-    border-top: 1px solid var(--ft-border);
-  }
-
-  .feedtack-modal-pin-btn {
-    width: 100%;
-    padding: 8px 14px;
-    border: 1.5px solid var(--ft-border);
-    border-radius: var(--ft-radius);
-    background: var(--ft-bg);
-    color: var(--ft-text);
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: border-color 0.15s;
-  }
-
-  .feedtack-modal-pin-btn:hover {
-    border-color: var(--ft-primary);
-    color: var(--ft-primary);
-  }
-
-  .feedtack-modal-thread-view {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .feedtack-modal-back {
-    background: none;
-    border: none;
-    font-size: 13px;
-    color: var(--ft-primary);
-    cursor: pointer;
-    padding: 0;
-    text-align: left;
-  }
-
-  .feedtack-modal-thread-content {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    font-size: 13px;
-  }
-
-  .feedtack-modal-reply {
-    border-top: 1px solid var(--ft-border);
-    padding-top: 8px;
-    font-size: 12px;
-  }
-
-  .feedtack-reply-author {
-    font-weight: 600;
-  }
-
-  .feedtack-modal-actions {
-    display: flex;
-    gap: 6px;
-    flex-wrap: wrap;
-  }
-
-  @media (max-width: 480px) {
-    .feedtack-modal {
-      right: 0;
-      bottom: 64px;
-      width: 100vw;
-      max-height: 85vh;
-      border-radius: var(--ft-radius) var(--ft-radius) 0 0;
-      border-left: none;
-      border-right: none;
-      border-bottom: none;
-    }
-  }
-`;
-
-// src/ui/styles.ts
-var FEEDTACK_DEFAULT_TOKENS = `
-  #feedtack-root, .feedtack-form, .feedtack-thread, .feedtack-modal {
-    --ft-primary: #2563eb;
-    --ft-primary-hover: #1d4ed8;
-    --ft-bg: #ffffff;
-    --ft-surface: #f9fafb;
-    --ft-text: #111827;
-    --ft-text-muted: #6b7280;
-    --ft-border: #e5e7eb;
-    --ft-radius: 8px;
-    --ft-error: #ef4444;
-    --ft-badge: #f59e0b;
-  }
-`;
-var FEEDTACK_STYLES = `
-  #feedtack-root * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    font-family: system-ui, -apple-system, sans-serif;
-    line-height: 1.5;
-  }
-
-  .feedtack-btn {
-    position: fixed;
-    bottom: 24px;
-    right: 24px;
-    z-index: 2147483640;
-    background: var(--ft-text);
-    color: var(--ft-bg);
-    border: none;
-    border-radius: var(--ft-radius);
-    padding: 8px 14px;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    transition: background 0.15s;
-  }
-
-  .feedtack-btn:hover {
-    opacity: 0.85;
-  }
-
-  .feedtack-btn.active {
-    background: var(--ft-primary);
-  }
-
-  .feedtack-crosshair * {
-    cursor: crosshair !important;
-  }
-
-  .feedtack-pin-marker {
-    position: absolute;
-    z-index: 2147483641;
-    width: 24px;
-    height: 24px;
-    border-radius: 50% 50% 50% 0;
-    transform: translate(-50%, -100%) rotate(-45deg);
-    transform-origin: bottom center;
-    border: 2px solid rgba(255,255,255,0.8);
-    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
-    cursor: pointer;
-    pointer-events: all;
-  }
-
-  .feedtack-pin-resolved { opacity: 0.6; }
-
-  .feedtack-pin-icon {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transform: rotate(45deg);
-    font-size: 12px;
-    font-weight: 700;
-    color: #fff;
-    line-height: 1;
-    pointer-events: none;
-  }
-
-  .feedtack-pin-badge {
-    position: absolute;
-    top: -4px;
-    right: -4px;
-    width: 10px;
-    height: 10px;
-    background: var(--ft-badge);
-    border-radius: 50%;
-    border: 1.5px solid var(--ft-bg);
-  }
-
-  .feedtack-color-picker {
-    display: flex;
-    gap: 6px;
-    padding: 8px;
-    background: var(--ft-bg) !important;
-    border-radius: var(--ft-radius);
-    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-    position: fixed;
-    bottom: 72px;
-    right: 24px;
-    z-index: 2147483641;
-  }
-
-  .feedtack-color-swatch {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    border: 2px solid transparent;
-    cursor: pointer;
-    transition: transform 0.1s;
-  }
-
-  .feedtack-color-swatch.selected {
-    border-color: var(--ft-text);
-    transform: scale(1.15);
-  }
-
-  .feedtack-form {
-    position: absolute;
-    z-index: 2147483642;
-    background: var(--ft-bg) !important;
-    border-radius: calc(var(--ft-radius) + 2px);
-    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
-    padding: 16px;
-    width: 280px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .feedtack-form textarea {
-    width: 100%;
-    border: 1.5px solid var(--ft-border);
-    border-radius: var(--ft-radius);
-    padding: 8px;
-    font-size: 13px;
-    resize: vertical;
-    min-height: 80px;
-    outline: none;
-    background: var(--ft-surface);
-    color: var(--ft-text);
-  }
-
-  .feedtack-form textarea:focus {
-    border-color: var(--ft-primary);
-  }
-
-  .feedtack-form textarea.error {
-    border-color: var(--ft-error);
-  }
-
-  .feedtack-error-msg {
-    font-size: 12px;
-    color: var(--ft-error);
-  }
-
-  .feedtack-sentiment {
-    display: flex;
-    gap: 8px;
-  }
-
-  .feedtack-sentiment button {
-    flex: 1;
-    padding: 6px 10px;
-    border: 1.5px solid var(--ft-border);
-    border-radius: var(--ft-radius);
-    background: var(--ft-bg);
-    color: var(--ft-text);
-    font-size: 12px;
-    cursor: pointer;
-    transition: all 0.1s;
-  }
-
-  .feedtack-sentiment button.selected {
-    border-color: var(--ft-primary);
-    background: var(--ft-surface);
-    color: var(--ft-primary);
-  }
-
-  .feedtack-form-actions {
-    display: flex;
-    gap: 8px;
-    justify-content: flex-end;
-  }
-
-  .feedtack-btn-cancel {
-    padding: 6px 12px;
-    border: 1.5px solid var(--ft-border);
-    border-radius: var(--ft-radius);
-    background: var(--ft-bg);
-    color: var(--ft-text);
-    font-size: 13px;
-    cursor: pointer;
-  }
-
-  .feedtack-btn-submit {
-    padding: 6px 12px;
-    border: none;
-    border-radius: var(--ft-radius);
-    background: var(--ft-primary);
-    color: #fff;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-  }
-
-  .feedtack-btn-submit:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .feedtack-thread {
-    position: absolute;
-    z-index: 2147483642;
-    background: var(--ft-bg) !important;
-    border-radius: calc(var(--ft-radius) + 2px);
-    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
-    padding: 16px;
-    width: 300px;
-    max-height: 400px;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .feedtack-sr-only {
-    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
-    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
-  }
-
-` + FEEDTACK_MODAL_STYLES;
-
-// src/react/useFeedtackDom.ts
-function useFeedtackDom(theme, disabled) {
-  const rootRef = useRef2(null);
-  useEffect3(() => {
-    if (disabled) return;
-    if (document.getElementById("feedtack-styles")) return;
-    const style = document.createElement("style");
-    style.id = "feedtack-styles";
-    style.textContent = FEEDTACK_DEFAULT_TOKENS + FEEDTACK_STYLES;
-    document.head.appendChild(style);
-    return () => {
-      style.remove();
-    };
-  }, [disabled]);
-  useEffect3(() => {
-    if (disabled) return;
-    const root = document.createElement("div");
-    root.id = "feedtack-root";
-    document.body.appendChild(root);
-    rootRef.current = root;
-    return () => {
-      root.remove();
-    };
-  }, [disabled]);
-  useEffect3(() => {
-    if (disabled) return;
-    const root = document.getElementById("feedtack-root");
-    if (!root || !theme) return;
-    const tokens = themeToCSS(theme);
-    for (const [k, v] of Object.entries(tokens)) {
-      root.style.setProperty(k, v);
-    }
-  }, [theme, disabled]);
-  return rootRef;
-}
-
-// src/react/useFeedtackFlush.ts
-import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3 } from "react";
-var DEFAULT_IDLE_MS = 5 * 60 * 1e3;
-function useFeedtackFlush({
-  pathname,
-  feedbackItems,
-  onFlush,
-  flushIdleMs = DEFAULT_IDLE_MS,
-  disabled
-}) {
-  const flushedRef = useRef3(/* @__PURE__ */ new Set());
-  const prevPathnameRef = useRef3(pathname);
-  const idleTimerRef = useRef3(null);
-  const flush = useCallback3(
-    (path, items) => {
-      if (!onFlush || flushedRef.current.has(path)) return;
-      const pageItems = items.filter((i) => i.payload.page.pathname === path);
-      if (pageItems.length === 0) return;
-      flushedRef.current.add(path);
-      onFlush({ pathname: path, items: pageItems });
-    },
-    [onFlush]
-  );
-  useEffect4(() => {
-    if (disabled || !onFlush) return;
-    const prev = prevPathnameRef.current;
-    prevPathnameRef.current = pathname;
-    if (prev !== pathname) {
-      flush(prev, feedbackItems);
-    }
-  }, [pathname, feedbackItems, flush, onFlush, disabled]);
-  useEffect4(() => {
-    if (disabled || !onFlush || flushIdleMs <= 0) return;
-    const resetTimer = () => {
-      if (idleTimerRef.current) clearTimeout(idleTimerRef.current);
-      idleTimerRef.current = setTimeout(() => {
-        flush(pathname, feedbackItems);
-      }, flushIdleMs);
-    };
-    const events = ["mousemove", "keydown", "scroll", "touchstart"];
-    for (const e of events)
-      window.addEventListener(e, resetTimer, { passive: true });
-    resetTimer();
-    return () => {
-      if (idleTimerRef.current) clearTimeout(idleTimerRef.current);
-      for (const e of events) window.removeEventListener(e, resetTimer);
-    };
-  }, [pathname, feedbackItems, flush, onFlush, flushIdleMs, disabled]);
-  useEffect4(() => {
-    if (disabled || !onFlush) return;
-    const handleUnload = () => flush(pathname, feedbackItems);
-    window.addEventListener("beforeunload", handleUnload);
-    return () => window.removeEventListener("beforeunload", handleUnload);
-  }, [pathname, feedbackItems, flush, onFlush, disabled]);
-  const clearFlushed = useCallback3((path) => {
-    flushedRef.current.delete(path);
-  }, []);
-  return { clearFlushed };
-}
-
-// src/react/usePinMode.ts
-import { useCallback as useCallback4, useEffect as useEffect5, useState as useState2 } from "react";
-function usePinMode({
-  hotkey,
-  onDeactivate,
-  disabled,
-  isModalOpen,
-  onHotkey
-}) {
-  const [isActive, setIsActive] = useState2(false);
-  const [pendingPins, setPendingPins] = useState2([]);
-  const [selectedColor, setSelectedColor] = useState2(PIN_PALETTE[0]);
-  const [showForm, setShowForm] = useState2(false);
-  const activate = useCallback4(() => setIsActive(true), []);
-  const deactivate = useCallback4(() => {
-    setIsActive(false);
-    setPendingPins([]);
-    setShowForm(false);
-    onDeactivate?.();
-  }, [onDeactivate]);
-  useEffect5(() => {
-    if (isActive) {
-      document.documentElement.classList.add("feedtack-crosshair");
-    } else {
-      document.documentElement.classList.remove("feedtack-crosshair");
-    }
-    return () => document.documentElement.classList.remove("feedtack-crosshair");
-  }, [isActive]);
-  useEffect5(() => {
-    if (disabled) return;
-    const handler = (e) => {
-      if (e.key === hotkey.toUpperCase() && e.shiftKey) {
-        if (onHotkey) {
-          onHotkey();
-        } else {
-          setIsActive((prev) => !prev);
-        }
-      }
-      if (e.key === "Escape") {
-        deactivate();
-      }
-      if (isActive && !isModalOpen && !showForm && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
-        e.preventDefault();
-        setSelectedColor((prev) => {
-          const idx = PIN_PALETTE.indexOf(prev);
-          const dir = e.key === "ArrowRight" ? 1 : -1;
-          return PIN_PALETTE[(idx + dir + PIN_PALETTE.length) % PIN_PALETTE.length];
-        });
-      }
-    };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
-  }, [hotkey, deactivate, isActive, disabled, isModalOpen, showForm, onHotkey]);
-  const placePin = useCallback4(
-    (coords, target) => {
-      if (target.closest("#feedtack-root, .feedtack-form, .feedtack-color-picker"))
-        return;
-      setPendingPins((prev) => [
-        ...prev,
-        {
-          color: selectedColor,
-          ...getPinCoords(coords),
-          target: getTargetMeta(target)
-        }
-      ]);
-      setShowForm(true);
-    },
-    [selectedColor]
-  );
-  const handlePageClick = useCallback4(
-    (e) => {
-      if (!isActive) return;
-      e.preventDefault();
-      e.stopPropagation();
-      placePin(e, e.target);
-    },
-    [isActive, placePin]
-  );
-  const handleTouchEnd = useCallback4(
-    (e) => {
-      if (!isActive) return;
-      const touch = e.changedTouches[0];
-      if (!touch) return;
-      const target = document.elementFromPoint(touch.clientX, touch.clientY);
-      if (!target) return;
-      e.preventDefault();
-      placePin(touch, target);
-    },
-    [isActive, placePin]
-  );
-  useEffect5(() => {
-    if (disabled) return;
-    document.addEventListener("click", handlePageClick, true);
-    document.addEventListener("touchend", handleTouchEnd, true);
-    return () => {
-      document.removeEventListener("click", handlePageClick, true);
-      document.removeEventListener("touchend", handleTouchEnd, true);
-    };
-  }, [handlePageClick, handleTouchEnd, disabled]);
-  return {
-    isActive,
-    activate,
-    deactivate,
-    pendingPins,
-    selectedColor,
-    setSelectedColor,
-    showForm
-  };
-}
-
-// src/react/useFeedtackState.ts
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useSyncExternalStore } from "react";
 function useFeedtackState({
   adapter,
   currentUser,
@@ -1438,164 +599,112 @@ function useFeedtackState({
   flushIdleMs,
   rescopeRoles
 }) {
-  useFeedtackDom(theme, disabled);
-  const [pathname, setPathname] = useState3(
-    () => typeof window === "undefined" ? "/" : window.location.pathname
-  );
-  useEffect6(() => {
-    const update = () => setPathname(window.location.pathname);
-    const origPush = history.pushState.bind(history);
-    const origReplace = history.replaceState.bind(history);
-    history.pushState = (...args) => {
-      origPush(...args);
-      queueMicrotask(update);
-    };
-    history.replaceState = (...args) => {
-      origReplace(...args);
-      queueMicrotask(update);
-    };
-    window.addEventListener("popstate", update);
-    return () => {
-      window.removeEventListener("popstate", update);
-      history.pushState = origPush;
-      history.replaceState = origReplace;
-    };
-  }, []);
-  const [comment, setComment] = useState3("");
-  const [sentiment, setSentiment] = useState3(null);
-  const [commentError, setCommentError] = useState3(false);
-  const [submitting, setSubmitting] = useState3(false);
-  const [feedbackItems, setFeedbackItems] = useState3([]);
-  const [loading, setLoading] = useState3(true);
-  const [openThreadId, setOpenThreadId] = useState3(null);
-  const [replyBody, setReplyBody] = useState3("");
-  const [isModalOpen, setIsModalOpen] = useState3(false);
-  const [composeScope, setComposeScope] = useState3("site");
-  const [siteFeedback, setSiteFeedback] = useState3([]);
-  const [pageFeedback, setPageFeedback] = useState3([]);
-  const openModal = useCallback5(() => setIsModalOpen(true), []);
-  const closeModal = useCallback5(() => setIsModalOpen(false), []);
-  const resetForm = useCallback5(() => {
-    setComment("");
-    setSentiment(null);
-    setCommentError(false);
-  }, []);
-  const pinMode = usePinMode({
-    hotkey,
-    disabled,
-    isModalOpen: openThreadId !== null || isModalOpen,
-    onHotkey: openModal,
-    onDeactivate: () => {
-      resetForm();
-      setOpenThreadId(null);
-    }
-  });
-  const { clearFlushed } = useFeedtackFlush({
-    pathname,
-    feedbackItems,
-    onFlush,
-    flushIdleMs,
-    disabled
-  });
-  useEffect6(() => {
-    setLoading(true);
-    adapter.loadFeedback({ pathname }).then((items) => {
-      const elementItems = [];
-      const siteItems = [];
-      const pageItems = [];
-      for (const item of items) {
-        if (item.payload.scope === "site") siteItems.push(item);
-        else if (item.payload.scope === "page") pageItems.push(item);
-        else elementItems.push(item);
-      }
-      setFeedbackItems(elementItems);
-      setSiteFeedback(siteItems);
-      setPageFeedback(pageItems);
-    }).catch((err) => onError?.(err)).finally(() => setLoading(false));
-  }, [adapter, onError, pathname]);
-  const getCurrentScope = useCallback5(() => {
-    if (pinMode.isActive || pinMode.pendingPins.length > 0) return "element";
-    return composeScope;
-  }, [pinMode.isActive, pinMode.pendingPins.length, composeScope]);
-  const commentRef = () => comment;
-  const sentimentRef = () => sentiment;
-  const scopeRef = () => getCurrentScope();
-  const pinsRef = () => pinMode.pendingPins;
-  const replyRef = () => replyBody;
-  const pathRef = () => pathname;
-  const actions = useFeedtackActions({
-    adapter,
-    currentUser,
-    onError,
-    getComment: commentRef,
-    getSentiment: sentimentRef,
-    getScope: scopeRef,
-    getPendingPins: pinsRef,
-    getReplyBody: replyRef,
-    getPathname: pathRef,
-    setCommentError,
-    setSubmitting,
-    setFeedbackItems,
-    setReplyBody,
-    setOpenThreadId,
-    deactivatePinMode: pinMode.deactivate,
-    clearFlushed,
-    shouldRescope: rescopeRoles ? (role) => rescopeRoles.includes(role) : void 0,
-    hasFlush: !!onFlush
-  });
-  const handleModalSubmit = useCallback5(async () => {
-    if (!comment.trim()) {
-      setCommentError(true);
-      return;
-    }
-    await actions.handleSubmit();
-    const scope = composeScope;
-    setFeedbackItems((prev) => {
-      const newItem = prev[prev.length - 1];
-      if (newItem && newItem.payload.scope === scope) {
-        if (scope === "site") {
-          setSiteFeedback((s) => [...s, newItem]);
-        } else {
-          setPageFeedback((p) => [...p, newItem]);
-        }
-        return prev.slice(0, -1);
-      }
-      return prev;
+  const engineRef = useRef2(null);
+  if (!engineRef.current) {
+    engineRef.current = new FeedtackEngine({
+      adapter,
+      currentUser,
+      hotkey,
+      theme,
+      onError,
+      disabled,
+      onFlush,
+      flushIdleMs,
+      rescopeRoles
     });
-    resetForm();
-  }, [actions, composeScope, resetForm, comment]);
-  const isArchivedForUser = (item) => item.archives.some((a) => a.archivedBy.id === currentUser.id);
-  const hasUnread = (item) => item.replies.length > 0;
-  const hasValidPins = (item) => Array.isArray(item.payload?.pins) && item.payload.pins.length > 0;
+  }
+  const engine = engineRef.current;
+  useEffect3(() => {
+    engine.mount();
+    return () => engine.destroy();
+  }, [engine]);
+  const subscribe = useCallback2(
+    (cb) => engine.subscribe(cb),
+    [engine]
+  );
+  const getSnapshot = useCallback2(() => engine.getState(), [engine]);
+  const state = useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getSnapshot
+  );
+  const isArchivedForUser = useCallback2(
+    (item) => engine.isArchivedForUser(item),
+    [engine]
+  );
+  const hasUnread = useCallback2(
+    (item) => engine.hasUnread(item),
+    [engine]
+  );
+  const hasValidPins = useCallback2(
+    (item) => engine.hasValidPins(item),
+    [engine]
+  );
   return {
-    ...pinMode,
-    isPinModeActive: pinMode.isActive,
-    activatePinMode: pinMode.activate,
-    deactivatePinMode: pinMode.deactivate,
-    comment,
-    setComment,
-    sentiment,
-    setSentiment,
-    commentError,
-    setCommentError,
-    submitting,
-    pathname,
-    feedbackItems,
-    siteFeedback,
-    pageFeedback,
-    loading,
-    openThreadId,
-    setOpenThreadId,
-    replyBody,
-    setReplyBody,
-    // Modal state
-    isModalOpen,
-    openModal,
-    closeModal,
-    composeScope,
-    setComposeScope,
-    handleModalSubmit,
-    ...actions,
+    // Pin mode
+    isPinModeActive: state.isPinModeActive,
+    isActive: state.isPinModeActive,
+    activatePinMode: useCallback2(() => engine.activatePinMode(), [engine]),
+    activate: useCallback2(() => engine.activatePinMode(), [engine]),
+    deactivatePinMode: useCallback2(() => engine.deactivatePinMode(), [engine]),
+    deactivate: useCallback2(() => engine.deactivatePinMode(), [engine]),
+    pendingPins: state.pendingPins,
+    selectedColor: state.selectedColor,
+    setSelectedColor: useCallback2(
+      (c) => engine.setSelectedColor(c),
+      [engine]
+    ),
+    showForm: state.showForm,
+    // Form
+    comment: state.comment,
+    setComment: useCallback2((v) => engine.setComment(v), [engine]),
+    sentiment: state.sentiment,
+    setSentiment: useCallback2(
+      (v) => engine.setSentiment(v),
+      [engine]
+    ),
+    commentError: state.commentError,
+    setCommentError: useCallback2(
+      (v) => engine.setCommentError(v),
+      [engine]
+    ),
+    submitting: state.submitting,
+    // Feedback
+    feedbackItems: state.feedbackItems,
+    siteFeedback: state.siteFeedback,
+    pageFeedback: state.pageFeedback,
+    loading: state.loading,
+    pathname: state.pathname,
+    // Thread
+    openThreadId: state.openThreadId,
+    setOpenThreadId: useCallback2(
+      (id) => engine.setOpenThreadId(id),
+      [engine]
+    ),
+    replyBody: state.replyBody,
+    setReplyBody: useCallback2((v) => engine.setReplyBody(v), [engine]),
+    // Modal
+    isModalOpen: state.isModalOpen,
+    openModal: useCallback2(() => engine.openModal(), [engine]),
+    closeModal: useCallback2(() => engine.closeModal(), [engine]),
+    composeScope: state.composeScope,
+    setComposeScope: useCallback2(
+      (s) => engine.setComposeScope(s),
+      [engine]
+    ),
+    // Actions
+    handleSubmit: useCallback2(() => engine.handleSubmit(), [engine]),
+    handleModalSubmit: useCallback2(() => engine.handleModalSubmit(), [engine]),
+    handleReply: useCallback2((id) => engine.handleReply(id), [engine]),
+    handleResolve: useCallback2(
+      (id) => engine.handleResolve(id),
+      [engine]
+    ),
+    handleArchive: useCallback2(
+      (id) => engine.handleArchive(id),
+      [engine]
+    ),
+    // Derived helpers
     isArchivedForUser,
     hasUnread,
     hasValidPins