feedtack 0.5.0 → 1.0.1

package/README.md

@@ -1,8 +1,8 @@
 # feedtack
 
-> Click anywhere. Drop a pin. Get a payload a developer can act on.
+> Click anywhere. Drop a pin. Leave a note. Get a payload a developer can act on.
 
-**feedtack** is a drop-in React feedback overlay. Non-technical stakeholders click anywhere on a page, leave a comment, and feedtack emits a structured JSON payload so complete that an LLM can attempt a first-pass fix before consuming developer hours.
+**feedtack** is a drop-in React feedback overlay. A "Feedback" button opens a modal where anyone can leave site-wide notes, page-level comments, or place a pin on a specific element — all from one entry point. feedtack emits a structured JSON payload so complete that an LLM can attempt a first-pass fix before consuming developer hours.
 
 ## Install
 
@@ -166,16 +166,19 @@ class SupabaseAdapter implements FeedtackAdapter {
 
 ## The payload
 
-Every pin emits a versioned JSON payload:
+Every submission emits a versioned JSON payload. The `scope` field indicates where the feedback lives.
+
+**Element-scoped (pinned to a specific element):**
 
 ```json
 {
-  "schemaVersion": "1.0.0",
+  "schemaVersion": "2.0.0",
   "id": "ft_01j...",
   "timestamp": "2026-04-09T13:42:00.000Z",
   "submittedBy": { "id": "u1", "name": "Alice", "role": "designer" },
+  "scope": "element",
   "comment": "This button doesn't do anything",
-  "sentiment": "dissatisfied",
+  "sentiment": "bad",
   "pins": [{
     "index": 1,
     "color": "#ef4444",
@@ -185,8 +188,8 @@ Every pin emits a versioned JSON payload:
       "selector": "#submit-btn",
       "best_effort": false,
       "tagName": "BUTTON",
-      "textContent": "Place Order",
-      "attributes": { "id": "submit-btn", "disabled": "true" },
+      "dataTestId": "submit-btn",
+      "ancestors": ["form#checkout", "main"],
       "boundingRect": { "x": 420, "y": 812, "width": 200, "height": 44 }
     }
   }],
@@ -196,14 +199,47 @@ Every pin emits a versioned JSON payload:
 }
 ```
 
+**Page or site-scoped (no pin):**
+
+```json
+{
+  "schemaVersion": "2.0.0",
+  "id": "ft_01k...",
+  "scope": "page",
+  "comment": "This page is really confusing — too many steps",
+  "sentiment": "bad",
+  "pins": [],
+  "page": { "url": "https://app.example.com/checkout", "pathname": "/checkout", "title": "Checkout" },
+  ...
+}
+```
+
+`sentiment` values: `"good"` | `"bad"` | `null`
+
+## Feedback scopes
+
+Feedtack supports three levels of feedback, all accessible from the modal:
+
+| Scope | When to use | Pins |
+|-------|-------------|------|
+| `site` | Config-level feedback affecting the whole site (e.g. "change the font everywhere") | None |
+| `page` | Feedback specific to the current page (e.g. "this page is confusing") | None |
+| `element` | Feedback pinned to a specific element (e.g. "this button doesn't work") | One or more |
+
+**How it works:**
+- Clicking "Feedback" opens the modal
+- The modal has **Site** and **Page** tabs for scope-level feedback
+- "Place a pin" in the modal footer activates crosshair mode — useful on mobile too
+- `Shift+P` anywhere on the page opens the modal
+
 ## `useFeedtack` hook
 
 ```tsx
 import { useFeedtack } from 'feedtack/react'
 
 function MyButton() {
-  const { activatePinMode, isPinModeActive } = useFeedtack()
-  return <button onClick={activatePinMode}>{isPinModeActive ? 'Cancel' : 'Give Feedback'}</button>
+  const { openModal, closeModal, isModalOpen, activatePinMode, isPinModeActive } = useFeedtack()
+  return <button onClick={openModal}>{isModalOpen ? 'Close' : 'Give Feedback'}</button>
 }
 ```
 

package/dist/{chunk-NCW2V5JL.js → chunk-2A5LLDLP.js}

@@ -200,8 +200,8 @@ function getTargetMeta(element) {
     tagName: resolved.tagName,
     ancestors,
     boundingRect: {
-      x: rect.x,
-      y: rect.y,
+      x: rect.x + window.scrollX,
+      y: rect.y + window.scrollY,
       width: rect.width,
       height: rect.height
     }
@@ -209,7 +209,7 @@ function getTargetMeta(element) {
 }
 
 // src/types/payload.ts
-var SCHEMA_VERSION = "1.0.0";
+var SCHEMA_VERSION = "2.0.0";
 
 // src/types/theme.ts
 function themeToCSS(theme) {

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-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';
+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-BdqpMipn.js';
+export { A as AncestorNode, j as FeedtackArchive, k as FeedtackBoundingRect, l as FeedtackPin, m as FeedtackScope, n as FeedtackSentiment, o as FeedtackTheme, p as FeedtackUser, S as SCHEMA_VERSION, t as themeToCSS } from './theme-BdqpMipn.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-NCW2V5JL.js";
+} from "./chunk-2A5LLDLP.js";
 
 // src/adapters/ConsoleAdapter.ts
 var ConsoleAdapter = class {
@@ -83,6 +83,7 @@ var LocalStorageAdapter = class {
     const items = this.read();
     if (!filter) return items;
     return items.filter((item) => {
+      if (filter.scope && item.payload.scope !== filter.scope) return false;
       if (filter.pathname && item.payload.page.pathname !== filter.pathname)
         return false;
       if (filter.url && item.payload.page.url !== filter.url) return false;

package/dist/react/index.d.ts

@@ -1,6 +1,22 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { e as FeedbackItem, F as FeedtackAdapter, o as FeedtackUser, n as FeedtackTheme } from '../theme-C-uctIoI.js';
+import { e as FeedbackItem, F as FeedtackAdapter, p as FeedtackUser, o as FeedtackTheme } from '../theme-BdqpMipn.js';
+
+/** Fixed palette of 6 colors for pin markers */
+declare const PIN_PALETTE: readonly ["#ef4444", "#3b82f6", "#22c55e", "#f59e0b", "#a855f7", "#ec4899"];
+type PinColor = (typeof PIN_PALETTE)[number];
+
+interface FeedtackContextValue {
+    activatePinMode: () => void;
+    deactivatePinMode: () => void;
+    isPinModeActive: boolean;
+    selectedColor: string;
+    setSelectedColor: (color: string) => void;
+    pinPalette: readonly string[];
+    openModal: () => void;
+    closeModal: () => void;
+    isModalOpen: boolean;
+}
 
 interface FeedtackFlushEvent {
     pathname: string;
@@ -40,13 +56,7 @@ interface FeedtackProviderProps {
 }
 declare function FeedtackProvider({ children, adapter, currentUser, hotkey, adminOnly, theme, classes, sentimentLabels, onError, disabled, renderPinIcon, onFlush, flushIdleMs, rescopeRoles, }: FeedtackProviderProps): react_jsx_runtime.JSX.Element;
 
-interface FeedtackContextValue {
-    activatePinMode: () => void;
-    deactivatePinMode: () => void;
-    isPinModeActive: boolean;
-}
-
 /** Hook for host app to programmatically control feedtack */
 declare function useFeedtack(): FeedtackContextValue;
 
-export { type FeedtackClasses, type FeedtackFlushEvent, FeedtackProvider, type FeedtackProviderProps, type FeedtackSentimentLabels, useFeedtack };
+export { type FeedtackClasses, type FeedtackContextValue, type FeedtackFlushEvent, FeedtackProvider, type FeedtackProviderProps, type FeedtackSentimentLabels, PIN_PALETTE, type PinColor, useFeedtack };