@mhosaic/feedback 0.7.1 → 0.7.2

package/dist/{chunk-F3FVKCBE.mjs → chunk-2TLTE2VZ.mjs}

@@ -605,8 +605,28 @@ import { useCallback } from "preact/hooks";
 
 // src/widget/Fab.tsx
 import { jsx } from "preact/jsx-runtime";
+function ChatBubbleIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+}
 function Fab({ label, onClick }) {
-  return /* @__PURE__ */ jsx("button", { type: "button", class: "fab", "aria-label": label, onClick, children: "\u{1F4AC}" });
+  return /* @__PURE__ */ jsx("button", { type: "button", class: "fab", "aria-label": label, title: label, onClick, children: /* @__PURE__ */ jsx(ChatBubbleIcon, {}) });
 }
 
 // src/widget/Form.tsx
@@ -1601,28 +1621,60 @@ var WIDGET_STYLES = `
   }
 }
 
+/* FAB \u2014 56px (Material standard), two-layer elevation, scale-on-press,
+   custom SVG icon (no emoji \u2014 emoji renders inconsistently across OSes
+   and can't inherit color). */
 .fab {
   position: fixed;
   bottom: 24px;
   right: 24px;
-  width: 52px;
-  height: 52px;
+  width: 56px;
+  height: 56px;
   border-radius: 999px;
   background: var(--mfb-accent);
   color: var(--mfb-accent-contrast);
   border: none;
   cursor: pointer;
-  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
-  font-size: 22px;
+  /* Two-layer elevation: ambient (soft, large) + key (tighter, near). */
+  box-shadow:
+    0 4px 12px rgba(0, 0, 0, 0.08),
+    0 2px 4px rgba(0, 0, 0, 0.12);
   display: grid;
   place-items: center;
-  transition: transform 120ms ease, box-shadow 120ms ease;
+  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
+              box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.fab:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.12),
+    0 3px 6px rgba(0, 0, 0, 0.16);
+}
+.fab:active {
+  transform: translateY(0) scale(0.96);
+  box-shadow:
+    0 3px 8px rgba(0, 0, 0, 0.10),
+    0 1px 2px rgba(0, 0, 0, 0.14);
+}
+.fab:focus-visible {
+  outline: 2px solid var(--mfb-accent-contrast);
+  outline-offset: 3px;
+  box-shadow:
+    0 0 0 4px var(--mfb-accent),
+    0 4px 12px rgba(0, 0, 0, 0.08),
+    0 2px 4px rgba(0, 0, 0, 0.12);
+}
+@media (prefers-color-scheme: dark) {
+  /* Slightly desaturate so the FAB doesn't glow against dark backgrounds. */
+  .fab { box-shadow:
+    0 4px 12px rgba(0, 0, 0, 0.32),
+    0 2px 4px rgba(0, 0, 0, 0.40); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fab { transition: none; }
+  .fab:hover, .fab:active { transform: none; }
 }
-
-.fab:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24); }
-.fab:active { transform: translateY(0) scale(0.96); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22); }
-.fab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 4px var(--mfb-accent), 0 4px 14px rgba(0, 0, 0, 0.18); }
-@media (prefers-reduced-motion: reduce) { .fab { transition: none; } .fab:hover, .fab:active { transform: none; } }
 
 .backdrop {
   position: fixed;
@@ -1636,11 +1688,16 @@ var WIDGET_STYLES = `
   background: var(--mfb-bg);
   border-radius: calc(var(--mfb-radius) * 1.5);
   box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
