feedtack 0.5.1 → 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-PPM4AIJU.js → chunk-2A5LLDLP.js}

@@ -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-PPM4AIJU.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,6 @@
 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"];
@@ -13,6 +13,9 @@ interface FeedtackContextValue {
     selectedColor: string;
     setSelectedColor: (color: string) => void;
     pinPalette: readonly string[];
+    openModal: () => void;
+    closeModal: () => void;
+    isModalOpen: boolean;
 }
 
 interface FeedtackFlushEvent {

package/dist/react/index.js

@@ -6,7 +6,7 @@ import {
   getTargetMeta,
   getViewportMeta,
   themeToCSS
-} from "../chunk-PPM4AIJU.js";
+} from "../chunk-2A5LLDLP.js";
 
 // src/ui/colors.ts
 var PIN_PALETTE = [
@@ -92,20 +92,18 @@ function CommentForm({
             "button",
             {
               type: "button",
-              className: sentiment === "satisfied" ? "selected" : "",
-              onClick: () => onSentimentChange(sentiment === "satisfied" ? null : "satisfied"),
-              children: sentimentLabels.satisfied ?? "\u{1F60A} Satisfied"
+              className: sentiment === "good" ? "selected" : "",
+              onClick: () => onSentimentChange(sentiment === "good" ? null : "good"),
+              children: sentimentLabels.satisfied ?? "Good"
             }
           ),
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              className: sentiment === "dissatisfied" ? "selected" : "",
-              onClick: () => onSentimentChange(
-                sentiment === "dissatisfied" ? null : "dissatisfied"
-              ),
-              children: sentimentLabels.dissatisfied ?? "\u{1F61E} Dissatisfied"
+              className: sentiment === "bad" ? "selected" : "",
+              onClick: () => onSentimentChange(sentiment === "bad" ? null : "bad"),
+              children: sentimentLabels.dissatisfied ?? "Bad"
             }
           )
         ] }),
@@ -145,8 +143,311 @@ function useFeedtackContext() {
   return ctx;
 }
 
