blocfeed 0.1.0

package/dist/main.cjs

@@ -0,0 +1,223 @@
+"use client";
+'use strict';var chunk52FWOTRN_cjs=require('./chunk-52FWOTRN.cjs'),react=require('react'),jsxRuntime=require('react/jsx-runtime'),reactDom=require('react-dom');var m=react.createContext(null);function w(t){let e=react.useMemo(()=>chunk52FWOTRN_cjs.f(t.config??{}),[]),[a,l]=react.useState(()=>e.getState());return react.useEffect(()=>e.subscribe(l),[e]),react.useEffect(()=>e.setConfig(t.config??{}),[e,t.config]),react.useEffect(()=>()=>e.destroy(),[e]),jsxRuntime.jsx(m.Provider,{value:{controller:e,state:a},children:t.children})}var T="blocfeed-styles-v1",_=`
+:where([data-blocfeed-ui-root]),
+:where([data-blocfeed-ui-root]) * {
+  box-sizing: border-box;
+}
+
+:where([data-blocfeed-ui-root]) {
+  --bf-z: 2147483646;
+  --bf-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  --bf-panel-bg: rgba(17, 24, 39, 0.98);
+  --bf-panel-fg: rgb(243, 244, 246);
+  --bf-muted: rgba(243, 244, 246, 0.72);
+  --bf-border: rgba(255, 255, 255, 0.14);
+  --bf-accent: rgb(99, 102, 241);
+  --bf-danger: rgb(239, 68, 68);
+  --bf-shadow: 0 18px 55px rgba(0, 0, 0, 0.45);
+
+  font-family: var(--bf-font);
+  color: var(--bf-panel-fg);
+}
+
+:where([data-blocfeed-ui-root]) .bf-trigger {
+  position: fixed;
+  right: 18px;
+  bottom: 18px;
+  z-index: var(--bf-z);
+
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 999px;
+  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;
+}
+
+:where([data-blocfeed-ui-root]) .bf-trigger:focus-visible {
+  outline: 2px solid var(--bf-accent);
+  outline-offset: 2px;
+}
+
+:where([data-blocfeed-ui-root]) .bf-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: var(--bf-accent);
+  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);
+}
+
+:where([data-blocfeed-ui-root]) .bf-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--bf-z);
+  pointer-events: none;
+}
+
+:where([data-blocfeed-ui-root]) .bf-blocker {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  pointer-events: auto;
+}
+
+:where([data-blocfeed-ui-root]) .bf-highlight {
+  position: fixed;
+  border: 2px solid var(--bf-accent);
+  border-radius: 10px;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.42);
+  pointer-events: none;
+}
+
+:where([data-blocfeed-ui-root]) .bf-hint {
+  position: fixed;
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: min(640px, calc(100vw - 24px));
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid var(--bf-border);
+  background: var(--bf-panel-bg);
+  box-shadow: var(--bf-shadow);
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+:where([data-blocfeed-ui-root]) .bf-hint p {
+  margin: 0;
+  font-size: 13px;
+  color: var(--bf-muted);
+}
+
+:where([data-blocfeed-ui-root]) .bf-btn {
+  border: 1px solid var(--bf-border);
+  background: transparent;
+  color: var(--bf-panel-fg);
+  padding: 8px 10px;
+  border-radius: 10px;
+  cursor: pointer;
+  user-select: none;
+}
+
+:where([data-blocfeed-ui-root]) .bf-btn[disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+:where([data-blocfeed-ui-root]) .bf-btnPrimary {
+  background: var(--bf-accent);
+  border-color: rgba(99, 102, 241, 0.6);
+  color: white;
+}
+
+:where([data-blocfeed-ui-root]) .bf-panel {
+  position: fixed;
+  width: 360px;
+  max-width: calc(100vw - 24px);
+  border-radius: 14px;
+  border: 1px solid var(--bf-border);
+  background: var(--bf-panel-bg);
+  box-shadow: var(--bf-shadow);
+  pointer-events: auto;
+  overflow: hidden;
+}
+
+:where([data-blocfeed-ui-root]) .bf-panelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 12px 12px 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+:where([data-blocfeed-ui-root]) .bf-title {
+  font-size: 13px;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  color: rgba(243, 244, 246, 0.85);
+}
+
+:where([data-blocfeed-ui-root]) .bf-panelBody {
+  padding: 12px;
+  display: grid;
+  gap: 10px;
+}
+
+:where([data-blocfeed-ui-root]) .bf-textarea {
+  width: 100%;
+  min-height: 96px;
+  resize: vertical;
+  padding: 10px 10px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(0, 0, 0, 0.18);
+  color: var(--bf-panel-fg);
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+:where([data-blocfeed-ui-root]) .bf-textarea:focus-visible {
+  outline: 2px solid rgba(99, 102, 241, 0.9);
+  outline-offset: 2px;
+}
+
+:where([data-blocfeed-ui-root]) .bf-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+:where([data-blocfeed-ui-root]) .bf-row label {
+  font-size: 13px;
+  color: var(--bf-muted);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  user-select: none;
+}
+
+:where([data-blocfeed-ui-root]) .bf-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  padding-top: 4px;
+}
+
+:where([data-blocfeed-ui-root]) .bf-status {
+  font-size: 12px;
+  color: var(--bf-muted);
+}
+
+:where([data-blocfeed-ui-root]) .bf-error {
+  font-size: 12px;
+  color: rgb(254, 202, 202);
+}
+
+:where([data-blocfeed-ui-root]) .bf-toast {
+  position: fixed;
+  left: 50%;
+  bottom: 18px;
+  transform: translateX(-50%);
+  z-index: var(--bf-z);
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid var(--bf-border);
+  background: var(--bf-panel-bg);
+  box-shadow: var(--bf-shadow);
+  pointer-events: none;
+  font-size: 13px;
+  color: rgba(243, 244, 246, 0.9);
+}
+`;function A(){if(!chunk52FWOTRN_cjs.a()||document.getElementById(T))return;let t=document.createElement("style");t.id=T,t.textContent=_,document.head.appendChild(t);}function y(){let t=react.useContext(m);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 G(t,e,a){return Math.max(e,Math.min(a,t))}function O(t,e){let l=window.innerWidth,r=window.innerHeight,d=G(t.x,12,Math.max(12,l-e-12)),f=t.y+t.height+12,g=Math.max(12,t.y-240);return {top:f+240<=r?f:g,left:d}}function V(t){let{rect:e}=t,a={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:a})}function Y(t){let{state:e,controller:a,start:l,stop:r,clearSelection:d,submit:f}=y(),[g,C]=react.useState(null),[h,F]=react.useState(""),[B,k]=react.useState(t.config.capture?.element??true),[S,P]=react.useState(t.config.capture?.fullPage??false),[I,N]=react.useState(null);react.useEffect(()=>a.subscribeHover(C),[a]),react.useEffect(()=>{let i=a.__unsafeGetSelectedElement();if(!i||e.phase==="idle"||e.phase==="picking"){N(null);return}let z=()=>{N(chunk52FWOTRN_cjs.b(i.getBoundingClientRect()));};z();let u=()=>z();return window.addEventListener("scroll",u,{capture:true,passive:true}),window.addEventListener("resize",u,{passive:true}),()=>{window.removeEventListener("scroll",u,{capture:true}),window.removeEventListener("resize",u);}},[a,e.phase,e.selection?.selector]),react.useEffect(()=>{e.phase==="review"&&(F(""),k(t.config.capture?.element??true),P(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 i=window.setTimeout(()=>r(),1200);return ()=>window.clearTimeout(i)},[e.phase,r]);let c=e.phase==="capturing"||e.phase==="submitting",s=e.phase==="picking"?g?.rect??null:I??e.selection?.rect??null,x=react.useMemo(()=>s?O(s,360):null,[s?.x,s?.y,s?.width,s?.height]),R=e.lastError?.message;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[e.phase==="idle"&&jsxRuntime.jsxs("button",{className:"bf-trigger",type:"button",onClick:()=>l(),"aria-label":"Give feedback",children:[jsxRuntime.jsx("span",{className:"bf-dot","aria-hidden":"true"}),"Feedback"]}),e.phase!=="idle"&&jsxRuntime.jsxs("div",{className:"bf-overlay",children:[e.phase!=="picking"&&jsxRuntime.jsx("div",{className:"bf-blocker",role:"presentation",onClick:()=>r()}),s&&jsxRuntime.jsx(V,{rect:s}),e.phase==="picking"&&jsxRuntime.jsxs("div",{className:"bf-hint",children:[jsxRuntime.jsxs("p",{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:()=>r(),children:"Cancel"})]}),(e.phase==="review"||e.phase==="capturing"||e.phase==="submitting"||e.phase==="error"||e.phase==="success")&&x&&jsxRuntime.jsxs("div",{className:"bf-panel",style:{left:x.left,top:x.top},children:[jsxRuntime.jsxs("div",{className:"bf-panelHeader",children:[jsxRuntime.jsx("div",{className:"bf-title",children:"Feedback"}),jsxRuntime.jsxs("div",{className:"bf-row",style:{justifyContent:"flex-end"},children:[jsxRuntime.jsx("button",{type:"button",className:"bf-btn",onClick:()=>d(),disabled:c,children:"Re-pick"}),jsxRuntime.jsx("button",{type:"button",className:"bf-btn",onClick:()=>r(),disabled:c,children:"Close"})]})]}),jsxRuntime.jsxs("div",{className:"bf-panelBody",children:[jsxRuntime.jsx("textarea",{className:"bf-textarea",placeholder:"What\u2019s happening? What did you expect?",value:h,onChange:i=>F(i.target.value),disabled:c}),jsxRuntime.jsxs("div",{className:"bf-row",children:[jsxRuntime.jsxs("label",{children:[jsxRuntime.jsx("input",{type:"checkbox",checked:B,onChange:i=>k(i.target.checked),disabled:c}),"Screenshot element"]}),jsxRuntime.jsxs("label",{children:[jsxRuntime.jsx("input",{type:"checkbox",checked:S,onChange:i=>P(i.target.checked),disabled:c}),"Full page"]})]}),e.phase==="capturing"&&jsxRuntime.jsx("div",{className:"bf-status",children:"Capturing screenshots\u2026"}),e.phase==="submitting"&&jsxRuntime.jsx("div",{className:"bf-status",children:"Submitting\u2026"}),e.phase==="success"&&jsxRuntime.jsx("div",{className:"bf-status",children:"Sent. Thank you!"}),e.phase==="error"&&R&&jsxRuntime.jsx("div",{className:"bf-error",children:R}),jsxRuntime.jsxs("div",{className:"bf-actions",children:[jsxRuntime.jsx("button",{type:"button",className:"bf-btn",onClick:()=>r(),disabled:c,children:"Cancel"}),jsxRuntime.jsx("button",{type:"button",className:"bf-btn bf-btnPrimary",onClick:()=>f(h,{capture:{element:B,fullPage:S}}),disabled:c||h.trim().length===0,children:"Send"})]})]})]})]}),e.phase==="success"&&jsxRuntime.jsx("div",{className:"bf-toast","aria-live":"polite",children:"Feedback sent"})]})}function q(t){let e=t.config??{},[a,l]=react.useState(null);return react.useEffect(()=>{A();let r=document.createElement("div");r.setAttribute("data-blocfeed-ui-root","true"),r.setAttribute("data-blocfeed-ui","true");let d=e.ui?.zIndex;return typeof d=="number"&&r.style.setProperty("--bf-z",String(d)),document.body.appendChild(r),l(r),()=>{r.remove(),l(null);}},[e.ui?.zIndex]),a?reactDom.createPortal(jsxRuntime.jsx(w,{config:e,children:jsxRuntime.jsx(Y,{config:e})}),a):null}exports.BlocFeedProvider=w;exports.BlocFeedWidget=q;exports.useBlocFeed=y;