-  width: min(420px, 92vw);
-  padding: 20px;
+  /* 440px is the industry sweet spot for short forms \u2014 Linear, Plain,
+     Sentry all sit in the 420-480 range. 92vw caps it on narrow screens. */
+  width: min(440px, 92vw);
+  /* 24px is shadcn's default; gives every input room to breathe. */
+  padding: 24px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  /* 18px between major blocks (h2 \u2192 field \u2192 field \u2192 footer). Within a
+     field group, .field uses a tighter 6px label-to-input gap. */
+  gap: 18px;
   position: relative;
   /* Cap modal height on short viewports (mobile landscape, tiny laptops)
      so the form scrolls inside the modal rather than overflowing the
@@ -1649,7 +1706,23 @@ var WIDGET_STYLES = `
   overflow-y: auto;
 }
 
-.modal h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; padding-right: 28px; }
+.modal h2 {
+  margin: 0;
+  font-size: 17px;
+  font-weight: 600;
+  padding-right: 28px;
+  letter-spacing: -0.01em;
+}
+
+/* The form sits inside .modal as a single flex child, so the modal-level
+   gap doesn't separate the form's *own* children. Mirror the column +
+   gap pattern on the form itself; 22px lands in the middle of the
+   20-24px field-to-field range the design critic recommended. */
+.modal form {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
 
 .modal-close {
   position: absolute;
@@ -1671,15 +1744,22 @@ var WIDGET_STYLES = `
 .modal-close:hover { background: var(--mfb-surface); color: var(--mfb-text); }
 .modal-close:focus-visible { outline: 2px solid var(--mfb-accent); outline-offset: 2px; }
 
-.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
+/* Each field group: label (13px medium, muted) + input (14px regular)
+   stacked with a 6px gap. The 18px modal-level gap separates groups. */
+.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
 
-.field label { color: var(--mfb-text-muted); }
+.field label {
+  color: var(--mfb-text-muted);
+  font-weight: 500;
+  font-size: 12px;
+  letter-spacing: 0.01em;
+}
 
 .field input, .field select, .field textarea {
   font-family: inherit;
   font-size: 14px;
   color: inherit;
-  padding: 8px 10px;
+  padding: 9px 12px;
   border: 1px solid var(--mfb-border);
   border-radius: var(--mfb-radius);
   background: var(--mfb-surface);
@@ -1703,28 +1783,44 @@ var WIDGET_STYLES = `
   background-position: right 10px center;
 }
 
-.field textarea { min-height: 88px; resize: vertical; }
+.field textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
 
-.row { display: flex; gap: 8px; }
+.row { display: flex; gap: 12px; }
 .row > * { flex: 1; }
 
-.actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; }
+/* Footer separation: border-top + 16px breathing room, Stripe/Linear pattern.
+   Stops Cancel/Send from floating against the dropzone or page-URL footer. */
+.actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  padding-top: 16px;
+  margin-top: 4px;
+  border-top: 1px solid var(--mfb-border);
+}
 
 .btn {
-  padding: 8px 14px;
+  padding: 9px 16px;
   border-radius: var(--mfb-radius);
   border: 1px solid var(--mfb-border);
   background: var(--mfb-bg);
   color: var(--mfb-text);
   font: inherit;
+  font-weight: 500;
   cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease;
 }
+.btn:hover { background: var(--mfb-surface); }
 
 .btn--primary {
   background: var(--mfb-accent);
   color: var(--mfb-accent-contrast);
   border-color: var(--mfb-accent);
 }
+.btn--primary:hover {
+  background: color-mix(in srgb, var(--mfb-accent) 88%, black);
+  border-color: color-mix(in srgb, var(--mfb-accent) 88%, black);
+}
 
 .btn[disabled] { opacity: 0.6; cursor: not-allowed; }
 
@@ -1748,7 +1844,7 @@ var WIDGET_STYLES = `
 .screenshot-dropzone {
   border: 1px dashed var(--mfb-border);
   border-radius: var(--mfb-radius);
-  padding: 14px 12px;
+  padding: 18px 14px;
   text-align: center;
   cursor: pointer;
   background: var(--mfb-surface);
@@ -1821,12 +1917,12 @@ var WIDGET_STYLES = `
   text-transform: uppercase;
   font-weight: 600;
   letter-spacing: 0.04em;
+  font-size: 10px;
 }
 .page-context-url {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  background: var(--mfb-surface);
-  padding: 4px 6px;
-  border-radius: 4px;
+  font-size: 11px;
+  color: var(--mfb-text-muted);
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2486,4 +2582,4 @@ function createFeedback(config) {
 export {
   createFeedback
 };
-//# sourceMappingURL=chunk-F3FVKCBE.mjs.map
+//# sourceMappingURL=chunk-2TLTE2VZ.mjs.map