@fogg/bug-reporter 1.0.0

package/dist/styles/index.css

@@ -0,0 +1,495 @@
+/* src/styles/index.css */
+:root {
+  --br-bg: rgba(7, 10, 14, 0.84);
+  --br-text: #e9eff8;
+  --br-muted: #a8b5c7;
+  --br-border: rgba(202, 219, 243, 0.22);
+  --br-primary: #3b82f6;
+  --br-danger: #ef4444;
+  --br-overlay:
+    linear-gradient(
+      to left,
+      rgba(0, 0, 0, 0.32),
+      rgba(0, 0, 0, 0.08) 45%,
+      transparent 72%);
+  --br-radius: 14px;
+  --br-shadow: -14px 0 40px rgba(0, 0, 0, 0.42);
+  --br-font:
+    "IBM Plex Sans",
+    "Segoe UI",
+    sans-serif;
+}
+.br-launcher {
+  position: fixed;
+  color: #f8fbff;
+  border: 0;
+  padding: 12px 18px;
+  font: 600 14px var(--br-font);
+  cursor: pointer;
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
+}
+.br-launcher.br-theme-light {
+  color: #fff;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.24);
+}
+.br-launcher.is-bottom-right {
+  right: 24px;
+  bottom: 24px;
+}
+.br-launcher.is-bottom-left {
+  left: 24px;
+  bottom: 24px;
+}
+.br-launcher.is-top-right {
+  right: 24px;
+  top: 24px;
+}
+.br-launcher.is-top-left {
+  left: 24px;
+  top: 24px;
+}
+.br-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--br-overlay);
+  display: flex;
+  pointer-events: none;
+}
+.br-modal-overlay.br-theme-light {
+  background:
+    linear-gradient(
+      to left,
+      rgba(15, 23, 42, 0.16),
+      rgba(15, 23, 42, 0.06) 45%,
+      transparent 72%);
+}
+.br-modal-overlay.is-right {
+  align-items: stretch;
+  justify-content: flex-end;
+}
+.br-modal-overlay.is-left {
+  align-items: stretch;
+  justify-content: flex-start;
+}
+.br-modal-overlay.is-top {
+  align-items: flex-start;
+  justify-content: stretch;
+  background:
+    linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0.34),
+      rgba(0, 0, 0, 0.1) 45%,
+      transparent 72%);
+}
+.br-modal-overlay.is-top.br-theme-light {
+  background:
+    linear-gradient(
+      to bottom,
+      rgba(15, 23, 42, 0.16),
+      rgba(15, 23, 42, 0.06) 45%,
+      transparent 72%);
+}
+.br-modal-overlay.is-bottom {
+  align-items: flex-end;
+  justify-content: stretch;
+  background:
+    linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0.34),
+      rgba(0, 0, 0, 0.1) 45%,
+      transparent 72%);
+}
+.br-modal-overlay.is-bottom.br-theme-light {
+  background:
+    linear-gradient(
+      to top,
+      rgba(15, 23, 42, 0.16),
+      rgba(15, 23, 42, 0.06) 45%,
+      transparent 72%);
+}
+.br-modal {
+  pointer-events: auto;
+  width: min(430px, 100vw);
+  height: 100vh;
+  overflow: auto;
+  background: var(--br-bg);
+  color: var(--br-text);
+  box-shadow: var(--br-shadow);
+  font-family: var(--br-font);
+  backdrop-filter: blur(8px);
+}
+.br-modal.br-theme-light {
+  --br-bg: rgba(248, 250, 252, 0.96);
+  --br-text: #0f172a;
+  --br-muted: #475569;
+  --br-border: rgba(15, 23, 42, 0.18);
+  background: var(--br-bg);
+  color: var(--br-text);
+}
+.br-modal.is-right {
+  border-left: 1px solid var(--br-border);
+}
+.br-modal.is-left {
+  border-right: 1px solid var(--br-border);
+  box-shadow: 14px 0 40px rgba(0, 0, 0, 0.42);
+}
+.br-modal.is-top,
+.br-modal.is-bottom {
+  width: 100vw;
+  max-height: 100vh;
+  height: min(460px, 100vh);
+}
+.br-modal.is-top {
+  border-bottom: 1px solid var(--br-border);
+  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
+}
+.br-modal.is-bottom {
+  border-top: 1px solid var(--br-border);
+  box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.42);
+}
+.br-modal.is-top .br-preview-wrapper,
+.br-modal.is-bottom .br-preview-wrapper {
+  justify-items: center;
+}
+.br-modal.is-top .br-annotation-canvas,
+.br-modal.is-bottom .br-annotation-canvas {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  max-height: min(48vh, 360px);
+  display: block;
+  margin: 0 auto;
+}
+.br-modal-header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--br-border);
+  background: rgba(5, 8, 12, 0.72);
+}
+.br-modal.br-theme-light .br-modal-header {
+  background: rgba(241, 245, 249, 0.9);
+}
+.br-modal-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.br-dock-controls {
+  display: flex;
+  gap: 6px;
+}
+.br-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--br-border);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--br-text);
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  cursor: pointer;
+}
+.br-modal.br-theme-light .br-icon-btn {
+  background: rgba(15, 23, 42, 0.06);
+}
+.br-icon-btn svg {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+}
+.br-dock-btn svg path:last-child {
+  fill: currentColor;
+  stroke: none;
+  opacity: 0.85;
+}
+.br-dock-btn.is-active {
+  border-color: var(--br-primary);
+  color: #bfdbfe;
+  background: rgba(59, 130, 246, 0.2);
+}
+.br-modal.br-theme-light .br-dock-btn.is-active {
+  border-color: var(--br-primary);
+  color: #ffffff;
+  background: var(--br-primary);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
+}
+.br-step {
+  padding: 16px;
+}
+.br-step h2 {
+  margin: 0 0 8px;
+}
+.br-step p {
+  margin: 0 0 16px;
+  color: var(--br-muted);
+}
+.br-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 14px;
+  font-size: 13px;
+  font-weight: 600;
+}
+.br-field input,
+.br-field textarea,
+.br-field select {
+  border: 1px solid var(--br-border);
+  border-radius: 10px;
+  font: 400 14px var(--br-font);
+  color: var(--br-text);
+  background: rgba(255, 255, 255, 0.03);
+  padding: 10px;
+}
+.br-modal.br-theme-light .br-field input,
+.br-modal.br-theme-light .br-field textarea,
+.br-modal.br-theme-light .br-field select {
+  background: rgba(15, 23, 42, 0.04);
+}
+.br-field input::placeholder,
+.br-field textarea::placeholder {
+  color: #8fa1b7;
+}
+.br-modal.br-theme-light .br-field input::placeholder,
+.br-modal.br-theme-light .br-field textarea::placeholder {
+  color: #64748b;
+}
+.br-grid-2 {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+  gap: 12px;
+}
+.br-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 16px;
+}
+.br-capture-row {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+.br-capture-item {
+  flex: 1 1 190px;
+}
+.br-capture-btn {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+.br-capture-icon {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.7;
+  stroke-linejoin: round;
+}
+.br-capture-done {
+  font-size: 11px;
+  color: #bfdbfe;
+}
+.br-capture-note {
+  margin: 10px 0 0;
+  color: var(--br-muted);
+  font-size: 13px;
+}
+.br-capture-inline-error {
+  margin-top: 8px;
+}
+.br-btn {
+  border: 1px solid transparent;
+  border-radius: 10px;
+  padding: 8px 12px;
+  cursor: pointer;
+  font: 600 13px var(--br-font);
+}
+.br-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.br-btn-primary {
+  background: var(--br-primary);
+  color: #fff;
+}
+.br-btn-secondary {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: var(--br-border);
+  color: var(--br-text);
+}
+.br-modal.br-theme-light .br-btn-secondary {
+  background: rgba(15, 23, 42, 0.06);
+}
+.br-btn-secondary.is-active {
+  border-color: var(--br-primary);
+  color: #bfdbfe;
+}
+.br-modal.br-theme-light .br-btn-secondary.is-active {
+  color: #1d4ed8;
+  background: rgba(59, 130, 246, 0.16);
+}
+.br-btn-danger {
+  background: var(--br-danger);
+  color: #fff;
+}
+.br-preview-wrapper,
+.br-assets {
+  display: grid;
+  gap: 12px;
+  margin-top: 14px;
+}
+.br-assets {
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+}
+.br-asset-card {
+  border: 1px solid var(--br-border);
+  border-radius: 10px;
+  padding: 10px;
+  background: rgba(255, 255, 255, 0.02);
+}
+.br-asset-type {
+  font-size: 12px;
+  text-transform: uppercase;
+  color: var(--br-muted);
+}
+.br-preview {
+  width: 100%;
+  max-height: 240px;
+  border-radius: 10px;
+  border: 1px solid var(--br-border);
+  object-fit: contain;
+  background: rgba(255, 255, 255, 0.02);
+}
+.br-modal.br-theme-light .br-preview {
+  background: rgba(15, 23, 42, 0.03);
+}
+.br-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  margin-bottom: 12px;
+}
+.br-upload-progress {
+  margin-top: 12px;
+  font-size: 14px;
+}
+.br-progress-track {
+  height: 8px;
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.25);
+  overflow: hidden;
+  margin-top: 6px;
+}
+.br-progress-fill {
+  height: 100%;
+  background: var(--br-primary);
+}
+.br-summary,
+.br-diagnostics {
+  border: 1px solid var(--br-border);
+  border-radius: 10px;
+  padding: 12px;
+  margin-top: 12px;
+  background: rgba(255, 255, 255, 0.02);
+}
+.br-modal.br-theme-light .br-summary,
+.br-modal.br-theme-light .br-diagnostics {
+  background: rgba(15, 23, 42, 0.03);
+}
+.br-diagnostics ul {
+  margin: 0;
+  padding-left: 16px;
+}
+.br-diagnostics-list {
+  margin: 0;
+  padding-left: 16px;
+  max-height: 180px;
+  overflow: auto;
+}
+.br-diagnostics-list li {
+  margin: 6px 0;
+  font-size: 12px;
+  line-height: 1.35;
+}
+.br-diagnostics-list code {
+  color: #fca5a5;
+  margin-right: 6px;
+  font-size: 11px;
+}
+.br-modal .br-diagnostics-list,
+.br-modal .br-diagnostics-list li,
+.br-modal .br-diagnostics-list li::marker,
+.br-modal .br-diagnostics-list li code,
+.br-modal .br-diagnostics-list li a {
+  color: #fca5a5 !important;
+}
+.br-error {
+  color: #fca5a5;
+  font-size: 14px;
+  margin-top: 10px;
+}
+.br-annotation {
+  border: 1px solid var(--br-border);
+  border-radius: 10px;
+  padding: 10px;
+  background: rgba(255, 255, 255, 0.02);
+}
+.br-modal.br-theme-light .br-annotation {
+  background: rgba(15, 23, 42, 0.03);
+}
+.br-annotation-tools {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 10px;
+  flex-wrap: wrap;
+}
+.br-annotation-canvas {
+  width: 100%;
+  border: 1px solid var(--br-border);
+  border-radius: 8px;
+  max-height: 300px;
+}
+@media (max-width: 820px) {
+  .br-modal-overlay {
+    background: rgba(0, 0, 0, 0.34);
+  }
+  .br-modal {
+    width: 100vw;
+    height: 100vh;
+    max-height: 100vh;
+    border: 0;
+    box-shadow: none;
+  }
+  .br-launcher.is-bottom-right {
+    bottom: 16px;
+    right: 16px;
+  }
+  .br-launcher.is-bottom-left {
+    bottom: 16px;
+    left: 16px;
+  }
+  .br-launcher.is-top-right {
+    top: 16px;
+    right: 16px;
+  }
+  .br-launcher.is-top-left {
+    top: 16px;
+    left: 16px;
+  }
+}
+/*# sourceMappingURL=index.css.map */