package/dist/main.d.cts

@@ -0,0 +1,30 @@
+import { B as BlocFeedConfig, a as BlocFeedState, b as BlocFeedController, C as CaptureConfig, S as SubmitResult } from './controller-5O3OHUFm.cjs';
+export { c as BlocFeedError, d as CaptureDiagnostics, e as CaptureResult, E as ElementDescriptor, F as FeedbackPayload, I as ImageAsset, M as MaybePromise, f as MetadataConfig, g as MetadataContext, P as PickerConfig, R as Rect, h as ScreenshotAdapter, i as ScreenshotAdapterOptions, j as ScreenshotMime, k as SessionPhase, l as SubmitConfig, T as TransportResult, W as WebhookConfig } from './controller-5O3OHUFm.cjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type BlocFeedProviderProps = {
+    config?: BlocFeedConfig;
+    children: ReactNode;
+};
+declare function BlocFeedProvider(props: BlocFeedProviderProps): react_jsx_runtime.JSX.Element;
+
+type BlocFeedWidgetProps = {
+    config?: BlocFeedConfig;
+};
+declare function BlocFeedWidget(props: BlocFeedWidgetProps): react.ReactPortal | null;
+
+type BlocFeedApi = {
+    state: BlocFeedState;
+    controller: BlocFeedController;
+    start: () => void;
+    stop: () => void;
+    clearSelection: () => void;
+    submit: (message: string, options?: {
+        capture?: CaptureConfig;
+    }) => Promise<SubmitResult>;
+};
+declare function useBlocFeed(): BlocFeedApi;
+
+export { type BlocFeedApi, BlocFeedConfig, BlocFeedProvider, BlocFeedState, BlocFeedWidget, CaptureConfig, SubmitResult, useBlocFeed };

