@cohiva/support-widget 1.0.0 → 1.1.1

package/dist/index.cjs

@@ -39,6 +39,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/components/SupportWidget.tsx
 var import_react2 = require("react");
+var import_lucide_react = require("lucide-react");
 
 // src/adapters/centralApi.ts
 function createCentralFeedbackClient(options) {
@@ -724,7 +725,7 @@ function buildFeedbackDescription(formData, diagnostics) {
 }
 
 // src/components/SupportWidget.tsx
-var import_widget = require("./widget-PDWZ5OMY.css");
+var import_widget = require("./widget-E4MWTWY5.css");
 
 // src/utils/classNames.ts
 function classNames(...items) {
@@ -733,6 +734,12 @@ function classNames(...items) {
 
 // src/components/SupportWidget.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var typeIconMap = {
+  bug: { icon: import_lucide_react.Bug, color: "#ef4444" },
+  feature: { icon: import_lucide_react.Lightbulb, color: "#f59e0b" },
+  feedback: { icon: import_lucide_react.MessageCircle, color: "#3b82f6" },
+  improvement: { icon: import_lucide_react.Wrench, color: "#8b5cf6" }
+};
 function labelForType(type) {
   return feedbackTypes.find((item) => item.value === type)?.label || type;
 }
@@ -892,7 +899,8 @@ function SupportWidget({ config, isVisible = true, onSuccess, onError, onSubmit
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { "aria-label": "Close", className: "sw-close", onClick: handleClose, type: "button", children: "x" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "sw-sr-only", id: "support-widget-description", children: "Support ticket dialog" }),
-          isSubmitted ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-success", "data-testid": "feedback-success-screen", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-modal-body", children: isSubmitted ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-success", "data-testid": "feedback-success-screen", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.CheckCircle, { "aria-hidden": "true", className: "sw-success-icon", color: "#0f766e", size: 48 }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Thank You!" }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Your feedback helps us improve the product." }),
             submitResult?.issue_number || submitResult?.issue_url ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { "data-testid": "feedback-success-issue-link", children: [
@@ -904,23 +912,31 @@ function SupportWidget({ config, isVisible = true, onSuccess, onError, onSubmit
             ] }) : null
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "sw-header", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: step === 1 ? "Send Feedback" : selectedTypeConfig?.label || "Support Ticket" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: step === 1 ? "What kind of support ticket would you like to submit?" : selectedTypeConfig?.description })
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: step === 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.MessageSquarePlus, { "aria-hidden": "true", className: "sw-header-icon", size: 22 }),
+                " Send Feedback"
+              ] }) : selectedTypeConfig?.label || "Support Ticket" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: step === 1 ? "Help us improve Cohiva by sharing your experience" : selectedTypeConfig?.description })
             ] }),
-            step === 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-type-grid", children: feedbackTypes.map((typeConfig) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-              "button",
-              {
-                className: "sw-type-card",
-                "data-testid": `feedback-type-${typeConfig.value}`,
-                onClick: () => handleTypeSelect(typeConfig.value),
-                type: "button",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: typeConfig.label }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: typeConfig.description })
-                ]
-              },
-              typeConfig.value
-            )) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: "sw-form", onSubmit: handleSubmit, children: [
+            step === 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-type-grid", children: feedbackTypes.map((typeConfig) => {
+              const entry = typeIconMap[typeConfig.value];
+              const Icon = entry?.icon;
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "button",
+                {
+                  className: "sw-type-card",
+                  "data-testid": `feedback-type-${typeConfig.value}`,
+                  onClick: () => handleTypeSelect(typeConfig.value),
+                  type: "button",
+                  children: [
+                    Icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: "sw-type-card-icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { color: entry.color, size: 36, strokeWidth: 1.5 }) }) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: typeConfig.label }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: typeConfig.description })
+                  ]
+                },
+                typeConfig.value
+              );
+            }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: "sw-form", onSubmit: handleSubmit, children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: "support-title", children: "Title *" }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "input",
@@ -1020,10 +1036,13 @@ function SupportWidget({ config, isVisible = true, onSuccess, onError, onSubmit
               !validation.valid ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "sw-error", children: validation.description }) : null,
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-actions", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => setStep(1), type: "button", children: "Back" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: isSubmitting || !validation.valid, type: "submit", children: isSubmitting ? "Submitting..." : "Submit" })
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: isSubmitting || !validation.valid, type: "submit", children: isSubmitting ? "Submitting..." : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Send, { "aria-hidden": "true", size: 14, style: { marginRight: "0.35rem", verticalAlign: "middle" } }),
+                  "Submit"
+                ] }) })
               ] })
             ] })
