feedtack 0.0.2 → 0.1.0

package/dist/{chunk-NOFOQJHM.js → chunk-XVWG3PLK.js}

@@ -1,21 +1,58 @@
-// 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;
+// 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;
@@ -59,6 +96,8 @@ function getTargetMeta(element) {
   return {
     selector,
     best_effort,
+    testId: testId ?? null,
+    elementPath: testId ? null : getElementPath(element),
     tagName: element.tagName,
     textContent: (element.textContent ?? "").trim().slice(0, 200),
     attributes: attrs,
@@ -71,50 +110,30 @@ function getTargetMeta(element) {
   };
 }
 
-// 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/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 {
-  SCHEMA_VERSION,
-  themeToCSS,
-  getCSSSelector,
-  getTargetMeta,
   getViewportMeta,
   getPageMeta,
   getDeviceMeta,
-  getPinCoords
+  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 FeedtackPinTarget, g as FeedtackDeviceMeta, h as FeedtackPageMeta, i as FeedtackViewportMeta } from './theme-CHGvGcG5.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-CHGvGcG5.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_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';
 
 /** Development adapter — logs all operations to the browser console */
 declare class ConsoleAdapter implements FeedtackAdapter {
@@ -10,6 +10,23 @@ declare class ConsoleAdapter implements FeedtackAdapter {
     loadFeedback(_filter?: FeedtackFilter): Promise<FeedbackItem[]>;
 }
 
+interface LocalStorageAdapterConfig {
+    /** localStorage key. Default: 'feedtack' */
+    key?: string;
+}
+/** Zero-infrastructure adapter — persists feedback to localStorage */
+declare class LocalStorageAdapter implements FeedtackAdapter {
+    private key;
+    constructor(config?: LocalStorageAdapterConfig);
+    private read;
+    private write;
+    submit(payload: FeedtackPayload): Promise<void>;
+    reply(feedbackId: string, reply: Omit<FeedtackReply, 'id' | 'feedbackId'>): Promise<void>;
+    resolve(feedbackId: string, resolution: Omit<FeedtackResolution, 'feedbackId'>): Promise<void>;
+    archive(feedbackId: string, userId: string): Promise<void>;
+    loadFeedback(filter?: FeedtackFilter): Promise<FeedbackItem[]>;
+}
+
 interface WebhookAdapterConfig {
     /** URL to POST new feedback payloads to */
     submitUrl: string;
@@ -30,11 +47,6 @@ declare class WebhookAdapter implements FeedtackAdapter {
     loadFeedback(filter?: FeedtackFilter): Promise<FeedbackItem[]>;
 }
 
-/** Build shortest unique CSS selector for an element */
-declare function getCSSSelector(element: Element): string;
-/** Capture DOM target metadata at the clicked element */
-declare function getTargetMeta(element: Element): FeedtackPinTarget;
-
 declare function getViewportMeta(): FeedtackViewportMeta;
 declare function getPageMeta(): FeedtackPageMeta;
 declare function getDeviceMeta(): FeedtackDeviceMeta;
@@ -45,4 +57,9 @@ declare function getPinCoords(event: MouseEvent): {
     yPct: number;
 };
 
-export { ConsoleAdapter, FeedbackItem, FeedtackAdapter, FeedtackDeviceMeta, FeedtackFilter, FeedtackPageMeta, FeedtackPayload, FeedtackPinTarget, FeedtackReply, FeedtackResolution, FeedtackViewportMeta, WebhookAdapter, type WebhookAdapterConfig, getCSSSelector, getDeviceMeta, getPageMeta, getPinCoords, getTargetMeta, getViewportMeta };
+/** Build shortest unique CSS selector for an element */
+declare function getCSSSelector(element: Element): string;
+/** Capture DOM target metadata at the clicked element */
+declare function getTargetMeta(element: Element): FeedtackPinTarget;
+
+export { ConsoleAdapter, FeedbackItem, FeedtackAdapter, FeedtackDeviceMeta, FeedtackFilter, FeedtackPageMeta, FeedtackPayload, FeedtackPinTarget, FeedtackReply, FeedtackResolution, FeedtackViewportMeta, LocalStorageAdapter, type LocalStorageAdapterConfig, WebhookAdapter, type WebhookAdapterConfig, getCSSSelector, getDeviceMeta, getPageMeta, getPinCoords, getTargetMeta, getViewportMeta };

package/dist/index.js

@@ -7,7 +7,7 @@ import {
   getTargetMeta,
   getViewportMeta,
   themeToCSS
-} from "./chunk-NOFOQJHM.js";
+} from "./chunk-XVWG3PLK.js";
 
 // src/adapters/ConsoleAdapter.ts
 var ConsoleAdapter = class {
@@ -29,6 +29,70 @@ var ConsoleAdapter = class {
   }
 };
 
+// src/adapters/LocalStorageAdapter.ts
+var LocalStorageAdapter = class {
+  constructor(config = {}) {
+    this.key = config.key ?? "feedtack";
+  }
+  read() {
+    try {
+      const raw = localStorage.getItem(this.key);
+      return raw ? JSON.parse(raw) : [];
+    } catch {
+      return [];
+    }
+  }
+  write(items) {
+    localStorage.setItem(this.key, JSON.stringify(items));
+  }
+  async submit(payload) {
+    const items = this.read();
+    items.push({ payload, replies: [], resolutions: [], archives: [] });
+    this.write(items);
+  }
+  async reply(feedbackId, reply) {
+    const items = this.read();
+    const item = items.find((i) => i.payload.id === feedbackId);
+    if (!item) return;
+    item.replies.push({
+      id: `r_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`,
+      feedbackId,
+      ...reply
+    });
+    this.write(items);
+  }
+  async resolve(feedbackId, resolution) {
+    const items = this.read();
+    const item = items.find((i) => i.payload.id === feedbackId);
+    if (!item) return;
+    item.resolutions.push({ feedbackId, ...resolution });
+    this.write(items);
+  }
+  async archive(feedbackId, userId) {
+    const items = this.read();
+    const item = items.find((i) => i.payload.id === feedbackId);
+    if (!item) return;
+    item.archives.push({
+      feedbackId,
+      archivedBy: { id: userId, name: "", role: "" },
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    });
+    this.write(items);
+  }
+  async loadFeedback(filter) {
+    const items = this.read();
+    if (!filter) return items;
+    return items.filter((item) => {
+      if (filter.pathname && item.payload.page.pathname !== filter.pathname)
+        return false;
+      if (filter.url && item.payload.page.url !== filter.url) return false;
+      if (filter.userId && item.payload.submittedBy.id !== filter.userId)
+        return false;
+      return true;
+    });
+  }
+};
+
 // src/adapters/WebhookAdapter.ts
 var WebhookAdapter = class {
   constructor(config) {
@@ -70,6 +134,7 @@ var WebhookAdapter = class {
 };
 export {
   ConsoleAdapter,
+  LocalStorageAdapter,
   SCHEMA_VERSION,
   WebhookAdapter,
   getCSSSelector,

package/dist/react/index.d.ts

@@ -1,34 +1,30 @@
 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-CHGvGcG5.js';
+import { F as FeedtackAdapter, o as FeedtackUser, n as FeedtackTheme } from '../theme-C_JZCVVA.js';
 
 interface FeedtackClasses {
-    /** Class added to the activation button */
     button?: string;
-    /** Class added to the comment form panel */
     form?: string;
-    /** Class added to the thread/reply panel */
     thread?: string;
-    /** Class added to the color picker row */
     colorPicker?: string;
-    /** Class added to each pin marker */
     pinMarker?: string;
 }
+interface FeedtackSentimentLabels {
+    satisfied?: React.ReactNode;
+    dissatisfied?: React.ReactNode;
+}
 interface FeedtackProviderProps {
     children: React.ReactNode;
     adapter: FeedtackAdapter;
     currentUser: FeedtackUser;
-    /** Keyboard shortcut to toggle pin mode. Default: 'p' (Shift+P) */
     hotkey?: string;
-    /** Only show the activation button for users whose role is in this list */
     adminOnly?: boolean;
-    /** CSS token overrides for brand alignment */
     theme?: FeedtackTheme;
-    /** Additional class names for individual feedtack elements */
     classes?: FeedtackClasses;
+    sentimentLabels?: FeedtackSentimentLabels;
     onError?: (err: Error) => void;
 }
-declare function FeedtackProvider({ children, adapter, currentUser, hotkey, adminOnly, theme, classes, onError }: FeedtackProviderProps): react_jsx_runtime.JSX.Element;
+declare function FeedtackProvider({ children, adapter, currentUser, hotkey, adminOnly, theme, classes, sentimentLabels, onError, }: FeedtackProviderProps): react_jsx_runtime.JSX.Element;
 
 interface FeedtackContextValue {
     activatePinMode: () => void;
@@ -39,4 +35,4 @@ interface FeedtackContextValue {
 /** Hook for host app to programmatically control feedtack */
 declare function useFeedtack(): FeedtackContextValue;
 
-export { type FeedtackClasses, FeedtackProvider, type FeedtackProviderProps, useFeedtack };
+export { type FeedtackClasses, FeedtackProvider, type FeedtackProviderProps, type FeedtackSentimentLabels, useFeedtack };

package/dist/react/index.js

@@ -6,20 +6,157 @@ import {
   getTargetMeta,
   getViewportMeta,
   themeToCSS
-} from "../chunk-NOFOQJHM.js";
+} from "../chunk-XVWG3PLK.js";
 
-// src/react/FeedtackProvider.tsx
-import { useCallback, useEffect, useRef, useState } from "react";
+// src/ui/colors.ts
+var PIN_PALETTE = [
+  "#ef4444",
+  // red
+  "#3b82f6",
+  // blue
+  "#22c55e",
+  // green
+  "#f59e0b",
+  // amber
+  "#a855f7",
+  // purple
+  "#ec4899"
+  // 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>");
+  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)}`;
+}
+function getAnchoredPosition(x, y) {
+  const FORM_HEIGHT = 220;
+  const EDGE = 300;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const clientX = x - window.scrollX;
+  const clientY = y - window.scrollY;
+  const left = clientX > vw - EDGE ? void 0 : clientX + 16;
+  const right = clientX > vw - EDGE ? vw - clientX + 16 : void 0;
+  const top = clientY > vh - EDGE ? void 0 : clientY + 16;
+  const bottom = clientY > vh - EDGE ? vh - clientY + FORM_HEIGHT : void 0;
+  return { left, right, top, bottom };
+}
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+// src/react/ThreadPanel.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ThreadPanel({
+  item,
+  replyBody,
+  onReplyBodyChange,
+  onReply,
+  onResolve,
+  onArchive,
+  onClose,
+  className
+}) {
+  const pin = item.payload.pins[0];
+  const pos = getAnchoredPosition(pin.x, pin.y);
+  return /* @__PURE__ */ jsxs(
+    "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(
+          "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 })
+            ]
+          },
+          r.id
+        )),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            placeholder: "Reply\u2026",
+            value: replyBody,
+            onChange: (e) => onReplyBodyChange(e.target.value),
+            style: {
+              width: "100%",
+              fontSize: 12,
+              padding: 6,
+              borderRadius: 6,
+              border: "1px solid #e5e7eb",
+              marginTop: 4
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "feedtack-btn-submit",
+              style: { fontSize: 12, padding: "4px 10px" },
+              onClick: onReply,
+              children: "Reply"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "feedtack-btn-cancel",
+              style: { fontSize: 12 },
+              onClick: onResolve,
+              children: "Mark Resolved"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "feedtack-btn-cancel",
+              style: { fontSize: 12 },
+              onClick: onArchive,
+              children: "Archive"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "feedtack-btn-cancel",
+              style: { fontSize: 12 },
+              onClick: onClose,
+              children: "Close"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/react/useFeedtackState.ts
+import { useCallback as useCallback2, useEffect as useEffect3, useState as useState2 } from "react";
+
+// src/react/useFeedtackDom.ts
+import { useEffect, useRef } from "react";
+
 // src/ui/styles.ts
 var FEEDTACK_DEFAULT_TOKENS = `
   #feedtack-root {
@@ -82,7 +219,8 @@ var FEEDTACK_STYLES = `
     width: 24px;
     height: 24px;
     border-radius: 50% 50% 50% 0;
-    transform: rotate(-45deg) translate(-50%, -50%);
+    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;
@@ -104,7 +242,7 @@ var FEEDTACK_STYLES = `
     display: flex;
     gap: 6px;
     padding: 8px;
-    background: var(--ft-bg);
+    background: var(--ft-bg) !important;
     border-radius: var(--ft-radius);
     box-shadow: 0 2px 8px rgba(0,0,0,0.15);
     position: fixed;
@@ -130,7 +268,7 @@ var FEEDTACK_STYLES = `
   .feedtack-form {
     position: absolute;
     z-index: 2147483642;
-    background: var(--ft-bg);
+    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;
@@ -224,7 +362,7 @@ var FEEDTACK_STYLES = `
   .feedtack-thread {
     position: absolute;
     z-index: 2147483642;
-    background: var(--ft-bg);
+    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;
@@ -246,54 +384,8 @@ var FEEDTACK_STYLES = `
   }
 `;
 
-// src/ui/colors.ts
-var PIN_PALETTE = [
-  "#ef4444",
-  // red
-  "#3b82f6",
-  // blue
-  "#22c55e",
-  // green
-  "#f59e0b",
-  // amber
-  "#a855f7",
-  // purple
-  "#ec4899"
-  // pink
-];
-
-// src/react/FeedtackProvider.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function generateId() {
-  return `ft_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`;
-}
-function getAnchoredPosition(x, y) {
-  const FORM_WIDTH = 290;
-  const FORM_HEIGHT = 220;
-  const EDGE = 300;
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-  const clientX = x - window.scrollX;
-  const clientY = y - window.scrollY;
-  const left = clientX > vw - EDGE ? void 0 : clientX + 16;
-  const right = clientX > vw - EDGE ? vw - clientX + 16 : void 0;
-  const top = clientY > vh - EDGE ? void 0 : clientY + 16;
-  const bottom = clientY > vh - EDGE ? vh - clientY + FORM_HEIGHT : void 0;
-  return { left, right, top, bottom };
-}
-function FeedtackProvider({ children, adapter, currentUser, hotkey = "p", adminOnly = false, theme, classes = {}, onError }) {
-  const [isPinModeActive, setIsPinModeActive] = useState(false);
-  const [pendingPins, setPendingPins] = useState([]);
-  const [selectedColor, setSelectedColor] = useState(PIN_PALETTE[0]);
-  const [showForm, setShowForm] = useState(false);
-  const [comment, setComment] = useState("");
-  const [sentiment, setSentiment] = useState(null);
-  const [commentError, setCommentError] = useState(false);
-  const [submitting, setSubmitting] = useState(false);
-  const [feedbackItems, setFeedbackItems] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [openThreadId, setOpenThreadId] = useState(null);
-  const [replyBody, setReplyBody] = useState("");
+// src/react/useFeedtackDom.ts
+function useFeedtackDom(theme) {
   const rootRef = useRef(null);
   useEffect(() => {
     if (document.getElementById("feedtack-styles")) return;
@@ -318,61 +410,126 @@ function FeedtackProvider({ children, adapter, currentUser, hotkey = "p", adminO
     const root = document.getElementById("feedtack-root");
     if (!root || !theme) return;
     const tokens = themeToCSS(theme);
-    Object.entries(tokens).forEach(([k, v]) => root.style.setProperty(k, v));
+    for (const [k, v] of Object.entries(tokens)) {
+      root.style.setProperty(k, v);
+    }
   }, [theme]);
-  useEffect(() => {
-    setLoading(true);
-    adapter.loadFeedback({ pathname: window.location.pathname }).then(setFeedbackItems).catch((err) => onError?.(err)).finally(() => setLoading(false));
-  }, [adapter, onError]);
-  const activatePinMode = useCallback(() => setIsPinModeActive(true), []);
-  const deactivatePinMode = useCallback(() => {
-    setIsPinModeActive(false);
+  return rootRef;
+}
+
+// src/react/usePinMode.ts
+import { useCallback, useEffect as useEffect2, useState } from "react";
+function usePinMode({ hotkey, onDeactivate }) {
+  const [isActive, setIsActive] = useState(false);
+  const [pendingPins, setPendingPins] = useState([]);
+  const [selectedColor, setSelectedColor] = useState(PIN_PALETTE[0]);
+  const [showForm, setShowForm] = useState(false);
+  const activate = useCallback(() => setIsActive(true), []);
+  const deactivate = useCallback(() => {
+    setIsActive(false);
     setPendingPins([]);
     setShowForm(false);
-    setComment("");
-    setSentiment(null);
-    setCommentError(false);
-  }, []);
-  useEffect(() => {
-    if (isPinModeActive) {
+    onDeactivate?.();
+  }, [onDeactivate]);
+  useEffect2(() => {
+    if (isActive) {
       document.documentElement.classList.add("feedtack-crosshair");
     } else {
       document.documentElement.classList.remove("feedtack-crosshair");
     }
     return () => document.documentElement.classList.remove("feedtack-crosshair");
-  }, [isPinModeActive]);
-  useEffect(() => {
+  }, [isActive]);
+  useEffect2(() => {
     const handler = (e) => {
       if (e.key === hotkey.toUpperCase() && e.shiftKey) {
-        setIsPinModeActive((prev) => !prev);
+        setIsActive((prev) => !prev);
       }
       if (e.key === "Escape") {
-        deactivatePinMode();
-        setOpenThreadId(null);
+        deactivate();
+      }
+      if (isActive && (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, deactivatePinMode]);
-  const handlePageClick = useCallback((e) => {
-    if (!isPinModeActive) return;
-    const target = e.target;
-    if (target.closest("#feedtack-root") || target.closest(".feedtack-form") || target.closest(".feedtack-color-picker")) return;
-    e.preventDefault();
-    e.stopPropagation();
-    const coords = getPinCoords(e);
-    const targetMeta = getTargetMeta(target);
-    setPendingPins((prev) => [...prev, {
-      color: selectedColor,
-      ...coords,
-      target: targetMeta
-    }]);
-    setShowForm(true);
-  }, [isPinModeActive, selectedColor]);
-  useEffect(() => {
+  }, [hotkey, deactivate, isActive]);
+  const handlePageClick = useCallback(
+    (e) => {
+      if (!isActive) return;
+      const target = e.target;
+      if (target.closest("#feedtack-root, .feedtack-form, .feedtack-color-picker"))
+        return;
+      e.preventDefault();
+      e.stopPropagation();
+      setPendingPins((prev) => [
+        ...prev,
+        {
+          color: selectedColor,
+          ...getPinCoords(e),
+          target: getTargetMeta(target)
+        }
+      ]);
+      setShowForm(true);
+    },
+    [isActive, selectedColor]
+  );
+  useEffect2(() => {
     document.addEventListener("click", handlePageClick, true);
     return () => document.removeEventListener("click", handlePageClick, true);
   }, [handlePageClick]);
+  return {
+    isActive,
+    activate,
+    deactivate,
+    pendingPins,
+    selectedColor,
+    setSelectedColor,
+    showForm
+  };
+}
+
+// src/react/useFeedtackState.ts
+function useFeedtackState({
+  adapter,
+  currentUser,
+  hotkey,
+  theme,
+  onError
+}) {
+  useFeedtackDom(theme);
+  const [comment, setComment] = useState2("");
+  const [sentiment, setSentiment] = useState2(null);
+  const [commentError, setCommentError] = useState2(false);
+  const [submitting, setSubmitting] = useState2(false);
+  const [feedbackItems, setFeedbackItems] = useState2([]);
+  const [loading, setLoading] = useState2(true);
+  const [openThreadId, setOpenThreadId] = useState2(null);
+  const [replyBody, setReplyBody] = useState2("");
+  const resetForm = useCallback2(() => {
+    setComment("");
+    setSentiment(null);
+    setCommentError(false);
+  }, []);
+  const pinMode = usePinMode({
+    hotkey,
+    onDeactivate: () => {
+      resetForm();
+      setOpenThreadId(null);
+    }
+  });
+  useEffect3(() => {
+    setLoading(true);
+    adapter.loadFeedback({ pathname: window.location.pathname }).then(setFeedbackItems).catch((err) => onError?.(err)).finally(() => setLoading(false));
+  }, [adapter, onError]);
+  const updateItem = (id, fn) => setFeedbackItems(
+    (prev) => prev.map((i) => i.payload.id === id ? fn(i) : i)
+  );
   const handleSubmit = async () => {
     if (!comment.trim()) {
       setCommentError(true);
@@ -386,15 +543,18 @@ function FeedtackProvider({ children, adapter, currentUser, hotkey = "p", adminO
       submittedBy: currentUser,
       comment: comment.trim(),
       sentiment,
-      pins: pendingPins.map((p, i) => ({ ...p, index: i + 1 })),
+      pins: pinMode.pendingPins.map((p, i) => ({ ...p, index: i + 1 })),
       page: getPageMeta(),
       viewport: getViewportMeta(),
       device: getDeviceMeta()
     };
     try {
       await adapter.submit(payload);
-      setFeedbackItems((prev) => [...prev, { payload, replies: [], resolutions: [], archives: [] }]);
-      deactivatePinMode();
+      setFeedbackItems((prev) => [
+        ...prev,
+        { payload, replies: [], resolutions: [], archives: [] }
+      ]);
+      pinMode.deactivate();
     } catch (err) {
       onError?.(err);
     } finally {
@@ -403,173 +563,279 @@ function FeedtackProvider({ children, adapter, currentUser, hotkey = "p", adminO
   };
   const handleReply = async (feedbackId) => {
     if (!replyBody.trim()) return;
+    const ts = (/* @__PURE__ */ new Date()).toISOString();
+    const body = replyBody.trim();
     try {
       await adapter.reply(feedbackId, {
         author: currentUser,
-        body: replyBody.trim(),
-        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        body,
+        timestamp: ts
       });
-      setFeedbackItems((prev) => prev.map(
-        (item) => item.payload.id === feedbackId ? { ...item, replies: [...item.replies, { id: generateId(), feedbackId, author: currentUser, body: replyBody.trim(), timestamp: (/* @__PURE__ */ new Date()).toISOString() }] } : item
-      ));
+      updateItem(feedbackId, (item) => ({
+        ...item,
+        replies: [
+          ...item.replies,
+          {
+            id: generateId(),
+            feedbackId,
+            author: currentUser,
+            body,
+            timestamp: ts
+          }
+        ]
+      }));
       setReplyBody("");
     } catch (err) {
       onError?.(err);
     }
   };
   const handleResolve = async (feedbackId) => {
+    const ts = (/* @__PURE__ */ new Date()).toISOString();
     try {
-      await adapter.resolve(feedbackId, { resolvedBy: currentUser, timestamp: (/* @__PURE__ */ new Date()).toISOString() });
-      setFeedbackItems((prev) => prev.map(
-        (item) => item.payload.id === feedbackId ? { ...item, resolutions: [...item.resolutions, { feedbackId, resolvedBy: currentUser, timestamp: (/* @__PURE__ */ new Date()).toISOString() }] } : item
-      ));
+      await adapter.resolve(feedbackId, {
+        resolvedBy: currentUser,
+        timestamp: ts
+      });
+      updateItem(feedbackId, (item) => ({
+        ...item,
+        resolutions: [
+          ...item.resolutions,
+          { feedbackId, resolvedBy: currentUser, timestamp: ts }
+        ]
+      }));
     } catch (err) {
       onError?.(err);
     }
   };
   const handleArchive = async (feedbackId) => {
+    const ts = (/* @__PURE__ */ new Date()).toISOString();
     try {
       await adapter.archive(feedbackId, currentUser.id);
-      setFeedbackItems((prev) => prev.map(
-        (item) => item.payload.id === feedbackId ? { ...item, archives: [...item.archives, { feedbackId, archivedBy: currentUser, timestamp: (/* @__PURE__ */ new Date()).toISOString() }] } : item
-      ));
+      updateItem(feedbackId, (item) => ({
+        ...item,
+        archives: [
+          ...item.archives,
+          { feedbackId, archivedBy: currentUser, timestamp: ts }
+        ]
+      }));
       setOpenThreadId(null);
     } catch (err) {
       onError?.(err);
     }
   };
-  const isArchivedForUser = (item) => item.archives.some((a) => a.archivedBy.id === currentUser.id);
-  const hasUnread = (item) => item.replies.length > 0;
-  const firstPin = pendingPins[0];
+  return {
+    ...pinMode,
+    isPinModeActive: pinMode.isActive,
+    activatePinMode: pinMode.activate,
+    deactivatePinMode: pinMode.deactivate,
+    comment,
+    setComment,
+    sentiment,
+    setSentiment,
+    commentError,
+    setCommentError,
+    submitting,
+    feedbackItems,
+    loading,
+    openThreadId,
+    setOpenThreadId,
+    replyBody,
+    setReplyBody,
+    handleSubmit,
+    handleReply,
+    handleResolve,
+    handleArchive,
+    isArchivedForUser: (item) => item.archives.some((a) => a.archivedBy.id === currentUser.id),
+    hasUnread: (item) => item.replies.length > 0
+  };
+}
+
+// src/react/FeedtackProvider.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function FeedtackProvider({
+  children,
+  adapter,
+  currentUser,
+  hotkey = "p",
+  adminOnly = false,
+  theme,
+  classes = {},
+  sentimentLabels = {},
+  onError
+}) {
+  const state = useFeedtackState({
+    adapter,
+    currentUser,
+    hotkey,
+    theme,
+    onError
+  });
+  const firstPin = state.pendingPins[0];
   const formPos = firstPin ? getAnchoredPosition(firstPin.x, firstPin.y) : {};
   const showButton = !adminOnly || currentUser.role === "admin";
-  return /* @__PURE__ */ jsxs(FeedtackContext.Provider, { value: { activatePinMode, deactivatePinMode, isPinModeActive }, children: [
-    children,
-    showButton && /* @__PURE__ */ jsxs(
-      "button",
-      {
-        className: `feedtack-btn${isPinModeActive ? " active" : ""}${classes.button ? ` ${classes.button}` : ""}`,
-        onClick: () => isPinModeActive ? deactivatePinMode() : activatePinMode(),
-        title: "Toggle feedback pin mode",
-        children: [
-          "Drop Pin [Shift+",
-          hotkey.toUpperCase(),
-          "]"
-        ]
-      }
-    ),
-    isPinModeActive && /* @__PURE__ */ jsx("div", { className: `feedtack-color-picker${classes.colorPicker ? ` ${classes.colorPicker}` : ""}`, children: PIN_PALETTE.map((color) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: `feedtack-color-swatch${selectedColor === color ? " selected" : ""}`,
-        style: { background: color },
-        onClick: () => setSelectedColor(color),
-        title: color
+  const openItem = state.openThreadId ? state.feedbackItems.find((i) => i.payload.id === state.openThreadId) : null;
+  return /* @__PURE__ */ jsxs2(
+    FeedtackContext.Provider,
+    {
+      value: {
+        activatePinMode: state.activatePinMode,
+        deactivatePinMode: state.deactivatePinMode,
+        isPinModeActive: state.isPinModeActive
       },
-      color
-    )) }),
-    pendingPins.map((pin, i) => /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `feedtack-pin-marker${classes.pinMarker ? ` ${classes.pinMarker}` : ""}`,
-        style: {
-          background: pin.color,
-          left: pin.x,
-          top: pin.y,
-          position: "absolute"
-        }
-      },
-      i
-    )),
-    showForm && /* @__PURE__ */ jsxs("div", { className: `feedtack-form${classes.form ? ` ${classes.form}` : ""}`, style: { position: "fixed", ...formPos }, children: [
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          className: commentError ? "error" : "",
-          placeholder: "What's the issue? (required)",
-          value: comment,
-          onChange: (e) => {
-            setComment(e.target.value);
-            setCommentError(false);
-          },
-          autoFocus: true
-        }
-      ),
-      commentError && /* @__PURE__ */ jsx("span", { className: "feedtack-error-msg", children: "Comment is required" }),
-      /* @__PURE__ */ jsxs("div", { className: "feedtack-sentiment", children: [
-        /* @__PURE__ */ jsx(
+      children: [
+        children,
+        showButton && /* @__PURE__ */ jsxs2(
           "button",
           {
-            className: sentiment === "satisfied" ? "selected" : "",
-            onClick: () => setSentiment(sentiment === "satisfied" ? null : "satisfied"),
-            children: "\u{1F60A} Satisfied"
+            type: "button",
+            className: cx(
+              "feedtack-btn",
+              state.isPinModeActive && "active",
+              classes.button
+            ),
+            onClick: () => state.isPinModeActive ? state.deactivatePinMode() : state.activatePinMode(),
+            title: "Toggle feedback pin mode",
+            children: [
+              "Drop Pin [Shift+",
+              hotkey.toUpperCase(),
+              "]"
+            ]
           }
         ),
-        /* @__PURE__ */ jsx(
+        state.isPinModeActive && /* @__PURE__ */ jsx2("div", { className: cx("feedtack-color-picker", classes.colorPicker), children: PIN_PALETTE.map((color) => /* @__PURE__ */ jsx2(
           "button",
           {
-            className: sentiment === "dissatisfied" ? "selected" : "",
-            onClick: () => setSentiment(sentiment === "dissatisfied" ? null : "dissatisfied"),
-            children: "\u{1F61E} Dissatisfied"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "feedtack-form-actions", children: [
-        /* @__PURE__ */ jsx("button", { className: "feedtack-btn-cancel", onClick: deactivatePinMode, children: "Cancel" }),
-        /* @__PURE__ */ jsx("button", { className: "feedtack-btn-submit", onClick: handleSubmit, disabled: submitting, children: submitting ? "Sending\u2026" : "Submit" })
-      ] })
-    ] }),
-    !loading && feedbackItems.filter((item) => !isArchivedForUser(item)).map((item) => {
-      const firstItemPin = item.payload.pins[0];
-      const unread = hasUnread(item);
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: `feedtack-pin-marker${classes.pinMarker ? ` ${classes.pinMarker}` : ""}`,
-          style: {
-            background: firstItemPin.color,
-            left: firstItemPin.x,
-            top: firstItemPin.y,
-            position: "absolute",
-            cursor: "pointer"
+            type: "button",
+            className: cx(
+              "feedtack-color-swatch",
+              state.selectedColor === color && "selected"
+            ),
+            style: { background: color },
+            onClick: () => state.setSelectedColor(color),
+            title: color
           },
-          onClick: () => setOpenThreadId(openThreadId === item.payload.id ? null : item.payload.id),
-          children: unread && /* @__PURE__ */ jsx("div", { className: "feedtack-pin-badge" })
-        },
-        item.payload.id
-      );
-    }),
-    openThreadId && (() => {
-      const item = feedbackItems.find((i) => i.payload.id === openThreadId);
-      if (!item) return null;
-      const pin = item.payload.pins[0];
-      const pos = getAnchoredPosition(pin.x, pin.y);
-      return /* @__PURE__ */ jsxs("div", { className: `feedtack-thread${classes.thread ? ` ${classes.thread}` : ""}`, 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("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 })
-        ] }, r.id)),
-        /* @__PURE__ */ jsx(
-          "textarea",
+          color
+        )) }),
+        state.pendingPins.map((pin) => /* @__PURE__ */ jsx2(
+          "div",
           {
-            placeholder: "Reply\u2026",
-            value: replyBody,
-            onChange: (e) => setReplyBody(e.target.value),
-            style: { width: "100%", fontSize: 12, padding: 6, borderRadius: 6, border: "1px solid #e5e7eb", marginTop: 4 }
+            className: cx("feedtack-pin-marker", classes.pinMarker),
+            style: {
+              background: pin.color,
+              left: pin.x,
+              top: pin.y,
+              position: "absolute"
+            }
+          },
+          `${pin.x}-${pin.y}-${pin.color}`
+        )),
+        state.showForm && /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            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"
+                  }
+                )
+              ] })
+            ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
-          /* @__PURE__ */ jsx("button", { className: "feedtack-btn-submit", style: { fontSize: 12, padding: "4px 10px" }, onClick: () => handleReply(openThreadId), children: "Reply" }),
-          /* @__PURE__ */ jsx("button", { className: "feedtack-btn-cancel", style: { fontSize: 12 }, onClick: () => handleResolve(openThreadId), children: "Mark Resolved" }),
-          /* @__PURE__ */ jsx("button", { className: "feedtack-btn-cancel", style: { fontSize: 12 }, onClick: () => handleArchive(openThreadId), children: "Archive" }),
-          /* @__PURE__ */ jsx("button", { className: "feedtack-btn-cancel", style: { fontSize: 12 }, onClick: () => setOpenThreadId(null), children: "Close" })
-        ] })
-      ] });
-    })(),
-    loading && /* @__PURE__ */ jsx("div", { className: "feedtack-loading", children: "Loading feedback\u2026" })
-  ] });
+        !state.loading && state.feedbackItems.filter((item) => !state.isArchivedForUser(item)).map((item) => {
+          const pin = item.payload.pins[0];
+          return /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              className: cx("feedtack-pin-marker", classes.pinMarker),
+              style: {
+                background: pin.color,
+                left: pin.x,
+                top: pin.y,
+                position: "absolute",
+                cursor: "pointer"
+              },
+              onClick: () => state.setOpenThreadId(
+                state.openThreadId === item.payload.id ? null : item.payload.id
+              ),
+              children: state.hasUnread(item) && /* @__PURE__ */ jsx2("div", { className: "feedtack-pin-badge" })
+            },
+            item.payload.id
+          );
+        }),
+        openItem && /* @__PURE__ */ jsx2(
+          ThreadPanel,
+          {
+            item: openItem,
+            replyBody: state.replyBody,
+            onReplyBodyChange: state.setReplyBody,
+            onReply: () => state.handleReply(openItem.payload.id),
+            onResolve: () => state.handleResolve(openItem.payload.id),
+            onArchive: () => state.handleArchive(openItem.payload.id),
+            onClose: () => state.setOpenThreadId(null),
+            className: classes.thread
+          }
+        ),
+        state.loading && /* @__PURE__ */ jsx2("div", { className: "feedtack-loading", children: "Loading feedback\u2026" })
+      ]
+    }
+  );
 }
 
 // src/react/useFeedtack.ts

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