package/dist/main.d.ts

@@ -0,0 +1,30 @@
+import { B as BlocFeedConfig, a as BlocFeedState, b as BlocFeedController, C as CaptureConfig, S as SubmitResult } from './controller-5O3OHUFm.js';
+export { c as BlocFeedError, d as CaptureDiagnostics, e as CaptureResult, E as ElementDescriptor, F as FeedbackPayload, I as ImageAsset, M as MaybePromise, f as MetadataConfig, g as MetadataContext, P as PickerConfig, R as Rect, h as ScreenshotAdapter, i as ScreenshotAdapterOptions, j as ScreenshotMime, k as SessionPhase, l as SubmitConfig, T as TransportResult, W as WebhookConfig } from './controller-5O3OHUFm.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type BlocFeedProviderProps = {
+    config?: BlocFeedConfig;
+    children: ReactNode;
+};
+declare function BlocFeedProvider(props: BlocFeedProviderProps): react_jsx_runtime.JSX.Element;
+
+type BlocFeedWidgetProps = {
+    config?: BlocFeedConfig;
+};
+declare function BlocFeedWidget(props: BlocFeedWidgetProps): react.ReactPortal | null;
+
+type BlocFeedApi = {
+    state: BlocFeedState;
+    controller: BlocFeedController;
+    start: () => void;
+    stop: () => void;
+    clearSelection: () => void;
+    submit: (message: string, options?: {
+        capture?: CaptureConfig;
+    }) => Promise<SubmitResult>;
+};
+declare function useBlocFeed(): BlocFeedApi;
+
+export { type BlocFeedApi, BlocFeedConfig, BlocFeedProvider, BlocFeedState, BlocFeedWidget, CaptureConfig, SubmitResult, useBlocFeed };

