feedtack 0.1.1 → 0.2.1

package/dist/chunk-NCW2V5JL.js

@@ -0,0 +1,237 @@
+// 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,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height
+    }
+  };
+}
+
+// src/types/payload.ts
+var SCHEMA_VERSION = "1.0.0";
+
+// 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;
+}
+
+export {
+  getViewportMeta,
+  getPageMeta,
+  getDeviceMeta,
+  getPinCoords,
+  getCSSSelector,
+  getTargetMeta,
+  SCHEMA_VERSION,
+  themeToCSS
+};

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { F as FeedtackAdapter, a as FeedtackPayload, b as FeedtackReply, c as FeedtackResolution, d as FeedtackFilter, e as FeedbackItem, f as FeedtackDeviceMeta, g as FeedtackPageMeta, h as FeedtackViewportMeta, i as FeedtackPinTarget } from './theme-C_JZCVVA.js';
-export { j as FeedtackArchive, k as FeedtackBoundingRect, l as FeedtackPin, m as FeedtackSentiment, n as FeedtackTheme, o as FeedtackUser, S as SCHEMA_VERSION, t as themeToCSS } from './theme-C_JZCVVA.js';
+import { F as FeedtackAdapter, a as FeedtackPayload, b as FeedtackReply, c as FeedtackResolution, d as FeedtackFilter, e as FeedbackItem, f as FeedtackDeviceMeta, g as FeedtackPageMeta, h as FeedtackViewportMeta, i as FeedtackPinTarget } from './theme-C-uctIoI.js';
+export { A as AncestorNode, j as FeedtackArchive, k as FeedtackBoundingRect, l as FeedtackPin, m as FeedtackSentiment, n as FeedtackTheme, o as FeedtackUser, S as SCHEMA_VERSION, t as themeToCSS } from './theme-C-uctIoI.js';
 
 /** Development adapter — logs all operations to the browser console */
 declare class ConsoleAdapter implements FeedtackAdapter {

package/dist/index.js

@@ -7,7 +7,7 @@ import {
   getTargetMeta,
   getViewportMeta,
   themeToCSS
-} from "./chunk-XVWG3PLK.js";
+} from "./chunk-NCW2V5JL.js";
 
 // src/adapters/ConsoleAdapter.ts
 var ConsoleAdapter = class {

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { F as FeedtackAdapter, o as FeedtackUser, n as FeedtackTheme } from '../theme-C_JZCVVA.js';
+import { F as FeedtackAdapter, o as FeedtackUser, n as FeedtackTheme } from '../theme-C-uctIoI.js';
 
 interface FeedtackClasses {
     button?: string;
@@ -23,8 +23,9 @@ interface FeedtackProviderProps {
     classes?: FeedtackClasses;
     sentimentLabels?: FeedtackSentimentLabels;
     onError?: (err: Error) => void;
+    disabled?: boolean;
 }
-declare function FeedtackProvider({ children, adapter, currentUser, hotkey, adminOnly, theme, classes, sentimentLabels, onError, }: FeedtackProviderProps): react_jsx_runtime.JSX.Element;
+declare function FeedtackProvider({ children, adapter, currentUser, hotkey, adminOnly, theme, classes, sentimentLabels, onError, disabled, }: FeedtackProviderProps): react_jsx_runtime.JSX.Element;
 
 interface FeedtackContextValue {
     activatePinMode: () => void;

package/dist/react/index.js

@@ -6,7 +6,7 @@ import {
   getTargetMeta,
   getViewportMeta,
   themeToCSS
-} from "../chunk-XVWG3PLK.js";
+} from "../chunk-NCW2V5JL.js";
 
 // src/ui/colors.ts
 var PIN_PALETTE = [
@@ -24,16 +24,6 @@ var PIN_PALETTE = [
   // pink
 ];
 
-// src/react/context.ts
-import { createContext, useContext } from "react";
-var FeedtackContext = createContext(null);
-function useFeedtackContext() {
-  const ctx = useContext(FeedtackContext);
-  if (!ctx)
-    throw new Error("useFeedtack must be used inside <FeedtackProvider>");
-  return ctx;
-}
-
 // src/react/utils.ts
 function generateId() {
   return `ft_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`;
@@ -55,8 +45,98 @@ function cx(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 
-// src/react/ThreadPanel.tsx
+// src/react/CommentForm.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+function CommentForm({
+  comment,
+  commentError,
+  sentiment,
+  submitting,
+  formPos,
+  classes,
+  sentimentLabels,
+  onCommentChange,
+  onSentimentChange,
+  onSubmit,
+  onCancel
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("feedtack-form", classes.form),
+      style: { position: "fixed", ...formPos },
+      children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            className: commentError ? "error" : "",
+            placeholder: "What's the issue? (required)",
+            value: comment,
+            onChange: (e) => onCommentChange(e.target.value),
+            ref: (el) => el?.focus()
+          }
+        ),
+        commentError && /* @__PURE__ */ jsx("span", { className: "feedtack-error-msg", children: "Comment is required" }),
+        /* @__PURE__ */ jsxs("div", { className: "feedtack-sentiment", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: sentiment === "satisfied" ? "selected" : "",
+              onClick: () => onSentimentChange(sentiment === "satisfied" ? null : "satisfied"),
+              children: sentimentLabels.satisfied ?? "\u{1F60A} Satisfied"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: sentiment === "dissatisfied" ? "selected" : "",
+              onClick: () => onSentimentChange(
+                sentiment === "dissatisfied" ? null : "dissatisfied"
+              ),
+              children: sentimentLabels.dissatisfied ?? "\u{1F61E} Dissatisfied"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "feedtack-form-actions", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "feedtack-btn-cancel",
+              onClick: onCancel,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "feedtack-btn-submit",
+              onClick: onSubmit,
+              disabled: submitting,
+              children: submitting ? "Sending\u2026" : "Submit"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/react/context.ts
+import { createContext, useContext } from "react";
+var FeedtackContext = createContext(null);
+function useFeedtackContext() {
+  const ctx = useContext(FeedtackContext);
+  if (!ctx)
+    throw new Error("useFeedtack must be used inside <FeedtackProvider>");
+  return ctx;
+}
+
+// src/react/ThreadPanel.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function ThreadPanel({
   item,
   replyBody,
@@ -67,28 +147,29 @@ function ThreadPanel({
   onClose,
   className
 }) {
-  const pin = item.payload.pins[0];
+  const pin = item.payload?.pins?.[0];
+  if (!pin) return null;
   const pos = getAnchoredPosition(pin.x, pin.y);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       className: cx("feedtack-thread", className),
       style: { position: "fixed", ...pos },
       children: [
-        /* @__PURE__ */ jsx("strong", { style: { fontSize: 13 }, children: item.payload.submittedBy.name }),
-        /* @__PURE__ */ jsx("p", { style: { fontSize: 13 }, children: item.payload.comment }),
-        item.replies.map((r) => /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx2("strong", { style: { fontSize: 13 }, children: item.payload.submittedBy.name }),
+        /* @__PURE__ */ jsx2("p", { style: { fontSize: 13 }, children: item.payload.comment }),
+        item.replies.map((r) => /* @__PURE__ */ jsxs2(
           "div",
           {
             style: { borderTop: "1px solid #f3f4f6", paddingTop: 8 },
             children: [
-              /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 600 }, children: r.author.name }),
-              /* @__PURE__ */ jsx("p", { style: { fontSize: 12 }, children: r.body })
+              /* @__PURE__ */ jsx2("span", { style: { fontSize: 12, fontWeight: 600 }, children: r.author.name }),
+              /* @__PURE__ */ jsx2("p", { style: { fontSize: 12 }, children: r.body })
             ]
           },
           r.id
         )),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           "textarea",
           {
             placeholder: "Reply\u2026",
@@ -104,8 +185,8 @@ function ThreadPanel({
             }
           }
         ),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
-          /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -115,7 +196,7 @@ function ThreadPanel({
               children: "Reply"
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -125,7 +206,7 @@ function ThreadPanel({
               children: "Mark Resolved"
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -135,7 +216,7 @@ function ThreadPanel({
               children: "Archive"
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -385,9 +466,10 @@ var FEEDTACK_STYLES = `
 `;
 
 // src/react/useFeedtackDom.ts
-function useFeedtackDom(theme) {
+function useFeedtackDom(theme, disabled) {
   const rootRef = useRef(null);
   useEffect(() => {
+    if (disabled) return;
     if (document.getElementById("feedtack-styles")) return;
     const style = document.createElement("style");
     style.id = "feedtack-styles";
@@ -396,8 +478,9 @@ function useFeedtackDom(theme) {
     return () => {
       style.remove();
     };
-  }, []);
+  }, [disabled]);
   useEffect(() => {
+    if (disabled) return;
     const root = document.createElement("div");
     root.id = "feedtack-root";
     document.body.appendChild(root);
@@ -405,21 +488,22 @@ function useFeedtackDom(theme) {
     return () => {
       root.remove();
     };
-  }, []);
+  }, [disabled]);
   useEffect(() => {
+    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]);
+  }, [theme, disabled]);
   return rootRef;
 }
 
 // src/react/usePinMode.ts
 import { useCallback, useEffect as useEffect2, useState } from "react";
-function usePinMode({ hotkey, onDeactivate }) {
+function usePinMode({ hotkey, onDeactivate, disabled }) {
   const [isActive, setIsActive] = useState(false);
   const [pendingPins, setPendingPins] = useState([]);
   const [selectedColor, setSelectedColor] = useState(PIN_PALETTE[0]);
@@ -440,6 +524,7 @@ function usePinMode({ hotkey, onDeactivate }) {
     return () => document.documentElement.classList.remove("feedtack-crosshair");
   }, [isActive]);
   useEffect2(() => {
+    if (disabled) return;
     const handler = (e) => {
       if (e.key === hotkey.toUpperCase() && e.shiftKey) {
         setIsActive((prev) => !prev);
@@ -458,7 +543,7 @@ function usePinMode({ hotkey, onDeactivate }) {
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [hotkey, deactivate, isActive]);
+  }, [hotkey, deactivate, isActive, disabled]);
   const handlePageClick = useCallback(
     (e) => {
       if (!isActive) return;
@@ -480,9 +565,10 @@ function usePinMode({ hotkey, onDeactivate }) {
     [isActive, selectedColor]
   );
   useEffect2(() => {
+    if (disabled) return;
     document.addEventListener("click", handlePageClick, true);
     return () => document.removeEventListener("click", handlePageClick, true);
-  }, [handlePageClick]);
+  }, [handlePageClick, disabled]);
   return {
     isActive,
     activate,
@@ -500,9 +586,10 @@ function useFeedtackState({
   currentUser,
   hotkey,
   theme,
-  onError
+  onError,
+  disabled
 }) {
-  useFeedtackDom(theme);
+  useFeedtackDom(theme, disabled);
   const [pathname, setPathname] = useState2(() => window.location.pathname);
   useEffect3(() => {
     const update = () => setPathname(window.location.pathname);
@@ -510,11 +597,11 @@ function useFeedtackState({
     const origReplace = history.replaceState.bind(history);
     history.pushState = (...args) => {
       origPush(...args);
-      update();
+      queueMicrotask(update);
     };
     history.replaceState = (...args) => {
       origReplace(...args);
-      update();
+      queueMicrotask(update);
     };
     window.addEventListener("popstate", update);
     return () => {
@@ -538,6 +625,7 @@ function useFeedtackState({
   }, []);
   const pinMode = usePinMode({
     hotkey,
+    disabled,
     onDeactivate: () => {
       resetForm();
       setOpenThreadId(null);
@@ -667,12 +755,13 @@ function useFeedtackState({
     handleResolve,
     handleArchive,
     isArchivedForUser: (item) => item.archives.some((a) => a.archivedBy.id === currentUser.id),
-    hasUnread: (item) => item.replies.length > 0
+    hasUnread: (item) => item.replies.length > 0,
+    hasValidPins: (item) => Array.isArray(item.payload?.pins) && item.payload.pins.length > 0
   };
 }
 
 // src/react/FeedtackProvider.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function FeedtackProvider({
   children,
   adapter,
@@ -682,30 +771,34 @@ function FeedtackProvider({
   theme,
   classes = {},
   sentimentLabels = {},
-  onError
+  onError,
+  disabled = false
 }) {
   const state = useFeedtackState({
     adapter,
     currentUser,
     hotkey,
     theme,
-    onError
+    onError,
+    disabled
   });
   const firstPin = state.pendingPins[0];
   const formPos = firstPin ? getAnchoredPosition(firstPin.x, firstPin.y) : {};
   const showButton = !adminOnly || currentUser.role === "admin";
   const openItem = state.openThreadId ? state.feedbackItems.find((i) => i.payload.id === state.openThreadId) : null;
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     FeedtackContext.Provider,
     {
       value: {
-        activatePinMode: state.activatePinMode,
-        deactivatePinMode: state.deactivatePinMode,
-        isPinModeActive: state.isPinModeActive
+        activatePinMode: disabled ? () => {
+        } : state.activatePinMode,
+        deactivatePinMode: disabled ? () => {
+        } : state.deactivatePinMode,
+        isPinModeActive: disabled ? false : state.isPinModeActive
       },
       children: [
         children,
-        showButton && /* @__PURE__ */ jsxs2(
+        !disabled && showButton && /* @__PURE__ */ jsxs3(
           "button",
           {
             type: "button",
@@ -723,7 +816,7 @@ function FeedtackProvider({
             ]
           }
         ),
-        state.isPinModeActive && /* @__PURE__ */ jsx2("div", { className: cx("feedtack-color-picker", classes.colorPicker), children: PIN_PALETTE.map((color) => /* @__PURE__ */ jsx2(
+        state.isPinModeActive && /* @__PURE__ */ jsx3("div", { className: cx("feedtack-color-picker", classes.colorPicker), children: PIN_PALETTE.map((color) => /* @__PURE__ */ jsx3(
           "button",
           {
             type: "button",
@@ -737,7 +830,7 @@ function FeedtackProvider({
           },
           color
         )) }),
-        state.pendingPins.map((pin) => /* @__PURE__ */ jsx2(
+        state.pendingPins.map((pin) => /* @__PURE__ */ jsx3(
           "div",
           {
             className: cx("feedtack-pin-marker", classes.pinMarker),
@@ -750,77 +843,28 @@ function FeedtackProvider({
           },
           `${pin.x}-${pin.y}-${pin.color}`
         )),
-        state.showForm && /* @__PURE__ */ jsxs2(
-          "div",
+        state.showForm && /* @__PURE__ */ jsx3(
+          CommentForm,
           {
-            className: cx("feedtack-form", classes.form),
-            style: { position: "fixed", ...formPos },
-            children: [
-              /* @__PURE__ */ jsx2(
-                "textarea",
-                {
-                  className: state.commentError ? "error" : "",
-                  placeholder: "What's the issue? (required)",
-                  value: state.comment,
-                  onChange: (e) => {
-                    state.setComment(e.target.value);
-                    state.setCommentError(false);
-                  },
-                  ref: (el) => el?.focus()
-                }
-              ),
-              state.commentError && /* @__PURE__ */ jsx2("span", { className: "feedtack-error-msg", children: "Comment is required" }),
-              /* @__PURE__ */ jsxs2("div", { className: "feedtack-sentiment", children: [
-                /* @__PURE__ */ jsx2(
-                  "button",
-                  {
-                    type: "button",
-                    className: state.sentiment === "satisfied" ? "selected" : "",
-                    onClick: () => state.setSentiment(
-                      state.sentiment === "satisfied" ? null : "satisfied"
-                    ),
-                    children: sentimentLabels.satisfied ?? "\u{1F60A} Satisfied"
-                  }
-                ),
-                /* @__PURE__ */ jsx2(
-                  "button",
-                  {
-                    type: "button",
-                    className: state.sentiment === "dissatisfied" ? "selected" : "",
-                    onClick: () => state.setSentiment(
-                      state.sentiment === "dissatisfied" ? null : "dissatisfied"
-                    ),
-                    children: sentimentLabels.dissatisfied ?? "\u{1F61E} Dissatisfied"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs2("div", { className: "feedtack-form-actions", children: [
-                /* @__PURE__ */ jsx2(
-                  "button",
-                  {
-                    type: "button",
-                    className: "feedtack-btn-cancel",
-                    onClick: state.deactivatePinMode,
-                    children: "Cancel"
-                  }
-                ),
-                /* @__PURE__ */ jsx2(
-                  "button",
-                  {
-                    type: "button",
-                    className: "feedtack-btn-submit",
-                    onClick: state.handleSubmit,
-                    disabled: state.submitting,
-                    children: state.submitting ? "Sending\u2026" : "Submit"
-                  }
-                )
-              ] })
-            ]
+            comment: state.comment,
+            commentError: state.commentError,
+            sentiment: state.sentiment,
+            submitting: state.submitting,
+            formPos,
+            classes,
+            sentimentLabels,
+            onCommentChange: (v) => {
+              state.setComment(v);
+              state.setCommentError(false);
+            },
+            onSentimentChange: state.setSentiment,
+            onSubmit: state.handleSubmit,
+            onCancel: state.deactivatePinMode
           }
         ),
-        !state.loading && state.feedbackItems.filter((item) => item.payload.page.pathname === state.pathname).filter((item) => !state.isArchivedForUser(item)).map((item) => {
+        !state.loading && state.feedbackItems.filter((item) => item.payload.page.pathname === state.pathname).filter((item) => !state.isArchivedForUser(item)).filter((item) => state.hasValidPins(item)).map((item) => {
           const pin = item.payload.pins[0];
-          return /* @__PURE__ */ jsx2(
+          return /* @__PURE__ */ jsx3(
             "button",
             {
               type: "button",
@@ -835,12 +879,12 @@ function FeedtackProvider({
               onClick: () => state.setOpenThreadId(
                 state.openThreadId === item.payload.id ? null : item.payload.id
               ),
-              children: state.hasUnread(item) && /* @__PURE__ */ jsx2("div", { className: "feedtack-pin-badge" })
+              children: state.hasUnread(item) && /* @__PURE__ */ jsx3("div", { className: "feedtack-pin-badge" })
             },
             item.payload.id
           );
         }),
-        openItem && /* @__PURE__ */ jsx2(
+        openItem && /* @__PURE__ */ jsx3(
           ThreadPanel,
           {
             item: openItem,
@@ -853,7 +897,7 @@ function FeedtackProvider({
             className: classes.thread
           }
         ),
-        state.loading && /* @__PURE__ */ jsx2("div", { className: "feedtack-loading", children: "Loading feedback\u2026" })
+        state.loading && /* @__PURE__ */ jsx3("div", { className: "feedtack-loading", children: "Loading feedback\u2026" })
       ]
     }
   );

package/dist/{theme-C_JZCVVA.d.ts → theme-C-uctIoI.d.ts}

@@ -17,19 +17,36 @@ interface FeedtackBoundingRect {
     width: number;
     height: number;
 }
+interface AncestorNode {
+    tag: string;
+    id: string | null;
+    ariaLabel: string | null;
+    role: string | null;
+    type: string | null;
+    name: string | null;
+    title: string | null;
+    alt: string | null;
+    dataTestId: string | null;
+    dataFeedtackComponent: string | null;
+    /** 1-indexed position among all sibling elements. Null when node has a stable id or dataTestId. */
+    nthChild: number | null;
+    /** 1-indexed position among same-tag siblings. Null when node has a stable id or dataTestId. */
+    nthOfType: number | null;
+    /** React component display name from fiber traversal, or data-feedtack-component value */
+    componentName: string | null;
+}
 interface FeedtackPinTarget {
-    /** CSS selector path to the clicked element */
+    /** CSS selector path to the resolved interactive target */
     selector: string;
     /** True when no stable selector was found — downstream consumers should not rely on selector for automated targeting */
     best_effort: boolean;
-    /** data-testid attribute value if present, null otherwise — always shipped for downstream consumers */
-    testId: string | null;
-    /** Readable DOM ancestry: "div.hero > div.card > button.btn.btn-primary". Walks up to body or nearest data-testid ancestor. Null when element itself has a data-testid (testId is sufficient). */
+    /** data-testid attribute value if present, null otherwise */
+    dataTestId: string | null;
+    /** Readable DOM ancestry path retained for backward compatibility */
     elementPath: string | null;
     tagName: string;
-    /** Trimmed text content of the element, max 200 chars */
-    textContent: string;
-    attributes: Record<string, string>;
+    /** Ancestor chain up to 5 levels from the resolved target, for LLM element location */
+    ancestors: AncestorNode[];
     boundingRect: FeedtackBoundingRect;
 }
 interface FeedtackPin {
@@ -147,4 +164,4 @@ interface FeedtackTheme {
 /** Maps FeedtackTheme fields to CSS custom properties on #feedtack-root */
 declare function themeToCSS(theme: FeedtackTheme): Record<string, string>;
 
-export { type FeedtackAdapter as F, SCHEMA_VERSION as S, type FeedtackPayload as a, type FeedtackReply as b, type FeedtackResolution as c, type FeedtackFilter as d, type FeedbackItem as e, type FeedtackDeviceMeta as f, type FeedtackPageMeta as g, type FeedtackViewportMeta as h, type FeedtackPinTarget as i, type FeedtackArchive as j, type FeedtackBoundingRect as k, type FeedtackPin as l, type FeedtackSentiment as m, type FeedtackTheme as n, type FeedtackUser as o, themeToCSS as t };
+export { type AncestorNode as A, type FeedtackAdapter as F, SCHEMA_VERSION as S, type FeedtackPayload as a, type FeedtackReply as b, type FeedtackResolution as c, type FeedtackFilter as d, type FeedbackItem as e, type FeedtackDeviceMeta as f, type FeedtackPageMeta as g, type FeedtackViewportMeta as h, type FeedtackPinTarget as i, type FeedtackArchive as j, type FeedtackBoundingRect as k, type FeedtackPin as l, type FeedtackSentiment as m, type FeedtackTheme as n, type FeedtackUser as o, themeToCSS as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feedtack",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "Click anywhere. Drop a pin. Get a payload a developer can act on.",
   "type": "module",
   "license": "MIT",
@@ -30,7 +30,8 @@
     "test:watch": "vitest",
     "lint": "biome check src/",
     "lint:fix": "biome check --fix src/",
-    "release": "release-it",
+    "release": "release-it --ci",
+    "openspec:archive": "openspec archive -y",
     "prepublishOnly": "pnpm test && pnpm build",
     "prepare": "husky"
   },

package/dist/chunk-XVWG3PLK.js

@@ -1,139 +0,0 @@
-// 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/target.ts
-function getElementPath(element) {
-  const parts = [];
-  let current = element;
-  while (current && current !== document.body) {
-    const tag = current.tagName.toLowerCase();
-    const classes = Array.from(current.classList).join(".");
-    let part = classes ? `${tag}.${classes}` : tag;
-    if (current !== element && current.hasAttribute("data-testid")) {
-      part = `[data-testid="${current.getAttribute("data-testid")}"]`;
-      parts.unshift(part);
-      break;
-    }
-    parts.unshift(part);
-    current = current.parentElement;
-  }
-  return parts.join(" > ");
-}
-function getCSSSelector(element) {
-  const parts = [];
-  let current = element;
-  while (current && current !== document.body) {
-    let selector = current.tagName.toLowerCase();
-    const parent = current.parentElement;
-    if (parent) {
-      const siblings = Array.from(parent.children).filter(
-        (c) => c.tagName === current.tagName
-      );
-      if (siblings.length > 1) {
-        const index = siblings.indexOf(current) + 1;
-        selector += `:nth-of-type(${index})`;
-      }
-    }
-    parts.unshift(selector);
-    current = current.parentElement;
-  }
-  return parts.join(" > ");
-}
-function getTargetMeta(element) {
-  const id = element.getAttribute("id");
-  const testId = element.getAttribute("data-testid");
-  let selector;
-  let best_effort;
-  if (id) {
-    selector = `#${id}`;
-    best_effort = false;
-  } else if (testId) {
-    selector = `[data-testid="${testId}"]`;
-    best_effort = false;
-  } else {
-    selector = getCSSSelector(element);
-    best_effort = true;
-  }
-  const rect = element.getBoundingClientRect();
-  const attrs = {};
-  for (const attr of Array.from(element.attributes)) {
-    attrs[attr.name] = attr.value;
-  }
-  return {
-    selector,
-    best_effort,
-    testId: testId ?? null,
-    elementPath: testId ? null : getElementPath(element),
-    tagName: element.tagName,
-    textContent: (element.textContent ?? "").trim().slice(0, 200),
-    attributes: attrs,
-    boundingRect: {
-      x: rect.x,
-      y: rect.y,
-      width: rect.width,
-      height: rect.height
-    }
-  };
-}
-
-// src/types/payload.ts
-var SCHEMA_VERSION = "1.0.0";
-
-// 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;
-}
-
-export {
-  getViewportMeta,
-  getPageMeta,
-  getDeviceMeta,
-  getPinCoords,
-  getCSSSelector,
-  getTargetMeta,
-  SCHEMA_VERSION,
-  themeToCSS
-};