turbowrap-issue-widget 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
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.top-right {\n top: 24px;\n right: 24px;\n}\n\n.iw-trigger.top-left {\n top: 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-modal.top-right {\n top: 100px;\n right: 24px;\n}\n\n.iw-modal.top-left {\n top: 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 .iw-modal.top-right,\n .iw-modal.top-left {\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n }\n}\n";
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;\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: 0;\n overflow: hidden;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.iw-trigger span {\n max-width: 0;\n opacity: 0;\n white-space: nowrap;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.iw-trigger:hover {\n padding: 14px 20px;\n gap: 8px;\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);\n}\n\n.iw-trigger:hover span {\n max-width: 150px;\n opacity: 1;\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.top-right {\n top: 24px;\n right: 24px;\n}\n\n.iw-trigger.top-left {\n top: 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-modal.top-right {\n top: 100px;\n right: 24px;\n}\n\n.iw-modal.top-left {\n top: 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 .iw-modal.top-right,\n .iw-modal.top-left {\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n }\n}\n";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "turbowrap-issue-widget",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "Embeddable chatbot widget for collecting issues via TurboWrap",
5
5
  "main": "dist/issue-widget.umd.js",
6
6
  "module": "dist/issue-widget.es.js",