feedtack 0.2.0 → 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;

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 = [
@@ -147,7 +147,8 @@ 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__ */ jsxs2(
     "div",
@@ -596,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 () => {
@@ -754,7 +755,8 @@ 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
   };
 }
 
@@ -860,7 +862,7 @@ function FeedtackProvider({
             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__ */ jsx3(
             "button",

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.2.0",
+  "version": "0.2.1",
   "description": "Click anywhere. Drop a pin. Get a payload a developer can act on.",
   "type": "module",
   "license": "MIT",
@@ -31,6 +31,7 @@
     "lint": "biome check src/",
     "lint:fix": "biome check --fix src/",
     "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
-};