blocfeed 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 0.4.0 — 2026-02-20
+
+### New features
+
+- **Animated trigger styles** — new `config.ui.triggerStyle` option with 7 selectable styles:
+  - `"classic"` (default) — standard pill button, no framer-motion required
+  - `"dot"` — breathing dot with glow that springs into a pill on hover
+  - `"bubble"` — floating chat-bubble icon with tooltip on hover
+  - `"edge-tab"` — thin vertical tab flush to screen edge that slides out on hover
+  - `"pulse-ring"` — sonar-style pulsing rings around a dot that contracts to a pill on hover
+  - `"minimal"` — text-only "Feedback" with animated underline on hover
+  - `"icon-pop"` — wobbling message icon that pops and reveals text on hover
+- All animated styles include smooth spring-based enter/exit transitions via framer-motion
+- `framer-motion` added as an optional peer dependency (only required for non-classic styles)
+- New `TriggerStyle` type exported from both `blocfeed` and `blocfeed/engine`
+
+### Architecture
+
+- Trigger button extracted from `BlocFeedWidget` into modular components under `src/react/triggers/`
+- Each trigger variant is a self-contained component with its own animations
+- `ClassicTrigger` has zero framer-motion imports for consumers who don't need animations
+
+---
+
 ## 0.3.0 — 2026-02-20
 
 ### New features

package/README.md

