turbowrap-issue-widget 0.1.0

package/dist/ui/icons.d.ts

@@ -0,0 +1,10 @@
+export declare const ICONS: {
+    bug: string;
+    camera: string;
+    check: string;
+    close: string;
+    arrowRight: string;
+    arrowLeft: string;
+    upload: string;
+    trash: string;
+};

package/dist/ui/styles.d.ts

@@ -0,0 +1 @@
+export declare const WIDGET_STYLES = "\n:host {\n  --iw-accent: #6366f1;\n  --iw-accent-hover: #5558e3;\n  --iw-bg: #ffffff;\n  --iw-bg-secondary: #f9fafb;\n  --iw-text: #111827;\n  --iw-text-secondary: #6b7280;\n  --iw-border: #e5e7eb;\n  --iw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n  --iw-radius: 12px;\n  --iw-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n}\n\n:host(.dark) {\n  --iw-bg: #1f2937;\n  --iw-bg-secondary: #374151;\n  --iw-text: #f9fafb;\n  --iw-text-secondary: #9ca3af;\n  --iw-border: #4b5563;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.iw-trigger {\n  position: fixed;\n  z-index: 2147483647;\n  padding: 14px 24px;\n  border-radius: 50px;\n  background: linear-gradient(135deg, var(--iw-accent) 0%, #8b5cf6 100%);\n  color: white;\n  border: none;\n  cursor: pointer;\n  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);\n  font-family: var(--iw-font);\n  font-size: 14px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  transition: all 0.2s ease;\n}\n\n.iw-trigger:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);\n}\n\n.iw-trigger.bottom-right {\n  bottom: 24px;\n  right: 24px;\n}\n\n.iw-trigger.bottom-left {\n  bottom: 24px;\n  left: 24px;\n}\n\n.iw-trigger svg {\n  width: 18px;\n  height: 18px;\n  fill: currentColor;\n}\n\n.iw-modal-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 2147483646;\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  opacity: 0;\n  visibility: hidden;\n  transition: all 0.3s ease;\n}\n\n.iw-modal-overlay.open {\n  opacity: 1;\n  visibility: visible;\n}\n\n.iw-modal {\n  position: fixed;\n  z-index: 2147483647;\n  background: var(--iw-bg);\n  border-radius: var(--iw-radius);\n  box-shadow: var(--iw-shadow);\n  width: 420px;\n  max-width: calc(100vw - 32px);\n  max-height: calc(100vh - 100px);\n  display: flex;\n  flex-direction: column;\n  font-family: var(--iw-font);\n  color: var(--iw-text);\n  transform: translateY(20px) scale(0.95);\n  opacity: 0;\n  visibility: hidden;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.iw-modal.open {\n  transform: translateY(0) scale(1);\n  opacity: 1;\n  visibility: visible;\n}\n\n.iw-modal.bottom-right {\n  bottom: 100px;\n  right: 24px;\n}\n\n.iw-modal.bottom-left {\n  bottom: 100px;\n  left: 24px;\n}\n\n.iw-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--iw-border);\n}\n\n.iw-header h2 {\n  font-size: 16px;\n  font-weight: 600;\n}\n\n.iw-close {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--iw-text-secondary);\n  font-size: 24px;\n  line-height: 1;\n  padding: 4px;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n\n.iw-close:hover {\n  background: var(--iw-bg-secondary);\n  color: var(--iw-text);\n}\n\n.iw-progress-bar {\n  display: flex;\n  padding: 16px 20px;\n  gap: 8px;\n  border-bottom: 1px solid var(--iw-border);\n}\n\n.iw-step {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 6px;\n}\n\n.iw-step-dot {\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: var(--iw-bg-secondary);\n  border: 2px solid var(--iw-border);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--iw-text-secondary);\n  transition: all 0.3s;\n}\n\n.iw-step.active .iw-step-dot {\n  background: var(--iw-accent);\n  border-color: var(--iw-accent);\n  color: white;\n}\n\n.iw-step.completed .iw-step-dot {\n  background: #10b981;\n  border-color: #10b981;\n  color: white;\n}\n\n.iw-step-label {\n  font-size: 11px;\n  color: var(--iw-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.iw-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n.iw-form-group {\n  margin-bottom: 16px;\n}\n\n.iw-label {\n  display: block;\n  font-size: 13px;\n  font-weight: 500;\n  margin-bottom: 6px;\n  color: var(--iw-text);\n}\n\n.iw-input,\n.iw-textarea {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid var(--iw-border);\n  border-radius: 8px;\n  font-size: 14px;\n  font-family: var(--iw-font);\n  background: var(--iw-bg);\n  color: var(--iw-text);\n  transition: border-color 0.2s;\n}\n\n.iw-input:focus,\n.iw-textarea:focus {\n  outline: none;\n  border-color: var(--iw-accent);\n  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n}\n\n.iw-textarea {\n  min-height: 100px;\n  resize: vertical;\n}\n\n.iw-screenshot-area {\n  border: 2px dashed var(--iw-border);\n  border-radius: 8px;\n  padding: 20px;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.iw-screenshot-area:hover {\n  border-color: var(--iw-accent);\n  background: rgba(99, 102, 241, 0.05);\n}\n\n.iw-screenshot-area.has-screenshot {\n  border-style: solid;\n  padding: 8px;\n}\n\n.iw-screenshot-preview {\n  max-width: 100%;\n  border-radius: 6px;\n}\n\n.iw-screenshot-icon {\n  width: 48px;\n  height: 48px;\n  margin: 0 auto 12px;\n  color: var(--iw-text-secondary);\n}\n\n.iw-screenshot-text {\n  font-size: 14px;\n  color: var(--iw-text-secondary);\n}\n\n.iw-screenshot-hint {\n  font-size: 12px;\n  color: var(--iw-text-secondary);\n  margin-top: 4px;\n}\n\n.iw-footer {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 16px 20px;\n  border-top: 1px solid var(--iw-border);\n}\n\n.iw-btn {\n  padding: 10px 20px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  font-family: var(--iw-font);\n  cursor: pointer;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.iw-btn-primary {\n  background: var(--iw-accent);\n  color: white;\n  border: none;\n}\n\n.iw-btn-primary:hover:not(:disabled) {\n  background: var(--iw-accent-hover);\n}\n\n.iw-btn-primary:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.iw-btn-secondary {\n  background: var(--iw-bg);\n  color: var(--iw-text);\n  border: 1px solid var(--iw-border);\n}\n\n.iw-btn-secondary:hover {\n  background: var(--iw-bg-secondary);\n}\n\n.iw-question {\n  margin-bottom: 20px;\n  padding: 16px;\n  background: var(--iw-bg-secondary);\n  border-radius: 8px;\n}\n\n.iw-question-text {\n  font-size: 14px;\n  font-weight: 500;\n  margin-bottom: 4px;\n}\n\n.iw-question-why {\n  font-size: 12px;\n  color: var(--iw-text-secondary);\n  margin-bottom: 12px;\n  font-style: italic;\n}\n\n.iw-question .iw-textarea {\n  min-height: 60px;\n}\n\n.iw-progress-message {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  background: var(--iw-bg-secondary);\n  border-radius: 8px;\n  margin-bottom: 12px;\n}\n\n.iw-spinner {\n  width: 20px;\n  height: 20px;\n  border: 2px solid var(--iw-border);\n  border-top-color: var(--iw-accent);\n  border-radius: 50%;\n  animation: iw-spin 0.8s linear infinite;\n}\n\n@keyframes iw-spin {\n  to { transform: rotate(360deg); }\n}\n\n.iw-success {\n  text-align: center;\n  padding: 20px;\n}\n\n.iw-success-icon {\n  width: 64px;\n  height: 64px;\n  margin: 0 auto 16px;\n  background: #10b981;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n}\n\n.iw-success h3 {\n  font-size: 18px;\n  margin-bottom: 8px;\n}\n\n.iw-success p {\n  color: var(--iw-text-secondary);\n  margin-bottom: 16px;\n}\n\n.iw-success a {\n  color: var(--iw-accent);\n  text-decoration: none;\n  font-weight: 500;\n}\n\n.iw-success a:hover {\n  text-decoration: underline;\n}\n\n@media (max-width: 480px) {\n  .iw-modal {\n    width: 100%;\n    max-width: none;\n    height: 100%;\n    max-height: none;\n    border-radius: 0;\n    inset: 0;\n  }\n\n  .iw-modal.bottom-right,\n  .iw-modal.bottom-left {\n    bottom: 0;\n    left: 0;\n    right: 0;\n  }\n}\n";

