feedtack 0.5.1 → 1.1.0

package/dist/chunk-3INDOI4N.js

@@ -0,0 +1,1235 @@
+// src/capture/meta.ts
+function getViewportMeta() {
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    scrollX: window.scrollX,
+    scrollY: window.scrollY,
+    devicePixelRatio: window.devicePixelRatio
+  };
+}
+function getPageMeta() {
+  return {
+    url: window.location.href,
+    pathname: window.location.pathname,
+    title: document.title
+  };
+}
+function getDeviceMeta() {
+  return {
+    userAgent: navigator.userAgent,
+    platform: navigator.platform,
+    touchEnabled: navigator.maxTouchPoints > 0
+  };
+}
+function getPinCoords(event) {
+  const x = event.clientX + window.scrollX;
+  const y = event.clientY + window.scrollY;
+  const docWidth = document.documentElement.scrollWidth;
+  const docHeight = document.documentElement.scrollHeight;
+  return {
+    x,
+    y,
+    xPct: Number((x / docWidth * 100).toFixed(2)),
+    yPct: Number((y / docHeight * 100).toFixed(2))
+  };
+}
+
+// src/capture/fiber.ts
+var fiberKey;
+function getFiberKey(element) {
+  if (fiberKey !== void 0) return fiberKey;
+  const key = Object.keys(element).find((k) => k.startsWith("__reactFiber$"));
+  fiberKey = key ?? null;
+  return fiberKey;
+}
+function getComponentName(element) {
+  try {
+    const key = getFiberKey(element);
+    if (!key) return null;
+    let fiber = element[key];
+    while (fiber) {
+      const type = fiber.type;
+      if (type && typeof type !== "string") {
+        const name = type.displayName ?? type.name;
+        if (name && name !== "Anonymous") return name;
+      }
+      fiber = fiber.return;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+// src/capture/target.ts
+var INTERACTIVE_SELECTOR = "button,a,input,select,textarea,label";
+function resolveTarget(element) {
+  const promoted = element.closest(INTERACTIVE_SELECTOR);
+  return promoted ?? element;
+}
+function attr(el, name) {
+  return el.getAttribute(name);
+}
+function nthChild(el) {
+  let n = 1;
+  let sib = el.previousElementSibling;
+  while (sib) {
+    n++;
+    sib = sib.previousElementSibling;
+  }
+  return n;
+}
+function nthOfType(el) {
+  const tag = el.tagName;
+  let n = 1;
+  let sib = el.previousElementSibling;
+  while (sib) {
+    if (sib.tagName === tag) n++;
+    sib = sib.previousElementSibling;
+  }
+  return n;
+}
+function serializeNode(el) {
+  const id = attr(el, "id");
+  const dataTestId = attr(el, "data-testid") ?? attr(el, "data-test-id");
+  const dataFeedtackComponent = attr(el, "data-feedtack-component");
+  const hasStableId = !!(id || dataTestId);
+  return {
+    tag: el.tagName.toLowerCase(),
+    id,
+    ariaLabel: attr(el, "aria-label"),
+    role: attr(el, "role"),
+    type: attr(el, "type"),
+    name: attr(el, "name"),
+    title: attr(el, "title"),
+    alt: attr(el, "alt"),
+    dataTestId,
+    dataFeedtackComponent,
+    nthChild: hasStableId ? null : nthChild(el),
+    nthOfType: hasStableId ? null : nthOfType(el),
+    componentName: dataFeedtackComponent ?? getComponentName(el)
+  };
+}
+function getAncestorChain(element) {
+  const chain = [];
+  let current = element.parentElement;
+  while (current && current !== document.body && chain.length < 5) {
+    chain.push(serializeNode(current));
+    current = current.parentElement;
+  }
+  return chain;
+}
+function getCSSSelector(element) {
+  const parts = [];
+  let current = element;
+  while (current && current !== document.body) {
+    const id = current.getAttribute("id");
+    const testId = current.getAttribute("data-testid") ?? current.getAttribute("data-test-id");
+    const feedtackComponent = current.getAttribute("data-feedtack-component");
+    if (id) {
+      parts.unshift(`#${id}`);
+      break;
+    } else if (testId) {
+      parts.unshift(`[data-testid="${testId}"]`);
+      break;
+    } else if (feedtackComponent) {
+      parts.unshift(`[data-feedtack-component="${feedtackComponent}"]`);
+      break;
+    } else {
+      const tag = current.tagName.toLowerCase();
+      const parent = current.parentElement;
+      if (parent) {
+        const siblings = Array.from(parent.children).filter(
+          (c) => c.tagName === current.tagName
+        );
+        const index = siblings.indexOf(current) + 1;
+        parts.unshift(
+          siblings.length > 1 ? `${tag}:nth-of-type(${index})` : tag
+        );
+      } else {
+        parts.unshift(tag);
+      }
+    }
+    current = current.parentElement;
+  }
+  return parts.join(" > ");
+}
+function deriveElementPath(target, ancestors) {
+  const dataTestId = target.getAttribute("data-testid") ?? target.getAttribute("data-test-id");
+  if (dataTestId) return null;
+  const targetPart = (() => {
+    const tag = target.tagName.toLowerCase();
+    const classes = Array.from(target.classList).join(".");
+    return classes ? `${tag}.${classes}` : tag;
+  })();
+  const ancestorParts = ancestors.map((a) => {
+    if (a.dataTestId) return `[data-testid="${a.dataTestId}"]`;
+    const classes = "";
+    return classes ? `${a.tag}.${classes}` : a.tag;
+  });
+  return [targetPart, ...ancestorParts].join(" > ");
+}
+function getTargetMeta(element) {
+  const resolved = resolveTarget(element);
+  const id = resolved.getAttribute("id");
+  const dataTestId = resolved.getAttribute("data-testid") ?? resolved.getAttribute("data-test-id");
+  const feedtackComponent = resolved.getAttribute("data-feedtack-component");
+  let selector;
+  let best_effort;
+  if (id) {
+    selector = `#${id}`;
+    best_effort = false;
+  } else if (dataTestId) {
+    selector = `[data-testid="${dataTestId}"]`;
+    best_effort = false;
+  } else if (feedtackComponent) {
+    selector = `[data-feedtack-component="${feedtackComponent}"]`;
+    best_effort = false;
+  } else {
+    selector = getCSSSelector(resolved);
+    best_effort = true;
+  }
+  const ancestors = getAncestorChain(resolved);
+  const rect = resolved.getBoundingClientRect();
+  return {
+    selector,
+    best_effort,
+    dataTestId,
+    elementPath: deriveElementPath(resolved, ancestors),
+    tagName: resolved.tagName,
+    ancestors,
+    boundingRect: {
+      x: rect.x + window.scrollX,
+      y: rect.y + window.scrollY,
+      width: rect.width,
+      height: rect.height
+    }
+  };
+}
+
+// src/ui/colors.ts
+var PIN_PALETTE = [
+  "#ef4444",
+  // red
+  "#3b82f6",
+  // blue
+  "#22c55e",
+  // green
+  "#f59e0b",
+  // amber
+  "#a855f7",
+  // purple
+  "#ec4899"
+  // pink
+];
+
+// src/types/payload.ts
+var SCHEMA_VERSION = "2.0.0";
+
+// src/core/types.ts
+function generateId() {
+  return `ft_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`;
+}
+
+// src/types/theme.ts
+function themeToCSS(theme) {
+  const map = {};
+  if (theme.primary) map["--ft-primary"] = theme.primary;
+  if (theme.background) map["--ft-bg"] = theme.background;
+  if (theme.surface) map["--ft-surface"] = theme.surface;
+  if (theme.text) map["--ft-text"] = theme.text;
+  if (theme.textMuted) map["--ft-text-muted"] = theme.textMuted;
+  if (theme.border) map["--ft-border"] = theme.border;
+  if (theme.radius) map["--ft-radius"] = theme.radius;
+  if (theme.badge) map["--ft-badge"] = theme.badge;
+  return map;
+}
+
+// src/core/actions.ts
+function updateItem(ctx, id, fn) {
+  ctx.setState({
+    feedbackItems: ctx.getState().feedbackItems.map((i) => i.payload.id === id ? fn(i) : i)
+  });
+}
+async function handleSubmit(ctx) {
+  const s = ctx.getState();
+  if (!s.comment.trim()) {
+    ctx.setState({ commentError: true });
+    return;
+  }
+  ctx.setState({ submitting: true });
+  const payload = {
+    schemaVersion: SCHEMA_VERSION,
+    id: generateId(),
+    timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+    scope: ctx.getCurrentScope(),
+    submittedBy: ctx.currentUser,
+    comment: s.comment.trim(),
+    sentiment: s.sentiment,
+    pins: s.pendingPins.map((p, i) => ({ ...p, index: i + 1 })),
+    page: getPageMeta(),
+    viewport: getViewportMeta(),
+    device: getDeviceMeta()
+  };
+  try {
+    await ctx.adapter.submit(payload);
+    ctx.setState({
+      feedbackItems: [
+        ...ctx.getState().feedbackItems,
+        { payload, replies: [], resolutions: [], archives: [] }
+      ]
+    });
+    ctx.deactivatePinMode();
+  } catch (err) {
+    ctx.onError?.(err);
+  } finally {
+    ctx.setState({ submitting: false });
+  }
+}
+async function handleModalSubmit(ctx) {
+  if (!ctx.getState().comment.trim()) {
+    ctx.setState({ commentError: true });
+    return;
+  }
+  const scope = ctx.getState().composeScope;
+  await handleSubmit(ctx);
+  const items = ctx.getState().feedbackItems;
+  const newItem = items[items.length - 1];
+  if (newItem && newItem.payload.scope === scope) {
+    const key = scope === "site" ? "siteFeedback" : "pageFeedback";
+    ctx.setState({
+      [key]: [...ctx.getState()[key], newItem],
+      feedbackItems: items.slice(0, -1)
+    });
+  }
+  ctx.setState({ comment: "", sentiment: null, commentError: false });
+}
+async function handleReply(ctx, feedbackId) {
+  const body = ctx.getState().replyBody.trim();
+  if (!body) return;
+  const ts = (/* @__PURE__ */ new Date()).toISOString();
+  try {
+    await ctx.adapter.reply(feedbackId, {
+      author: ctx.currentUser,
+      body,
+      timestamp: ts
+    });
+    updateItem(ctx, feedbackId, (item) => {
+      const updated = {
+        ...item,
+        replies: [
+          ...item.replies,
+          {
+            id: generateId(),
+            feedbackId,
+            author: ctx.currentUser,
+            body,
+            timestamp: ts
+          }
+        ]
+      };
+      const rescope = ctx.rescopeRoles ? ctx.rescopeRoles.includes(ctx.currentUser.role) : ctx.currentUser.role !== "agent";
+      if (rescope && updated.resolutions.length === 0 && ctx.flushCtrl) {
+        ctx.flushCtrl.clearFlushed(ctx.getState().pathname);
+      }
+      return updated;
+    });
+    ctx.setState({ replyBody: "" });
+  } catch (err) {
+    ctx.onError?.(err);
+  }
+}
+async function handleResolve(ctx, feedbackId) {
+  const ts = (/* @__PURE__ */ new Date()).toISOString();
+  try {
+    await ctx.adapter.resolve(feedbackId, {
+      resolvedBy: ctx.currentUser,
+      timestamp: ts
+    });
+    updateItem(ctx, feedbackId, (item) => ({
+      ...item,
+      resolutions: [
+        ...item.resolutions,
+        { feedbackId, resolvedBy: ctx.currentUser, timestamp: ts }
+      ]
+    }));
+  } catch (err) {
+    ctx.onError?.(err);
+  }
+}
+async function handleArchive(ctx, feedbackId) {
+  const ts = (/* @__PURE__ */ new Date()).toISOString();
+  try {
+    await ctx.adapter.archive(feedbackId, ctx.currentUser.id);
+    updateItem(ctx, feedbackId, (item) => ({
+      ...item,
+      archives: [
+        ...item.archives,
+        { feedbackId, archivedBy: ctx.currentUser, timestamp: ts }
+      ]
+    }));
+    ctx.setState({ openThreadId: null });
+  } catch (err) {
+    ctx.onError?.(err);
+  }
+}
+function loadFeedback(ctx) {
+  ctx.setState({ loading: true });
+  ctx.adapter.loadFeedback({ pathname: ctx.getState().pathname }).then((items) => {
+    const feedbackItems = [];
+    const siteFeedback = [];
+    const pageFeedback = [];
+    for (const item of items) {
+      if (item.payload.scope === "site") siteFeedback.push(item);
+      else if (item.payload.scope === "page") pageFeedback.push(item);
+      else feedbackItems.push(item);
+    }
+    ctx.setState({ feedbackItems, siteFeedback, pageFeedback });
+  }).catch((err) => ctx.onError?.(err)).finally(() => ctx.setState({ loading: false }));
+}
+
+// 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/core/dom.ts
+function injectStyles() {
+  if (document.getElementById("feedtack-styles")) return null;
+  const style = document.createElement("style");
+  style.id = "feedtack-styles";
+  style.textContent = FEEDTACK_DEFAULT_TOKENS + FEEDTACK_STYLES;
+  document.head.appendChild(style);
+  return style;
+}
+function injectRoot() {
+  const root = document.createElement("div");
+  root.id = "feedtack-root";
+  document.body.appendChild(root);
+  return root;
+}
+function applyTheme(theme) {
+  const root = document.getElementById("feedtack-root");
+  if (!root) return;
+  const tokens = themeToCSS(theme);
+  for (const [k, v] of Object.entries(tokens)) {
+    root.style.setProperty(k, v);
+  }
+}
+function setCrosshair(active) {
+  if (active) {
+    document.documentElement.classList.add("feedtack-crosshair");
+  } else {
+    document.documentElement.classList.remove("feedtack-crosshair");
+  }
+}
+function attachSpaNavigation(onUpdate) {
+  const origPush = history.pushState.bind(history);
+  const origReplace = history.replaceState.bind(history);
+  history.pushState = (...args) => {
+    origPush(...args);
+    queueMicrotask(onUpdate);
+  };
+  history.replaceState = (...args) => {
+    origReplace(...args);
+    queueMicrotask(onUpdate);
+  };
+  window.addEventListener("popstate", onUpdate);
+  return {
+    origPush,
+    origReplace,
+    detach() {
+      window.removeEventListener("popstate", onUpdate);
+      history.pushState = origPush;
+      history.replaceState = origReplace;
+    }
+  };
+}
+var FEEDTACK_UI_SELECTOR = "#feedtack-root, .feedtack-form, .feedtack-color-picker";
+
+// src/core/flush.ts
+var IDLE_EVENTS = ["mousemove", "keydown", "scroll", "touchstart"];
+function attachFlush(getItems, getPathname, onFlush, idleMs) {
+  const flushedPaths = /* @__PURE__ */ new Set();
+  let idleTimer = null;
+  function flushPath(path) {
+    if (flushedPaths.has(path)) return;
+    const pageItems = getItems().filter((i) => i.payload.page.pathname === path);
+    if (pageItems.length === 0) return;
+    flushedPaths.add(path);
+    onFlush({ pathname: path, items: pageItems });
+  }
+  function clearFlushed(path) {
+    flushedPaths.delete(path);
+  }
+  const onBeforeUnload = () => flushPath(getPathname());
+  window.addEventListener("beforeunload", onBeforeUnload);
+  let idleReset = null;
+  if (idleMs > 0) {
+    idleReset = () => {
+      if (idleTimer) clearTimeout(idleTimer);
+      idleTimer = setTimeout(() => flushPath(getPathname()), idleMs);
+    };
+    for (const e of IDLE_EVENTS) {
+      window.addEventListener(e, idleReset, { passive: true });
+    }
+    idleReset();
+  }
+  return {
+    flushPath,
+    clearFlushed,
+    detach() {
+      window.removeEventListener("beforeunload", onBeforeUnload);
+      if (idleTimer) clearTimeout(idleTimer);
+      if (idleReset) {
+        for (const e of IDLE_EVENTS) {
+          window.removeEventListener(e, idleReset);
+        }
+      }
+    }
+  };
+}
+
+// src/core/input.ts
+function createKeydownHandler(hotkey, getState, setState, openModal, deactivatePinMode) {
+  const key = hotkey.toUpperCase();
+  return (e) => {
+    if (e.key === key && e.shiftKey) openModal();
+    if (e.key === "Escape") deactivatePinMode();
+    const s = getState();
+    if (s.isPinModeActive && !s.openThreadId && !s.isModalOpen && !s.showForm && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+      e.preventDefault();
+      const idx = PIN_PALETTE.indexOf(
+        s.selectedColor
+      );
+      const dir = e.key === "ArrowRight" ? 1 : -1;
+      setState({
+        selectedColor: PIN_PALETTE[(idx + dir + PIN_PALETTE.length) % PIN_PALETTE.length]
+      });
+    }
+  };
+}
+function placePin(coords, target, getState, setState) {
+  if (target.closest(FEEDTACK_UI_SELECTOR)) return;
+  const pin = {
+    color: getState().selectedColor,
+    ...getPinCoords(coords),
+    target: getTargetMeta(target)
+  };
+  setState({ pendingPins: [...getState().pendingPins, pin], showForm: true });
+}
+function attachInputListeners(getState, setState, hotkey, openModal, deactivatePinMode) {
+  const keydown = createKeydownHandler(
+    hotkey,
+    getState,
+    setState,
+    openModal,
+    deactivatePinMode
+  );
+  window.addEventListener("keydown", keydown);
+  const click = (e) => {
+    if (!getState().isPinModeActive) return;
+    e.preventDefault();
+    e.stopPropagation();
+    placePin(e, e.target, getState, setState);
+  };
+  const touchEnd = (e) => {
+    if (!getState().isPinModeActive) return;
+    const t = e.changedTouches[0];
+    if (!t) return;
+    const el = document.elementFromPoint(t.clientX, t.clientY);
+    if (!el) return;
+    e.preventDefault();
+    placePin(t, el, getState, setState);
+  };
+  document.addEventListener("click", click, true);
+  document.addEventListener("touchend", touchEnd, true);
+  return {
+    detachKeyboard() {
+      window.removeEventListener("keydown", keydown);
+    },
+    detachClick() {
+      document.removeEventListener("click", click, true);
+      document.removeEventListener("touchend", touchEnd, true);
+    }
+  };
+}
+
+// src/core/FeedtackEngine.ts
+var DEFAULT_IDLE_MS = 5 * 60 * 1e3;
+var FeedtackEngine = class {
+  constructor(opts) {
+    this.listeners = /* @__PURE__ */ new Set();
+    this.styleEl = null;
+    this.rootEl = null;
+    this.spaNav = null;
+    this.flushCtrl = null;
+    this.inputHandles = null;
+    this.opts = opts;
+    const pathname = typeof window === "undefined" ? "/" : window.location.pathname;
+    this.state = {
+      isPinModeActive: false,
+      pendingPins: [],
+      selectedColor: PIN_PALETTE[0],
+      showForm: false,
+      comment: "",
+      sentiment: null,
+      commentError: false,
+      submitting: false,
+      feedbackItems: [],
+      siteFeedback: [],
+      pageFeedback: [],
+      loading: true,
+      openThreadId: null,
+      replyBody: "",
+      isModalOpen: false,
+      composeScope: "site",
+      pathname
+    };
+    this.actionCtx = {
+      adapter: opts.adapter,
+      currentUser: opts.currentUser,
+      onError: opts.onError,
+      rescopeRoles: opts.rescopeRoles,
+      getState: () => this.state,
+      setState: (p) => this.setState(p),
+      getCurrentScope: () => this.getCurrentScope(),
+      deactivatePinMode: () => this.deactivatePinMode(),
+      flushCtrl: null
+    };
+  }
+  // ── State ──────────────────────────────────────────────────────────────
+  getState() {
+    return this.state;
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  setState(partial) {
+    const keys = Object.keys(partial);
+    let changed = false;
+    for (const k of keys) {
+      if (this.state[k] !== partial[k]) {
+        changed = true;
+        break;
+      }
+    }
+    if (!changed) return;
+    this.state = { ...this.state, ...partial };
+    for (const fn of this.listeners) fn(this.state, keys);
+  }
+  // ── Lifecycle ──────────────────────────────────────────────────────────
+  mount() {
+    if (this.opts.disabled) return;
+    this.styleEl = injectStyles();
+    this.rootEl = injectRoot();
+    if (this.opts.theme) applyTheme(this.opts.theme);
+    this.spaNav = attachSpaNavigation(() => this.onNavUpdate());
+    this.inputHandles = attachInputListeners(
+      () => this.state,
+      (p) => this.setState(p),
+      this.opts.hotkey ?? "p",
+      () => this.openModal(),
+      () => this.deactivatePinMode()
+    );
+    if (this.opts.onFlush) {
+      this.flushCtrl = attachFlush(
+        () => this.state.feedbackItems,
+        () => this.state.pathname,
+        this.opts.onFlush,
+        this.opts.flushIdleMs ?? DEFAULT_IDLE_MS
+      );
+      this.actionCtx.flushCtrl = this.flushCtrl;
+    }
+    loadFeedback(this.actionCtx);
+  }
+  destroy() {
+    this.spaNav?.detach();
+    this.flushCtrl?.detach();
+    this.inputHandles?.detachKeyboard();
+    this.inputHandles?.detachClick();
+    this.inputHandles = null;
+    setCrosshair(false);
+    this.styleEl?.remove();
+    this.rootEl?.remove();
+    this.styleEl = null;
+    this.rootEl = null;
+  }
+  onNavUpdate() {
+    const p = window.location.pathname;
+    if (p === this.state.pathname) return;
+    this.flushCtrl?.flushPath(this.state.pathname);
+    this.setState({ pathname: p });
+    loadFeedback(this.actionCtx);
+  }
+  // ── Pin mode ──────────────────────────────────────────────────────────
+  activatePinMode() {
+    this.setState({ isPinModeActive: true });
+    setCrosshair(true);
+  }
+  deactivatePinMode() {
+    this.setState({
+      isPinModeActive: false,
+      pendingPins: [],
+      showForm: false,
+      comment: "",
+      sentiment: null,
+      commentError: false,
+      openThreadId: null
+    });
+    setCrosshair(false);
+  }
+  // ── Setters ───────────────────────────────────────────────────────────
+  setComment(v) {
+    this.setState({ comment: v });
+  }
+  setSentiment(v) {
+    this.setState({ sentiment: v });
+  }
+  setCommentError(v) {
+    this.setState({ commentError: v });
+  }
+  setSelectedColor(c) {
+    this.setState({ selectedColor: c });
+  }
+  setOpenThreadId(id) {
+    this.setState({ openThreadId: id });
+  }
+  setReplyBody(v) {
+    this.setState({ replyBody: v });
+  }
+  setComposeScope(s) {
+    this.setState({ composeScope: s });
+  }
+  openModal() {
+    this.setState({ isModalOpen: true });
+  }
+  closeModal() {
+    this.setState({ isModalOpen: false });
+  }
+  // ── Derived ───────────────────────────────────────────────────────────
+  getCurrentScope() {
+    const s = this.state;
+    return s.isPinModeActive || s.pendingPins.length > 0 ? "element" : s.composeScope;
+  }
+  isArchivedForUser(item) {
+    return item.archives.some(
+      (a) => a.archivedBy.id === this.opts.currentUser.id
+    );
+  }
+  hasUnread(item) {
+    return item.replies.length > 0;
+  }
+  hasValidPins(item) {
+    return Array.isArray(item.payload?.pins) && item.payload.pins.length > 0;
+  }
+  // ── Actions (delegated) ───────────────────────────────────────────────
+  handleSubmit() {
+    return handleSubmit(this.actionCtx);
+  }
+  handleModalSubmit() {
+    return handleModalSubmit(this.actionCtx);
+  }
+  handleReply(id) {
+    return handleReply(this.actionCtx, id);
+  }
+  handleResolve(id) {
+    return handleResolve(this.actionCtx, id);
+  }
+  handleArchive(id) {
+    return handleArchive(this.actionCtx, id);
+  }
+};
+
+export {
+  getViewportMeta,
+  getPageMeta,
+  getDeviceMeta,
+  getPinCoords,
+  getCSSSelector,
+  getTargetMeta,
+  PIN_PALETTE,
+  SCHEMA_VERSION,
+  generateId,
+  themeToCSS,
+  FeedtackEngine
+};