@@ -102,9 +102,10 @@ All configuration is passed via the `config` prop on `<BlocFeedWidget>` or `<Blo
       name: "Jane Doe",
     },
 
-    // Widget position & theme
+    // Widget position, theme & trigger style
     ui: {
       position: "bottom-right", // "bottom-left" | "top-right" | "top-left"
+      triggerStyle: "dot",      // "classic" | "bubble" | "edge-tab" | "pulse-ring" | "minimal" | "icon-pop"
       zIndex: 99999,
       theme: {
         accentColor: "#12D393",
@@ -181,6 +182,36 @@ config={{
 
 Options: `"bottom-right"` | `"bottom-left"` | `"top-right"` | `"top-left"`
 
+## Trigger Styles
+
+Customize the trigger button's appearance and animation:
+
+```tsx
+config={{
+  ui: { triggerStyle: "dot" }
+}}
+```
+
+| Style | Description | Requires framer-motion |
+|-------|-------------|----------------------|
+| `"classic"` | Default pill button with colored dot (no animation) | No |
+| `"dot"` | Breathing dot that expands to pill on hover | Yes |
+| `"bubble"` | Floating chat-bubble icon with tooltip on hover | Yes |
+| `"edge-tab"` | Thin tab anchored to screen edge, slides out on hover | Yes |
+| `"pulse-ring"` | Sonar-style pulsing rings around a dot, expands on hover | Yes |
+| `"minimal"` | Text-only "Feedback" with animated underline on hover | Yes |
+| `"icon-pop"` | Wobbling icon that pops and reveals text on hover | Yes |
+
+All animated styles include smooth enter/exit transitions powered by framer-motion's spring physics.
+
+### Installing framer-motion
+
+All styles except `"classic"` require `framer-motion` as a peer dependency:
+
+```bash
+npm install framer-motion
+```
+
 ## Theme Customization
 
 Override the widget's visual appearance via CSS variables:
@@ -368,6 +399,7 @@ import type {
   BlocFeedConfig,
   BlocFeedUser,
   TransportConfig,
+  TriggerStyle,
   WidgetPosition,
   ThemeConfig,
   FeedbackPayload,

package/dist/{controller-olqOZLhp.d.cts → controller-D7kOehzb.d.cts}

@@ -24,6 +24,7 @@ interface TransportConfig {
     backoffMs?: number;
 }
 type WidgetPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
+type TriggerStyle = "classic" | "dot" | "bubble" | "edge-tab" | "pulse-ring" | "minimal" | "icon-pop";
 interface ThemeConfig {
     accentColor?: string;
     panelBackground?: string;
@@ -152,6 +153,8 @@ interface BlocFeedConfig {
         position?: WidgetPosition;
         /** Theme overrides. */
         theme?: ThemeConfig;
+        /** Trigger button animation style. Default: "classic" */
+        triggerStyle?: TriggerStyle;
     };
 }
 interface ScreenshotIntent {
@@ -229,4 +232,4 @@ interface BlocFeedController {
 }
 declare function createBlocFeedController(config: BlocFeedConfig): BlocFeedController;
 
-export { type BlocFeedConfig as B, type CaptureConfig as C, type ElementDescriptor as E, type FeedbackApiResponse as F, type HoverListener as H, type ImageAsset as I, type MaybePromise as M, type PickerConfig as P, type Rect as R, type SubmitResult as S, type ThemeConfig as T, type WidgetPosition as W, type BlocFeedState as a, type BlocFeedController as b, type BlocFeedError as c, type BlocFeedUser as d, type CaptureDiagnostics as e, type CaptureResult as f, type FeedbackPayload as g, type MetadataConfig as h, type MetadataContext as i, type ScreenshotAdapter as j, type ScreenshotAdapterOptions as k, type ScreenshotIntent as l, type ScreenshotMime as m, type SessionPhase as n, type TransportConfig as o, type TransportResult as p, type StateListener as q, createBlocFeedController as r };
+export { type BlocFeedConfig as B, type CaptureConfig as C, type ElementDescriptor as E, type FeedbackApiResponse as F, type HoverListener as H, type ImageAsset as I, type MaybePromise as M, type PickerConfig as P, type Rect as R, type SubmitResult as S, type ThemeConfig as T, type WidgetPosition as W, type BlocFeedState as a, type BlocFeedController as b, type BlocFeedError as c, type BlocFeedUser as d, type CaptureDiagnostics as e, type CaptureResult as f, type FeedbackPayload as g, type MetadataConfig as h, type MetadataContext as i, type ScreenshotAdapter as j, type ScreenshotAdapterOptions as k, type ScreenshotIntent as l, type ScreenshotMime as m, type SessionPhase as n, type TransportConfig as o, type TransportResult as p, type TriggerStyle as q, type StateListener as r, createBlocFeedController as s };

package/dist/{controller-olqOZLhp.d.ts → controller-D7kOehzb.d.ts}

@@ -24,6 +24,7 @@ interface TransportConfig {
     backoffMs?: number;
 }
 type WidgetPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
+type TriggerStyle = "classic" | "dot" | "bubble" | "edge-tab" | "pulse-ring" | "minimal" | "icon-pop";
 interface ThemeConfig {
     accentColor?: string;
     panelBackground?: string;
@@ -152,6 +153,8 @@ interface BlocFeedConfig {
         position?: WidgetPosition;
         /** Theme overrides. */
         theme?: ThemeConfig;
+        /** Trigger button animation style. Default: "classic" */
+        triggerStyle?: TriggerStyle;
     };
 }
 interface ScreenshotIntent {
@@ -229,4 +232,4 @@ interface BlocFeedController {
 }
 declare function createBlocFeedController(config: BlocFeedConfig): BlocFeedController;
 
-export { type BlocFeedConfig as B, type CaptureConfig as C, type ElementDescriptor as E, type FeedbackApiResponse as F, type HoverListener as H, type ImageAsset as I, type MaybePromise as M, type PickerConfig as P, type Rect as R, type SubmitResult as S, type ThemeConfig as T, type WidgetPosition as W, type BlocFeedState as a, type BlocFeedController as b, type BlocFeedError as c, type BlocFeedUser as d, type CaptureDiagnostics as e, type CaptureResult as f, type FeedbackPayload as g, type MetadataConfig as h, type MetadataContext as i, type ScreenshotAdapter as j, type ScreenshotAdapterOptions as k, type ScreenshotIntent as l, type ScreenshotMime as m, type SessionPhase as n, type TransportConfig as o, type TransportResult as p, type StateListener as q, createBlocFeedController as r };
+export { type BlocFeedConfig as B, type CaptureConfig as C, type ElementDescriptor as E, type FeedbackApiResponse as F, type HoverListener as H, type ImageAsset as I, type MaybePromise as M, type PickerConfig as P, type Rect as R, type SubmitResult as S, type ThemeConfig as T, type WidgetPosition as W, type BlocFeedState as a, type BlocFeedController as b, type BlocFeedError as c, type BlocFeedUser as d, type CaptureDiagnostics as e, type CaptureResult as f, type FeedbackPayload as g, type MetadataConfig as h, type MetadataContext as i, type ScreenshotAdapter as j, type ScreenshotAdapterOptions as k, type ScreenshotIntent as l, type ScreenshotMime as m, type SessionPhase as n, type TransportConfig as o, type TransportResult as p, type TriggerStyle as q, type StateListener as r, createBlocFeedController as s };

package/dist/engine.cjs

@@ -1 +1 @@
-'use strict';var chunkJLPJP7DD_cjs=require('./chunk-JLPJP7DD.cjs');function c(o){if(o?.aborted)throw new Error("Aborted")}async function S(o){return await new Promise((t,e)=>{let r=new Image;r.onload=()=>t({width:r.naturalWidth,height:r.naturalHeight}),r.onerror=()=>e(new Error("Failed to load generated screenshot")),r.src=o;})}async function l(o,t){let{width:e,height:r}=await S(o);return {dataUrl:o,mime:t,width:e,height:r}}function x(o){return {async captureElement(t,e){if(!chunkJLPJP7DD_cjs.a())throw new Error("captureElement can only run in the browser");c(e.signal);let r={scale:e.pixelRatio},n=e.mime==="image/jpeg"?await o.domToJpeg(t,{...r,quality:e.quality??.92}):await o.domToPng(t,r);return c(e.signal),await l(n,e.mime)},async captureFullPage(t){if(!chunkJLPJP7DD_cjs.a())throw new Error("captureFullPage can only run in the browser");c(t.signal);let e=document.documentElement,r=Math.max(e.scrollWidth,e.clientWidth),n=Math.max(e.scrollHeight,e.clientHeight),a=Math.min(1,t.maxDimension/Math.max(r,n)),s={width:Math.max(1,Math.round(r*a)),height:Math.max(1,Math.round(n*a)),scale:t.pixelRatio},i=t.mime==="image/jpeg"?await o.domToJpeg(e,{...s,quality:t.quality??.92}):await o.domToPng(e,s);return c(t.signal),await l(i,t.mime)}}}function y(o){let[t,e]=o.split(",",2);if(!t||!e)throw new Error("Invalid data URL");let n=/data:(.*?);base64/.exec(t)?.[1]||"application/octet-stream",a=atob(e),s=new Uint8Array(a.length);for(let i=0;i<a.length;i+=1)s[i]=a.charCodeAt(i);return new Blob([s],{type:n})}Object.defineProperty(exports,"clearQueue",{enumerable:true,get:function(){return chunkJLPJP7DD_cjs.h}});Object.defineProperty(exports,"collectMetadata",{enumerable:true,get:function(){return chunkJLPJP7DD_cjs.e}});Object.defineProperty(exports,"createBlocFeedController",{enumerable:true,get:function(){return chunkJLPJP7DD_cjs.j}});Object.defineProperty(exports,"createHtmlToImageAdapter",{enumerable:true,get:function(){return chunkJLPJP7DD_cjs.c}});Object.defineProperty(exports,"dequeueAll",{enumerable:true,get:function(){return chunkJLPJP7DD_cjs.g}});Object.defineProperty(exports,"enqueue",{enumerable:true,get:function(){return chunkJLPJP7DD_cjs.f}});Object.defineProperty(exports,"getQueueSize",{enumerable:true,get:function(){return chunkJLPJP7DD_cjs.i}});Object.defineProperty(exports,"runCapture",{enumerable:true,get:function(){return chunkJLPJP7DD_cjs.d}});exports.createModernScreenshotAdapter=x;exports.dataUrlToBlob=y;
+'use strict';var chunkJLPJP7DD_cjs=require('./chunk-JLPJP7DD.cjs');function c(o){if(o?.aborted)throw new Error("Aborted")}async function A(o){return await new Promise((t,e)=>{let r=new Image;r.onload=()=>t({width:r.naturalWidth,height:r.naturalHeight}),r.onerror=()=>e(new Error("Failed to load generated screenshot")),r.src=o;})}async function l(o,t){let{width:e,height:r}=await A(o);return {dataUrl:o,mime:t,width:e,height:r}}function x(o){return {async captureElement(t,e){if(!chunkJLPJP7DD_cjs.a())throw new Error("captureElement can only run in the browser");c(e.signal);let r={scale:e.pixelRatio},n=e.mime==="image/jpeg"?await o.domToJpeg(t,{...r,quality:e.quality??.92}):await o.domToPng(t,r);return c(e.signal),await l(n,e.mime)},async captureFullPage(t){if(!chunkJLPJP7DD_cjs.a())throw new Error("captureFullPage can only run in the browser");c(t.signal);let e=document.documentElement,r=Math.max(e.scrollWidth,e.clientWidth),n=Math.max(e.scrollHeight,e.clientHeight),a=Math.min(1,t.maxDimension/Math.max(r,n)),s={width:Math.max(1,Math.round(r*a)),height:Math.max(1,Math.round(n*a)),scale:t.pixelRatio},i=t.mime==="image/jpeg"?await o.domToJpeg(e,{...s,quality:t.quality??.92}):await o.domToPng(e,s);return c(t.signal),await l(i,t.mime)}}}function b(o){let[t,e]=o.split(",",2);if(!t||!e)throw new Error("Invalid data URL");let n=/data:(.*?);base64/.exec(t)?.[1]||"application/octet-stream",a=atob(e),s=new Uint8Array(a.length);for(let i=0;i<a.length;i+=1)s[i]=a.charCodeAt(i);return new Blob([s],{type:n})}Object.defineProperty(exports,"clearQueue",{enumerable:true,get:function(){return chunkJLPJP7DD_cjs.h}});Object.defineProperty(exports,"collectMetadata",{enumerable:true,get:function(){return chunkJLPJP7DD_cjs.e}});Object.defineProperty(exports,"createBlocFeedController",{enumerable:true,get:function(){return chunkJLPJP7DD_cjs.j}});Object.defineProperty(exports,"createHtmlToImageAdapter",{enumerable:true,get:function(){return chunkJLPJP7DD_cjs.c}});Object.defineProperty(exports,"dequeueAll",{enumerable:true,get:function(){return chunkJLPJP7DD_cjs.g}});Object.defineProperty(exports,"enqueue",{enumerable:true,get:function(){return chunkJLPJP7DD_cjs.f}});Object.defineProperty(exports,"getQueueSize",{enumerable:true,get:function(){return chunkJLPJP7DD_cjs.i}});Object.defineProperty(exports,"runCapture",{enumerable:true,get:function(){return chunkJLPJP7DD_cjs.d}});exports.createModernScreenshotAdapter=x;exports.dataUrlToBlob=b;

package/dist/engine.d.cts

@@ -1,5 +1,5 @@
-import { j as ScreenshotAdapter, C as CaptureConfig, f as CaptureResult, h as MetadataConfig, i as MetadataContext, d as BlocFeedUser, g as FeedbackPayload } from './controller-olqOZLhp.cjs';
-export { B as BlocFeedConfig, b as BlocFeedController, c as BlocFeedError, a as BlocFeedState, E as ElementDescriptor, F as FeedbackApiResponse, H as HoverListener, I as ImageAsset, R as Rect, k as ScreenshotAdapterOptions, l as ScreenshotIntent, m as ScreenshotMime, n as SessionPhase, q as StateListener, S as SubmitResult, T as ThemeConfig, o as TransportConfig, W as WidgetPosition, r as createBlocFeedController } from './controller-olqOZLhp.cjs';
+import { j as ScreenshotAdapter, C as CaptureConfig, f as CaptureResult, h as MetadataConfig, i as MetadataContext, d as BlocFeedUser, g as FeedbackPayload } from './controller-D7kOehzb.cjs';
+export { B as BlocFeedConfig, b as BlocFeedController, c as BlocFeedError, a as BlocFeedState, E as ElementDescriptor, F as FeedbackApiResponse, H as HoverListener, I as ImageAsset, R as Rect, k as ScreenshotAdapterOptions, l as ScreenshotIntent, m as ScreenshotMime, n as SessionPhase, r as StateListener, S as SubmitResult, T as ThemeConfig, o as TransportConfig, q as TriggerStyle, W as WidgetPosition, s as createBlocFeedController } from './controller-D7kOehzb.cjs';
 
 declare function createHtmlToImageAdapter(): ScreenshotAdapter;
 

package/dist/engine.d.ts

@@ -1,5 +1,5 @@
-import { j as ScreenshotAdapter, C as CaptureConfig, f as CaptureResult, h as MetadataConfig, i as MetadataContext, d as BlocFeedUser, g as FeedbackPayload } from './controller-olqOZLhp.js';
-export { B as BlocFeedConfig, b as BlocFeedController, c as BlocFeedError, a as BlocFeedState, E as ElementDescriptor, F as FeedbackApiResponse, H as HoverListener, I as ImageAsset, R as Rect, k as ScreenshotAdapterOptions, l as ScreenshotIntent, m as ScreenshotMime, n as SessionPhase, q as StateListener, S as SubmitResult, T as ThemeConfig, o as TransportConfig, W as WidgetPosition, r as createBlocFeedController } from './controller-olqOZLhp.js';
+import { j as ScreenshotAdapter, C as CaptureConfig, f as CaptureResult, h as MetadataConfig, i as MetadataContext, d as BlocFeedUser, g as FeedbackPayload } from './controller-D7kOehzb.js';
+export { B as BlocFeedConfig, b as BlocFeedController, c as BlocFeedError, a as BlocFeedState, E as ElementDescriptor, F as FeedbackApiResponse, H as HoverListener, I as ImageAsset, R as Rect, k as ScreenshotAdapterOptions, l as ScreenshotIntent, m as ScreenshotMime, n as SessionPhase, r as StateListener, S as SubmitResult, T as ThemeConfig, o as TransportConfig, q as TriggerStyle, W as WidgetPosition, s as createBlocFeedController } from './controller-D7kOehzb.js';
 
 declare function createHtmlToImageAdapter(): ScreenshotAdapter;
 

package/dist/engine.js

@@ -1 +1 @@
-import {a}from'./chunk-FMFONS5S.js';export{h as clearQueue,e as collectMetadata,j as createBlocFeedController,c as createHtmlToImageAdapter,g as dequeueAll,f as enqueue,i as getQueueSize,d as runCapture}from'./chunk-FMFONS5S.js';function c(o){if(o?.aborted)throw new Error("Aborted")}async function S(o){return await new Promise((t,e)=>{let r=new Image;r.onload=()=>t({width:r.naturalWidth,height:r.naturalHeight}),r.onerror=()=>e(new Error("Failed to load generated screenshot")),r.src=o;})}async function l(o,t){let{width:e,height:r}=await S(o);return {dataUrl:o,mime:t,width:e,height:r}}function x(o){return {async captureElement(t,e){if(!a())throw new Error("captureElement can only run in the browser");c(e.signal);let r={scale:e.pixelRatio},n=e.mime==="image/jpeg"?await o.domToJpeg(t,{...r,quality:e.quality??.92}):await o.domToPng(t,r);return c(e.signal),await l(n,e.mime)},async captureFullPage(t){if(!a())throw new Error("captureFullPage can only run in the browser");c(t.signal);let e=document.documentElement,r=Math.max(e.scrollWidth,e.clientWidth),n=Math.max(e.scrollHeight,e.clientHeight),a$1=Math.min(1,t.maxDimension/Math.max(r,n)),s={width:Math.max(1,Math.round(r*a$1)),height:Math.max(1,Math.round(n*a$1)),scale:t.pixelRatio},i=t.mime==="image/jpeg"?await o.domToJpeg(e,{...s,quality:t.quality??.92}):await o.domToPng(e,s);return c(t.signal),await l(i,t.mime)}}}function y(o){let[t,e]=o.split(",",2);if(!t||!e)throw new Error("Invalid data URL");let n=/data:(.*?);base64/.exec(t)?.[1]||"application/octet-stream",a=atob(e),s=new Uint8Array(a.length);for(let i=0;i<a.length;i+=1)s[i]=a.charCodeAt(i);return new Blob([s],{type:n})}export{x as createModernScreenshotAdapter,y as dataUrlToBlob};
+import {a}from'./chunk-FMFONS5S.js';export{h as clearQueue,e as collectMetadata,j as createBlocFeedController,c as createHtmlToImageAdapter,g as dequeueAll,f as enqueue,i as getQueueSize,d as runCapture}from'./chunk-FMFONS5S.js';function c(o){if(o?.aborted)throw new Error("Aborted")}async function A(o){return await new Promise((t,e)=>{let r=new Image;r.onload=()=>t({width:r.naturalWidth,height:r.naturalHeight}),r.onerror=()=>e(new Error("Failed to load generated screenshot")),r.src=o;})}async function l(o,t){let{width:e,height:r}=await A(o);return {dataUrl:o,mime:t,width:e,height:r}}function x(o){return {async captureElement(t,e){if(!a())throw new Error("captureElement can only run in the browser");c(e.signal);let r={scale:e.pixelRatio},n=e.mime==="image/jpeg"?await o.domToJpeg(t,{...r,quality:e.quality??.92}):await o.domToPng(t,r);return c(e.signal),await l(n,e.mime)},async captureFullPage(t){if(!a())throw new Error("captureFullPage can only run in the browser");c(t.signal);let e=document.documentElement,r=Math.max(e.scrollWidth,e.clientWidth),n=Math.max(e.scrollHeight,e.clientHeight),a$1=Math.min(1,t.maxDimension/Math.max(r,n)),s={width:Math.max(1,Math.round(r*a$1)),height:Math.max(1,Math.round(n*a$1)),scale:t.pixelRatio},i=t.mime==="image/jpeg"?await o.domToJpeg(e,{...s,quality:t.quality??.92}):await o.domToPng(e,s);return c(t.signal),await l(i,t.mime)}}}function b(o){let[t,e]=o.split(",",2);if(!t||!e)throw new Error("Invalid data URL");let n=/data:(.*?);base64/.exec(t)?.[1]||"application/octet-stream",a=atob(e),s=new Uint8Array(a.length);for(let i=0;i<a.length;i+=1)s[i]=a.charCodeAt(i);return new Blob([s],{type:n})}export{x as createModernScreenshotAdapter,b as dataUrlToBlob};

package/dist/main.cjs

@@ -1,5 +1,5 @@
 "use client";
-'use strict';var chunkJLPJP7DD_cjs=require('./chunk-JLPJP7DD.cjs'),react=require('react'),jsxRuntime=require('react/jsx-runtime'),reactDom=require('react-dom');var h=react.createContext(null);function k(t){let e=react.useMemo(()=>chunkJLPJP7DD_cjs.j({...t.config??{},blocfeed_id:t.blocfeed_id}),[]),[i,c]=react.useState(()=>e.getState());return react.useEffect(()=>e.subscribe(c),[e]),react.useEffect(()=>e.setConfig({...t.config??{},blocfeed_id:t.blocfeed_id}),[e,t.config,t.blocfeed_id]),react.useEffect(()=>()=>e.destroy(),[e]),jsxRuntime.jsx(h.Provider,{value:{controller:e,state:i},children:t.children})}var L="blocfeed-styles-v1",G=`
+'use strict';var chunkJLPJP7DD_cjs=require('./chunk-JLPJP7DD.cjs'),react=require('react'),jsxRuntime=require('react/jsx-runtime'),reactDom=require('react-dom'),framerMotion=require('framer-motion');var k=react.createContext(null);function M(t){let e=react.useMemo(()=>chunkJLPJP7DD_cjs.j({...t.config??{},blocfeed_id:t.blocfeed_id}),[]),[i,r]=react.useState(()=>e.getState());return react.useEffect(()=>e.subscribe(r),[e]),react.useEffect(()=>e.setConfig({...t.config??{},blocfeed_id:t.blocfeed_id}),[e,t.config,t.blocfeed_id]),react.useEffect(()=>()=>e.destroy(),[e]),jsxRuntime.jsx(k.Provider,{value:{controller:e,state:i},children:t.children})}var Y="blocfeed-styles-v1",Se=`
 :where([data-blocfeed-ui-root]),
 :where([data-blocfeed-ui-root]) * {
   box-sizing: border-box;
@@ -290,6 +290,87 @@
   50% { opacity: 1; transform: scale(1.2); }
 }
 
+/* ------------------------------------------------------------------ */
+/* Trigger variant: edge-tab                                          */
+/* ------------------------------------------------------------------ */
+
+:where([data-blocfeed-ui-root]) .bf-trigger-edge {
+  position: fixed;
+  z-index: var(--bf-z);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--bf-border);
+  background: var(--bf-panel-bg);
+  color: var(--bf-panel-fg);
+  box-shadow: var(--bf-shadow);
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  overflow: hidden;
+  padding: 0;
+  font-family: var(--bf-font);
+  font-size: 12px;
+  letter-spacing: 0.5px;
+}
+
+:where([data-blocfeed-ui-root]) .bf-trigger-edge:focus-visible {
+  outline: 2px solid var(--bf-accent);
+  outline-offset: 2px;
+}
+
+:where([data-blocfeed-ui-root]) .bf-trigger-edge-left {
+  left: 0;
+  right: auto;
+  border-radius: 0 6px 6px 0;
+  border-left: none;
+}
+
+:where([data-blocfeed-ui-root]) .bf-trigger-edge-right {
+  right: 0;
+  left: auto;
+  border-radius: 6px 0 0 6px;
+  border-right: none;
+}
+
+/* ------------------------------------------------------------------ */
+/* Trigger variant: minimal                                           */
+/* ------------------------------------------------------------------ */
+
+:where([data-blocfeed-ui-root]) .bf-trigger-minimal {
+  position: fixed;
+  right: 18px;
+  bottom: 18px;
+  z-index: var(--bf-z);
+  display: inline-flex;
+  align-items: center;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 8px 4px;
+  font-family: var(--bf-font);
+  font-size: 13px;
+  color: var(--bf-panel-fg);
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:where([data-blocfeed-ui-root]) .bf-trigger-minimal.bf-trigger-bl {
+  left: 18px; bottom: 18px; right: auto; top: auto;
+}
+:where([data-blocfeed-ui-root]) .bf-trigger-minimal.bf-trigger-tr {
+  right: 18px; top: 18px; bottom: auto; left: auto;
+}
+:where([data-blocfeed-ui-root]) .bf-trigger-minimal.bf-trigger-tl {
+  left: 18px; top: 18px; right: auto; bottom: auto;
+}
+
+:where([data-blocfeed-ui-root]) .bf-trigger-minimal:focus-visible {
+  outline: 2px solid var(--bf-accent);
+  outline-offset: 2px;
+}
+
 /* ------------------------------------------------------------------ */
 /* Screen reader only                                                 */
 /* ------------------------------------------------------------------ */
@@ -305,4 +386,5 @@
   white-space: nowrap;
   border: 0;
 }
-`;function W(){if(!chunkJLPJP7DD_cjs.a()||document.getElementById(L))return;let t=document.createElement("style");t.id=L,t.textContent=G,document.head.appendChild(t);}function B(){let t=react.useContext(h);if(!t)throw new Error("useBlocFeed must be used within a <BlocFeedProvider />");return {state:t.state,controller:t.controller,start:t.controller.start,stop:t.controller.stop,clearSelection:t.controller.clearSelection,submit:t.controller.submit}}function I(t,e,i){return Math.max(e,Math.min(i,t))}function Z(t,e,i="bottom-right"){let o=window.innerWidth,s=window.innerHeight,a;a=I(t.x,12,Math.max(12,o-e-12));let d=t.y+t.height+12,x=Math.max(12,t.y-240);return {top:d+240<=s?d:x,left:a}}function ee(t){switch(t){case "bottom-left":return "bf-trigger bf-trigger-bl";case "top-right":return "bf-trigger bf-trigger-tr";case "top-left":return "bf-trigger bf-trigger-tl";default:return "bf-trigger"}}function te(t){let{rect:e}=t,i={left:`${e.x}px`,top:`${e.y}px`,width:`${Math.max(0,e.width)}px`,height:`${Math.max(0,e.height)}px`};return jsxRuntime.jsx("div",{className:"bf-highlight",style:i,"aria-hidden":"true"})}function oe(t){let e=react.useRef(null);return react.useEffect(()=>{if(!t||!e.current)return;e.current.querySelector(".bf-textarea")?.focus();let c=o=>{if(o.key!=="Tab"||!e.current)return;let s=e.current.querySelectorAll('button:not([disabled]), textarea:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])');if(s.length===0)return;let a=s[0],d=s[s.length-1];o.shiftKey&&document.activeElement===a?(o.preventDefault(),d.focus()):!o.shiftKey&&document.activeElement===d&&(o.preventDefault(),a.focus());};return document.addEventListener("keydown",c,{capture:true}),()=>document.removeEventListener("keydown",c,{capture:true})},[t]),e}function re(t){let{state:e,controller:i,start:c,stop:o,clearSelection:s,submit:a}=B(),d=t.config.ui?.position,[x,S]=react.useState(null),[p,P]=react.useState(""),[v,E]=react.useState(t.config.capture?.element??true),[y,R]=react.useState(t.config.capture?.fullPage??false),[K,N]=react.useState(null),z=e.phase==="review"||e.phase==="capturing"||e.phase==="submitting"||e.phase==="error"||e.phase==="success",j=oe(z);react.useEffect(()=>i.subscribeHover(S),[i]),react.useEffect(()=>{let n=i.__unsafeGetSelectedElement();if(!n||e.phase==="idle"||e.phase==="picking"){N(null);return}let M=()=>{N(chunkJLPJP7DD_cjs.b(n.getBoundingClientRect()));};M();let m=()=>M();return window.addEventListener("scroll",m,{capture:true,passive:true}),window.addEventListener("resize",m,{passive:true}),()=>{window.removeEventListener("scroll",m,{capture:true}),window.removeEventListener("resize",m);}},[i,e.phase,e.selection?.selector]),react.useEffect(()=>{e.phase==="review"&&(P(""),E(t.config.capture?.element??true),R(t.config.capture?.fullPage??false));},[e.phase,e.selection?.selector,t.config.capture?.element,t.config.capture?.fullPage]),react.useEffect(()=>{if(e.phase!=="success")return;let n=window.setTimeout(()=>o(),1200);return ()=>window.clearTimeout(n)},[e.phase,o]);let f=e.phase==="capturing"||e.phase==="submitting",b=e.phase==="picking"?x?.rect??null:K??e.selection?.rect??null,w=react.useMemo(()=>b?Z(b,360,d):null,[b?.x,b?.y,b?.width,b?.height,d]),T=e.lastError?.message,C=react.useCallback(()=>{a(p,{capture:{element:v,fullPage:y}});},[a,p,v,y]),O=react.useCallback(n=>{(n.metaKey||n.ctrlKey)&&n.key==="Enter"&&p.trim().length>0&&!f&&(n.preventDefault(),C());},[C,p,f]);return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[e.phase==="idle"&&jsxRuntime.jsxs("button",{className:ee(d),type:"button",onClick:()=>c(),"aria-label":"Give feedback",children:[jsxRuntime.jsx("span",{className:"bf-dot","aria-hidden":"true"}),"Feedback"]}),e.phase!=="idle"&&jsxRuntime.jsxs("div",{className:"bf-overlay",role:"presentation",children:[e.phase!=="picking"&&jsxRuntime.jsx("div",{className:"bf-blocker",role:"presentation",onClick:()=>o()}),b&&jsxRuntime.jsx(te,{rect:b}),e.phase==="picking"&&jsxRuntime.jsxs("div",{className:"bf-hint",role:"status","aria-live":"polite",children:[jsxRuntime.jsxs("p",{id:"bf-hint-text",children:["Click an element to attach your feedback. Press ",jsxRuntime.jsx("strong",{children:"Esc"})," to cancel."]}),jsxRuntime.jsx("button",{type:"button",className:"bf-btn",onClick:()=>o(),"aria-label":"Cancel element selection",children:"Cancel"})]}),z&&w&&jsxRuntime.jsxs("div",{ref:j,className:"bf-panel",style:{left:w.left,top:w.top},role:"dialog","aria-modal":"true","aria-label":"Feedback form",children:[jsxRuntime.jsxs("div",{className:"bf-panelHeader",children:[jsxRuntime.jsx("div",{className:"bf-title",id:"bf-panel-title",children:"Feedback"}),jsxRuntime.jsxs("div",{className:"bf-row",style:{justifyContent:"flex-end"},children:[jsxRuntime.jsx("button",{type:"button",className:"bf-btn",onClick:()=>s(),disabled:f,"aria-label":"Re-pick element",children:"Re-pick"}),jsxRuntime.jsx("button",{type:"button",className:"bf-btn",onClick:()=>o(),disabled:f,"aria-label":"Close feedback form",children:"Close"})]})]}),jsxRuntime.jsxs("div",{className:"bf-panelBody",children:[jsxRuntime.jsx("textarea",{className:"bf-textarea",placeholder:"What's happening? What did you expect?",value:p,onChange:n=>P(n.target.value),onKeyDown:O,disabled:f,"aria-label":"Feedback message"}),jsxRuntime.jsxs("div",{className:"bf-row",role:"group","aria-label":"Screenshot options",children:[jsxRuntime.jsxs("label",{children:[jsxRuntime.jsx("input",{type:"checkbox",checked:v,onChange:n=>E(n.target.checked),disabled:f}),"Screenshot element"]}),jsxRuntime.jsxs("label",{children:[jsxRuntime.jsx("input",{type:"checkbox",checked:y,onChange:n=>R(n.target.checked),disabled:f}),"Full page"]})]}),e.phase==="capturing"&&jsxRuntime.jsxs("div",{className:"bf-status",role:"status","aria-live":"polite",children:[jsxRuntime.jsx("span",{className:"bf-spinner","aria-hidden":"true"}),"Capturing screenshots\u2026"]}),e.phase==="submitting"&&jsxRuntime.jsxs("div",{className:"bf-status",role:"status","aria-live":"polite",children:[jsxRuntime.jsx("span",{className:"bf-spinner","aria-hidden":"true"}),"Submitting\u2026"]}),e.phase==="success"&&jsxRuntime.jsx("div",{className:"bf-status",role:"status","aria-live":"polite",children:"Sent. Thank you!"}),e.phase==="error"&&T&&jsxRuntime.jsx("div",{className:"bf-error",role:"alert",children:T}),jsxRuntime.jsxs("div",{className:"bf-actions",children:[jsxRuntime.jsx("button",{type:"button",className:"bf-btn",onClick:()=>o(),disabled:f,"aria-label":"Cancel feedback",children:"Cancel"}),jsxRuntime.jsx("button",{type:"button",className:"bf-btn bf-btnPrimary",onClick:C,disabled:f||p.trim().length===0,"aria-label":"Send feedback",children:"Send"})]})]})]})]}),e.phase==="success"&&jsxRuntime.jsx("div",{className:"bf-toast",role:"status","aria-live":"polite",children:"Feedback sent"})]})}function ae(t){let e={...t.config??{},blocfeed_id:t.blocfeed_id},[i,c]=react.useState(null);return react.useEffect(()=>{W();let o=document.createElement("div");o.setAttribute("data-blocfeed-ui-root","true"),o.setAttribute("data-blocfeed-ui","true");let s=e.ui?.zIndex;typeof s=="number"&&o.style.setProperty("--bf-z",String(s));let a=e.ui?.theme;return a&&(a.accentColor&&o.style.setProperty("--bf-accent",a.accentColor),a.panelBackground&&o.style.setProperty("--bf-panel-bg",a.panelBackground),a.panelForeground&&o.style.setProperty("--bf-panel-fg",a.panelForeground),a.fontFamily&&o.style.setProperty("--bf-font",a.fontFamily)),document.body.appendChild(o),c(o),()=>{o.remove(),c(null);}},[e.ui?.zIndex,e.ui?.theme?.accentColor,e.ui?.theme?.panelBackground,e.ui?.theme?.panelForeground,e.ui?.theme?.fontFamily]),i?reactDom.createPortal(jsxRuntime.jsx(k,{blocfeed_id:e.blocfeed_id,...t.config?{config:t.config}:{},children:jsxRuntime.jsx(re,{config:e})}),i):null}exports.BlocFeedProvider=k;exports.BlocFeedWidget=ae;exports.useBlocFeed=B;
+`;function J(){if(!chunkJLPJP7DD_cjs.a()||document.getElementById(Y))return;let t=document.createElement("style");t.id=Y,t.textContent=Se,document.head.appendChild(t);}function A(){let t=react.useContext(k);if(!t)throw new Error("useBlocFeed must be used within a <BlocFeedProvider />");return {state:t.state,controller:t.controller,start:t.controller.start,stop:t.controller.stop,clearSelection:t.controller.clearSelection,submit:t.controller.submit}}function c(t){switch(t){case "bottom-left":return "bf-trigger bf-trigger-bl";case "top-right":return "bf-trigger bf-trigger-tr";case "top-left":return "bf-trigger bf-trigger-tl";default:return "bf-trigger"}}function Q({position:t,onClick:e,isVisible:i}){return i?jsxRuntime.jsxs("button",{className:c(t),type:"button",onClick:e,"aria-label":"Give feedback",children:[jsxRuntime.jsx("span",{className:"bf-dot","aria-hidden":"true"}),"Feedback"]}):null}function ee({position:t,onClick:e,isVisible:i}){let[r,o]=react.useState(false);return jsxRuntime.jsx(framerMotion.AnimatePresence,{children:i&&jsxRuntime.jsxs(framerMotion.motion.button,{className:c(t),type:"button",onClick:e,onMouseEnter:()=>o(true),onMouseLeave:()=>o(false),"aria-label":"Give feedback",initial:{scale:0,opacity:0},animate:{scale:1,opacity:1,padding:r?"10px 16px":"10px 10px"},exit:{scale:0,opacity:0},transition:{type:"spring",stiffness:500,damping:28},whileTap:{scale:.92},style:{overflow:"hidden"},children:[jsxRuntime.jsx(framerMotion.motion.span,{className:"bf-dot","aria-hidden":"true",animate:{scale:r?1:[1,1.2,1],boxShadow:r?"0 0 0 4px rgba(99, 102, 241, 0.18)":["0 0 0 4px rgba(99, 102, 241, 0.18)","0 0 0 8px rgba(99, 102, 241, 0.28)","0 0 0 4px rgba(99, 102, 241, 0.18)"]},transition:r?{type:"spring",stiffness:400,damping:20}:{duration:2,repeat:1/0,ease:"easeInOut"}}),jsxRuntime.jsx(framerMotion.AnimatePresence,{children:r&&jsxRuntime.jsx(framerMotion.motion.span,{initial:{opacity:0,width:0,x:-8},animate:{opacity:1,width:"auto",x:0},exit:{opacity:0,width:0,x:-8},transition:{type:"spring",stiffness:400,damping:25},style:{whiteSpace:"nowrap",overflow:"hidden"},children:"Feedback"})}),jsxRuntime.jsx(framerMotion.motion.span,{"aria-hidden":"true",style:{position:"absolute",inset:0,borderRadius:"inherit",border:"2px solid var(--bf-accent)",pointerEvents:"none"},initial:false,animate:{scale:1,opacity:0},whileTap:{scale:2.5,opacity:[.6,0]},transition:{duration:.4}})]})})}function te({size:t=14}){return jsxRuntime.jsx("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:jsxRuntime.jsx("path",{d:"M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function oe({size:t=16}){return jsxRuntime.jsxs("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[jsxRuntime.jsx("path",{d:"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),jsxRuntime.jsx("path",{d:"M22 6l-10 7L2 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]})}function ie({position:t,onClick:e,isVisible:i}){let[r,o]=react.useState(false);return jsxRuntime.jsx(framerMotion.AnimatePresence,{children:i&&jsxRuntime.jsxs(framerMotion.motion.div,{style:{position:"fixed",zIndex:"var(--bf-z)"},className:c(t),initial:{scale:0,opacity:0},animate:{scale:1,opacity:1},exit:{y:12,opacity:0,scale:.8},transition:{type:"spring",stiffness:400,damping:25},onMouseEnter:()=>o(true),onMouseLeave:()=>o(false),children:[jsxRuntime.jsx(framerMotion.AnimatePresence,{children:r&&jsxRuntime.jsx(framerMotion.motion.div,{initial:{opacity:0,y:6,scale:.95},animate:{opacity:1,y:0,scale:1},exit:{opacity:0,y:6,scale:.95},transition:{type:"spring",stiffness:500,damping:30},style:{position:"absolute",bottom:"calc(100% + 8px)",left:"50%",transform:"translateX(-50%)",padding:"6px 12px",borderRadius:"8px",background:"var(--bf-panel-bg)",border:"1px solid var(--bf-border)",boxShadow:"var(--bf-shadow)",whiteSpace:"nowrap",fontSize:"12px",color:"var(--bf-panel-fg)",pointerEvents:"none"},children:"Got feedback?"})}),jsxRuntime.jsx(framerMotion.motion.button,{type:"button",onClick:e,"aria-label":"Give feedback",style:{display:"flex",alignItems:"center",justifyContent:"center",width:"40px",height:"40px",borderRadius:"50%",border:"1px solid var(--bf-border)",background:"var(--bf-panel-bg)",color:"var(--bf-panel-fg)",boxShadow:"var(--bf-shadow)",cursor:"pointer",padding:0},animate:{y:[0,-3,0]},transition:{y:{duration:3,repeat:1/0,ease:"easeInOut"}},whileHover:{scale:1.1,borderColor:"var(--bf-accent)"},whileTap:{scale:.9},children:jsxRuntime.jsx(te,{size:16})})]})})}function ne(t){return t==="bottom-left"||t==="top-left"}function We(t){return `bf-trigger-edge ${ne(t)?"bf-trigger-edge-left":"bf-trigger-edge-right"}`}function se({position:t,onClick:e,isVisible:i}){let[r,o]=react.useState(false),l=ne(t);return jsxRuntime.jsx(framerMotion.AnimatePresence,{children:i&&jsxRuntime.jsxs(framerMotion.motion.button,{className:We(t),type:"button",onClick:e,onMouseEnter:()=>o(true),onMouseLeave:()=>o(false),"aria-label":"Give feedback",initial:{opacity:0,width:0},animate:{opacity:1,width:r?140:22,height:r?40:90},exit:{width:0,opacity:0},transition:{type:"spring",stiffness:350,damping:30},whileTap:{scale:.97},style:{top:"50%",translateY:"-50%"},children:[jsxRuntime.jsxs(framerMotion.motion.span,{animate:{rotate:r?0:l?-90:90,opacity:r?1:.6},transition:{type:"spring",stiffness:300,damping:25},style:{display:"flex",alignItems:"center",gap:"8px",whiteSpace:"nowrap",fontSize:"12px",letterSpacing:"0.5px",textTransform:"uppercase"},children:[r&&jsxRuntime.jsx(framerMotion.motion.span,{initial:{scale:0},animate:{scale:1},transition:{type:"spring",stiffness:500,damping:20},style:{width:"6px",height:"6px",borderRadius:"50%",background:"var(--bf-accent)",flexShrink:0}}),"Feedback"]}),jsxRuntime.jsx(framerMotion.motion.span,{"aria-hidden":"true",animate:{opacity:r?1:0},style:{position:"absolute",top:0,bottom:0,[l?"left":"right"]:0,width:"2px",background:"var(--bf-accent)"}})]})})}function de({delay:t,hovered:e}){return jsxRuntime.jsx(framerMotion.motion.span,{"aria-hidden":"true",style:{position:"absolute",width:"12px",height:"12px",borderRadius:"50%",border:"2px solid var(--bf-accent)",pointerEvents:"none",left:"50%",top:"50%",x:"-50%",y:"-50%"},animate:e?{scale:1.3,opacity:.6}:{scale:[1,2.5],opacity:[.5,0]},transition:e?{type:"spring",stiffness:300,damping:20}:{duration:2,repeat:1/0,delay:t,ease:"easeOut"}})}function pe({position:t,onClick:e,isVisible:i}){let[r,o]=react.useState(false);return jsxRuntime.jsx(framerMotion.AnimatePresence,{children:i&&jsxRuntime.jsxs(framerMotion.motion.button,{className:c(t),type:"button",onClick:e,onMouseEnter:()=>o(true),onMouseLeave:()=>o(false),"aria-label":"Give feedback",initial:{scale:0,opacity:0},animate:{scale:1,opacity:1,padding:r?"10px 16px":"10px 10px"},exit:{scale:0,opacity:0},transition:{type:"spring",stiffness:400,damping:25},whileTap:{scale:.92},style:{position:"relative",overflow:"visible"},children:[jsxRuntime.jsxs("div",{style:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none"},children:[jsxRuntime.jsx(de,{delay:0,hovered:r}),jsxRuntime.jsx(de,{delay:.7,hovered:r})]}),jsxRuntime.jsx(framerMotion.motion.span,{className:"bf-dot","aria-hidden":"true",style:{position:"relative",zIndex:1},animate:{scale:r?1.1:1},transition:{type:"spring",stiffness:400,damping:20}}),jsxRuntime.jsx(framerMotion.AnimatePresence,{children:r&&jsxRuntime.jsx(framerMotion.motion.span,{initial:{opacity:0,width:0,x:-12},animate:{opacity:1,width:"auto",x:0},exit:{opacity:0,width:0,x:-12},transition:{type:"spring",stiffness:400,damping:25},style:{whiteSpace:"nowrap",overflow:"hidden",position:"relative",zIndex:1},children:"Feedback"})})]})})}function Ge(t){switch(t){case "bottom-left":return "bf-trigger-minimal bf-trigger-bl";case "top-right":return "bf-trigger-minimal bf-trigger-tr";case "top-left":return "bf-trigger-minimal bf-trigger-tl";default:return "bf-trigger-minimal"}}function be({position:t,onClick:e,isVisible:i}){let[r,o]=react.useState(false);return jsxRuntime.jsx(framerMotion.AnimatePresence,{children:i&&jsxRuntime.jsxs(framerMotion.motion.button,{className:Ge(t),type:"button",onClick:e,onMouseEnter:()=>o(true),onMouseLeave:()=>o(false),"aria-label":"Give feedback",initial:{opacity:0,y:5},animate:{opacity:r?1:.65,y:0},exit:{opacity:0,y:5},transition:{type:"spring",stiffness:400,damping:30},whileTap:{scale:.95},children:[jsxRuntime.jsx("span",{children:"Feedback"}),jsxRuntime.jsx(framerMotion.motion.span,{"aria-hidden":"true",style:{position:"absolute",bottom:4,left:4,right:4,height:"2px",background:"var(--bf-accent)",borderRadius:"1px",transformOrigin:"left"},initial:false,animate:{scaleX:r?1:0},transition:{type:"spring",stiffness:400,damping:25}})]})})}function ge({position:t,onClick:e,isVisible:i}){let[r,o]=react.useState(false);return jsxRuntime.jsx(framerMotion.AnimatePresence,{children:i&&jsxRuntime.jsxs(framerMotion.motion.button,{className:c(t),type:"button",onClick:e,onMouseEnter:()=>o(true),onMouseLeave:()=>o(false),"aria-label":"Give feedback",initial:{scale:0,opacity:0,rotate:-45},animate:{scale:1,opacity:1,rotate:0,padding:r?"10px 16px":"10px 10px"},exit:{rotate:180,scale:0,opacity:0},transition:{type:"spring",stiffness:400,damping:22},whileTap:{scale:.9,rotate:360},style:{overflow:"hidden"},children:[jsxRuntime.jsx(framerMotion.motion.span,{style:{display:"inline-flex",flexShrink:0},animate:r?{scale:1.2,rotate:0}:{rotate:[-5,5,-5]},transition:r?{type:"spring",stiffness:500,damping:12}:{duration:3,repeat:1/0,ease:"easeInOut"},children:jsxRuntime.jsx(oe,{size:16})}),jsxRuntime.jsx(framerMotion.AnimatePresence,{children:r&&jsxRuntime.jsx(framerMotion.motion.span,{initial:{opacity:0,width:0,x:-16},animate:{opacity:1,width:"auto",x:0},exit:{opacity:0,width:0,x:-16},transition:{type:"spring",stiffness:350,damping:25,delay:.03},style:{whiteSpace:"nowrap",overflow:"hidden"},children:"Feedback"})})]})})}function me(t){switch(t){case "dot":return ee;case "bubble":return ie;case "edge-tab":return se;case "pulse-ring":return pe;case "minimal":return be;case "icon-pop":return ge;default:return Q}}function xe(t,e,i){return Math.max(e,Math.min(i,t))}function qe(t,e,i="bottom-right"){let o=window.innerWidth,l=window.innerHeight,n;n=xe(t.x,12,Math.max(12,o-e-12));let p=t.y+t.height+12,S=Math.max(12,t.y-240);return {top:p+240<=l?p:S,left:n}}function Ye(t){let{rect:e}=t,i={left:`${e.x}px`,top:`${e.y}px`,width:`${Math.max(0,e.width)}px`,height:`${Math.max(0,e.height)}px`};return jsxRuntime.jsx("div",{className:"bf-highlight",style:i,"aria-hidden":"true"})}function Je(t){let e=react.useRef(null);return react.useEffect(()=>{if(!t||!e.current)return;e.current.querySelector(".bf-textarea")?.focus();let r=o=>{if(o.key!=="Tab"||!e.current)return;let l=e.current.querySelectorAll('button:not([disabled]), textarea:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])');if(l.length===0)return;let n=l[0],p=l[l.length-1];o.shiftKey&&document.activeElement===n?(o.preventDefault(),p.focus()):!o.shiftKey&&document.activeElement===p&&(o.preventDefault(),n.focus());};return document.addEventListener("keydown",r,{capture:true}),()=>document.removeEventListener("keydown",r,{capture:true})},[t]),e}function Qe(t){let{state:e,controller:i,start:r,stop:o,clearSelection:l,submit:n}=A(),p=t.config.ui?.position,[S,_]=react.useState(null),[g,D]=react.useState(""),[B,O]=react.useState(t.config.capture?.element??true),[E,G]=react.useState(t.config.capture?.fullPage??false),[ye,K]=react.useState(null),V=e.phase==="review"||e.phase==="capturing"||e.phase==="submitting"||e.phase==="error"||e.phase==="success",ve=Je(V);react.useEffect(()=>i.subscribeHover(_),[i]),react.useEffect(()=>{let s=i.__unsafeGetSelectedElement();if(!s||e.phase==="idle"||e.phase==="picking"){K(null);return}let $=()=>{K(chunkJLPJP7DD_cjs.b(s.getBoundingClientRect()));};$();let w=()=>$();return window.addEventListener("scroll",w,{capture:true,passive:true}),window.addEventListener("resize",w,{passive:true}),()=>{window.removeEventListener("scroll",w,{capture:true}),window.removeEventListener("resize",w);}},[i,e.phase,e.selection?.selector]),react.useEffect(()=>{e.phase==="review"&&(D(""),O(t.config.capture?.element??true),G(t.config.capture?.fullPage??false));},[e.phase,e.selection?.selector,t.config.capture?.element,t.config.capture?.fullPage]),react.useEffect(()=>{if(e.phase!=="success")return;let s=window.setTimeout(()=>o(),1200);return ()=>window.clearTimeout(s)},[e.phase,o]);let f=e.phase==="capturing"||e.phase==="submitting",b=e.phase==="picking"?S?.rect??null:ye??e.selection?.rect??null,N=react.useMemo(()=>b?qe(b,360,p):null,[b?.x,b?.y,b?.width,b?.height,p]),X=e.lastError?.message,z=react.useCallback(()=>{n(g,{capture:{element:B,fullPage:E}});},[n,g,B,E]),we=react.useCallback(s=>{(s.metaKey||s.ctrlKey)&&s.key==="Enter"&&g.trim().length>0&&!f&&(s.preventDefault(),z());},[z,g,f]),ke=me(t.config.ui?.triggerStyle);return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(ke,{position:p,onClick:()=>r(),isVisible:e.phase==="idle"}),e.phase!=="idle"&&jsxRuntime.jsxs("div",{className:"bf-overlay",role:"presentation",children:[e.phase!=="picking"&&jsxRuntime.jsx("div",{className:"bf-blocker",role:"presentation",onClick:()=>o()}),b&&jsxRuntime.jsx(Ye,{rect:b}),e.phase==="picking"&&jsxRuntime.jsxs("div",{className:"bf-hint",role:"status","aria-live":"polite",children:[jsxRuntime.jsxs("p",{id:"bf-hint-text",children:["Click an element to attach your feedback. Press ",jsxRuntime.jsx("strong",{children:"Esc"})," to cancel."]}),jsxRuntime.jsx("button",{type:"button",className:"bf-btn",onClick:()=>o(),"aria-label":"Cancel element selection",children:"Cancel"})]}),V&&N&&jsxRuntime.jsxs("div",{ref:ve,className:"bf-panel",style:{left:N.left,top:N.top},role:"dialog","aria-modal":"true","aria-label":"Feedback form",children:[jsxRuntime.jsxs("div",{className:"bf-panelHeader",children:[jsxRuntime.jsx("div",{className:"bf-title",id:"bf-panel-title",children:"Feedback"}),jsxRuntime.jsxs("div",{className:"bf-row",style:{justifyContent:"flex-end"},children:[jsxRuntime.jsx("button",{type:"button",className:"bf-btn",onClick:()=>l(),disabled:f,"aria-label":"Re-pick element",children:"Re-pick"}),jsxRuntime.jsx("button",{type:"button",className:"bf-btn",onClick:()=>o(),disabled:f,"aria-label":"Close feedback form",children:"Close"})]})]}),jsxRuntime.jsxs("div",{className:"bf-panelBody",children:[jsxRuntime.jsx("textarea",{className:"bf-textarea",placeholder:"What's happening? What did you expect?",value:g,onChange:s=>D(s.target.value),onKeyDown:we,disabled:f,"aria-label":"Feedback message"}),jsxRuntime.jsxs("div",{className:"bf-row",role:"group","aria-label":"Screenshot options",children:[jsxRuntime.jsxs("label",{children:[jsxRuntime.jsx("input",{type:"checkbox",checked:B,onChange:s=>O(s.target.checked),disabled:f}),"Screenshot element"]}),jsxRuntime.jsxs("label",{children:[jsxRuntime.jsx("input",{type:"checkbox",checked:E,onChange:s=>G(s.target.checked),disabled:f}),"Full page"]})]}),e.phase==="capturing"&&jsxRuntime.jsxs("div",{className:"bf-status",role:"status","aria-live":"polite",children:[jsxRuntime.jsx("span",{className:"bf-spinner","aria-hidden":"true"}),"Capturing screenshots\u2026"]}),e.phase==="submitting"&&jsxRuntime.jsxs("div",{className:"bf-status",role:"status","aria-live":"polite",children:[jsxRuntime.jsx("span",{className:"bf-spinner","aria-hidden":"true"}),"Submitting\u2026"]}),e.phase==="success"&&jsxRuntime.jsx("div",{className:"bf-status",role:"status","aria-live":"polite",children:"Sent. Thank you!"}),e.phase==="error"&&X&&jsxRuntime.jsx("div",{className:"bf-error",role:"alert",children:X}),jsxRuntime.jsxs("div",{className:"bf-actions",children:[jsxRuntime.jsx("button",{type:"button",className:"bf-btn",onClick:()=>o(),disabled:f,"aria-label":"Cancel feedback",children:"Cancel"}),jsxRuntime.jsx("button",{type:"button",className:"bf-btn bf-btnPrimary",onClick:z,disabled:f||g.trim().length===0,"aria-label":"Send feedback",children:"Send"})]})]})]})]}),e.phase==="success"&&jsxRuntime.jsx("div",{className:"bf-toast",role:"status","aria-live":"polite",children:"Feedback sent"})]})}function Ze(t){let e={...t.config??{},blocfeed_id:t.blocfeed_id},[i,r]=react.useState(null);return react.useEffect(()=>{J();let o=document.createElement("div");o.setAttribute("data-blocfeed-ui-root","true"),o.setAttribute("data-blocfeed-ui","true");let l=e.ui?.zIndex;typeof l=="number"&&o.style.setProperty("--bf-z",String(l));let n=e.ui?.theme;return n&&(n.accentColor&&o.style.setProperty("--bf-accent",n.accentColor),n.panelBackground&&o.style.setProperty("--bf-panel-bg",n.panelBackground),n.panelForeground&&o.style.setProperty("--bf-panel-fg",n.panelForeground),n.fontFamily&&o.style.setProperty("--bf-font",n.fontFamily)),document.body.appendChild(o),r(o),()=>{o.remove(),r(null);}},[e.ui?.zIndex,e.ui?.theme?.accentColor,e.ui?.theme?.panelBackground,e.ui?.theme?.panelForeground,e.ui?.theme?.fontFamily]),i?reactDom.createPortal(jsxRuntime.jsx(M,{blocfeed_id:e.blocfeed_id,...t.config?{config:t.config}:{},children:jsxRuntime.jsx(Qe,{config:e})}),i):null}
+exports.BlocFeedProvider=M;exports.BlocFeedWidget=Ze;exports.useBlocFeed=A;

package/dist/main.d.cts

@@ -1,5 +1,5 @@
-import { B as BlocFeedConfig, a as BlocFeedState, b as BlocFeedController, C as CaptureConfig, S as SubmitResult } from './controller-olqOZLhp.cjs';
-export { c as BlocFeedError, d as BlocFeedUser, e as CaptureDiagnostics, f as CaptureResult, E as ElementDescriptor, F as FeedbackApiResponse, g as FeedbackPayload, I as ImageAsset, M as MaybePromise, h as MetadataConfig, i as MetadataContext, P as PickerConfig, R as Rect, j as ScreenshotAdapter, k as ScreenshotAdapterOptions, l as ScreenshotIntent, m as ScreenshotMime, n as SessionPhase, T as ThemeConfig, o as TransportConfig, p as TransportResult, W as WidgetPosition } from './controller-olqOZLhp.cjs';
+import { B as BlocFeedConfig, a as BlocFeedState, b as BlocFeedController, C as CaptureConfig, S as SubmitResult } from './controller-D7kOehzb.cjs';
+export { c as BlocFeedError, d as BlocFeedUser, e as CaptureDiagnostics, f as CaptureResult, E as ElementDescriptor, F as FeedbackApiResponse, g as FeedbackPayload, I as ImageAsset, M as MaybePromise, h as MetadataConfig, i as MetadataContext, P as PickerConfig, R as Rect, j as ScreenshotAdapter, k as ScreenshotAdapterOptions, l as ScreenshotIntent, m as ScreenshotMime, n as SessionPhase, T as ThemeConfig, o as TransportConfig, p as TransportResult, q as TriggerStyle, W as WidgetPosition } from './controller-D7kOehzb.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode } from 'react';

package/dist/main.d.ts

@@ -1,5 +1,5 @@
-import { B as BlocFeedConfig, a as BlocFeedState, b as BlocFeedController, C as CaptureConfig, S as SubmitResult } from './controller-olqOZLhp.js';
-export { c as BlocFeedError, d as BlocFeedUser, e as CaptureDiagnostics, f as CaptureResult, E as ElementDescriptor, F as FeedbackApiResponse, g as FeedbackPayload, I as ImageAsset, M as MaybePromise, h as MetadataConfig, i as MetadataContext, P as PickerConfig, R as Rect, j as ScreenshotAdapter, k as ScreenshotAdapterOptions, l as ScreenshotIntent, m as ScreenshotMime, n as SessionPhase, T as ThemeConfig, o as TransportConfig, p as TransportResult, W as WidgetPosition } from './controller-olqOZLhp.js';
+import { B as BlocFeedConfig, a as BlocFeedState, b as BlocFeedController, C as CaptureConfig, S as SubmitResult } from './controller-D7kOehzb.js';
+export { c as BlocFeedError, d as BlocFeedUser, e as CaptureDiagnostics, f as CaptureResult, E as ElementDescriptor, F as FeedbackApiResponse, g as FeedbackPayload, I as ImageAsset, M as MaybePromise, h as MetadataConfig, i as MetadataContext, P as PickerConfig, R as Rect, j as ScreenshotAdapter, k as ScreenshotAdapterOptions, l as ScreenshotIntent, m as ScreenshotMime, n as SessionPhase, T as ThemeConfig, o as TransportConfig, p as TransportResult, q as TriggerStyle, W as WidgetPosition } from './controller-D7kOehzb.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode } from 'react';

package/dist/main.js

@@ -1,5 +1,5 @@
 "use client";
-import {j,a,b}from'./chunk-FMFONS5S.js';import {createContext,useMemo,useState,useEffect,useContext,useCallback,useRef}from'react';import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {createPortal}from'react-dom';var h=createContext(null);function k(t){let e=useMemo(()=>j({...t.config??{},blocfeed_id:t.blocfeed_id}),[]),[i,c]=useState(()=>e.getState());return useEffect(()=>e.subscribe(c),[e]),useEffect(()=>e.setConfig({...t.config??{},blocfeed_id:t.blocfeed_id}),[e,t.config,t.blocfeed_id]),useEffect(()=>()=>e.destroy(),[e]),jsx(h.Provider,{value:{controller:e,state:i},children:t.children})}var L="blocfeed-styles-v1",G=`
+import {j,a,b}from'./chunk-FMFONS5S.js';import {createContext,useMemo,useState,useEffect,useContext,useCallback,useRef}from'react';import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {createPortal}from'react-dom';import {AnimatePresence,motion}from'framer-motion';var k=createContext(null);function M(t){let e=useMemo(()=>j({...t.config??{},blocfeed_id:t.blocfeed_id}),[]),[i,r]=useState(()=>e.getState());return useEffect(()=>e.subscribe(r),[e]),useEffect(()=>e.setConfig({...t.config??{},blocfeed_id:t.blocfeed_id}),[e,t.config,t.blocfeed_id]),useEffect(()=>()=>e.destroy(),[e]),jsx(k.Provider,{value:{controller:e,state:i},children:t.children})}var Y="blocfeed-styles-v1",Se=`
 :where([data-blocfeed-ui-root]),
 :where([data-blocfeed-ui-root]) * {
   box-sizing: border-box;
@@ -290,6 +290,87 @@ import {j,a,b}from'./chunk-FMFONS5S.js';import {createContext,useMemo,useState,u
   50% { opacity: 1; transform: scale(1.2); }
 }
 
+/* ------------------------------------------------------------------ */
+/* Trigger variant: edge-tab                                          */
+/* ------------------------------------------------------------------ */
+
+:where([data-blocfeed-ui-root]) .bf-trigger-edge {
+  position: fixed;
+  z-index: var(--bf-z);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--bf-border);
+  background: var(--bf-panel-bg);
+  color: var(--bf-panel-fg);
+  box-shadow: var(--bf-shadow);
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  overflow: hidden;
+  padding: 0;
+  font-family: var(--bf-font);
+  font-size: 12px;
+  letter-spacing: 0.5px;
+}
+
+:where([data-blocfeed-ui-root]) .bf-trigger-edge:focus-visible {
+  outline: 2px solid var(--bf-accent);
+  outline-offset: 2px;
+}
+
+:where([data-blocfeed-ui-root]) .bf-trigger-edge-left {
+  left: 0;
+  right: auto;
+  border-radius: 0 6px 6px 0;
+  border-left: none;
+}
+
+:where([data-blocfeed-ui-root]) .bf-trigger-edge-right {
+  right: 0;
+  left: auto;
+  border-radius: 6px 0 0 6px;
+  border-right: none;
+}
+
+/* ------------------------------------------------------------------ */
+/* Trigger variant: minimal                                           */
+/* ------------------------------------------------------------------ */
+
+:where([data-blocfeed-ui-root]) .bf-trigger-minimal {
+  position: fixed;
+  right: 18px;
+  bottom: 18px;
+  z-index: var(--bf-z);
+  display: inline-flex;
+  align-items: center;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 8px 4px;
+  font-family: var(--bf-font);
+  font-size: 13px;
+  color: var(--bf-panel-fg);
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:where([data-blocfeed-ui-root]) .bf-trigger-minimal.bf-trigger-bl {
+  left: 18px; bottom: 18px; right: auto; top: auto;
+}
+:where([data-blocfeed-ui-root]) .bf-trigger-minimal.bf-trigger-tr {
+  right: 18px; top: 18px; bottom: auto; left: auto;
+}
+:where([data-blocfeed-ui-root]) .bf-trigger-minimal.bf-trigger-tl {
+  left: 18px; top: 18px; right: auto; bottom: auto;
+}
+
+:where([data-blocfeed-ui-root]) .bf-trigger-minimal:focus-visible {
+  outline: 2px solid var(--bf-accent);
+  outline-offset: 2px;
+}
+
 /* ------------------------------------------------------------------ */
 /* Screen reader only                                                 */
 /* ------------------------------------------------------------------ */
@@ -305,4 +386,5 @@ import {j,a,b}from'./chunk-FMFONS5S.js';import {createContext,useMemo,useState,u
   white-space: nowrap;
   border: 0;
 }
-`;function W(){if(!a()||document.getElementById(L))return;let t=document.createElement("style");t.id=L,t.textContent=G,document.head.appendChild(t);}function B(){let t=useContext(h);if(!t)throw new Error("useBlocFeed must be used within a <BlocFeedProvider />");return {state:t.state,controller:t.controller,start:t.controller.start,stop:t.controller.stop,clearSelection:t.controller.clearSelection,submit:t.controller.submit}}function I(t,e,i){return Math.max(e,Math.min(i,t))}function Z(t,e,i="bottom-right"){let o=window.innerWidth,s=window.innerHeight,a;a=I(t.x,12,Math.max(12,o-e-12));let d=t.y+t.height+12,x=Math.max(12,t.y-240);return {top:d+240<=s?d:x,left:a}}function ee(t){switch(t){case "bottom-left":return "bf-trigger bf-trigger-bl";case "top-right":return "bf-trigger bf-trigger-tr";case "top-left":return "bf-trigger bf-trigger-tl";default:return "bf-trigger"}}function te(t){let{rect:e}=t,i={left:`${e.x}px`,top:`${e.y}px`,width:`${Math.max(0,e.width)}px`,height:`${Math.max(0,e.height)}px`};return jsx("div",{className:"bf-highlight",style:i,"aria-hidden":"true"})}function oe(t){let e=useRef(null);return useEffect(()=>{if(!t||!e.current)return;e.current.querySelector(".bf-textarea")?.focus();let c=o=>{if(o.key!=="Tab"||!e.current)return;let s=e.current.querySelectorAll('button:not([disabled]), textarea:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])');if(s.length===0)return;let a=s[0],d=s[s.length-1];o.shiftKey&&document.activeElement===a?(o.preventDefault(),d.focus()):!o.shiftKey&&document.activeElement===d&&(o.preventDefault(),a.focus());};return document.addEventListener("keydown",c,{capture:true}),()=>document.removeEventListener("keydown",c,{capture:true})},[t]),e}function re(t){let{state:e,controller:i,start:c,stop:o,clearSelection:s,submit:a}=B(),d=t.config.ui?.position,[x,S]=useState(null),[p,P]=useState(""),[v,E]=useState(t.config.capture?.element??true),[y,R]=useState(t.config.capture?.fullPage??false),[K,N]=useState(null),z=e.phase==="review"||e.phase==="capturing"||e.phase==="submitting"||e.phase==="error"||e.phase==="success",j=oe(z);useEffect(()=>i.subscribeHover(S),[i]),useEffect(()=>{let n=i.__unsafeGetSelectedElement();if(!n||e.phase==="idle"||e.phase==="picking"){N(null);return}let M=()=>{N(b(n.getBoundingClientRect()));};M();let m=()=>M();return window.addEventListener("scroll",m,{capture:true,passive:true}),window.addEventListener("resize",m,{passive:true}),()=>{window.removeEventListener("scroll",m,{capture:true}),window.removeEventListener("resize",m);}},[i,e.phase,e.selection?.selector]),useEffect(()=>{e.phase==="review"&&(P(""),E(t.config.capture?.element??true),R(t.config.capture?.fullPage??false));},[e.phase,e.selection?.selector,t.config.capture?.element,t.config.capture?.fullPage]),useEffect(()=>{if(e.phase!=="success")return;let n=window.setTimeout(()=>o(),1200);return ()=>window.clearTimeout(n)},[e.phase,o]);let f=e.phase==="capturing"||e.phase==="submitting",b$1=e.phase==="picking"?x?.rect??null:K??e.selection?.rect??null,w=useMemo(()=>b$1?Z(b$1,360,d):null,[b$1?.x,b$1?.y,b$1?.width,b$1?.height,d]),T=e.lastError?.message,C=useCallback(()=>{a(p,{capture:{element:v,fullPage:y}});},[a,p,v,y]),O=useCallback(n=>{(n.metaKey||n.ctrlKey)&&n.key==="Enter"&&p.trim().length>0&&!f&&(n.preventDefault(),C());},[C,p,f]);return jsxs(Fragment,{children:[e.phase==="idle"&&jsxs("button",{className:ee(d),type:"button",onClick:()=>c(),"aria-label":"Give feedback",children:[jsx("span",{className:"bf-dot","aria-hidden":"true"}),"Feedback"]}),e.phase!=="idle"&&jsxs("div",{className:"bf-overlay",role:"presentation",children:[e.phase!=="picking"&&jsx("div",{className:"bf-blocker",role:"presentation",onClick:()=>o()}),b$1&&jsx(te,{rect:b$1}),e.phase==="picking"&&jsxs("div",{className:"bf-hint",role:"status","aria-live":"polite",children:[jsxs("p",{id:"bf-hint-text",children:["Click an element to attach your feedback. Press ",jsx("strong",{children:"Esc"})," to cancel."]}),jsx("button",{type:"button",className:"bf-btn",onClick:()=>o(),"aria-label":"Cancel element selection",children:"Cancel"})]}),z&&w&&jsxs("div",{ref:j,className:"bf-panel",style:{left:w.left,top:w.top},role:"dialog","aria-modal":"true","aria-label":"Feedback form",children:[jsxs("div",{className:"bf-panelHeader",children:[jsx("div",{className:"bf-title",id:"bf-panel-title",children:"Feedback"}),jsxs("div",{className:"bf-row",style:{justifyContent:"flex-end"},children:[jsx("button",{type:"button",className:"bf-btn",onClick:()=>s(),disabled:f,"aria-label":"Re-pick element",children:"Re-pick"}),jsx("button",{type:"button",className:"bf-btn",onClick:()=>o(),disabled:f,"aria-label":"Close feedback form",children:"Close"})]})]}),jsxs("div",{className:"bf-panelBody",children:[jsx("textarea",{className:"bf-textarea",placeholder:"What's happening? What did you expect?",value:p,onChange:n=>P(n.target.value),onKeyDown:O,disabled:f,"aria-label":"Feedback message"}),jsxs("div",{className:"bf-row",role:"group","aria-label":"Screenshot options",children:[jsxs("label",{children:[jsx("input",{type:"checkbox",checked:v,onChange:n=>E(n.target.checked),disabled:f}),"Screenshot element"]}),jsxs("label",{children:[jsx("input",{type:"checkbox",checked:y,onChange:n=>R(n.target.checked),disabled:f}),"Full page"]})]}),e.phase==="capturing"&&jsxs("div",{className:"bf-status",role:"status","aria-live":"polite",children:[jsx("span",{className:"bf-spinner","aria-hidden":"true"}),"Capturing screenshots\u2026"]}),e.phase==="submitting"&&jsxs("div",{className:"bf-status",role:"status","aria-live":"polite",children:[jsx("span",{className:"bf-spinner","aria-hidden":"true"}),"Submitting\u2026"]}),e.phase==="success"&&jsx("div",{className:"bf-status",role:"status","aria-live":"polite",children:"Sent. Thank you!"}),e.phase==="error"&&T&&jsx("div",{className:"bf-error",role:"alert",children:T}),jsxs("div",{className:"bf-actions",children:[jsx("button",{type:"button",className:"bf-btn",onClick:()=>o(),disabled:f,"aria-label":"Cancel feedback",children:"Cancel"}),jsx("button",{type:"button",className:"bf-btn bf-btnPrimary",onClick:C,disabled:f||p.trim().length===0,"aria-label":"Send feedback",children:"Send"})]})]})]})]}),e.phase==="success"&&jsx("div",{className:"bf-toast",role:"status","aria-live":"polite",children:"Feedback sent"})]})}function ae(t){let e={...t.config??{},blocfeed_id:t.blocfeed_id},[i,c]=useState(null);return useEffect(()=>{W();let o=document.createElement("div");o.setAttribute("data-blocfeed-ui-root","true"),o.setAttribute("data-blocfeed-ui","true");let s=e.ui?.zIndex;typeof s=="number"&&o.style.setProperty("--bf-z",String(s));let a=e.ui?.theme;return a&&(a.accentColor&&o.style.setProperty("--bf-accent",a.accentColor),a.panelBackground&&o.style.setProperty("--bf-panel-bg",a.panelBackground),a.panelForeground&&o.style.setProperty("--bf-panel-fg",a.panelForeground),a.fontFamily&&o.style.setProperty("--bf-font",a.fontFamily)),document.body.appendChild(o),c(o),()=>{o.remove(),c(null);}},[e.ui?.zIndex,e.ui?.theme?.accentColor,e.ui?.theme?.panelBackground,e.ui?.theme?.panelForeground,e.ui?.theme?.fontFamily]),i?createPortal(jsx(k,{blocfeed_id:e.blocfeed_id,...t.config?{config:t.config}:{},children:jsx(re,{config:e})}),i):null}export{k as BlocFeedProvider,ae as BlocFeedWidget,B as useBlocFeed};
+`;function J(){if(!a()||document.getElementById(Y))return;let t=document.createElement("style");t.id=Y,t.textContent=Se,document.head.appendChild(t);}function A(){let t=useContext(k);if(!t)throw new Error("useBlocFeed must be used within a <BlocFeedProvider />");return {state:t.state,controller:t.controller,start:t.controller.start,stop:t.controller.stop,clearSelection:t.controller.clearSelection,submit:t.controller.submit}}function c(t){switch(t){case "bottom-left":return "bf-trigger bf-trigger-bl";case "top-right":return "bf-trigger bf-trigger-tr";case "top-left":return "bf-trigger bf-trigger-tl";default:return "bf-trigger"}}function Q({position:t,onClick:e,isVisible:i}){return i?jsxs("button",{className:c(t),type:"button",onClick:e,"aria-label":"Give feedback",children:[jsx("span",{className:"bf-dot","aria-hidden":"true"}),"Feedback"]}):null}function ee({position:t,onClick:e,isVisible:i}){let[r,o]=useState(false);return jsx(AnimatePresence,{children:i&&jsxs(motion.button,{className:c(t),type:"button",onClick:e,onMouseEnter:()=>o(true),onMouseLeave:()=>o(false),"aria-label":"Give feedback",initial:{scale:0,opacity:0},animate:{scale:1,opacity:1,padding:r?"10px 16px":"10px 10px"},exit:{scale:0,opacity:0},transition:{type:"spring",stiffness:500,damping:28},whileTap:{scale:.92},style:{overflow:"hidden"},children:[jsx(motion.span,{className:"bf-dot","aria-hidden":"true",animate:{scale:r?1:[1,1.2,1],boxShadow:r?"0 0 0 4px rgba(99, 102, 241, 0.18)":["0 0 0 4px rgba(99, 102, 241, 0.18)","0 0 0 8px rgba(99, 102, 241, 0.28)","0 0 0 4px rgba(99, 102, 241, 0.18)"]},transition:r?{type:"spring",stiffness:400,damping:20}:{duration:2,repeat:1/0,ease:"easeInOut"}}),jsx(AnimatePresence,{children:r&&jsx(motion.span,{initial:{opacity:0,width:0,x:-8},animate:{opacity:1,width:"auto",x:0},exit:{opacity:0,width:0,x:-8},transition:{type:"spring",stiffness:400,damping:25},style:{whiteSpace:"nowrap",overflow:"hidden"},children:"Feedback"})}),jsx(motion.span,{"aria-hidden":"true",style:{position:"absolute",inset:0,borderRadius:"inherit",border:"2px solid var(--bf-accent)",pointerEvents:"none"},initial:false,animate:{scale:1,opacity:0},whileTap:{scale:2.5,opacity:[.6,0]},transition:{duration:.4}})]})})}function te({size:t=14}){return jsx("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:jsx("path",{d:"M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function oe({size:t=16}){return jsxs("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[jsx("path",{d:"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),jsx("path",{d:"M22 6l-10 7L2 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]})}function ie({position:t,onClick:e,isVisible:i}){let[r,o]=useState(false);return jsx(AnimatePresence,{children:i&&jsxs(motion.div,{style:{position:"fixed",zIndex:"var(--bf-z)"},className:c(t),initial:{scale:0,opacity:0},animate:{scale:1,opacity:1},exit:{y:12,opacity:0,scale:.8},transition:{type:"spring",stiffness:400,damping:25},onMouseEnter:()=>o(true),onMouseLeave:()=>o(false),children:[jsx(AnimatePresence,{children:r&&jsx(motion.div,{initial:{opacity:0,y:6,scale:.95},animate:{opacity:1,y:0,scale:1},exit:{opacity:0,y:6,scale:.95},transition:{type:"spring",stiffness:500,damping:30},style:{position:"absolute",bottom:"calc(100% + 8px)",left:"50%",transform:"translateX(-50%)",padding:"6px 12px",borderRadius:"8px",background:"var(--bf-panel-bg)",border:"1px solid var(--bf-border)",boxShadow:"var(--bf-shadow)",whiteSpace:"nowrap",fontSize:"12px",color:"var(--bf-panel-fg)",pointerEvents:"none"},children:"Got feedback?"})}),jsx(motion.button,{type:"button",onClick:e,"aria-label":"Give feedback",style:{display:"flex",alignItems:"center",justifyContent:"center",width:"40px",height:"40px",borderRadius:"50%",border:"1px solid var(--bf-border)",background:"var(--bf-panel-bg)",color:"var(--bf-panel-fg)",boxShadow:"var(--bf-shadow)",cursor:"pointer",padding:0},animate:{y:[0,-3,0]},transition:{y:{duration:3,repeat:1/0,ease:"easeInOut"}},whileHover:{scale:1.1,borderColor:"var(--bf-accent)"},whileTap:{scale:.9},children:jsx(te,{size:16})})]})})}function ne(t){return t==="bottom-left"||t==="top-left"}function We(t){return `bf-trigger-edge ${ne(t)?"bf-trigger-edge-left":"bf-trigger-edge-right"}`}function se({position:t,onClick:e,isVisible:i}){let[r,o]=useState(false),l=ne(t);return jsx(AnimatePresence,{children:i&&jsxs(motion.button,{className:We(t),type:"button",onClick:e,onMouseEnter:()=>o(true),onMouseLeave:()=>o(false),"aria-label":"Give feedback",initial:{opacity:0,width:0},animate:{opacity:1,width:r?140:22,height:r?40:90},exit:{width:0,opacity:0},transition:{type:"spring",stiffness:350,damping:30},whileTap:{scale:.97},style:{top:"50%",translateY:"-50%"},children:[jsxs(motion.span,{animate:{rotate:r?0:l?-90:90,opacity:r?1:.6},transition:{type:"spring",stiffness:300,damping:25},style:{display:"flex",alignItems:"center",gap:"8px",whiteSpace:"nowrap",fontSize:"12px",letterSpacing:"0.5px",textTransform:"uppercase"},children:[r&&jsx(motion.span,{initial:{scale:0},animate:{scale:1},transition:{type:"spring",stiffness:500,damping:20},style:{width:"6px",height:"6px",borderRadius:"50%",background:"var(--bf-accent)",flexShrink:0}}),"Feedback"]}),jsx(motion.span,{"aria-hidden":"true",animate:{opacity:r?1:0},style:{position:"absolute",top:0,bottom:0,[l?"left":"right"]:0,width:"2px",background:"var(--bf-accent)"}})]})})}function de({delay:t,hovered:e}){return jsx(motion.span,{"aria-hidden":"true",style:{position:"absolute",width:"12px",height:"12px",borderRadius:"50%",border:"2px solid var(--bf-accent)",pointerEvents:"none",left:"50%",top:"50%",x:"-50%",y:"-50%"},animate:e?{scale:1.3,opacity:.6}:{scale:[1,2.5],opacity:[.5,0]},transition:e?{type:"spring",stiffness:300,damping:20}:{duration:2,repeat:1/0,delay:t,ease:"easeOut"}})}function pe({position:t,onClick:e,isVisible:i}){let[r,o]=useState(false);return jsx(AnimatePresence,{children:i&&jsxs(motion.button,{className:c(t),type:"button",onClick:e,onMouseEnter:()=>o(true),onMouseLeave:()=>o(false),"aria-label":"Give feedback",initial:{scale:0,opacity:0},animate:{scale:1,opacity:1,padding:r?"10px 16px":"10px 10px"},exit:{scale:0,opacity:0},transition:{type:"spring",stiffness:400,damping:25},whileTap:{scale:.92},style:{position:"relative",overflow:"visible"},children:[jsxs("div",{style:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none"},children:[jsx(de,{delay:0,hovered:r}),jsx(de,{delay:.7,hovered:r})]}),jsx(motion.span,{className:"bf-dot","aria-hidden":"true",style:{position:"relative",zIndex:1},animate:{scale:r?1.1:1},transition:{type:"spring",stiffness:400,damping:20}}),jsx(AnimatePresence,{children:r&&jsx(motion.span,{initial:{opacity:0,width:0,x:-12},animate:{opacity:1,width:"auto",x:0},exit:{opacity:0,width:0,x:-12},transition:{type:"spring",stiffness:400,damping:25},style:{whiteSpace:"nowrap",overflow:"hidden",position:"relative",zIndex:1},children:"Feedback"})})]})})}function Ge(t){switch(t){case "bottom-left":return "bf-trigger-minimal bf-trigger-bl";case "top-right":return "bf-trigger-minimal bf-trigger-tr";case "top-left":return "bf-trigger-minimal bf-trigger-tl";default:return "bf-trigger-minimal"}}function be({position:t,onClick:e,isVisible:i}){let[r,o]=useState(false);return jsx(AnimatePresence,{children:i&&jsxs(motion.button,{className:Ge(t),type:"button",onClick:e,onMouseEnter:()=>o(true),onMouseLeave:()=>o(false),"aria-label":"Give feedback",initial:{opacity:0,y:5},animate:{opacity:r?1:.65,y:0},exit:{opacity:0,y:5},transition:{type:"spring",stiffness:400,damping:30},whileTap:{scale:.95},children:[jsx("span",{children:"Feedback"}),jsx(motion.span,{"aria-hidden":"true",style:{position:"absolute",bottom:4,left:4,right:4,height:"2px",background:"var(--bf-accent)",borderRadius:"1px",transformOrigin:"left"},initial:false,animate:{scaleX:r?1:0},transition:{type:"spring",stiffness:400,damping:25}})]})})}function ge({position:t,onClick:e,isVisible:i}){let[r,o]=useState(false);return jsx(AnimatePresence,{children:i&&jsxs(motion.button,{className:c(t),type:"button",onClick:e,onMouseEnter:()=>o(true),onMouseLeave:()=>o(false),"aria-label":"Give feedback",initial:{scale:0,opacity:0,rotate:-45},animate:{scale:1,opacity:1,rotate:0,padding:r?"10px 16px":"10px 10px"},exit:{rotate:180,scale:0,opacity:0},transition:{type:"spring",stiffness:400,damping:22},whileTap:{scale:.9,rotate:360},style:{overflow:"hidden"},children:[jsx(motion.span,{style:{display:"inline-flex",flexShrink:0},animate:r?{scale:1.2,rotate:0}:{rotate:[-5,5,-5]},transition:r?{type:"spring",stiffness:500,damping:12}:{duration:3,repeat:1/0,ease:"easeInOut"},children:jsx(oe,{size:16})}),jsx(AnimatePresence,{children:r&&jsx(motion.span,{initial:{opacity:0,width:0,x:-16},animate:{opacity:1,width:"auto",x:0},exit:{opacity:0,width:0,x:-16},transition:{type:"spring",stiffness:350,damping:25,delay:.03},style:{whiteSpace:"nowrap",overflow:"hidden"},children:"Feedback"})})]})})}function me(t){switch(t){case "dot":return ee;case "bubble":return ie;case "edge-tab":return se;case "pulse-ring":return pe;case "minimal":return be;case "icon-pop":return ge;default:return Q}}function xe(t,e,i){return Math.max(e,Math.min(i,t))}function qe(t,e,i="bottom-right"){let o=window.innerWidth,l=window.innerHeight,n;n=xe(t.x,12,Math.max(12,o-e-12));let p=t.y+t.height+12,S=Math.max(12,t.y-240);return {top:p+240<=l?p:S,left:n}}function Ye(t){let{rect:e}=t,i={left:`${e.x}px`,top:`${e.y}px`,width:`${Math.max(0,e.width)}px`,height:`${Math.max(0,e.height)}px`};return jsx("div",{className:"bf-highlight",style:i,"aria-hidden":"true"})}function Je(t){let e=useRef(null);return useEffect(()=>{if(!t||!e.current)return;e.current.querySelector(".bf-textarea")?.focus();let r=o=>{if(o.key!=="Tab"||!e.current)return;let l=e.current.querySelectorAll('button:not([disabled]), textarea:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])');if(l.length===0)return;let n=l[0],p=l[l.length-1];o.shiftKey&&document.activeElement===n?(o.preventDefault(),p.focus()):!o.shiftKey&&document.activeElement===p&&(o.preventDefault(),n.focus());};return document.addEventListener("keydown",r,{capture:true}),()=>document.removeEventListener("keydown",r,{capture:true})},[t]),e}function Qe(t){let{state:e,controller:i,start:r,stop:o,clearSelection:l,submit:n}=A(),p=t.config.ui?.position,[S,_]=useState(null),[g,D]=useState(""),[B,O]=useState(t.config.capture?.element??true),[E,G]=useState(t.config.capture?.fullPage??false),[ye,K]=useState(null),V=e.phase==="review"||e.phase==="capturing"||e.phase==="submitting"||e.phase==="error"||e.phase==="success",ve=Je(V);useEffect(()=>i.subscribeHover(_),[i]),useEffect(()=>{let s=i.__unsafeGetSelectedElement();if(!s||e.phase==="idle"||e.phase==="picking"){K(null);return}let $=()=>{K(b(s.getBoundingClientRect()));};$();let w=()=>$();return window.addEventListener("scroll",w,{capture:true,passive:true}),window.addEventListener("resize",w,{passive:true}),()=>{window.removeEventListener("scroll",w,{capture:true}),window.removeEventListener("resize",w);}},[i,e.phase,e.selection?.selector]),useEffect(()=>{e.phase==="review"&&(D(""),O(t.config.capture?.element??true),G(t.config.capture?.fullPage??false));},[e.phase,e.selection?.selector,t.config.capture?.element,t.config.capture?.fullPage]),useEffect(()=>{if(e.phase!=="success")return;let s=window.setTimeout(()=>o(),1200);return ()=>window.clearTimeout(s)},[e.phase,o]);let f=e.phase==="capturing"||e.phase==="submitting",b$1=e.phase==="picking"?S?.rect??null:ye??e.selection?.rect??null,N=useMemo(()=>b$1?qe(b$1,360,p):null,[b$1?.x,b$1?.y,b$1?.width,b$1?.height,p]),X=e.lastError?.message,z=useCallback(()=>{n(g,{capture:{element:B,fullPage:E}});},[n,g,B,E]),we=useCallback(s=>{(s.metaKey||s.ctrlKey)&&s.key==="Enter"&&g.trim().length>0&&!f&&(s.preventDefault(),z());},[z,g,f]),ke=me(t.config.ui?.triggerStyle);return jsxs(Fragment,{children:[jsx(ke,{position:p,onClick:()=>r(),isVisible:e.phase==="idle"}),e.phase!=="idle"&&jsxs("div",{className:"bf-overlay",role:"presentation",children:[e.phase!=="picking"&&jsx("div",{className:"bf-blocker",role:"presentation",onClick:()=>o()}),b$1&&jsx(Ye,{rect:b$1}),e.phase==="picking"&&jsxs("div",{className:"bf-hint",role:"status","aria-live":"polite",children:[jsxs("p",{id:"bf-hint-text",children:["Click an element to attach your feedback. Press ",jsx("strong",{children:"Esc"})," to cancel."]}),jsx("button",{type:"button",className:"bf-btn",onClick:()=>o(),"aria-label":"Cancel element selection",children:"Cancel"})]}),V&&N&&jsxs("div",{ref:ve,className:"bf-panel",style:{left:N.left,top:N.top},role:"dialog","aria-modal":"true","aria-label":"Feedback form",children:[jsxs("div",{className:"bf-panelHeader",children:[jsx("div",{className:"bf-title",id:"bf-panel-title",children:"Feedback"}),jsxs("div",{className:"bf-row",style:{justifyContent:"flex-end"},children:[jsx("button",{type:"button",className:"bf-btn",onClick:()=>l(),disabled:f,"aria-label":"Re-pick element",children:"Re-pick"}),jsx("button",{type:"button",className:"bf-btn",onClick:()=>o(),disabled:f,"aria-label":"Close feedback form",children:"Close"})]})]}),jsxs("div",{className:"bf-panelBody",children:[jsx("textarea",{className:"bf-textarea",placeholder:"What's happening? What did you expect?",value:g,onChange:s=>D(s.target.value),onKeyDown:we,disabled:f,"aria-label":"Feedback message"}),jsxs("div",{className:"bf-row",role:"group","aria-label":"Screenshot options",children:[jsxs("label",{children:[jsx("input",{type:"checkbox",checked:B,onChange:s=>O(s.target.checked),disabled:f}),"Screenshot element"]}),jsxs("label",{children:[jsx("input",{type:"checkbox",checked:E,onChange:s=>G(s.target.checked),disabled:f}),"Full page"]})]}),e.phase==="capturing"&&jsxs("div",{className:"bf-status",role:"status","aria-live":"polite",children:[jsx("span",{className:"bf-spinner","aria-hidden":"true"}),"Capturing screenshots\u2026"]}),e.phase==="submitting"&&jsxs("div",{className:"bf-status",role:"status","aria-live":"polite",children:[jsx("span",{className:"bf-spinner","aria-hidden":"true"}),"Submitting\u2026"]}),e.phase==="success"&&jsx("div",{className:"bf-status",role:"status","aria-live":"polite",children:"Sent. Thank you!"}),e.phase==="error"&&X&&jsx("div",{className:"bf-error",role:"alert",children:X}),jsxs("div",{className:"bf-actions",children:[jsx("button",{type:"button",className:"bf-btn",onClick:()=>o(),disabled:f,"aria-label":"Cancel feedback",children:"Cancel"}),jsx("button",{type:"button",className:"bf-btn bf-btnPrimary",onClick:z,disabled:f||g.trim().length===0,"aria-label":"Send feedback",children:"Send"})]})]})]})]}),e.phase==="success"&&jsx("div",{className:"bf-toast",role:"status","aria-live":"polite",children:"Feedback sent"})]})}function Ze(t){let e={...t.config??{},blocfeed_id:t.blocfeed_id},[i,r]=useState(null);return useEffect(()=>{J();let o=document.createElement("div");o.setAttribute("data-blocfeed-ui-root","true"),o.setAttribute("data-blocfeed-ui","true");let l=e.ui?.zIndex;typeof l=="number"&&o.style.setProperty("--bf-z",String(l));let n=e.ui?.theme;return n&&(n.accentColor&&o.style.setProperty("--bf-accent",n.accentColor),n.panelBackground&&o.style.setProperty("--bf-panel-bg",n.panelBackground),n.panelForeground&&o.style.setProperty("--bf-panel-fg",n.panelForeground),n.fontFamily&&o.style.setProperty("--bf-font",n.fontFamily)),document.body.appendChild(o),r(o),()=>{o.remove(),r(null);}},[e.ui?.zIndex,e.ui?.theme?.accentColor,e.ui?.theme?.panelBackground,e.ui?.theme?.panelForeground,e.ui?.theme?.fontFamily]),i?createPortal(jsx(M,{blocfeed_id:e.blocfeed_id,...t.config?{config:t.config}:{},children:jsx(Qe,{config:e})}),i):null}
+export{M as BlocFeedProvider,Ze as BlocFeedWidget,A as useBlocFeed};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blocfeed",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Drop-in feedback + screenshot widget for React.",
   "license": "MIT",
   "type": "module",
@@ -65,15 +65,22 @@
     "prepublishOnly": "npm run typecheck && npm test"
   },
   "peerDependencies": {
+    "framer-motion": ">=10.0.0",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   },
+  "peerDependenciesMeta": {
+    "framer-motion": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "html-to-image": "^1.11.11"
   },
   "devDependencies": {
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
+    "framer-motion": "^12.34.2",
     "jsdom": "^24.0.0",
     "tsup": "^8.0.2",
     "typescript": "^5.5.4",