package/dist/widget.d.ts

@@ -0,0 +1,31 @@
+import { WidgetConfig } from './api/types';
+export declare class IssueWidget {
+    private config;
+    private client;
+    private container;
+    private shadow;
+    private state;
+    constructor(config: WidgetConfig);
+    private injectStyles;
+    private render;
+    private getHTML;
+    private renderProgressBar;
+    private renderStep;
+    private renderDetailsStep;
+    private renderQuestionsStep;
+    private renderCreatingStep;
+    private renderSuccessStep;
+    private renderFooter;
+    private attachEventListeners;
+    private open;
+    private close;
+    private reset;
+    private update;
+    private handleScreenshotCapture;
+    private handleNext;
+    private handleBack;
+    private analyzeIssue;
+    private createIssue;
+    private escapeHtml;
+    destroy(): void;
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "turbowrap-issue-widget",
+  "version": "0.1.0",
+  "description": "Embeddable chatbot widget for collecting issues via TurboWrap",
+  "main": "dist/issue-widget.umd.js",
+  "module": "dist/issue-widget.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "widget",
+    "issue-tracker",
+    "linear",
+    "chatbot",
+    "embeddable",
+    "turbowrap"
+  ],
+  "author": "TurboWrap",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "typescript": "^5.3.0",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^4.0.0"
+  },
+  "dependencies": {
+    "html2canvas": "^1.4.1"
+  }
+}