{"_id":"@black-flag-design/bfd-widget","_rev":"3-fbd0e0c93b896a5b740a5b388abbd13f","name":"@black-flag-design/bfd-widget","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@black-flag-design/bfd-widget","version":"1.0.0","keywords":["feedback","widget","react","embeddable","black-flag"],"author":{"name":"Black Flag Design"},"license":"MIT","_id":"@black-flag-design/bfd-widget@1.0.0","maintainers":[{"name":"katt1011","email":"keith@blackflag.design"}],"homepage":"https://github.com/black-flag-collective/bfd-widget#readme","bugs":{"url":"https://github.com/black-flag-collective/bfd-widget/issues"},"dist":{"shasum":"19d544324d71d2eb363f88045fce9b6b04758e06","tarball":"https://registry.npmjs.org/@black-flag-design/bfd-widget/-/bfd-widget-1.0.0.tgz","fileCount":7,"integrity":"sha512-lTqGDQ762EddHt6og1GYs2Z6HYKdKn0mJvZ8WG1RL30z6m1rdeVIT+8rURcNmF65b2ivQ7MR64RXL+X/NGTirQ==","signatures":[{"sig":"MEUCIQCulfGRYg5dpuFXOTKLmWw/I0SFJgM68zbpE69Sv0ryxgIgVnZcMZfzdwYxWUf79SIo7j7me08UqA52gZwaxeL/YGM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4454158},"main":"dist/esm/index.js","type":"module","types":"dist/esm/index.d.ts","module":"dist/esm/index.js","exports":{".":{"types":"./dist/esm/index.d.ts","import":"./dist/esm/index.js"},"./cdn":{"import":"./dist/widget.js"},"./style.css":"./dist/style.css"},"scripts":{"dev":"vite build --watch --mode cdn","build":"npm run build:cdn && npm run build:npm","clean":"rm -rf dist","build:cdn":"vite build --mode cdn","build:npm":"vite build --mode npm && tsc --emitDeclarationOnly --outDir dist/esm","typecheck":"tsc --noEmit","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"katt1011","email":"keith@blackflag.design"},"repository":{"url":"git+https://github.com/black-flag-collective/bfd-widget.git","type":"git"},"_npmVersion":"10.8.1","description":"Embeddable feedback widget for the Black Flag Feedback Management Platform","directories":{},"_nodeVersion":"22.4.0","dependencies":{"clsx":"^2.1.1","html2canvas":"^1.4.1","lucide-react":"^0.453.0","tailwind-merge":"^2.6.0","@radix-ui/react-slot":"^1.2.0","embla-carousel-react":"^8.6.0","@radix-ui/react-toast":"^1.2.7","@tanstack/react-query":"^5.60.5","@radix-ui/react-progress":"^1.1.3","class-variance-authority":"^0.7.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.14","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.7.2","@types/node":"^20.16.11","tailwindcss":"^3.4.14","@types/react":"^18.3.11","autoprefixer":"^10.4.20","@types/react-dom":"^18.3.1","@tailwindcss/forms":"^0.5.10","tailwindcss-animate":"^1.0.7","@vitejs/plugin-react":"^4.3.4","@tailwindcss/typography":"^0.5.15"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/bfd-widget_1.0.0_1767247366583_0.07217333925148806","host":"s3://npm-registry-packages-npm-production"},"deprecated":"This package has been moved to a private registry. Contact Black Flag Collective for access."},"1.0.1":{"name":"@black-flag-design/bfd-widget","version":"1.0.1","keywords":["feedback","widget","react","embeddable","black-flag"],"author":{"name":"Black Flag Design"},"license":"MIT","_id":"@black-flag-design/bfd-widget@1.0.1","maintainers":[{"name":"katt1011","email":"keith@blackflag.design"}],"homepage":"https://github.com/black-flag-collective/bfd-widget#readme","bugs":{"url":"https://github.com/black-flag-collective/bfd-widget/issues"},"dist":{"shasum":"684784ef1c0229c30f2032965dba463f353689ac","tarball":"https://registry.npmjs.org/@black-flag-design/bfd-widget/-/bfd-widget-1.0.1.tgz","fileCount":7,"integrity":"sha512-MYVS6UH6v5dxBx8Qrmefmdc6Ks5pCooB62L+WNUybD29tPHuibL/AY6s/KkrspRXBbE1kqCc4HBkoWLf96Djjw==","signatures":[{"sig":"MEUCIGYPE/SXVwu7k0q2vi3XdxgOema0sZIwEFmKr9Q92FOvAiEA4uXqqhxR2Ff5BG3wQ8uyf6L/Qf3s+HfzMQ4YjhQXmkw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4454158},"main":"dist/esm/index.js","type":"module","types":"dist/esm/index.d.ts","module":"dist/esm/index.js","exports":{".":{"types":"./dist/esm/index.d.ts","import":"./dist/esm/index.js"},"./cdn":{"import":"./dist/widget.js"},"./style.css":"./dist/style.css"},"gitHead":"aad65127c538cb0e55b86f910c91cdaa134efea8","scripts":{"dev":"vite build --watch --mode cdn","build":"npm run build:cdn && npm run build:npm","clean":"rm -rf dist","build:cdn":"vite build --mode cdn","build:npm":"vite build --mode npm && tsc --emitDeclarationOnly --outDir dist/esm","typecheck":"tsc --noEmit","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"katt1011","email":"keith@blackflag.design"},"repository":{"url":"git+https://github.com/black-flag-collective/bfd-widget.git","type":"git"},"_npmVersion":"10.8.2","description":"Embeddable feedback widget for the Black Flag Feedback Management Platform","directories":{},"_nodeVersion":"20.19.6","dependencies":{"clsx":"^2.1.1","html2canvas":"^1.4.1","lucide-react":"^0.453.0","tailwind-merge":"^2.6.0","@radix-ui/react-slot":"^1.2.0","embla-carousel-react":"^8.6.0","@radix-ui/react-toast":"^1.2.7","@tanstack/react-query":"^5.60.5","@radix-ui/react-progress":"^1.1.3","class-variance-authority":"^0.7.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.14","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.7.2","@types/node":"^20.16.11","tailwindcss":"^3.4.14","@types/react":"^18.3.11","autoprefixer":"^10.4.20","@types/react-dom":"^18.3.1","@tailwindcss/forms":"^0.5.10","tailwindcss-animate":"^1.0.7","@vitejs/plugin-react":"^4.3.4","@tailwindcss/typography":"^0.5.15"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/bfd-widget_1.0.1_1767248732307_0.05800072117078292","host":"s3://npm-registry-packages-npm-production"},"deprecated":"This package has been moved to a private registry. Contact Black Flag Collective for access."}},"time":{"created":"2026-01-01T06:02:46.494Z","modified":"2026-01-02T21:56:41.623Z","1.0.0":"2026-01-01T06:02:46.823Z","1.0.1":"2026-01-01T06:25:32.574Z"},"bugs":{"url":"https://github.com/black-flag-collective/bfd-widget/issues"},"author":{"name":"Black Flag Design"},"license":"MIT","homepage":"https://github.com/black-flag-collective/bfd-widget#readme","keywords":["feedback","widget","react","embeddable","black-flag"],"repository":{"url":"git+https://github.com/black-flag-collective/bfd-widget.git","type":"git"},"description":"Embeddable feedback widget for the Black Flag Feedback Management Platform","maintainers":[{"name":"katt1011","email":"keith@blackflag.design"}],"readme":"# Black Flag Feedback Widget\n\n> 🏴 Seamless feedback collection for any web application. Capture text, voice, screenshots, and file uploads—all from a beautiful floating widget.\n\n<p align=\"center\">\n  <img src=\"docs/screenshots/widget-button-focused.png\" alt=\"Widget Button\" width=\"60\" />\n  <br/>\n  <em>A minimal floating button that transforms into a powerful feedback tool</em>\n</p>\n\n---\n\n## ✨ Widget States\n\n### Mode Selection Menu\n\nClick the floating button to reveal four feedback modes:\n\n<p align=\"center\">\n  <img src=\"docs/screenshots/widget-menu-focused.png\" alt=\"Widget Menu\" width=\"320\" />\n</p>\n\n---\n\n### 📝 Text Feedback\n\nQuick text input for bug reports, feature requests, and general feedback:\n\n<p align=\"center\">\n  <img src=\"docs/screenshots/widget-text-focused.png\" alt=\"Text Mode Empty\" width=\"300\" />\n  <img src=\"docs/screenshots/widget-text-filled-focused.png\" alt=\"Text Mode Filled\" width=\"300\" />\n</p>\n\n---\n\n### 🎙️ Voice Recording\n\nRecord audio feedback for detailed explanations—perfect for complex issues:\n\n<p align=\"center\">\n  <img src=\"docs/screenshots/widget-voice-focused.png\" alt=\"Voice Mode\" width=\"320\" />\n</p>\n\n---\n\n### 📍 Location Targeting\n\nClick directly on UI elements to pinpoint exactly where the issue is:\n\n<p align=\"center\">\n  <img src=\"docs/screenshots/widget-location-focused.png\" alt=\"Location Mode\" width=\"400\" />\n</p>\n\n<p align=\"center\"><em>Full-page overlay with element targeting crosshair</em></p>\n\n---\n\n### 📎 Document Upload\n\nDrag-and-drop file uploads with support for images, PDFs, videos, and more:\n\n<p align=\"center\">\n  <img src=\"docs/screenshots/widget-document-focused.png\" alt=\"Document Mode\" width=\"320\" />\n</p>\n\n---\n\n## 🚀 Quick Start\n\n### CDN (Recommended for Quick Integration)\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n  <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/blackflag-feedback-widget@latest/dist/style.css\">\n</head>\n<body>\n  <h1>Your Website</h1>\n  \n  <!-- Configure the widget -->\n  <script>\n    window.BlackFlagConfig = {\n      projectKey: 'your-project-key',\n      secret: 'your-secret'\n    };\n  </script>\n  \n  <!-- Load the widget -->\n  <script src=\"https://cdn.jsdelivr.net/npm/blackflag-feedback-widget@latest/dist/widget.js\"></script>\n</body>\n</html>\n```\n\n### NPM (For React Applications)\n\n```bash\nnpm install blackflag-feedback-widget\n```\n\n```tsx\nimport { FeedbackWidget } from 'blackflag-feedback-widget';\nimport 'blackflag-feedback-widget/dist/style.css';\n\nfunction App() {\n  return (\n    <FeedbackWidget \n      projectKey=\"your-project-key\"\n      signature=\"your-secret\"\n      apiBaseUrl=\"https://api.blackflag.design\"\n    />\n  );\n}\n```\n\n---\n\n## ⚙️ Configuration\n\n### CDN Configuration\n\n```javascript\nwindow.BlackFlagConfig = {\n  projectKey: 'your-project-key',  // REQUIRED - Project public key\n  secret: 'your-secret',            // REQUIRED - Project secret\n  container: 'custom-container-id', // OPTIONAL - Custom container element ID\n  theme: 'dark'                     // OPTIONAL - 'light' or 'dark'\n};\n```\n\n### React Component Props\n\n| Prop | Type | Required | Description |\n|------|------|----------|-------------|\n| `projectKey` | `string` | Yes | Your project's public key |\n| `signature` | `string` | Yes | Your project's secret key |\n| `apiBaseUrl` | `string` | No | API base URL (default: production API) |\n| `theme` | `'light' \\| 'dark'` | No | Widget theme |\n| `container` | `string` | No | Custom container element ID |\n\n---\n\n## ⌨️ Keyboard Shortcuts\n\n| Shortcut | Action |\n|----------|--------|\n| `Cmd/Ctrl+B` | Toggle widget open/closed |\n| `Cmd/Ctrl+Enter` | Submit feedback (when widget open) |\n| `Escape` | Close widget or cancel location selection |\n| `1-4` | Quick mode selection (when mode menu open) |\n\n---\n\n## 🏗️ Architecture\n\n### Shadow DOM Isolation\n\nThe widget renders inside Shadow DOM for complete style isolation:\n- ✅ No CSS conflicts with host page\n- ✅ Predictable rendering across all websites\n- ✅ Brand token system via CSS variables\n\n### Zero External Dependencies\n\nThis package is completely standalone—no external dependencies or shared code required.\n\n---\n\n## 🛠️ Development\n\n### Prerequisites\n\n- Node.js 20+\n- npm 10+\n\n### Setup\n\n```bash\ngit clone https://github.com/black-flag-collective/black-flag-widget.git\ncd black-flag-widget\nnpm install\n```\n\n### Build Commands\n\n```bash\n# Production build (CDN + NPM)\nnpm run build\n\n# CDN build only (IIFE bundle)\nnpm run build:cdn\n\n# NPM build only (ESM module)\nnpm run build:npm\n\n# Development mode with watch\nnpm run dev\n\n# Type checking\nnpm run typecheck\n```\n\n### Build Output\n\n```\ndist/\n├── widget.js       # CDN-hostable IIFE bundle (~500KB)\n├── widget.js.map   # Source map\n├── style.css       # Widget styles (~50KB)\n├── style.css.map   # CSS source map\n└── esm/\n    ├── index.js    # ESM build for NPM\n    └── index.d.ts  # TypeScript declarations\n```\n\n---\n\n## 🌐 Browser Compatibility\n\n| Browser | Minimum Version |\n|---------|-----------------|\n| Chrome/Edge | 90+ |\n| Firefox | 88+ |\n| Safari | 14+ |\n| Opera | 76+ |\n\n### Required Browser Features\n\n- ES2020 JavaScript\n- Shadow DOM v1\n- MediaRecorder API (for voice)\n- FileReader API (for uploads)\n- Canvas API (for screenshots)\n\n---\n\n## 📄 License\n\nMIT - Black Flag Collective\n\n---\n\n## 🤝 Support\n\n- **Issues**: [github.com/black-flag-collective/black-flag-widget/issues](https://github.com/black-flag-collective/black-flag-widget/issues)\n- **Documentation**: [github.com/black-flag-collective/black-flag-widget](https://github.com/black-flag-collective/black-flag-widget)\n","readmeFilename":"README.md"}