@@ -22,6 +22,10 @@ interface FeedtackPinTarget {
     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). */
+    elementPath: string | null;
     tagName: string;
     /** Trimmed text content of the element, max 200 chars */
     textContent: string;
@@ -143,4 +147,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 FeedtackPinTarget as f, type FeedtackDeviceMeta as g, type FeedtackPageMeta as h, type FeedtackViewportMeta 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 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.0.2",
+  "version": "0.1.0",
   "description": "Click anywhere. Drop a pin. Get a payload a developer can act on.",
   "type": "module",
   "license": "MIT",
@@ -28,14 +28,21 @@
     "dev": "tsup --watch",
     "test": "vitest run",
     "test:watch": "vitest",
-    "lint": "eslint src/",
-    "prepublishOnly": "pnpm test && pnpm build"
+    "lint": "biome check src/",
+    "lint:fix": "biome check --fix src/",
+    "release": "release-it",
+    "prepublishOnly": "pnpm test && pnpm build",
+    "prepare": "husky"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
+    "@biomejs/biome": "^2.4.11",
+    "@commitlint/cli": "^20.5.0",
+    "@commitlint/config-conventional": "^20.5.0",
+    "@release-it/conventional-changelog": "^10.0.6",
     "@testing-library/jest-dom": "^6.4.0",
     "@testing-library/react": "^16.0.0",
     "@types/node": "^22.0.0",
@@ -43,10 +50,18 @@
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.0",
     "eslint": "^9.0.0",
+    "husky": "^9.1.7",
     "jsdom": "^25.0.0",
+    "lint-staged": "^16.4.0",
+    "release-it": "^19.2.4",
     "tsup": "^8.5.1",
     "typescript": "^5.5.0",
     "typescript-eslint": "^8.0.0",
     "vitest": "^2.0.0"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "biome check --fix --no-errors-on-unmatched"
+    ]
   }
 }