package/dist/styles/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/styles/index.css"],"sourcesContent":[":root {\n  --br-bg: rgba(7, 10, 14, 0.84);\n  --br-text: #e9eff8;\n  --br-muted: #a8b5c7;\n  --br-border: rgba(202, 219, 243, 0.22);\n  --br-primary: #3b82f6;\n  --br-danger: #ef4444;\n  --br-overlay: linear-gradient(to left, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.08) 45%, transparent 72%);\n  --br-radius: 14px;\n  --br-shadow: -14px 0 40px rgba(0, 0, 0, 0.42);\n  --br-font: \"IBM Plex Sans\", \"Segoe UI\", sans-serif;\n}\n\n.br-launcher {\n  position: fixed;\n  color: #f8fbff;\n  border: 0;\n  padding: 12px 18px;\n  font: 600 14px var(--br-font);\n  cursor: pointer;\n  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);\n}\n\n.br-launcher.br-theme-light {\n  color: #fff;\n  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.24);\n}\n\n.br-launcher.is-bottom-right {\n  right: 24px;\n  bottom: 24px;\n}\n\n.br-launcher.is-bottom-left {\n  left: 24px;\n  bottom: 24px;\n}\n\n.br-launcher.is-top-right {\n  right: 24px;\n  top: 24px;\n}\n\n.br-launcher.is-top-left {\n  left: 24px;\n  top: 24px;\n}\n\n.br-modal-overlay {\n  position: fixed;\n  inset: 0;\n  background: var(--br-overlay);\n  display: flex;\n  pointer-events: none;\n}\n\n.br-modal-overlay.br-theme-light {\n  background: linear-gradient(to left, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0.06) 45%, transparent 72%);\n}\n\n.br-modal-overlay.is-right {\n  align-items: stretch;\n  justify-content: flex-end;\n}\n\n.br-modal-overlay.is-left {\n  align-items: stretch;\n  justify-content: flex-start;\n}\n\n.br-modal-overlay.is-top {\n  align-items: flex-start;\n  justify-content: stretch;\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.1) 45%, transparent 72%);\n}\n\n.br-modal-overlay.is-top.br-theme-light {\n  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0.06) 45%, transparent 72%);\n}\n\n.br-modal-overlay.is-bottom {\n  align-items: flex-end;\n  justify-content: stretch;\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.1) 45%, transparent 72%);\n}\n\n.br-modal-overlay.is-bottom.br-theme-light {\n  background: linear-gradient(to top, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0.06) 45%, transparent 72%);\n}\n\n.br-modal {\n  pointer-events: auto;\n  width: min(430px, 100vw);\n  height: 100vh;\n  overflow: auto;\n  background: var(--br-bg);\n  color: var(--br-text);\n  box-shadow: var(--br-shadow);\n  font-family: var(--br-font);\n  backdrop-filter: blur(8px);\n}\n\n.br-modal.br-theme-light {\n  --br-bg: rgba(248, 250, 252, 0.96);\n  --br-text: #0f172a;\n  --br-muted: #475569;\n  --br-border: rgba(15, 23, 42, 0.18);\n  background: var(--br-bg);\n  color: var(--br-text);\n}\n\n.br-modal.is-right {\n  border-left: 1px solid var(--br-border);\n}\n\n.br-modal.is-left {\n  border-right: 1px solid var(--br-border);\n  box-shadow: 14px 0 40px rgba(0, 0, 0, 0.42);\n}\n\n.br-modal.is-top,\n.br-modal.is-bottom {\n  width: 100vw;\n  max-height: 100vh;\n  height: min(460px, 100vh);\n}\n\n.br-modal.is-top {\n  border-bottom: 1px solid var(--br-border);\n  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);\n}\n\n.br-modal.is-bottom {\n  border-top: 1px solid var(--br-border);\n  box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.42);\n}\n\n.br-modal.is-top .br-preview-wrapper,\n.br-modal.is-bottom .br-preview-wrapper {\n  justify-items: center;\n}\n\n.br-modal.is-top .br-annotation-canvas,\n.br-modal.is-bottom .br-annotation-canvas {\n  width: auto;\n  max-width: 100%;\n  height: auto;\n  max-height: min(48vh, 360px);\n  display: block;\n  margin: 0 auto;\n}\n\n.br-modal-header {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--br-border);\n  background: rgba(5, 8, 12, 0.72);\n}\n\n.br-modal.br-theme-light .br-modal-header {\n  background: rgba(241, 245, 249, 0.9);\n}\n\n.br-modal-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.br-dock-controls {\n  display: flex;\n  gap: 6px;\n}\n\n.br-icon-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--br-border);\n  border-radius: 8px;\n  background: rgba(255, 255, 255, 0.03);\n  color: var(--br-text);\n  width: 30px;\n  height: 30px;\n  padding: 0;\n  cursor: pointer;\n}\n\n.br-modal.br-theme-light .br-icon-btn {\n  background: rgba(15, 23, 42, 0.06);\n}\n\n.br-icon-btn svg {\n  width: 14px;\n  height: 14px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 1.8;\n  stroke-linecap: round;\n}\n\n.br-dock-btn svg path:last-child {\n  fill: currentColor;\n  stroke: none;\n  opacity: 0.85;\n}\n\n.br-dock-btn.is-active {\n  border-color: var(--br-primary);\n  color: #bfdbfe;\n  background: rgba(59, 130, 246, 0.2);\n}\n\n.br-modal.br-theme-light .br-dock-btn.is-active {\n  border-color: var(--br-primary);\n  color: #ffffff;\n  background: var(--br-primary);\n  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset;\n}\n\n.br-step {\n  padding: 16px;\n}\n\n.br-step h2 {\n  margin: 0 0 8px;\n}\n\n.br-step p {\n  margin: 0 0 16px;\n  color: var(--br-muted);\n}\n\n.br-field {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 14px;\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.br-field input,\n.br-field textarea,\n.br-field select {\n  border: 1px solid var(--br-border);\n  border-radius: 10px;\n  font: 400 14px var(--br-font);\n  color: var(--br-text);\n  background: rgba(255, 255, 255, 0.03);\n  padding: 10px;\n}\n\n.br-modal.br-theme-light .br-field input,\n.br-modal.br-theme-light .br-field textarea,\n.br-modal.br-theme-light .br-field select {\n  background: rgba(15, 23, 42, 0.04);\n}\n\n.br-field input::placeholder,\n.br-field textarea::placeholder {\n  color: #8fa1b7;\n}\n\n.br-modal.br-theme-light .br-field input::placeholder,\n.br-modal.br-theme-light .br-field textarea::placeholder {\n  color: #64748b;\n}\n\n.br-grid-2 {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));\n  gap: 12px;\n}\n\n.br-actions {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n  margin-top: 16px;\n}\n\n.br-capture-row {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n  margin-top: 10px;\n}\n\n.br-capture-item {\n  flex: 1 1 190px;\n}\n\n.br-capture-btn {\n  width: 100%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.br-capture-icon {\n  width: 14px;\n  height: 14px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 1.7;\n  stroke-linejoin: round;\n}\n\n.br-capture-done {\n  font-size: 11px;\n  color: #bfdbfe;\n}\n\n.br-capture-note {\n  margin: 10px 0 0;\n  color: var(--br-muted);\n  font-size: 13px;\n}\n\n.br-capture-inline-error {\n  margin-top: 8px;\n}\n\n.br-btn {\n  border: 1px solid transparent;\n  border-radius: 10px;\n  padding: 8px 12px;\n  cursor: pointer;\n  font: 600 13px var(--br-font);\n}\n\n.br-btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.br-btn-primary {\n  background: var(--br-primary);\n  color: #fff;\n}\n\n.br-btn-secondary {\n  background: rgba(255, 255, 255, 0.05);\n  border-color: var(--br-border);\n  color: var(--br-text);\n}\n\n.br-modal.br-theme-light .br-btn-secondary {\n  background: rgba(15, 23, 42, 0.06);\n}\n\n.br-btn-secondary.is-active {\n  border-color: var(--br-primary);\n  color: #bfdbfe;\n}\n\n.br-modal.br-theme-light .br-btn-secondary.is-active {\n  color: #1d4ed8;\n  background: rgba(59, 130, 246, 0.16);\n}\n\n.br-btn-danger {\n  background: var(--br-danger);\n  color: #fff;\n}\n\n.br-preview-wrapper,\n.br-assets {\n  display: grid;\n  gap: 12px;\n  margin-top: 14px;\n}\n\n.br-assets {\n  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n}\n\n.br-asset-card {\n  border: 1px solid var(--br-border);\n  border-radius: 10px;\n  padding: 10px;\n  background: rgba(255, 255, 255, 0.02);\n}\n\n.br-asset-type {\n  font-size: 12px;\n  text-transform: uppercase;\n  color: var(--br-muted);\n}\n\n.br-preview {\n  width: 100%;\n  max-height: 240px;\n  border-radius: 10px;\n  border: 1px solid var(--br-border);\n  object-fit: contain;\n  background: rgba(255, 255, 255, 0.02);\n}\n\n.br-modal.br-theme-light .br-preview {\n  background: rgba(15, 23, 42, 0.03);\n}\n\n.br-checkbox {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  margin-bottom: 12px;\n}\n\n.br-upload-progress {\n  margin-top: 12px;\n  font-size: 14px;\n}\n\n.br-progress-track {\n  height: 8px;\n  border-radius: 999px;\n  background: rgba(148, 163, 184, 0.25);\n  overflow: hidden;\n  margin-top: 6px;\n}\n\n.br-progress-fill {\n  height: 100%;\n  background: var(--br-primary);\n}\n\n.br-summary,\n.br-diagnostics {\n  border: 1px solid var(--br-border);\n  border-radius: 10px;\n  padding: 12px;\n  margin-top: 12px;\n  background: rgba(255, 255, 255, 0.02);\n}\n\n.br-modal.br-theme-light .br-summary,\n.br-modal.br-theme-light .br-diagnostics {\n  background: rgba(15, 23, 42, 0.03);\n}\n\n.br-diagnostics ul {\n  margin: 0;\n  padding-left: 16px;\n}\n\n.br-diagnostics-list {\n  margin: 0;\n  padding-left: 16px;\n  max-height: 180px;\n  overflow: auto;\n}\n\n.br-diagnostics-list li {\n  margin: 6px 0;\n  font-size: 12px;\n  line-height: 1.35;\n}\n\n.br-diagnostics-list code {\n  color: #fca5a5;\n  margin-right: 6px;\n  font-size: 11px;\n}\n\n.br-modal .br-diagnostics-list,\n.br-modal .br-diagnostics-list li,\n.br-modal .br-diagnostics-list li::marker,\n.br-modal .br-diagnostics-list li code,\n.br-modal .br-diagnostics-list li a {\n  color: #fca5a5 !important;\n}\n\n.br-error {\n  color: #fca5a5;\n  font-size: 14px;\n  margin-top: 10px;\n}\n\n.br-annotation {\n  border: 1px solid var(--br-border);\n  border-radius: 10px;\n  padding: 10px;\n  background: rgba(255, 255, 255, 0.02);\n}\n\n.br-modal.br-theme-light .br-annotation {\n  background: rgba(15, 23, 42, 0.03);\n}\n\n.br-annotation-tools {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 10px;\n  flex-wrap: wrap;\n}\n\n.br-annotation-canvas {\n  width: 100%;\n  border: 1px solid var(--br-border);\n  border-radius: 8px;\n  max-height: 300px;\n}\n\n@media (max-width: 820px) {\n  .br-modal-overlay {\n    background: rgba(0, 0, 0, 0.34);\n  }\n\n  .br-modal {\n    width: 100vw;\n    height: 100vh;\n    max-height: 100vh;\n    border: 0;\n    box-shadow: none;\n  }\n\n  .br-launcher.is-bottom-right {\n    bottom: 16px;\n    right: 16px;\n  }\n\n  .br-launcher.is-bottom-left {\n    bottom: 16px;\n    left: 16px;\n  }\n\n  .br-launcher.is-top-right {\n    top: 16px;\n    right: 16px;\n  }\n\n  .br-launcher.is-top-left {\n    top: 16px;\n    left: 16px;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/styles/index.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/styles/index.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/docs/backend-local.md

@@ -0,0 +1,16 @@
+# Local Public Backend
+
+Use `storage.mode = "local-public"`.
+
+The SDK posts multipart form data to `storage.local.uploadEndpoint` with fields:
+- `file`
+- `id`
+- `type`
+
+Expected JSON response:
+
+```json
+{ "url": "https://app.example.com/uploads/file.png", "key": "uploads/file.png" }
+```
+
+See `examples/backend-local` for a runnable server.

package/docs/backend-s3.md

@@ -0,0 +1,31 @@
+# S3 Presigned Backend
+
+Use `storage.mode = "s3-presigned"` and provide a `presignEndpoint`.
+
+Expected request body:
+
+```json
+{
+  "files": [{ "id": "...", "name": "...", "type": "screenshot", "mimeType": "image/png", "size": 1234 }]
+}
+```
+
+Expected response:
+
+```json
+{
+  "uploads": [
+    {
+      "id": "...",
+      "method": "PUT",
+      "uploadUrl": "https://bucket.s3.amazonaws.com/key",
+      "headers": { "content-type": "image/png" },
+      "key": "reports/...",
+      "publicUrl": "https://cdn.example.com/reports/...",
+      "type": "screenshot"
+    }
+  ]
+}
+```
+
+See `examples/backend-s3-presign` for a runnable reference server.

package/docs/browser-compatibility.md

@@ -0,0 +1,8 @@
+# Browser Compatibility
+
+- React 16.8+
+- Chromium: supported for screenshot and recording.
+- Firefox: screenshot and recording supported (MediaRecorder limitations may vary).
+- Safari: screenshot supported; recording support depends on version and permissions.
+
+Screen recording requires `navigator.mediaDevices.getDisplayMedia`.

package/docs/framework-cra.md

@@ -0,0 +1,10 @@
+# Create React App
+
+Import CSS once and mount `BugReporter` in `App.tsx`.
+
+```tsx
+import { BugReporter } from "@fogg/bug-reporter";
+import "@fogg/bug-reporter/styles.css";
+```
+
+Use `storage.mode: "proxy"` or `"local-public"` for easiest CRA integration.

package/docs/framework-nextjs.md

@@ -0,0 +1,16 @@
+# Next.js (App Router)
+
+Use in a client component:
+
+```tsx
+"use client";
+
+import { BugReporter } from "@fogg/bug-reporter";
+import "@fogg/bug-reporter/styles.css";
+
+export function BugReporterMount() {
+  return <BugReporter config={{ apiEndpoint: "/api/bug-reports", storage: { mode: "proxy", proxy: { uploadEndpoint: "/api/bug-assets" } } }} />;
+}
+```
+
+Render this component in `app/layout.tsx` or a global client wrapper.

package/docs/framework-remix.md

@@ -0,0 +1,6 @@
+# Remix
+
+Mount `BugReporter` in `root.tsx` (client-rendered area).
+
+- Ensure upload/report endpoints are exposed as Remix actions/routes.
+- Keep `BugReporter` behind user interaction only (default behavior).

package/docs/framework-vite.md

@@ -0,0 +1,21 @@
+# Vite
+
+```tsx
+import { BugReporter } from "@fogg/bug-reporter";
+import "@fogg/bug-reporter/styles.css";
+
+export function App() {
+  return (
+    <>
+      <BugReporter
+        config={{
+          apiEndpoint: "/api/bug-reports",
+          storage: { mode: "local-public", local: { uploadEndpoint: "/api/uploads" } }
+        }}
+      />
+    </>
+  );
+}
+```
+
+No framework-specific setup is required.

package/docs/known-limitations.md

@@ -0,0 +1,6 @@
+# Known Limitations
+
+- Screenshot capture depends on `html2canvas` and may not perfectly render cross-origin iframes.
+- Screen recording format defaults to `video/webm`; unsupported codecs fall back best-effort.
+- Annotation tools are basic in v1 (rectangle, arrow, text).
+- Mobile browsers may restrict screen capture APIs.

package/docs/quickstart.md

@@ -0,0 +1,26 @@
+# Quickstart
+
+1. Install: `npm install @fogg/bug-reporter`
+2. Add component near app root.
+3. Configure API and storage mode.
+
+```tsx
+import { BugReporter } from "@fogg/bug-reporter";
+import "@fogg/bug-reporter/styles.css";
+
+<BugReporter
+  config={{
+    apiEndpoint: "https://api.example.com/bug-reports",
+    projectId: "web-app",
+    appVersion: "1.2.0",
+    environment: "production",
+    storage: {
+      mode: "s3-presigned",
+      s3: {
+        presignEndpoint: "https://api.example.com/bug-assets/presign",
+        publicBaseUrl: "https://cdn.example.com"
+      }
+    }
+  }}
+/>;
+```

package/docs/security.md

@@ -0,0 +1,9 @@
+# Security Guidelines
+
+- Always require explicit user action before capture (SDK default).
+- Keep feature flags off for capabilities you do not need.
+- Use short presigned URL expirations.
+- Restrict upload/report endpoints with authentication and rate limits.
+- Use `privacy.maskSelectors` to blur sensitive DOM regions.
+- Mark sensitive nodes with `data-bug-reporter-mask="true"`.
+- Avoid sending secrets in diagnostics or hooks.