-          ] })
+          ] }) })
         ]
       }
     ) }) : null

package/dist/index.js

@@ -1,5 +1,6 @@
 // src/components/SupportWidget.tsx
 import { useCallback, useEffect as useEffect2, useMemo, useState } from "react";
+import { Bug, CheckCircle, Lightbulb, MessageCircle, MessageSquarePlus, Send, Wrench } from "lucide-react";
 
 // src/adapters/centralApi.ts
 function createCentralFeedbackClient(options) {
@@ -685,7 +686,7 @@ function buildFeedbackDescription(formData, diagnostics) {
 }
 
 // src/components/SupportWidget.tsx
-import "./widget-PDWZ5OMY.css";
+import "./widget-E4MWTWY5.css";
 
 // src/utils/classNames.ts
 function classNames(...items) {
@@ -694,6 +695,12 @@ function classNames(...items) {
 
 // src/components/SupportWidget.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var typeIconMap = {
+  bug: { icon: Bug, color: "#ef4444" },
+  feature: { icon: Lightbulb, color: "#f59e0b" },
+  feedback: { icon: MessageCircle, color: "#3b82f6" },
+  improvement: { icon: Wrench, color: "#8b5cf6" }
+};
 function labelForType(type) {
   return feedbackTypes.find((item) => item.value === type)?.label || type;
 }
@@ -853,7 +860,8 @@ function SupportWidget({ config, isVisible = true, onSuccess, onError, onSubmit
         children: [
           /* @__PURE__ */ jsx("button", { "aria-label": "Close", className: "sw-close", onClick: handleClose, type: "button", children: "x" }),
           /* @__PURE__ */ jsx("p", { className: "sw-sr-only", id: "support-widget-description", children: "Support ticket dialog" }),
-          isSubmitted ? /* @__PURE__ */ jsxs("div", { className: "sw-success", "data-testid": "feedback-success-screen", children: [
+          /* @__PURE__ */ jsx("div", { className: "sw-modal-body", children: isSubmitted ? /* @__PURE__ */ jsxs("div", { className: "sw-success", "data-testid": "feedback-success-screen", children: [
+            /* @__PURE__ */ jsx(CheckCircle, { "aria-hidden": "true", className: "sw-success-icon", color: "#0f766e", size: 48 }),
             /* @__PURE__ */ jsx("h2", { children: "Thank You!" }),
             /* @__PURE__ */ jsx("p", { children: "Your feedback helps us improve the product." }),
             submitResult?.issue_number || submitResult?.issue_url ? /* @__PURE__ */ jsxs("p", { "data-testid": "feedback-success-issue-link", children: [
@@ -865,23 +873,31 @@ function SupportWidget({ config, isVisible = true, onSuccess, onError, onSubmit
             ] }) : null
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs("header", { className: "sw-header", children: [
-              /* @__PURE__ */ jsx("h2", { children: step === 1 ? "Send Feedback" : selectedTypeConfig?.label || "Support Ticket" }),
-              /* @__PURE__ */ jsx("p", { children: step === 1 ? "What kind of support ticket would you like to submit?" : selectedTypeConfig?.description })
+              /* @__PURE__ */ jsx("h2", { children: step === 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(MessageSquarePlus, { "aria-hidden": "true", className: "sw-header-icon", size: 22 }),
+                " Send Feedback"
+              ] }) : selectedTypeConfig?.label || "Support Ticket" }),
+              /* @__PURE__ */ jsx("p", { children: step === 1 ? "Help us improve Cohiva by sharing your experience" : selectedTypeConfig?.description })
             ] }),
-            step === 1 ? /* @__PURE__ */ jsx("div", { className: "sw-type-grid", children: feedbackTypes.map((typeConfig) => /* @__PURE__ */ jsxs(
-              "button",
-              {
-                className: "sw-type-card",
-                "data-testid": `feedback-type-${typeConfig.value}`,
-                onClick: () => handleTypeSelect(typeConfig.value),
-                type: "button",
-                children: [
-                  /* @__PURE__ */ jsx("strong", { children: typeConfig.label }),
-                  /* @__PURE__ */ jsx("span", { children: typeConfig.description })
-                ]
-              },
-              typeConfig.value
-            )) }) : /* @__PURE__ */ jsxs("form", { className: "sw-form", onSubmit: handleSubmit, children: [
+            step === 1 ? /* @__PURE__ */ jsx("div", { className: "sw-type-grid", children: feedbackTypes.map((typeConfig) => {
+              const entry = typeIconMap[typeConfig.value];
+              const Icon = entry?.icon;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: "sw-type-card",
+                  "data-testid": `feedback-type-${typeConfig.value}`,
+                  onClick: () => handleTypeSelect(typeConfig.value),
+                  type: "button",
+                  children: [
+                    Icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "sw-type-card-icon", children: /* @__PURE__ */ jsx(Icon, { color: entry.color, size: 36, strokeWidth: 1.5 }) }) : null,
+                    /* @__PURE__ */ jsx("strong", { children: typeConfig.label }),
+                    /* @__PURE__ */ jsx("span", { children: typeConfig.description })
+                  ]
+                },
+                typeConfig.value
+              );
+            }) }) : /* @__PURE__ */ jsxs("form", { className: "sw-form", onSubmit: handleSubmit, children: [
               /* @__PURE__ */ jsx("label", { htmlFor: "support-title", children: "Title *" }),
               /* @__PURE__ */ jsx(
                 "input",
@@ -981,10 +997,13 @@ function SupportWidget({ config, isVisible = true, onSuccess, onError, onSubmit
               !validation.valid ? /* @__PURE__ */ jsx("p", { className: "sw-error", children: validation.description }) : null,
               /* @__PURE__ */ jsxs("div", { className: "sw-actions", children: [
                 /* @__PURE__ */ jsx("button", { onClick: () => setStep(1), type: "button", children: "Back" }),
-                /* @__PURE__ */ jsx("button", { disabled: isSubmitting || !validation.valid, type: "submit", children: isSubmitting ? "Submitting..." : "Submit" })
+                /* @__PURE__ */ jsx("button", { disabled: isSubmitting || !validation.valid, type: "submit", children: isSubmitting ? "Submitting..." : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Send, { "aria-hidden": "true", size: 14, style: { marginRight: "0.35rem", verticalAlign: "middle" } }),
+                  "Submit"
+                ] }) })
               ] })
             ] })
-          ] })
+          ] }) })
         ]
       }
     ) }) : null