package/dist/main.js

@@ -0,0 +1,223 @@
+"use client";
+import {f,a,b}from'./chunk-4EGJPVEG.js';import {createContext,useMemo,useState,useEffect,useContext}from'react';import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {createPortal}from'react-dom';var m=createContext(null);function w(t){let e=useMemo(()=>f(t.config??{}),[]),[a,l]=useState(()=>e.getState());return useEffect(()=>e.subscribe(l),[e]),useEffect(()=>e.setConfig(t.config??{}),[e,t.config]),useEffect(()=>()=>e.destroy(),[e]),jsx(m.Provider,{value:{controller:e,state:a},children:t.children})}var T="blocfeed-styles-v1",_=`
+:where([data-blocfeed-ui-root]),
+:where([data-blocfeed-ui-root]) * {
+  box-sizing: border-box;
+}
+
+:where([data-blocfeed-ui-root]) {
+  --bf-z: 2147483646;
+  --bf-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  --bf-panel-bg: rgba(17, 24, 39, 0.98);
+  --bf-panel-fg: rgb(243, 244, 246);
+  --bf-muted: rgba(243, 244, 246, 0.72);
+  --bf-border: rgba(255, 255, 255, 0.14);
+  --bf-accent: rgb(99, 102, 241);
+  --bf-danger: rgb(239, 68, 68);
+  --bf-shadow: 0 18px 55px rgba(0, 0, 0, 0.45);
+
+  font-family: var(--bf-font);
+  color: var(--bf-panel-fg);
+}
+
+:where([data-blocfeed-ui-root]) .bf-trigger {
+  position: fixed;
+  right: 18px;
+  bottom: 18px;
+  z-index: var(--bf-z);
+
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 999px;
+  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;
+}
+
+:where([data-blocfeed-ui-root]) .bf-trigger:focus-visible {
+  outline: 2px solid var(--bf-accent);
+  outline-offset: 2px;
+}
+
+:where([data-blocfeed-ui-root]) .bf-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: var(--bf-accent);
+  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);
+}
+
+:where([data-blocfeed-ui-root]) .bf-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--bf-z);
+  pointer-events: none;
+}
+
+:where([data-blocfeed-ui-root]) .bf-blocker {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  pointer-events: auto;
+}
+
+:where([data-blocfeed-ui-root]) .bf-highlight {
+  position: fixed;
+  border: 2px solid var(--bf-accent);
+  border-radius: 10px;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.42);
+  pointer-events: none;
+}
+
+:where([data-blocfeed-ui-root]) .bf-hint {
+  position: fixed;
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: min(640px, calc(100vw - 24px));
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid var(--bf-border);
+  background: var(--bf-panel-bg);
+  box-shadow: var(--bf-shadow);
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+:where([data-blocfeed-ui-root]) .bf-hint p {
+  margin: 0;
+  font-size: 13px;
+  color: var(--bf-muted);
+}
+
+:where([data-blocfeed-ui-root]) .bf-btn {
+  border: 1px solid var(--bf-border);
+  background: transparent;
+  color: var(--bf-panel-fg);
+  padding: 8px 10px;
+  border-radius: 10px;
+  cursor: pointer;
+  user-select: none;
+}
+
+:where([data-blocfeed-ui-root]) .bf-btn[disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+:where([data-blocfeed-ui-root]) .bf-btnPrimary {
+  background: var(--bf-accent);
+  border-color: rgba(99, 102, 241, 0.6);
+  color: white;
+}
+
+:where([data-blocfeed-ui-root]) .bf-panel {
+  position: fixed;
+  width: 360px;
+  max-width: calc(100vw - 24px);
+  border-radius: 14px;
+  border: 1px solid var(--bf-border);
+  background: var(--bf-panel-bg);
+  box-shadow: var(--bf-shadow);
+  pointer-events: auto;
+  overflow: hidden;
+}
+
+:where([data-blocfeed-ui-root]) .bf-panelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 12px 12px 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+:where([data-blocfeed-ui-root]) .bf-title {
+  font-size: 13px;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  color: rgba(243, 244, 246, 0.85);
+}
+
+:where([data-blocfeed-ui-root]) .bf-panelBody {
+  padding: 12px;
+  display: grid;
+  gap: 10px;
+}
+
+:where([data-blocfeed-ui-root]) .bf-textarea {
+  width: 100%;
+  min-height: 96px;
+  resize: vertical;
+  padding: 10px 10px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(0, 0, 0, 0.18);
+  color: var(--bf-panel-fg);
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+:where([data-blocfeed-ui-root]) .bf-textarea:focus-visible {
+  outline: 2px solid rgba(99, 102, 241, 0.9);
+  outline-offset: 2px;
+}
+
+:where([data-blocfeed-ui-root]) .bf-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+:where([data-blocfeed-ui-root]) .bf-row label {
+  font-size: 13px;
+  color: var(--bf-muted);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  user-select: none;
+}
+
+:where([data-blocfeed-ui-root]) .bf-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  padding-top: 4px;
+}
+
+:where([data-blocfeed-ui-root]) .bf-status {
+  font-size: 12px;
+  color: var(--bf-muted);
+}
+
+:where([data-blocfeed-ui-root]) .bf-error {
+  font-size: 12px;
+  color: rgb(254, 202, 202);
+}
+
+:where([data-blocfeed-ui-root]) .bf-toast {
+  position: fixed;
+  left: 50%;
+  bottom: 18px;
+  transform: translateX(-50%);
+  z-index: var(--bf-z);
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid var(--bf-border);
+  background: var(--bf-panel-bg);
+  box-shadow: var(--bf-shadow);
+  pointer-events: none;
+  font-size: 13px;
+  color: rgba(243, 244, 246, 0.9);
+}
+`;function A(){if(!a()||document.getElementById(T))return;let t=document.createElement("style");t.id=T,t.textContent=_,document.head.appendChild(t);}function y(){let t=useContext(m);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 G(t,e,a){return Math.max(e,Math.min(a,t))}function O(t,e){let l=window.innerWidth,r=window.innerHeight,d=G(t.x,12,Math.max(12,l-e-12)),f=t.y+t.height+12,g=Math.max(12,t.y-240);return {top:f+240<=r?f:g,left:d}}function V(t){let{rect:e}=t,a={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:a})}function Y(t){let{state:e,controller:a,start:l,stop:r,clearSelection:d,submit:f}=y(),[g,C]=useState(null),[h,F]=useState(""),[B,k]=useState(t.config.capture?.element??true),[S,P]=useState(t.config.capture?.fullPage??false),[I,N]=useState(null);useEffect(()=>a.subscribeHover(C),[a]),useEffect(()=>{let i=a.__unsafeGetSelectedElement();if(!i||e.phase==="idle"||e.phase==="picking"){N(null);return}let z=()=>{N(b(i.getBoundingClientRect()));};z();let u=()=>z();return window.addEventListener("scroll",u,{capture:true,passive:true}),window.addEventListener("resize",u,{passive:true}),()=>{window.removeEventListener("scroll",u,{capture:true}),window.removeEventListener("resize",u);}},[a,e.phase,e.selection?.selector]),useEffect(()=>{e.phase==="review"&&(F(""),k(t.config.capture?.element??true),P(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 i=window.setTimeout(()=>r(),1200);return ()=>window.clearTimeout(i)},[e.phase,r]);let c=e.phase==="capturing"||e.phase==="submitting",s=e.phase==="picking"?g?.rect??null:I??e.selection?.rect??null,x=useMemo(()=>s?O(s,360):null,[s?.x,s?.y,s?.width,s?.height]),R=e.lastError?.message;return jsxs(Fragment,{children:[e.phase==="idle"&&jsxs("button",{className:"bf-trigger",type:"button",onClick:()=>l(),"aria-label":"Give feedback",children:[jsx("span",{className:"bf-dot","aria-hidden":"true"}),"Feedback"]}),e.phase!=="idle"&&jsxs("div",{className:"bf-overlay",children:[e.phase!=="picking"&&jsx("div",{className:"bf-blocker",role:"presentation",onClick:()=>r()}),s&&jsx(V,{rect:s}),e.phase==="picking"&&jsxs("div",{className:"bf-hint",children:[jsxs("p",{children:["Click an element to attach your feedback. Press ",jsx("strong",{children:"Esc"})," to cancel."]}),jsx("button",{type:"button",className:"bf-btn",onClick:()=>r(),children:"Cancel"})]}),(e.phase==="review"||e.phase==="capturing"||e.phase==="submitting"||e.phase==="error"||e.phase==="success")&&x&&jsxs("div",{className:"bf-panel",style:{left:x.left,top:x.top},children:[jsxs("div",{className:"bf-panelHeader",children:[jsx("div",{className:"bf-title",children:"Feedback"}),jsxs("div",{className:"bf-row",style:{justifyContent:"flex-end"},children:[jsx("button",{type:"button",className:"bf-btn",onClick:()=>d(),disabled:c,children:"Re-pick"}),jsx("button",{type:"button",className:"bf-btn",onClick:()=>r(),disabled:c,children:"Close"})]})]}),jsxs("div",{className:"bf-panelBody",children:[jsx("textarea",{className:"bf-textarea",placeholder:"What\u2019s happening? What did you expect?",value:h,onChange:i=>F(i.target.value),disabled:c}),jsxs("div",{className:"bf-row",children:[jsxs("label",{children:[jsx("input",{type:"checkbox",checked:B,onChange:i=>k(i.target.checked),disabled:c}),"Screenshot element"]}),jsxs("label",{children:[jsx("input",{type:"checkbox",checked:S,onChange:i=>P(i.target.checked),disabled:c}),"Full page"]})]}),e.phase==="capturing"&&jsx("div",{className:"bf-status",children:"Capturing screenshots\u2026"}),e.phase==="submitting"&&jsx("div",{className:"bf-status",children:"Submitting\u2026"}),e.phase==="success"&&jsx("div",{className:"bf-status",children:"Sent. Thank you!"}),e.phase==="error"&&R&&jsx("div",{className:"bf-error",children:R}),jsxs("div",{className:"bf-actions",children:[jsx("button",{type:"button",className:"bf-btn",onClick:()=>r(),disabled:c,children:"Cancel"}),jsx("button",{type:"button",className:"bf-btn bf-btnPrimary",onClick:()=>f(h,{capture:{element:B,fullPage:S}}),disabled:c||h.trim().length===0,children:"Send"})]})]})]})]}),e.phase==="success"&&jsx("div",{className:"bf-toast","aria-live":"polite",children:"Feedback sent"})]})}function q(t){let e=t.config??{},[a,l]=useState(null);return useEffect(()=>{A();let r=document.createElement("div");r.setAttribute("data-blocfeed-ui-root","true"),r.setAttribute("data-blocfeed-ui","true");let d=e.ui?.zIndex;return typeof d=="number"&&r.style.setProperty("--bf-z",String(d)),document.body.appendChild(r),l(r),()=>{r.remove(),l(null);}},[e.ui?.zIndex]),a?createPortal(jsx(w,{config:e,children:jsx(Y,{config:e})}),a):null}export{w as BlocFeedProvider,q as BlocFeedWidget,y as useBlocFeed};

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "blocfeed",
+  "version": "0.1.0",
+  "description": "Drop-in feedback + screenshot widget for React.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "keywords": [
+    "react",
+    "nextjs",
+    "feedback",
+    "widget",
+    "screenshot",
+    "bug-report",
+    "product-feedback",
+    "element-picker"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist/**/*.js",
+    "dist/**/*.cjs",
+    "dist/**/*.d.ts",
+    "dist/**/*.d.cts",
+    "README.md",
+    "LICENSE"
+  ],
+  "main": "./dist/main.cjs",
+  "module": "./dist/main.js",
+  "types": "./dist/main.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "import": "./dist/main.js",
+      "require": "./dist/main.cjs"
+    },
+    "./engine": {
+      "types": "./dist/engine.d.ts",
+      "import": "./dist/engine.js",
+      "require": "./dist/engine.cjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "build:debug": "tsup --sourcemap",
+    "dev": "tsup --watch --sourcemap",
+    "playground:install": "npm --prefix playground install",
+    "playground:dev": "npm --prefix playground run dev",
+    "playground:build": "npm --prefix playground run build",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "prepack": "npm run build",
+    "prepublishOnly": "npm run typecheck && npm test"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "dependencies": {
+    "html-to-image": "^1.11.11"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "jsdom": "^24.0.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.5.4",
+    "vitest": "^1.6.0"
+  }
+}