-// src/react/ThreadPanel.tsx
+// src/react/FeedbackModal.tsx
+import { useEffect, useRef } from "react";
+
+// src/react/ThreadView.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ThreadView({
+  item,
+  replyBody,
+  onReplyBodyChange,
+  onReply,
+  onResolve,
+  onArchive,
+  onBack
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: "feedtack-modal-thread-view", children: [
+    /* @__PURE__ */ jsx2("button", { type: "button", className: "feedtack-modal-back", onClick: onBack, children: "\u2190 Back" }),
+    /* @__PURE__ */ jsxs2("div", { className: "feedtack-modal-thread-content", children: [
+      /* @__PURE__ */ jsx2("strong", { children: item.payload.submittedBy.name }),
+      /* @__PURE__ */ jsx2("p", { children: item.payload.comment })
+    ] }),
+    item.replies.map((r) => /* @__PURE__ */ jsxs2("div", { className: "feedtack-modal-reply", children: [
+      /* @__PURE__ */ jsx2("span", { className: "feedtack-reply-author", children: r.author.name }),
+      /* @__PURE__ */ jsx2("p", { children: r.body })
+    ] }, r.id)),
+    /* @__PURE__ */ jsx2(
+      "textarea",
+      {
+        className: "feedtack-modal-textarea",
+        placeholder: "Reply\u2026",
+        value: replyBody,
+        onChange: (e) => onReplyBodyChange(e.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsxs2("div", { className: "feedtack-modal-actions", children: [
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "feedtack-btn-submit", onClick: onReply, children: "Reply" }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "feedtack-btn-cancel",
+          onClick: onResolve,
+          children: "Resolve"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "feedtack-btn-cancel",
+          onClick: onArchive,
+          children: "Archive"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/react/FeedbackModal.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function FeedbackModal({
+  isOpen,
+  onClose,
+  activeTab,
+  onTabChange,
+  siteFeedback,
+  pageFeedback,
+  comment,
+  onCommentChange,
+  commentError,
+  sentiment,
+  onSentimentChange,
+  submitting,
+  onSubmit,
+  onPlacePin,
+  replyBody,
+  onReplyBodyChange,
+  onReply,
+  onResolve,
+  onArchive,
+  openThreadId,
+  onOpenThread
+}) {
+  const panelRef = useRef(null);
+  useEffect(() => {
+    if (!isOpen) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    const onDown = (e) => {
+      if (panelRef.current && !panelRef.current.contains(e.target)) {
+        const btn = document.querySelector(".feedtack-btn");
+        if (btn?.contains(e.target)) return;
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    document.addEventListener("mousedown", onDown);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.removeEventListener("mousedown", onDown);
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  const threads = activeTab === "site" ? siteFeedback : pageFeedback;
+  const openItem = openThreadId ? threads.find((i) => i.payload.id === openThreadId) : null;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ref: panelRef,
+      className: "feedtack-modal",
+      role: "dialog",
+      "aria-label": "Feedback",
+      "aria-modal": "true",
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "feedtack-modal-header", children: [
+          /* @__PURE__ */ jsx3("span", { className: "feedtack-modal-title", children: "Feedback" }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "feedtack-modal-close",
+              onClick: onClose,
+              "aria-label": "Close",
+              children: "\xD7"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "feedtack-modal-tabs", children: [
+          /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              type: "button",
+              className: cx("feedtack-modal-tab", activeTab === "site" && "active"),
+              onClick: () => onTabChange("site"),
+              children: [
+                "Site",
+                siteFeedback.length > 0 && /* @__PURE__ */ jsx3("span", { className: "feedtack-tab-count", children: siteFeedback.length })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              type: "button",
+              className: cx("feedtack-modal-tab", activeTab === "page" && "active"),
+              onClick: () => onTabChange("page"),
+              children: [
+                "Page",
+                pageFeedback.length > 0 && /* @__PURE__ */ jsx3("span", { className: "feedtack-tab-count", children: pageFeedback.length })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "feedtack-modal-body", children: openItem ? /* @__PURE__ */ jsx3(
+          ThreadView,
+          {
+            item: openItem,
+            replyBody,
+            onReplyBodyChange,
+            onReply: () => onReply(openItem.payload.id),
+            onResolve: () => onResolve(openItem.payload.id),
+            onArchive: () => onArchive(openItem.payload.id),
+            onBack: () => onOpenThread(null)
+          }
+        ) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+          threads.length > 0 && /* @__PURE__ */ jsx3("div", { className: "feedtack-modal-threads", children: threads.map((item) => /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              type: "button",
+              className: "feedtack-modal-thread-item",
+              onClick: () => onOpenThread(item.payload.id),
+              children: [
+                /* @__PURE__ */ jsx3("span", { className: "feedtack-thread-author", children: item.payload.submittedBy.name }),
+                /* @__PURE__ */ jsx3("span", { className: "feedtack-thread-comment", children: item.payload.comment }),
+                /* @__PURE__ */ jsxs3("span", { className: "feedtack-thread-meta", children: [
+                  item.replies.length > 0 && `${item.replies.length} ${item.replies.length === 1 ? "reply" : "replies"}`,
+                  item.resolutions.length > 0 && " \xB7 resolved"
+                ] })
+              ]
+            },
+            item.payload.id
+          )) }),
+          /* @__PURE__ */ jsxs3("div", { className: "feedtack-modal-compose", children: [
+            /* @__PURE__ */ jsx3(
+              "textarea",
+              {
+                className: cx(
+                  "feedtack-modal-textarea",
+                  commentError && "error"
+                ),
+                placeholder: "What's on your mind? (required)",
+                value: comment,
+                onChange: (e) => onCommentChange(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                    e.preventDefault();
+                    onSubmit();
+                  }
+                },
+                "aria-invalid": commentError || void 0
+              }
+            ),
+            commentError && /* @__PURE__ */ jsx3("span", { className: "feedtack-error-msg", children: "Comment is required" }),
+            /* @__PURE__ */ jsxs3("div", { className: "feedtack-sentiment", children: [
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  className: sentiment === "good" ? "selected" : "",
+                  onClick: () => onSentimentChange(sentiment === "good" ? null : "good"),
+                  children: "Good"
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  className: sentiment === "bad" ? "selected" : "",
+                  onClick: () => onSentimentChange(sentiment === "bad" ? null : "bad"),
+                  children: "Bad"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                className: "feedtack-btn-submit",
+                onClick: onSubmit,
+                disabled: submitting,
+                children: submitting ? "Sending\u2026" : "Submit"
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx3("div", { className: "feedtack-modal-footer", children: /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "feedtack-modal-pin-btn",
+            onClick: onPlacePin,
+            children: "Place a pin"
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/react/PinOverlay.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function PinOverlay({
+  feedbackItems,
+  pathname,
+  isArchivedForUser,
+  hasValidPins,
+  hasUnread,
+  openThreadId,
+  setOpenThreadId,
+  getPosition,
+  renderPinIcon,
+  pinMarkerClass
+}) {
+  return /* @__PURE__ */ jsx4(Fragment2, { children: feedbackItems.filter((item) => item.payload.page.pathname === pathname).filter((item) => !isArchivedForUser(item)).filter((item) => hasValidPins(item)).map((item) => {
+    const pin = item.payload.pins[0];
+    const pos = getPosition(item.payload.id, pin);
+    return /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        className: cx(
+          "feedtack-pin-marker",
+          item.resolutions.length > 0 && "feedtack-pin-resolved",
+          pinMarkerClass
+        ),
+        style: {
+          background: pin.color,
+          left: pos.x,
+          top: pos.y,
+          position: "absolute",
+          cursor: "pointer"
+        },
+        onClick: () => setOpenThreadId(
+          openThreadId === item.payload.id ? null : item.payload.id
+        ),
+        children: [
+          renderPinIcon ? /* @__PURE__ */ jsx4("span", { className: "feedtack-pin-icon", children: renderPinIcon(item) }) : item.resolutions.length > 0 && /* @__PURE__ */ jsx4(
+            "span",
+            {
+              className: "feedtack-pin-icon",
+              role: "img",
+              "aria-label": "Resolved",
+              children: "\u2713"
+            }
+          ),
+          hasUnread(item) && /* @__PURE__ */ jsx4("div", { className: "feedtack-pin-badge" })
+        ]
+      },
+      item.payload.id
+    );
+  }) });
+}
+
+// src/react/ThreadPanel.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function ThreadPanel({
   item,
   replyBody,
@@ -162,26 +463,26 @@ function ThreadPanel({
   if (!pin) return null;
   const { x, y } = pinPosition ?? pin;
   const pos = getAnchoredPosition(x, y);
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className: cx("feedtack-thread", className),
       style: { position: "fixed", ...pos },
       children: [
-        /* @__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(
+        /* @__PURE__ */ jsx5("strong", { style: { fontSize: 13 }, children: item.payload.submittedBy.name }),
+        /* @__PURE__ */ jsx5("p", { style: { fontSize: 13 }, children: item.payload.comment }),
+        item.replies.map((r) => /* @__PURE__ */ jsxs5(
           "div",
           {
             style: { borderTop: "1px solid var(--ft-border)", paddingTop: 8 },
             children: [
-              /* @__PURE__ */ jsx2("span", { style: { fontSize: 12, fontWeight: 600 }, children: r.author.name }),
-              /* @__PURE__ */ jsx2("p", { style: { fontSize: 12 }, children: r.body })
+              /* @__PURE__ */ jsx5("span", { style: { fontSize: 12, fontWeight: 600 }, children: r.author.name }),
+              /* @__PURE__ */ jsx5("p", { style: { fontSize: 12 }, children: r.body })
             ]
           },
           r.id
         )),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx5(
           "textarea",
           {
             placeholder: "Reply\u2026",
@@ -201,8 +502,8 @@ function ThreadPanel({
             }
           }
         ),
-        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
-          /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsxs5("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -212,7 +513,7 @@ function ThreadPanel({
               children: "Reply"
             }
           ),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -222,7 +523,7 @@ function ThreadPanel({
               children: "Mark Resolved"
             }
           ),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -232,7 +533,7 @@ function ThreadPanel({
               children: "Archive"
             }
           ),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -249,7 +550,7 @@ function ThreadPanel({
 }
 
 // src/react/useAnchoredPins.ts
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect as useEffect2, useState } from "react";
 function useAnchoredPins(items, pathname) {
   const [positions, setPositions] = useState(
     /* @__PURE__ */ new Map()
@@ -265,10 +566,10 @@ function useAnchoredPins(items, pathname) {
     }
     setPositions(next);
   }, [items, pathname]);
-  useEffect(() => {
+  useEffect2(() => {
     resolve();
   }, [resolve]);
-  useEffect(() => {
+  useEffect2(() => {
     let raf = 0;
     const handler = () => {
       cancelAnimationFrame(raf);
@@ -310,7 +611,7 @@ function resolvePin(pin) {
 }
 
 // src/react/useFeedtackState.ts
-import { useCallback as useCallback5, useEffect as useEffect5, useState as useState3 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect6, useState as useState3 } from "react";
 
 // src/react/useFeedtackActions.ts
 import { useCallback as useCallback2 } from "react";
@@ -333,6 +634,7 @@ function useFeedtackActions(deps) {
       schemaVersion: SCHEMA_VERSION,
       id: generateId(),
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      scope: deps.getScope(),
       submittedBy: currentUser,
       comment: comment.trim(),
       sentiment: deps.getSentiment(),
@@ -436,11 +738,251 @@ function useFeedtackActions(deps) {
 }
 
 // src/react/useFeedtackDom.ts
-import { useEffect as useEffect2, useRef } from "react";
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
+
+// src/ui/modalStyles.ts
+var FEEDTACK_MODAL_STYLES = `
+  .feedtack-loading {
+    position: fixed;
+    bottom: 70px;
+    right: 24px;
+    font-size: 12px;
+    color: var(--ft-text-muted);
+    z-index: 2147483640;
+  }
+
+  .feedtack-modal {
+    position: fixed;
+    bottom: 72px;
+    right: 24px;
+    width: 360px;
+    max-height: 70vh;
+    background: var(--ft-bg);
+    border: 1px solid var(--ft-border);
+    border-radius: calc(var(--ft-radius) + 4px);
+    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
+    z-index: 2147483643;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .feedtack-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 16px 0;
+  }
+
+  .feedtack-modal-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--ft-text);
+  }
+
+  .feedtack-modal-close {
+    background: none;
+    border: none;
+    font-size: 20px;
+    cursor: pointer;
+    color: var(--ft-text-muted);
+    line-height: 1;
+    padding: 0 4px;
+  }
+
+  .feedtack-modal-tabs {
+    display: flex;
+    gap: 0;
+    padding: 12px 16px 0;
+    border-bottom: 1px solid var(--ft-border);
+  }
+
+  .feedtack-modal-tab {
+    flex: 1;
+    padding: 8px 12px;
+    border: none;
+    background: none;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    color: var(--ft-text-muted);
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+  }
+
+  .feedtack-modal-tab.active {
+    color: var(--ft-primary);
+    border-bottom-color: var(--ft-primary);
+  }
+
+  .feedtack-tab-count {
+    font-size: 11px;
+    background: var(--ft-surface);
+    color: var(--ft-text-muted);
+    padding: 1px 6px;
+    border-radius: 10px;
+  }
+
+  .feedtack-modal-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .feedtack-modal-threads {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .feedtack-modal-thread-item {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    text-align: left;
+    padding: 10px 12px;
+    background: var(--ft-surface);
+    border: 1px solid var(--ft-border);
+    border-radius: var(--ft-radius);
+    cursor: pointer;
+  }
+
+  .feedtack-modal-thread-item:hover {
+    border-color: var(--ft-primary);
+  }
+
+  .feedtack-thread-author {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--ft-text);
+  }
+
+  .feedtack-thread-comment {
+    font-size: 13px;
+    color: var(--ft-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .feedtack-thread-meta {
+    font-size: 11px;
+    color: var(--ft-text-muted);
+  }
+
+  .feedtack-modal-compose {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .feedtack-modal-textarea {
+    width: 100%;
+    border: 1.5px solid var(--ft-border);
+    border-radius: var(--ft-radius);
+    padding: 8px;
+    font-size: 13px;
+    resize: vertical;
+    min-height: 72px;
+    outline: none;
+    background: var(--ft-surface);
+    color: var(--ft-text);
+  }
+
+  .feedtack-modal-textarea:focus {
+    border-color: var(--ft-primary);
+  }
+
+  .feedtack-modal-textarea.error {
+    border-color: var(--ft-error);
+  }
+
+  .feedtack-modal-footer {
+    padding: 10px 16px 14px;
+    border-top: 1px solid var(--ft-border);
+  }
+
+  .feedtack-modal-pin-btn {
+    width: 100%;
+    padding: 8px 14px;
+    border: 1.5px solid var(--ft-border);
+    border-radius: var(--ft-radius);
+    background: var(--ft-bg);
+    color: var(--ft-text);
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: border-color 0.15s;
+  }
+
+  .feedtack-modal-pin-btn:hover {
+    border-color: var(--ft-primary);
+    color: var(--ft-primary);
+  }
+
+  .feedtack-modal-thread-view {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .feedtack-modal-back {
+    background: none;
+    border: none;
+    font-size: 13px;
+    color: var(--ft-primary);
+    cursor: pointer;
+    padding: 0;
+    text-align: left;
+  }
+
+  .feedtack-modal-thread-content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 13px;
+  }
+
+  .feedtack-modal-reply {
+    border-top: 1px solid var(--ft-border);
+    padding-top: 8px;
+    font-size: 12px;
+  }
+
+  .feedtack-reply-author {
+    font-weight: 600;
+  }
+
+  .feedtack-modal-actions {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+
+  @media (max-width: 480px) {
+    .feedtack-modal {
+      right: 0;
+      bottom: 64px;
+      width: 100vw;
+      max-height: 85vh;
+      border-radius: var(--ft-radius) var(--ft-radius) 0 0;
+      border-left: none;
+      border-right: none;
+      border-bottom: none;
+    }
+  }
+`;
 
 // src/ui/styles.ts
 var FEEDTACK_DEFAULT_TOKENS = `
-  #feedtack-root, .feedtack-form, .feedtack-thread {
+  #feedtack-root, .feedtack-form, .feedtack-thread, .feedtack-modal {
     --ft-primary: #2563eb;
     --ft-primary-hover: #1d4ed8;
     --ft-bg: #ffffff;
@@ -676,20 +1218,12 @@ var FEEDTACK_STYLES = `
     overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
   }
 
-  .feedtack-loading {
-    position: fixed;
-    bottom: 70px;
-    right: 24px;
-    font-size: 12px;
-    color: var(--ft-text-muted);
-    z-index: 2147483640;
-  }
-`;
+` + FEEDTACK_MODAL_STYLES;
 
 // src/react/useFeedtackDom.ts
 function useFeedtackDom(theme, disabled) {
-  const rootRef = useRef(null);
-  useEffect2(() => {
+  const rootRef = useRef2(null);
+  useEffect3(() => {
     if (disabled) return;
     if (document.getElementById("feedtack-styles")) return;
     const style = document.createElement("style");
@@ -700,7 +1234,7 @@ function useFeedtackDom(theme, disabled) {
       style.remove();
     };
   }, [disabled]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (disabled) return;
     const root = document.createElement("div");
     root.id = "feedtack-root";
@@ -710,7 +1244,7 @@ function useFeedtackDom(theme, disabled) {
       root.remove();
     };
   }, [disabled]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (disabled) return;
     const root = document.getElementById("feedtack-root");
     if (!root || !theme) return;
@@ -723,7 +1257,7 @@ function useFeedtackDom(theme, disabled) {
 }
 
 // src/react/useFeedtackFlush.ts
-import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3 } from "react";
 var DEFAULT_IDLE_MS = 5 * 60 * 1e3;
 function useFeedtackFlush({
   pathname,
@@ -732,9 +1266,9 @@ function useFeedtackFlush({
   flushIdleMs = DEFAULT_IDLE_MS,
   disabled
 }) {
-  const flushedRef = useRef2(/* @__PURE__ */ new Set());
-  const prevPathnameRef = useRef2(pathname);
-  const idleTimerRef = useRef2(null);
+  const flushedRef = useRef3(/* @__PURE__ */ new Set());
+  const prevPathnameRef = useRef3(pathname);
+  const idleTimerRef = useRef3(null);
   const flush = useCallback3(
     (path, items) => {
       if (!onFlush || flushedRef.current.has(path)) return;
@@ -745,7 +1279,7 @@ function useFeedtackFlush({
     },
     [onFlush]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     if (disabled || !onFlush) return;
     const prev = prevPathnameRef.current;
     prevPathnameRef.current = pathname;
@@ -753,7 +1287,7 @@ function useFeedtackFlush({
       flush(prev, feedbackItems);
     }
   }, [pathname, feedbackItems, flush, onFlush, disabled]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (disabled || !onFlush || flushIdleMs <= 0) return;
     const resetTimer = () => {
       if (idleTimerRef.current) clearTimeout(idleTimerRef.current);
@@ -770,7 +1304,7 @@ function useFeedtackFlush({
       for (const e of events) window.removeEventListener(e, resetTimer);
     };
   }, [pathname, feedbackItems, flush, onFlush, flushIdleMs, disabled]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (disabled || !onFlush) return;
     const handleUnload = () => flush(pathname, feedbackItems);
     window.addEventListener("beforeunload", handleUnload);
@@ -783,12 +1317,13 @@ function useFeedtackFlush({
 }
 
 // src/react/usePinMode.ts
-import { useCallback as useCallback4, useEffect as useEffect4, useState as useState2 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useState as useState2 } from "react";
 function usePinMode({
   hotkey,
   onDeactivate,
   disabled,
-  isModalOpen
+  isModalOpen,
+  onHotkey
 }) {
   const [isActive, setIsActive] = useState2(false);
   const [pendingPins, setPendingPins] = useState2([]);
@@ -801,7 +1336,7 @@ function usePinMode({
     setShowForm(false);
     onDeactivate?.();
   }, [onDeactivate]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (isActive) {
       document.documentElement.classList.add("feedtack-crosshair");
     } else {
@@ -809,11 +1344,15 @@ function usePinMode({
     }
     return () => document.documentElement.classList.remove("feedtack-crosshair");
   }, [isActive]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (disabled) return;
     const handler = (e) => {
       if (e.key === hotkey.toUpperCase() && e.shiftKey) {
-        setIsActive((prev) => !prev);
+        if (onHotkey) {
+          onHotkey();
+        } else {
+          setIsActive((prev) => !prev);
+        }
       }
       if (e.key === "Escape") {
         deactivate();
@@ -829,7 +1368,7 @@ function usePinMode({
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [hotkey, deactivate, isActive, disabled, isModalOpen, showForm]);
+  }, [hotkey, deactivate, isActive, disabled, isModalOpen, showForm, onHotkey]);
   const placePin = useCallback4(
     (coords, target) => {
       if (target.closest("#feedtack-root, .feedtack-form, .feedtack-color-picker"))
@@ -867,7 +1406,7 @@ function usePinMode({
     },
     [isActive, placePin]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     if (disabled) return;
     document.addEventListener("click", handlePageClick, true);
     document.addEventListener("touchend", handleTouchEnd, true);
@@ -903,7 +1442,7 @@ function useFeedtackState({
   const [pathname, setPathname] = useState3(
     () => typeof window === "undefined" ? "/" : window.location.pathname
   );
-  useEffect5(() => {
+  useEffect6(() => {
     const update = () => setPathname(window.location.pathname);
     const origPush = history.pushState.bind(history);
     const origReplace = history.replaceState.bind(history);
@@ -930,6 +1469,12 @@ function useFeedtackState({
   const [loading, setLoading] = useState3(true);
   const [openThreadId, setOpenThreadId] = useState3(null);
   const [replyBody, setReplyBody] = useState3("");
+  const [isModalOpen, setIsModalOpen] = useState3(false);
+  const [composeScope, setComposeScope] = useState3("site");
+  const [siteFeedback, setSiteFeedback] = useState3([]);
+  const [pageFeedback, setPageFeedback] = useState3([]);
+  const openModal = useCallback5(() => setIsModalOpen(true), []);
+  const closeModal = useCallback5(() => setIsModalOpen(false), []);
   const resetForm = useCallback5(() => {
     setComment("");
     setSentiment(null);
@@ -938,7 +1483,8 @@ function useFeedtackState({
   const pinMode = usePinMode({
     hotkey,
     disabled,
-    isModalOpen: openThreadId !== null,
+    isModalOpen: openThreadId !== null || isModalOpen,
+    onHotkey: openModal,
     onDeactivate: () => {
       resetForm();
       setOpenThreadId(null);
@@ -951,12 +1497,29 @@ function useFeedtackState({
     flushIdleMs,
     disabled
   });
-  useEffect5(() => {
+  useEffect6(() => {
     setLoading(true);
-    adapter.loadFeedback({ pathname }).then(setFeedbackItems).catch((err) => onError?.(err)).finally(() => setLoading(false));
+    adapter.loadFeedback({ pathname }).then((items) => {
+      const elementItems = [];
+      const siteItems = [];
+      const pageItems = [];
+      for (const item of items) {
+        if (item.payload.scope === "site") siteItems.push(item);
+        else if (item.payload.scope === "page") pageItems.push(item);
+        else elementItems.push(item);
+      }
+      setFeedbackItems(elementItems);
+      setSiteFeedback(siteItems);
+      setPageFeedback(pageItems);
+    }).catch((err) => onError?.(err)).finally(() => setLoading(false));
   }, [adapter, onError, pathname]);
+  const getCurrentScope = useCallback5(() => {
+    if (pinMode.isActive || pinMode.pendingPins.length > 0) return "element";
+    return composeScope;
+  }, [pinMode.isActive, pinMode.pendingPins.length, composeScope]);
   const commentRef = () => comment;
   const sentimentRef = () => sentiment;
+  const scopeRef = () => getCurrentScope();
   const pinsRef = () => pinMode.pendingPins;
   const replyRef = () => replyBody;
   const pathRef = () => pathname;
@@ -966,6 +1529,7 @@ function useFeedtackState({
     onError,
     getComment: commentRef,
     getSentiment: sentimentRef,
+    getScope: scopeRef,
     getPendingPins: pinsRef,
     getReplyBody: replyRef,
     getPathname: pathRef,
@@ -979,6 +1543,27 @@ function useFeedtackState({
     shouldRescope: rescopeRoles ? (role) => rescopeRoles.includes(role) : void 0,
     hasFlush: !!onFlush
   });
+  const handleModalSubmit = useCallback5(async () => {
+    if (!comment.trim()) {
+      setCommentError(true);
+      return;
+    }
+    await actions.handleSubmit();
+    const scope = composeScope;
+    setFeedbackItems((prev) => {
+      const newItem = prev[prev.length - 1];
+      if (newItem && newItem.payload.scope === scope) {
+        if (scope === "site") {
+          setSiteFeedback((s) => [...s, newItem]);
+        } else {
+          setPageFeedback((p) => [...p, newItem]);
+        }
+        return prev.slice(0, -1);
+      }
+      return prev;
+    });
+    resetForm();
+  }, [actions, composeScope, resetForm, comment]);
   const isArchivedForUser = (item) => item.archives.some((a) => a.archivedBy.id === currentUser.id);
   const hasUnread = (item) => item.replies.length > 0;
   const hasValidPins = (item) => Array.isArray(item.payload?.pins) && item.payload.pins.length > 0;
@@ -996,11 +1581,20 @@ function useFeedtackState({
     submitting,
     pathname,
     feedbackItems,
+    siteFeedback,
+    pageFeedback,
     loading,
     openThreadId,
     setOpenThreadId,
     replyBody,
     setReplyBody,
+    // Modal state
+    isModalOpen,
+    openModal,
+    closeModal,
+    composeScope,
+    setComposeScope,
+    handleModalSubmit,
     ...actions,
     isArchivedForUser,
     hasUnread,
@@ -1009,7 +1603,7 @@ function useFeedtackState({
 }
 
 // src/react/FeedtackProvider.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function FeedtackProvider({
   children,
   adapter,
@@ -1042,7 +1636,11 @@ function FeedtackProvider({
   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__ */ jsxs3(
+  const handlePlacePin = () => {
+    state.closeModal();
+    state.activatePinMode();
+  };
+  return /* @__PURE__ */ jsxs6(
     FeedtackContext.Provider,
     {
       value: {
@@ -1054,31 +1652,31 @@ function FeedtackProvider({
         selectedColor: state.selectedColor,
         setSelectedColor: disabled ? () => {
         } : state.setSelectedColor,
-        pinPalette: PIN_PALETTE
+        pinPalette: PIN_PALETTE,
+        openModal: disabled ? () => {
+        } : state.openModal,
+        closeModal: disabled ? () => {
+        } : state.closeModal,
+        isModalOpen: disabled ? false : state.isModalOpen
       },
       children: [
         children,
-        !disabled && showButton && /* @__PURE__ */ jsxs3(
+        !disabled && showButton && /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
             className: cx(
               "feedtack-btn",
-              state.isPinModeActive && "active",
+              (state.isPinModeActive || state.isModalOpen) && "active",
               classes.button
             ),
-            onClick: () => state.isPinModeActive ? state.deactivatePinMode() : state.activatePinMode(),
-            title: "Toggle feedback pin mode",
-            "aria-label": "Toggle feedback pin mode",
-            "aria-pressed": state.isPinModeActive,
-            children: [
-              "Drop Pin [Shift+",
-              hotkey.toUpperCase(),
-              "]"
-            ]
+            onClick: () => state.openModal(),
+            title: "Open feedback",
+            "aria-label": "Open feedback",
+            children: "Feedback"
           }
         ),
-        state.isPinModeActive && /* @__PURE__ */ jsx3("div", { className: cx("feedtack-color-picker", classes.colorPicker), children: PIN_PALETTE.map((color) => /* @__PURE__ */ jsx3(
+        state.isPinModeActive && /* @__PURE__ */ jsx6("div", { className: cx("feedtack-color-picker", classes.colorPicker), children: PIN_PALETTE.map((color) => /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -1092,7 +1690,7 @@ function FeedtackProvider({
           },
           color
         )) }),
-        state.pendingPins.map((pin) => /* @__PURE__ */ jsx3(
+        state.pendingPins.map((pin) => /* @__PURE__ */ jsx6(
           "div",
           {
             className: cx("feedtack-pin-marker", classes.pinMarker),
@@ -1105,7 +1703,7 @@ function FeedtackProvider({
           },
           `${pin.x}-${pin.y}-${pin.color}`
         )),
-        state.showForm && /* @__PURE__ */ jsx3(
+        state.showForm && /* @__PURE__ */ jsx6(
           CommentForm,
           {
             comment: state.comment,
@@ -1124,45 +1722,22 @@ function FeedtackProvider({
             onCancel: state.deactivatePinMode
           }
         ),
-        !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];
-          const pos = getPosition(item.payload.id, pin);
-          return /* @__PURE__ */ jsxs3(
-            "button",
-            {
-              type: "button",
-              className: cx(
-                "feedtack-pin-marker",
-                item.resolutions.length > 0 && "feedtack-pin-resolved",
-                classes.pinMarker
-              ),
-              style: {
-                background: pin.color,
-                left: pos.x,
-                top: pos.y,
-                position: "absolute",
-                cursor: "pointer"
-              },
-              onClick: () => state.setOpenThreadId(
-                state.openThreadId === item.payload.id ? null : item.payload.id
-              ),
-              children: [
-                renderPinIcon ? /* @__PURE__ */ jsx3("span", { className: "feedtack-pin-icon", children: renderPinIcon(item) }) : item.resolutions.length > 0 && /* @__PURE__ */ jsx3(
-                  "span",
-                  {
-                    className: "feedtack-pin-icon",
-                    role: "img",
-                    "aria-label": "Resolved",
-                    children: "\u2713"
-                  }
-                ),
-                state.hasUnread(item) && /* @__PURE__ */ jsx3("div", { className: "feedtack-pin-badge" })
-              ]
-            },
-            item.payload.id
-          );
-        }),
-        openItem && /* @__PURE__ */ jsx3(
+        !state.loading && /* @__PURE__ */ jsx6(
+          PinOverlay,
+          {
+            feedbackItems: state.feedbackItems,
+            pathname: state.pathname,
+            isArchivedForUser: state.isArchivedForUser,
+            hasValidPins: state.hasValidPins,
+            hasUnread: state.hasUnread,
+            openThreadId: state.openThreadId,
+            setOpenThreadId: state.setOpenThreadId,
+            getPosition,
+            renderPinIcon,
+            pinMarkerClass: classes.pinMarker
+          }
+        ),
+        openItem && /* @__PURE__ */ jsx6(
           ThreadPanel,
           {
             item: openItem,
@@ -1179,7 +1754,36 @@ function FeedtackProvider({
             className: classes.thread
           }
         ),
-        state.loading && /* @__PURE__ */ jsx3("div", { className: "feedtack-loading", children: "Loading feedback\u2026" })
+        !disabled && /* @__PURE__ */ jsx6(
+          FeedbackModal,
+          {
+            isOpen: state.isModalOpen,
+            onClose: state.closeModal,
+            activeTab: state.composeScope,
+            onTabChange: state.setComposeScope,
+            siteFeedback: state.siteFeedback,
+            pageFeedback: state.pageFeedback,
+            comment: state.comment,
+            onCommentChange: (v) => {
+              state.setComment(v);
+              state.setCommentError(false);
+            },
+            commentError: state.commentError,
+            sentiment: state.sentiment,
+            onSentimentChange: state.setSentiment,
+            submitting: state.submitting,
+            onSubmit: state.handleModalSubmit,
+            onPlacePin: handlePlacePin,
+            replyBody: state.replyBody,
+            onReplyBodyChange: state.setReplyBody,
+            onReply: (id) => state.handleReply(id),
+            onResolve: (id) => state.handleResolve(id),
+            onArchive: (id) => state.handleArchive(id),
+            openThreadId: state.openThreadId,
+            onOpenThread: state.setOpenThreadId
+          }
+        ),
+        state.loading && /* @__PURE__ */ jsx6("div", { className: "feedtack-loading", children: "Loading feedback\u2026" })
       ]
     }
   );

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

@@ -1,4 +1,5 @@
-declare const SCHEMA_VERSION = "1.0.0";
+declare const SCHEMA_VERSION = "2.0.0";
+type FeedtackScope = 'site' | 'page' | 'element';
 interface FeedtackUser {
     /** Unique identifier — used for attribution across pins, replies, resolutions, archives */
     id: string;
@@ -81,17 +82,19 @@ interface FeedtackDeviceMeta {
     platform: string;
     touchEnabled: boolean;
 }
-type FeedtackSentiment = 'satisfied' | 'dissatisfied' | null;
+type FeedtackSentiment = 'good' | 'bad' | null;
 interface FeedtackPayload {
     schemaVersion: string;
     /** Unique feedback ID, e.g. ft_01j... */
     id: string;
     /** ISO 8601 UTC */
     timestamp: string;
+    /** Feedback scope: site-wide, page-level, or element-specific */
+    scope: FeedtackScope;
     submittedBy: FeedtackUser;
     comment: string;
     sentiment: FeedtackSentiment;
-    /** At least one pin required */
+    /** Pins placed on the page. Empty for site/page scope. */
     pins: FeedtackPin[];
     page: FeedtackPageMeta;
     viewport: FeedtackViewportMeta;
@@ -127,6 +130,7 @@ interface FeedtackFilter {
     url?: string;
     pathname?: string;
     userId?: string;
+    scope?: FeedtackScope;
 }
 
 /** Plugin contract — implement this interface to create a custom feedtack backend */
@@ -164,4 +168,4 @@ interface FeedtackTheme {
 /** Maps FeedtackTheme fields to CSS custom properties on #feedtack-root */
 declare function themeToCSS(theme: FeedtackTheme): Record<string, string>;
 
-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 };
+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 FeedtackScope as m, type FeedtackSentiment as n, type FeedtackTheme as o, type FeedtackUser as p, themeToCSS as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feedtack",
-  "version": "0.5.1",
+  "version": "1.0.1",
   "description": "Click anywhere. Drop a pin. Get a payload a developer can act on.",
   "type": "module",
   "license": "MIT",