package/dist/styles.css

@@ -61,24 +61,33 @@
   inset: 0;
   z-index: 1100;
   background: rgba(2, 6, 23, 0.7);
-  display: grid;
-  place-items: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 1rem;
 }
 
 .sw-modal {
   width: min(100%, 56rem);
-  max-height: 92vh;
-  overflow: auto;
+  max-height: calc(100dvh - 2rem);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   position: relative;
   border-radius: 1rem;
   border: 1px solid var(--sw-color-border);
   background: var(--sw-color-surface);
   color: var(--sw-color-text);
-  padding: 1.25rem;
   box-shadow: var(--sw-shadow-elevated);
 }
 
+.sw-modal-body {
+  flex: 1;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 1.25rem;
+}
+
 .sw-close {
   position: absolute;
   right: 0.75rem;
@@ -93,6 +102,13 @@
 .sw-header h2 {
   margin: 0;
   font-size: 1.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.sw-header-icon {
+  flex-shrink: 0;
 }
 
 .sw-header p {
@@ -111,12 +127,22 @@
   border: 2px solid var(--sw-color-border);
   border-radius: 0.75rem;
   background: #ffffff;
-  padding: 0.85rem;
-  display: grid;
-  gap: 0.4rem;
+  padding: 1.25rem 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 0.5rem;
   transition: border-color 150ms ease, background 150ms ease;
 }
 
+.sw-type-card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0.25rem;
+}
+
 .sw-type-card:hover {
   border-color: var(--sw-color-primary);
   background: var(--sw-color-surface-muted);
@@ -228,6 +254,14 @@
 .sw-success {
   text-align: center;
   padding: 3rem 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.sw-success-icon {
+  margin-bottom: 0.5rem;
 }
 
 @media (max-width: 640px) {

package/dist/widget-E4MWTWY5.css

@@ -0,0 +1,277 @@
+:root {
+  --sw-color-launcher-bg: #6d28d9;
+  --sw-color-launcher-bg-hover: #5b21b6;
+  --sw-color-launcher-border: #8b5cf6;
+  --sw-color-surface: #ffffff;
+  --sw-color-surface-muted: #f8fafc;
+  --sw-color-text: #0f172a;
+  --sw-color-text-muted: #475569;
+  --sw-color-border: #cbd5e1;
+  --sw-color-primary: #0f766e;
+  --sw-color-primary-hover: #115e59;
+  --sw-color-danger: #b91c1c;
+  --sw-shadow-elevated: 0 20px 35px rgba(15, 23, 42, 0.25);
+}
+
+.sw-sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.sw-launcher {
+  position: fixed;
+  right: 1.5rem;
+  bottom: 1.5rem;
+  z-index: 1000;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 999px;
+  border: 2px solid var(--sw-color-launcher-border);
+  background: var(--sw-color-launcher-bg);
+  color: #ffffff;
+  font-size: 0.875rem;
+  font-weight: 700;
+  padding: 0.625rem 1rem;
+  box-shadow: 0 10px 24px rgba(76, 29, 149, 0.38);
+  transition: transform 150ms ease, background 150ms ease;
+}
+
+.sw-launcher:hover {
+  transform: scale(1.05);
+  background: var(--sw-color-launcher-bg-hover);
+}
+
+.sw-launcher-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sw-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  background: rgba(2, 6, 23, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.sw-modal {
+  width: min(100%, 56rem);
+  max-height: calc(100dvh - 2rem);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+  border-radius: 1rem;
+  border: 1px solid var(--sw-color-border);
+  background: var(--sw-color-surface);
+  color: var(--sw-color-text);
+  box-shadow: var(--sw-shadow-elevated);
+}
+
+.sw-modal-body {
+  flex: 1;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 1.25rem;
+}
+
+.sw-close {
+  position: absolute;
+  right: 0.75rem;
+  top: 0.75rem;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--sw-color-border);
+  background: transparent;
+}
+
+.sw-header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.sw-header-icon {
+  flex-shrink: 0;
+}
+
+.sw-header p {
+  margin: 0.3rem 0 1rem;
+  color: var(--sw-color-text-muted);
+}
+
+.sw-type-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.sw-type-card {
+  text-align: left;
+  border: 2px solid var(--sw-color-border);
+  border-radius: 0.75rem;
+  background: #ffffff;
+  padding: 1.25rem 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 0.5rem;
+  transition: border-color 150ms ease, background 150ms ease;
+}
+
+.sw-type-card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0.25rem;
+}
+
+.sw-type-card:hover {
+  border-color: var(--sw-color-primary);
+  background: var(--sw-color-surface-muted);
+}
+
+.sw-type-card span {
+  color: var(--sw-color-text-muted);
+  font-size: 0.85rem;
+}
+
+.sw-form {
+  display: grid;
+  gap: 0.8rem;
+}
+
+.sw-field {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.sw-field textarea,
+.sw-form input,
+.sw-form select {
+  border: 1px solid var(--sw-color-border);
+  border-radius: 0.5rem;
+  padding: 0.6rem;
+  font: inherit;
+}
+
+.sw-row {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.sw-section {
+  border: 1px solid var(--sw-color-border);
+  border-radius: 0.75rem;
+  background: var(--sw-color-surface-muted);
+  padding: 0.8rem;
+}
+
+.sw-section h3 {
+  margin-top: 0;
+  margin-bottom: 0.6rem;
+  font-size: 1rem;
+}
+
+.sw-rating {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.sw-rating-button {
+  border: 1px solid var(--sw-color-border);
+  border-radius: 0.3rem;
+  background: transparent;
+  color: #94a3b8;
+  margin-right: 0.35rem;
+}
+
+.sw-rating-button.is-active {
+  color: #f59e0b;
+  border-color: #f59e0b;
+}
+
+.sw-diagnostics-note {
+  border: 1px dashed var(--sw-color-border);
+  border-radius: 0.55rem;
+  font-size: 0.8rem;
+  color: var(--sw-color-text-muted);
+  padding: 0.65rem;
+}
+
+.sw-error {
+  color: var(--sw-color-danger);
+  margin: 0;
+}
+
+.sw-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.sw-actions button {
+  flex: 1;
+  border: 1px solid var(--sw-color-border);
+  border-radius: 0.5rem;
+  padding: 0.6rem;
+  font: inherit;
+  background: #ffffff;
+}
+
+.sw-actions button[type='submit'] {
+  color: #ffffff;
+  background: var(--sw-color-primary);
+  border-color: var(--sw-color-primary);
+}
+
+.sw-actions button[type='submit']:hover {
+  background: var(--sw-color-primary-hover);
+}
+
+.sw-actions button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.sw-success {
+  text-align: center;
+  padding: 3rem 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.sw-success-icon {
+  margin-bottom: 0.5rem;
+}
+
+@media (max-width: 640px) {
+  .sw-type-grid,
+  .sw-row {
+    grid-template-columns: 1fr;
+  }
+
+  .sw-launcher {
+    right: 1rem;
+    bottom: 1rem;
+  }
+}

package/dist/widget-MB6XRWHU.css

@@ -0,0 +1,252 @@
+:root {
+  --sw-color-launcher-bg: #6d28d9;
+  --sw-color-launcher-bg-hover: #5b21b6;
+  --sw-color-launcher-border: #8b5cf6;
+  --sw-color-surface: #ffffff;
+  --sw-color-surface-muted: #f8fafc;
+  --sw-color-text: #0f172a;
+  --sw-color-text-muted: #475569;
+  --sw-color-border: #cbd5e1;
+  --sw-color-primary: #0f766e;
+  --sw-color-primary-hover: #115e59;
+  --sw-color-danger: #b91c1c;
+  --sw-shadow-elevated: 0 20px 35px rgba(15, 23, 42, 0.25);
+}
+
+.sw-sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.sw-launcher {
+  position: fixed;
+  right: 1.5rem;
+  bottom: 1.5rem;
+  z-index: 1000;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 999px;
+  border: 2px solid var(--sw-color-launcher-border);
+  background: var(--sw-color-launcher-bg);
+  color: #ffffff;
+  font-size: 0.875rem;
+  font-weight: 700;
+  padding: 0.625rem 1rem;
+  box-shadow: 0 10px 24px rgba(76, 29, 149, 0.38);
+  transition: transform 150ms ease, background 150ms ease;
+}
+
+.sw-launcher:hover {
+  transform: scale(1.05);
+  background: var(--sw-color-launcher-bg-hover);
+}
+
+.sw-launcher-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sw-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  background: rgba(2, 6, 23, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.sw-modal {
+  width: min(100%, 56rem);
+  max-height: calc(100dvh - 2rem);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+  border-radius: 1rem;
+  border: 1px solid var(--sw-color-border);
+  background: var(--sw-color-surface);
+  color: var(--sw-color-text);
+  box-shadow: var(--sw-shadow-elevated);
+}
+
+.sw-modal-body {
+  flex: 1;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 1.25rem;
+}
+
+.sw-close {
+  position: absolute;
+  right: 0.75rem;
+  top: 0.75rem;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--sw-color-border);
+  background: transparent;
+}
+
+.sw-header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+}
+
+.sw-header p {
+  margin: 0.3rem 0 1rem;
+  color: var(--sw-color-text-muted);
+}
+
+.sw-type-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.sw-type-card {
+  text-align: left;
+  border: 2px solid var(--sw-color-border);
+  border-radius: 0.75rem;
+  background: #ffffff;
+  padding: 0.85rem;
+  display: grid;
+  gap: 0.4rem;
+  transition: border-color 150ms ease, background 150ms ease;
+}
+
+.sw-type-card:hover {
+  border-color: var(--sw-color-primary);
+  background: var(--sw-color-surface-muted);
+}
+
+.sw-type-card span {
+  color: var(--sw-color-text-muted);
+  font-size: 0.85rem;
+}
+
+.sw-form {
+  display: grid;
+  gap: 0.8rem;
+}
+
+.sw-field {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.sw-field textarea,
+.sw-form input,
+.sw-form select {
+  border: 1px solid var(--sw-color-border);
+  border-radius: 0.5rem;
+  padding: 0.6rem;
+  font: inherit;
+}
+
+.sw-row {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.sw-section {
+  border: 1px solid var(--sw-color-border);
+  border-radius: 0.75rem;
+  background: var(--sw-color-surface-muted);
+  padding: 0.8rem;
+}
+
+.sw-section h3 {
+  margin-top: 0;
+  margin-bottom: 0.6rem;
+  font-size: 1rem;
+}
+
+.sw-rating {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.sw-rating-button {
+  border: 1px solid var(--sw-color-border);
+  border-radius: 0.3rem;
+  background: transparent;
+  color: #94a3b8;
+  margin-right: 0.35rem;
+}
+
+.sw-rating-button.is-active {
+  color: #f59e0b;
+  border-color: #f59e0b;
+}
+
+.sw-diagnostics-note {
+  border: 1px dashed var(--sw-color-border);
+  border-radius: 0.55rem;
+  font-size: 0.8rem;
+  color: var(--sw-color-text-muted);
+  padding: 0.65rem;
+}
+
+.sw-error {
+  color: var(--sw-color-danger);
+  margin: 0;
+}
+
+.sw-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.sw-actions button {
+  flex: 1;
+  border: 1px solid var(--sw-color-border);
+  border-radius: 0.5rem;
+  padding: 0.6rem;
+  font: inherit;
+  background: #ffffff;
+}
+
+.sw-actions button[type='submit'] {
+  color: #ffffff;
+  background: var(--sw-color-primary);
+  border-color: var(--sw-color-primary);
+}
+
+.sw-actions button[type='submit']:hover {
+  background: var(--sw-color-primary-hover);
+}
+
+.sw-actions button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.sw-success {
+  text-align: center;
+  padding: 3rem 1rem;
+}
+
+@media (max-width: 640px) {
+  .sw-type-grid,
+  .sw-row {
+    grid-template-columns: 1fr;
+  }
+
+  .sw-launcher {
+    right: 1rem;
+    bottom: 1rem;
+  }
+}

package/dist/widget-TTYCIVNC.css

@@ -0,0 +1,247 @@
+:root {
+  --sw-color-launcher-bg: #6d28d9;
+  --sw-color-launcher-bg-hover: #5b21b6;
+  --sw-color-launcher-border: #8b5cf6;
+  --sw-color-surface: #ffffff;
+  --sw-color-surface-muted: #f8fafc;
+  --sw-color-text: #0f172a;
+  --sw-color-text-muted: #475569;
+  --sw-color-border: #cbd5e1;
+  --sw-color-primary: #0f766e;
+  --sw-color-primary-hover: #115e59;
+  --sw-color-danger: #b91c1c;
+  --sw-shadow-elevated: 0 20px 35px rgba(15, 23, 42, 0.25);
+}
+
+.sw-sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.sw-launcher {
+  position: fixed;
+  right: 1.5rem;
+  bottom: 1.5rem;
+  z-index: 1000;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 999px;
+  border: 2px solid var(--sw-color-launcher-border);
+  background: var(--sw-color-launcher-bg);
+  color: #ffffff;
+  font-size: 0.875rem;
+  font-weight: 700;
+  padding: 0.625rem 1rem;
+  box-shadow: 0 10px 24px rgba(76, 29, 149, 0.38);
+  transition: transform 150ms ease, background 150ms ease;
+}
+
+.sw-launcher:hover {
+  transform: scale(1.05);
+  background: var(--sw-color-launcher-bg-hover);
+}
+
+.sw-launcher-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sw-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  background: rgba(2, 6, 23, 0.7);
+  overflow-y: auto;
+}
+
+.sw-modal-wrapper {
+  display: flex;
+  min-height: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.sw-modal {
+  width: min(100%, 56rem);
+  position: relative;
+  border-radius: 1rem;
+  border: 1px solid var(--sw-color-border);
+  background: var(--sw-color-surface);
+  color: var(--sw-color-text);
+  padding: 1.25rem;
+  box-shadow: var(--sw-shadow-elevated);
+}
+
+.sw-close {
+  position: absolute;
+  right: 0.75rem;
+  top: 0.75rem;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--sw-color-border);
+  background: transparent;
+}
+
+.sw-header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+}
+
+.sw-header p {
+  margin: 0.3rem 0 1rem;
+  color: var(--sw-color-text-muted);
+}
+
+.sw-type-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.sw-type-card {
+  text-align: left;
+  border: 2px solid var(--sw-color-border);
+  border-radius: 0.75rem;
+  background: #ffffff;
+  padding: 0.85rem;
+  display: grid;
+  gap: 0.4rem;
+  transition: border-color 150ms ease, background 150ms ease;
+}
+
+.sw-type-card:hover {
+  border-color: var(--sw-color-primary);
+  background: var(--sw-color-surface-muted);
+}
+
+.sw-type-card span {
+  color: var(--sw-color-text-muted);
+  font-size: 0.85rem;
+}
+
+.sw-form {
+  display: grid;
+  gap: 0.8rem;
+}
+
+.sw-field {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.sw-field textarea,
+.sw-form input,
+.sw-form select {
+  border: 1px solid var(--sw-color-border);
+  border-radius: 0.5rem;
+  padding: 0.6rem;
+  font: inherit;
+}
+
+.sw-row {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.sw-section {
+  border: 1px solid var(--sw-color-border);
+  border-radius: 0.75rem;
+  background: var(--sw-color-surface-muted);
+  padding: 0.8rem;
+}
+
+.sw-section h3 {
+  margin-top: 0;
+  margin-bottom: 0.6rem;
+  font-size: 1rem;
+}
+
+.sw-rating {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.sw-rating-button {
+  border: 1px solid var(--sw-color-border);
+  border-radius: 0.3rem;
+  background: transparent;
+  color: #94a3b8;
+  margin-right: 0.35rem;
+}
+
+.sw-rating-button.is-active {
+  color: #f59e0b;
+  border-color: #f59e0b;
+}
+
+.sw-diagnostics-note {
+  border: 1px dashed var(--sw-color-border);
+  border-radius: 0.55rem;
+  font-size: 0.8rem;
+  color: var(--sw-color-text-muted);
+  padding: 0.65rem;
+}
+
+.sw-error {
+  color: var(--sw-color-danger);
+  margin: 0;
+}
+
+.sw-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.sw-actions button {
+  flex: 1;
+  border: 1px solid var(--sw-color-border);
+  border-radius: 0.5rem;
+  padding: 0.6rem;
+  font: inherit;
+  background: #ffffff;
+}
+
+.sw-actions button[type='submit'] {
+  color: #ffffff;
+  background: var(--sw-color-primary);
+  border-color: var(--sw-color-primary);
+}
+
+.sw-actions button[type='submit']:hover {
+  background: var(--sw-color-primary-hover);
+}
+
+.sw-actions button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.sw-success {
+  text-align: center;
+  padding: 3rem 1rem;
+}
+
+@media (max-width: 640px) {
+  .sw-type-grid,
+  .sw-row {
+    grid-template-columns: 1fr;
+  }
+
+  .sw-launcher {
+    right: 1rem;
+    bottom: 1rem;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cohiva/support-widget",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Reusable Support Ticket widget with diagnostics capture and typed payload generation",
   "license": "MIT",
   "engines": {
@@ -63,6 +63,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
+    "lucide-react": "^1.7.0",
     "zod": "^3.24.1"
   },
   "devDependencies": {