fdbck-react 0.2.0 → 0.2.2

package/README.md

@@ -1,6 +1,9 @@
 # fdbck-react
 
-Official React SDK for [fdbck](https://fdbck.sh) — embed feedback questions natively in your React app with Shadow DOM CSS isolation.
+[![npm version](https://img.shields.io/npm/v/fdbck-react.svg)](https://www.npmjs.com/package/fdbck-react)
+[![license](https://img.shields.io/npm/l/fdbck-react.svg)](https://www.npmjs.com/package/fdbck-react)
+
+Official React SDK for [fdbck](https://fdbck.sh) - embed feedback questions natively in your React app with Shadow DOM CSS isolation.
 
 ## Install
 
@@ -8,13 +11,21 @@ Official React SDK for [fdbck](https://fdbck.sh) — embed feedback questions na
 npm install fdbck-react
 ```
 
+```bash
+yarn add fdbck-react
+```
+
+```bash
+pnpm add fdbck-react
+```
+
 Requires React 18+.
 
 ## Quick start
 
 ### 1. Direct token (simplest)
 
-Generate a response token on your backend (via the Node.js or Python SDK), then pass it to the widget:
+Generate a response token on your backend (via the REST API, node.js or python SDK), then pass it to the widget:
 
 ```tsx
 import { FdbckWidget } from 'fdbck-react';
@@ -32,7 +43,7 @@ function App() {
 
 ### 2. Imperative API (provider pattern)
 
-For showing feedback modals/popovers imperatively:
+For showing feedback modals / popovers imperatively:
 
 ```tsx
 import { FdbckProvider, useFdbck } from 'fdbck-react';
@@ -140,6 +151,13 @@ The widget uses `useEffect` for all DOM operations (Shadow DOM, fetch). It rende
 
 ~7KB gzipped (including all CSS).
 
+## Links
+
+- [npm](https://www.npmjs.com/package/fdbck-react)
+- [Documentation](https://docs.fdbck.sh/sdks/react)
+- [GitHub](https://github.com/fdbck-sh/fdbck-react)
+- [fdbck](https://fdbck.sh)
+
 ## License
 
 MIT

package/dist/index.js

@@ -223,22 +223,47 @@ var import_react3 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/styles/base.css
-var base_default = {};
+var base_default = "/* fdbck widget \u2014 base styles */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n:host {\n  display: block;\n  font-family: var(--fdbck-font-family);\n  font-size: var(--fdbck-font-size);\n  line-height: 1.5;\n  color: var(--fdbck-text-primary);\n  -webkit-font-smoothing: antialiased;\n}\n\n.fdbck-card {\n  width: var(--fdbck-width);\n  max-width: var(--fdbck-max-width);\n  background: var(--fdbck-card-bg);\n  border: 1px solid var(--fdbck-border);\n  border-radius: var(--fdbck-border-radius);\n  padding: 1.5rem;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.fdbck-welcome {\n  font-size: var(--fdbck-font-size);\n  color: var(--fdbck-text-secondary);\n  margin-bottom: 1rem;\n  white-space: pre-line;\n}\n\n.fdbck-question {\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--fdbck-text-primary);\n  margin-bottom: 1.5rem;\n}\n\n.fdbck-error-text {\n  color: #ef4444;\n  font-size: var(--fdbck-font-size);\n  margin-bottom: 1rem;\n}\n\n.fdbck-center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  flex-direction: column;\n}\n\n.fdbck-loading {\n  min-height: 200px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.fdbck-spinner {\n  width: 1.5rem;\n  height: 1.5rem;\n  border: 2px solid transparent;\n  border-top-color: var(--fdbck-accent);\n  border-right-color: var(--fdbck-accent);\n  border-radius: 50%;\n  animation: fdbck-spin 0.6s linear infinite;\n}\n\n@keyframes fdbck-spin {\n  to { transform: rotate(360deg); }\n}\n\n.fdbck-error-state {\n  padding: 2rem 0;\n  text-align: center;\n}\n\n.fdbck-error-state h2 {\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--fdbck-text-primary);\n  margin-bottom: 0.25rem;\n}\n\n.fdbck-error-state p {\n  color: var(--fdbck-text-secondary);\n}\n\n.fdbck-retry-btn {\n  margin-top: 1rem;\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--fdbck-border);\n  border-radius: 0.5rem;\n  background: transparent;\n  color: var(--fdbck-text-primary);\n  font-size: var(--fdbck-font-size);\n  cursor: pointer;\n  transition: border-color 0.15s;\n}\n\n.fdbck-retry-btn:hover {\n  border-color: var(--fdbck-accent);\n}\n";
 
 // src/styles/question-types.css
-var question_types_default = {};
+var question_types_default = '/* fdbck widget \u2014 question type styles */\n\n/* Shared option button */\n.fdbck-option-btn {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  width: 100%;\n  padding: 0.75rem 1rem;\n  border: 1px solid var(--fdbck-border);\n  border-radius: 0.5rem;\n  background: transparent;\n  color: var(--fdbck-text-primary);\n  font-size: var(--fdbck-font-size);\n  text-align: left;\n  cursor: pointer;\n  transition: border-color 0.15s;\n}\n\n.fdbck-option-btn:hover:not(:disabled) {\n  border-color: var(--fdbck-accent);\n}\n\n.fdbck-option-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.fdbck-option-btn[data-selected="true"] {\n  border-color: var(--fdbck-accent);\n}\n\n/* Yes/No grid */\n.fdbck-yesno-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.75rem;\n}\n\n.fdbck-yesno-grid .fdbck-option-btn {\n  justify-content: center;\n  font-weight: 500;\n}\n\n/* Single/Multiple choice list */\n.fdbck-choice-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n/* Radio dot indicator */\n.fdbck-radio {\n  width: 1rem;\n  height: 1rem;\n  border: 2px solid var(--fdbck-indicator-border);\n  border-radius: 50%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.15s;\n}\n\n.fdbck-radio[data-selected="true"] {\n  border-color: var(--fdbck-accent);\n}\n\n.fdbck-radio-dot {\n  width: 0.5rem;\n  height: 0.5rem;\n  border-radius: 50%;\n  background: var(--fdbck-accent);\n}\n\n/* Checkbox indicator */\n.fdbck-checkbox {\n  width: 1rem;\n  height: 1rem;\n  border: 2px solid var(--fdbck-indicator-border);\n  border-radius: 0.25rem;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.15s, background-color 0.15s;\n}\n\n.fdbck-checkbox[data-selected="true"] {\n  border-color: var(--fdbck-accent);\n  background-color: var(--fdbck-accent);\n}\n\n.fdbck-checkbox svg {\n  width: 0.75rem;\n  height: 0.75rem;\n  color: #fff;\n}\n\n/* Submit button (multiple choice) */\n.fdbck-submit-btn {\n  margin-top: 0.5rem;\n  padding: 0.625rem 1rem;\n  border: none;\n  border-radius: 0.5rem;\n  background: var(--fdbck-accent);\n  color: #fff;\n  font-size: var(--fdbck-font-size);\n  font-weight: 500;\n  cursor: pointer;\n  transition: opacity 0.15s;\n}\n\n.fdbck-submit-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n/* Rating grid */\n.fdbck-rating-grid {\n  display: grid;\n  gap: 0.375rem;\n}\n\n.fdbck-rating-btn {\n  aspect-ratio: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: 1px solid var(--fdbck-border);\n  border-radius: 0.5rem;\n  background: transparent;\n  color: var(--fdbck-text-primary);\n  font-size: var(--fdbck-font-size);\n  font-weight: 500;\n  cursor: pointer;\n  transition: border-color 0.15s, background-color 0.15s, color 0.15s;\n}\n\n.fdbck-rating-btn:hover:not(:disabled) {\n  border-color: var(--fdbck-accent);\n}\n\n.fdbck-rating-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.fdbck-rating-btn[data-selected="true"] {\n  background-color: var(--fdbck-accent);\n  border-color: var(--fdbck-accent);\n  color: #fff;\n}\n\n.fdbck-rating-labels {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n  color: var(--fdbck-text-muted);\n}\n';
 
 // src/styles/confirmation.css
-var confirmation_default = {};
+var confirmation_default = "/* fdbck widget \u2014 confirmation state */\n.fdbck-confirmation {\n  padding: 2rem 0;\n  text-align: center;\n}\n\n.fdbck-check-circle {\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  background: var(--fdbck-accent-alpha);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto 1rem;\n  animation: fdbck-scale-in 0.3s ease-out;\n}\n\n.fdbck-check-circle svg {\n  width: 1.5rem;\n  height: 1.5rem;\n  color: var(--fdbck-accent);\n}\n\n.fdbck-confirmation h2 {\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--fdbck-text-primary);\n  margin-bottom: 0.25rem;\n}\n\n.fdbck-confirmation p {\n  color: var(--fdbck-text-secondary);\n  white-space: pre-line;\n}\n\n@keyframes fdbck-scale-in {\n  from { transform: scale(0.5); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n";
 
 // src/styles/branding.css
-var branding_default = {};
+var branding_default = `/* fdbck widget \u2014 "Powered by fdbck" footer */
+.fdbck-branding {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--fdbck-border);
+}
+
+.fdbck-branding a {
+  font-size: 0.75rem;
+  color: var(--fdbck-text-muted);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.fdbck-branding a:hover {
+  color: var(--fdbck-text-secondary);
+}
+
+.fdbck-branding-name {
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 500;
+  color: var(--fdbck-accent);
+}
+`;
 
 // src/styles/modal.css
-var modal_default = {};
+var modal_default = "/* fdbck widget \u2014 modal mode */\n.fdbck-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  z-index: 2147483647;\n  animation: fdbck-fade-in 0.2s ease-out;\n}\n\n.fdbck-modal-content {\n  position: relative;\n  animation: fdbck-scale-up 0.2s ease-out;\n}\n\n.fdbck-close-btn {\n  position: absolute;\n  top: -0.5rem;\n  right: -0.5rem;\n  width: 1.75rem;\n  height: 1.75rem;\n  border: 1px solid var(--fdbck-border);\n  border-radius: 50%;\n  background: var(--fdbck-card-bg);\n  color: var(--fdbck-text-secondary);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1rem;\n  line-height: 1;\n  transition: border-color 0.15s;\n  z-index: 1;\n}\n\n.fdbck-close-btn:hover {\n  border-color: var(--fdbck-accent);\n}\n\n@keyframes fdbck-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes fdbck-scale-up {\n  from { transform: scale(0.95); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fdbck-modal-backdrop,\n  .fdbck-modal-content {\n    animation: none;\n  }\n}\n";
 
 // src/styles/popover.css
-var popover_default = {};
+var popover_default = "/* fdbck widget \u2014 popover mode */\n.fdbck-popover {\n  position: fixed;\n  bottom: 1.5rem;\n  right: 1.5rem;\n  z-index: 2147483647;\n  animation: fdbck-slide-up 0.25s ease-out;\n}\n\n.fdbck-popover .fdbck-close-btn {\n  position: absolute;\n  top: -0.5rem;\n  right: -0.5rem;\n}\n\n/* Mobile: bottom sheet */\n@media (max-width: 640px) {\n  .fdbck-popover {\n    bottom: 0;\n    right: 0;\n    left: 0;\n    padding: 0;\n    animation: fdbck-sheet-up 0.25s ease-out;\n  }\n\n  .fdbck-popover .fdbck-card {\n    max-width: 100%;\n    width: 100%;\n    border-radius: var(--fdbck-border-radius) var(--fdbck-border-radius) 0 0;\n    border-bottom: none;\n  }\n\n  .fdbck-popover .fdbck-close-btn {\n    top: 0.75rem;\n    right: 0.75rem;\n  }\n}\n\n@keyframes fdbck-slide-up {\n  from { transform: translateY(1rem); opacity: 0; }\n  to { transform: translateY(0); opacity: 1; }\n}\n\n@keyframes fdbck-sheet-up {\n  from { transform: translateY(100%); }\n  to { transform: translateY(0); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fdbck-popover {\n    animation: none;\n  }\n}\n";
 
 // src/styles/index.ts
 var WIDGET_CSS = [

package/dist/index.mjs

@@ -196,22 +196,47 @@ import { useRef, useEffect as useEffect2, useState } from "react";
 import { createPortal } from "react-dom";
 
 // src/styles/base.css
-var base_default = {};
+var base_default = "/* fdbck widget \u2014 base styles */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n:host {\n  display: block;\n  font-family: var(--fdbck-font-family);\n  font-size: var(--fdbck-font-size);\n  line-height: 1.5;\n  color: var(--fdbck-text-primary);\n  -webkit-font-smoothing: antialiased;\n}\n\n.fdbck-card {\n  width: var(--fdbck-width);\n  max-width: var(--fdbck-max-width);\n  background: var(--fdbck-card-bg);\n  border: 1px solid var(--fdbck-border);\n  border-radius: var(--fdbck-border-radius);\n  padding: 1.5rem;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.fdbck-welcome {\n  font-size: var(--fdbck-font-size);\n  color: var(--fdbck-text-secondary);\n  margin-bottom: 1rem;\n  white-space: pre-line;\n}\n\n.fdbck-question {\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--fdbck-text-primary);\n  margin-bottom: 1.5rem;\n}\n\n.fdbck-error-text {\n  color: #ef4444;\n  font-size: var(--fdbck-font-size);\n  margin-bottom: 1rem;\n}\n\n.fdbck-center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  flex-direction: column;\n}\n\n.fdbck-loading {\n  min-height: 200px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.fdbck-spinner {\n  width: 1.5rem;\n  height: 1.5rem;\n  border: 2px solid transparent;\n  border-top-color: var(--fdbck-accent);\n  border-right-color: var(--fdbck-accent);\n  border-radius: 50%;\n  animation: fdbck-spin 0.6s linear infinite;\n}\n\n@keyframes fdbck-spin {\n  to { transform: rotate(360deg); }\n}\n\n.fdbck-error-state {\n  padding: 2rem 0;\n  text-align: center;\n}\n\n.fdbck-error-state h2 {\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--fdbck-text-primary);\n  margin-bottom: 0.25rem;\n}\n\n.fdbck-error-state p {\n  color: var(--fdbck-text-secondary);\n}\n\n.fdbck-retry-btn {\n  margin-top: 1rem;\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--fdbck-border);\n  border-radius: 0.5rem;\n  background: transparent;\n  color: var(--fdbck-text-primary);\n  font-size: var(--fdbck-font-size);\n  cursor: pointer;\n  transition: border-color 0.15s;\n}\n\n.fdbck-retry-btn:hover {\n  border-color: var(--fdbck-accent);\n}\n";
 
 // src/styles/question-types.css
-var question_types_default = {};
+var question_types_default = '/* fdbck widget \u2014 question type styles */\n\n/* Shared option button */\n.fdbck-option-btn {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  width: 100%;\n  padding: 0.75rem 1rem;\n  border: 1px solid var(--fdbck-border);\n  border-radius: 0.5rem;\n  background: transparent;\n  color: var(--fdbck-text-primary);\n  font-size: var(--fdbck-font-size);\n  text-align: left;\n  cursor: pointer;\n  transition: border-color 0.15s;\n}\n\n.fdbck-option-btn:hover:not(:disabled) {\n  border-color: var(--fdbck-accent);\n}\n\n.fdbck-option-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.fdbck-option-btn[data-selected="true"] {\n  border-color: var(--fdbck-accent);\n}\n\n/* Yes/No grid */\n.fdbck-yesno-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.75rem;\n}\n\n.fdbck-yesno-grid .fdbck-option-btn {\n  justify-content: center;\n  font-weight: 500;\n}\n\n/* Single/Multiple choice list */\n.fdbck-choice-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n/* Radio dot indicator */\n.fdbck-radio {\n  width: 1rem;\n  height: 1rem;\n  border: 2px solid var(--fdbck-indicator-border);\n  border-radius: 50%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.15s;\n}\n\n.fdbck-radio[data-selected="true"] {\n  border-color: var(--fdbck-accent);\n}\n\n.fdbck-radio-dot {\n  width: 0.5rem;\n  height: 0.5rem;\n  border-radius: 50%;\n  background: var(--fdbck-accent);\n}\n\n/* Checkbox indicator */\n.fdbck-checkbox {\n  width: 1rem;\n  height: 1rem;\n  border: 2px solid var(--fdbck-indicator-border);\n  border-radius: 0.25rem;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.15s, background-color 0.15s;\n}\n\n.fdbck-checkbox[data-selected="true"] {\n  border-color: var(--fdbck-accent);\n  background-color: var(--fdbck-accent);\n}\n\n.fdbck-checkbox svg {\n  width: 0.75rem;\n  height: 0.75rem;\n  color: #fff;\n}\n\n/* Submit button (multiple choice) */\n.fdbck-submit-btn {\n  margin-top: 0.5rem;\n  padding: 0.625rem 1rem;\n  border: none;\n  border-radius: 0.5rem;\n  background: var(--fdbck-accent);\n  color: #fff;\n  font-size: var(--fdbck-font-size);\n  font-weight: 500;\n  cursor: pointer;\n  transition: opacity 0.15s;\n}\n\n.fdbck-submit-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n/* Rating grid */\n.fdbck-rating-grid {\n  display: grid;\n  gap: 0.375rem;\n}\n\n.fdbck-rating-btn {\n  aspect-ratio: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: 1px solid var(--fdbck-border);\n  border-radius: 0.5rem;\n  background: transparent;\n  color: var(--fdbck-text-primary);\n  font-size: var(--fdbck-font-size);\n  font-weight: 500;\n  cursor: pointer;\n  transition: border-color 0.15s, background-color 0.15s, color 0.15s;\n}\n\n.fdbck-rating-btn:hover:not(:disabled) {\n  border-color: var(--fdbck-accent);\n}\n\n.fdbck-rating-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.fdbck-rating-btn[data-selected="true"] {\n  background-color: var(--fdbck-accent);\n  border-color: var(--fdbck-accent);\n  color: #fff;\n}\n\n.fdbck-rating-labels {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n  color: var(--fdbck-text-muted);\n}\n';
 
 // src/styles/confirmation.css
-var confirmation_default = {};
+var confirmation_default = "/* fdbck widget \u2014 confirmation state */\n.fdbck-confirmation {\n  padding: 2rem 0;\n  text-align: center;\n}\n\n.fdbck-check-circle {\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  background: var(--fdbck-accent-alpha);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto 1rem;\n  animation: fdbck-scale-in 0.3s ease-out;\n}\n\n.fdbck-check-circle svg {\n  width: 1.5rem;\n  height: 1.5rem;\n  color: var(--fdbck-accent);\n}\n\n.fdbck-confirmation h2 {\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--fdbck-text-primary);\n  margin-bottom: 0.25rem;\n}\n\n.fdbck-confirmation p {\n  color: var(--fdbck-text-secondary);\n  white-space: pre-line;\n}\n\n@keyframes fdbck-scale-in {\n  from { transform: scale(0.5); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n";
 
 // src/styles/branding.css
-var branding_default = {};
+var branding_default = `/* fdbck widget \u2014 "Powered by fdbck" footer */
+.fdbck-branding {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--fdbck-border);
+}
+
+.fdbck-branding a {
+  font-size: 0.75rem;
+  color: var(--fdbck-text-muted);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.fdbck-branding a:hover {
+  color: var(--fdbck-text-secondary);
+}
+
+.fdbck-branding-name {
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 500;
+  color: var(--fdbck-accent);
+}
+`;
 
 // src/styles/modal.css
-var modal_default = {};
+var modal_default = "/* fdbck widget \u2014 modal mode */\n.fdbck-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  z-index: 2147483647;\n  animation: fdbck-fade-in 0.2s ease-out;\n}\n\n.fdbck-modal-content {\n  position: relative;\n  animation: fdbck-scale-up 0.2s ease-out;\n}\n\n.fdbck-close-btn {\n  position: absolute;\n  top: -0.5rem;\n  right: -0.5rem;\n  width: 1.75rem;\n  height: 1.75rem;\n  border: 1px solid var(--fdbck-border);\n  border-radius: 50%;\n  background: var(--fdbck-card-bg);\n  color: var(--fdbck-text-secondary);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1rem;\n  line-height: 1;\n  transition: border-color 0.15s;\n  z-index: 1;\n}\n\n.fdbck-close-btn:hover {\n  border-color: var(--fdbck-accent);\n}\n\n@keyframes fdbck-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes fdbck-scale-up {\n  from { transform: scale(0.95); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fdbck-modal-backdrop,\n  .fdbck-modal-content {\n    animation: none;\n  }\n}\n";
 
 // src/styles/popover.css
-var popover_default = {};
+var popover_default = "/* fdbck widget \u2014 popover mode */\n.fdbck-popover {\n  position: fixed;\n  bottom: 1.5rem;\n  right: 1.5rem;\n  z-index: 2147483647;\n  animation: fdbck-slide-up 0.25s ease-out;\n}\n\n.fdbck-popover .fdbck-close-btn {\n  position: absolute;\n  top: -0.5rem;\n  right: -0.5rem;\n}\n\n/* Mobile: bottom sheet */\n@media (max-width: 640px) {\n  .fdbck-popover {\n    bottom: 0;\n    right: 0;\n    left: 0;\n    padding: 0;\n    animation: fdbck-sheet-up 0.25s ease-out;\n  }\n\n  .fdbck-popover .fdbck-card {\n    max-width: 100%;\n    width: 100%;\n    border-radius: var(--fdbck-border-radius) var(--fdbck-border-radius) 0 0;\n    border-bottom: none;\n  }\n\n  .fdbck-popover .fdbck-close-btn {\n    top: 0.75rem;\n    right: 0.75rem;\n  }\n}\n\n@keyframes fdbck-slide-up {\n  from { transform: translateY(1rem); opacity: 0; }\n  to { transform: translateY(0); opacity: 1; }\n}\n\n@keyframes fdbck-sheet-up {\n  from { transform: translateY(100%); }\n  to { transform: translateY(0); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fdbck-popover {\n    animation: none;\n  }\n}\n";
 
 // src/styles/index.ts
 var WIDGET_CSS = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fdbck-react",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Official React SDK for fdbck — embed feedback questions natively in your React app",
   "license": "MIT",
   "author": "fdbck",

package/dist/index.css

@@ -1,418 +0,0 @@
-/* src/styles/base.css */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-:host {
-  display: block;
-  font-family: var(--fdbck-font-family);
-  font-size: var(--fdbck-font-size);
-  line-height: 1.5;
-  color: var(--fdbck-text-primary);
-  -webkit-font-smoothing: antialiased;
-}
-.fdbck-card {
-  width: var(--fdbck-width);
-  max-width: var(--fdbck-max-width);
-  background: var(--fdbck-card-bg);
-  border: 1px solid var(--fdbck-border);
-  border-radius: var(--fdbck-border-radius);
-  padding: 1.5rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-.fdbck-welcome {
-  font-size: var(--fdbck-font-size);
-  color: var(--fdbck-text-secondary);
-  margin-bottom: 1rem;
-  white-space: pre-line;
-}
-.fdbck-question {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--fdbck-text-primary);
-  margin-bottom: 1.5rem;
-}
-.fdbck-error-text {
-  color: #ef4444;
-  font-size: var(--fdbck-font-size);
-  margin-bottom: 1rem;
-}
-.fdbck-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  flex-direction: column;
-}
-.fdbck-loading {
-  min-height: 200px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.fdbck-spinner {
-  width: 1.5rem;
-  height: 1.5rem;
-  border: 2px solid transparent;
-  border-top-color: var(--fdbck-accent);
-  border-right-color: var(--fdbck-accent);
-  border-radius: 50%;
-  animation: fdbck-spin 0.6s linear infinite;
-}
-@keyframes fdbck-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.fdbck-error-state {
-  padding: 2rem 0;
-  text-align: center;
-}
-.fdbck-error-state h2 {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--fdbck-text-primary);
-  margin-bottom: 0.25rem;
-}
-.fdbck-error-state p {
-  color: var(--fdbck-text-secondary);
-}
-.fdbck-retry-btn {
-  margin-top: 1rem;
-  padding: 0.5rem 1rem;
-  border: 1px solid var(--fdbck-border);
-  border-radius: 0.5rem;
-  background: transparent;
-  color: var(--fdbck-text-primary);
-  font-size: var(--fdbck-font-size);
-  cursor: pointer;
-  transition: border-color 0.15s;
-}
-.fdbck-retry-btn:hover {
-  border-color: var(--fdbck-accent);
-}
-
-/* src/styles/question-types.css */
-.fdbck-option-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  width: 100%;
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--fdbck-border);
-  border-radius: 0.5rem;
-  background: transparent;
-  color: var(--fdbck-text-primary);
-  font-size: var(--fdbck-font-size);
-  text-align: left;
-  cursor: pointer;
-  transition: border-color 0.15s;
-}
-.fdbck-option-btn:hover:not(:disabled) {
-  border-color: var(--fdbck-accent);
-}
-.fdbck-option-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.fdbck-option-btn[data-selected=true] {
-  border-color: var(--fdbck-accent);
-}
-.fdbck-yesno-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.75rem;
-}
-.fdbck-yesno-grid .fdbck-option-btn {
-  justify-content: center;
-  font-weight: 500;
-}
-.fdbck-choice-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-.fdbck-radio {
-  width: 1rem;
-  height: 1rem;
-  border: 2px solid var(--fdbck-indicator-border);
-  border-radius: 50%;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: border-color 0.15s;
-}
-.fdbck-radio[data-selected=true] {
-  border-color: var(--fdbck-accent);
-}
-.fdbck-radio-dot {
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-  background: var(--fdbck-accent);
-}
-.fdbck-checkbox {
-  width: 1rem;
-  height: 1rem;
-  border: 2px solid var(--fdbck-indicator-border);
-  border-radius: 0.25rem;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: border-color 0.15s, background-color 0.15s;
-}
-.fdbck-checkbox[data-selected=true] {
-  border-color: var(--fdbck-accent);
-  background-color: var(--fdbck-accent);
-}
-.fdbck-checkbox svg {
-  width: 0.75rem;
-  height: 0.75rem;
-  color: #fff;
-}
-.fdbck-submit-btn {
-  margin-top: 0.5rem;
-  padding: 0.625rem 1rem;
-  border: none;
-  border-radius: 0.5rem;
-  background: var(--fdbck-accent);
-  color: #fff;
-  font-size: var(--fdbck-font-size);
-  font-weight: 500;
-  cursor: pointer;
-  transition: opacity 0.15s;
-}
-.fdbck-submit-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-.fdbck-rating-grid {
-  display: grid;
-  gap: 0.375rem;
-}
-.fdbck-rating-btn {
-  aspect-ratio: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: 1px solid var(--fdbck-border);
-  border-radius: 0.5rem;
-  background: transparent;
-  color: var(--fdbck-text-primary);
-  font-size: var(--fdbck-font-size);
-  font-weight: 500;
-  cursor: pointer;
-  transition:
-    border-color 0.15s,
-    background-color 0.15s,
-    color 0.15s;
-}
-.fdbck-rating-btn:hover:not(:disabled) {
-  border-color: var(--fdbck-accent);
-}
-.fdbck-rating-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.fdbck-rating-btn[data-selected=true] {
-  background-color: var(--fdbck-accent);
-  border-color: var(--fdbck-accent);
-  color: #fff;
-}
-.fdbck-rating-labels {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 0.5rem;
-  font-size: 0.75rem;
-  color: var(--fdbck-text-muted);
-}
-
-/* src/styles/confirmation.css */
-.fdbck-confirmation {
-  padding: 2rem 0;
-  text-align: center;
-}
-.fdbck-check-circle {
-  width: 3rem;
-  height: 3rem;
-  border-radius: 50%;
-  background: var(--fdbck-accent-alpha);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto 1rem;
-  animation: fdbck-scale-in 0.3s ease-out;
-}
-.fdbck-check-circle svg {
-  width: 1.5rem;
-  height: 1.5rem;
-  color: var(--fdbck-accent);
-}
-.fdbck-confirmation h2 {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--fdbck-text-primary);
-  margin-bottom: 0.25rem;
-}
-.fdbck-confirmation p {
-  color: var(--fdbck-text-secondary);
-  white-space: pre-line;
-}
-@keyframes fdbck-scale-in {
-  from {
-    transform: scale(0.5);
-    opacity: 0;
-  }
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-/* src/styles/branding.css */
-.fdbck-branding {
-  display: flex;
-  justify-content: center;
-  margin-top: 1rem;
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--fdbck-border);
-}
-.fdbck-branding a {
-  font-size: 0.75rem;
-  color: var(--fdbck-text-muted);
-  text-decoration: none;
-  transition: color 0.15s;
-}
-.fdbck-branding a:hover {
-  color: var(--fdbck-text-secondary);
-}
-.fdbck-branding-name {
-  font-family: "JetBrains Mono", monospace;
-  font-weight: 500;
-  color: var(--fdbck-accent);
-}
-
-/* src/styles/modal.css */
-.fdbck-modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-  z-index: 2147483647;
-  animation: fdbck-fade-in 0.2s ease-out;
-}
-.fdbck-modal-content {
-  position: relative;
-  animation: fdbck-scale-up 0.2s ease-out;
-}
-.fdbck-close-btn {
-  position: absolute;
-  top: -0.5rem;
-  right: -0.5rem;
-  width: 1.75rem;
-  height: 1.75rem;
-  border: 1px solid var(--fdbck-border);
-  border-radius: 50%;
-  background: var(--fdbck-card-bg);
-  color: var(--fdbck-text-secondary);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1rem;
-  line-height: 1;
-  transition: border-color 0.15s;
-  z-index: 1;
-}
-.fdbck-close-btn:hover {
-  border-color: var(--fdbck-accent);
-}
-@keyframes fdbck-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes fdbck-scale-up {
-  from {
-    transform: scale(0.95);
-    opacity: 0;
-  }
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .fdbck-modal-backdrop,
-  .fdbck-modal-content {
-    animation: none;
-  }
-}
-
-/* src/styles/popover.css */
-.fdbck-popover {
-  position: fixed;
-  bottom: 1.5rem;
-  right: 1.5rem;
-  z-index: 2147483647;
-  animation: fdbck-slide-up 0.25s ease-out;
-}
-.fdbck-popover .fdbck-close-btn {
-  position: absolute;
-  top: -0.5rem;
-  right: -0.5rem;
-}
-@media (max-width: 640px) {
-  .fdbck-popover {
-    bottom: 0;
-    right: 0;
-    left: 0;
-    padding: 0;
-    animation: fdbck-sheet-up 0.25s ease-out;
-  }
-  .fdbck-popover .fdbck-card {
-    max-width: 100%;
-    width: 100%;
-    border-radius: var(--fdbck-border-radius) var(--fdbck-border-radius) 0 0;
-    border-bottom: none;
-  }
-  .fdbck-popover .fdbck-close-btn {
-    top: 0.75rem;
-    right: 0.75rem;
-  }
-}
-@keyframes fdbck-slide-up {
-  from {
-    transform: translateY(1rem);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-@keyframes fdbck-sheet-up {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .fdbck-popover {
-    animation: none;
-  }
-}