@mhosaic/feedback 0.7.0 → 0.7.2

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

@@ -486,6 +486,12 @@ var DEFAULT_STRINGS = {
   "detail.close_cta": "Mark as resolved",
   "detail.close_busy": "Marking\u2026",
   "detail.history": "Status history",
+  "detail.context.submitted_at": "Submitted",
+  "detail.context.page": "Page",
+  "detail.context.capture.manual": "Manual capture",
+  "detail.context.capture.html2canvas": "Auto capture",
+  "detail.context.capture.display_media": "Screen share",
+  "detail.context.capture.none": "No screenshot",
   "detail.author.staff": "Operator",
   "detail.author.mcp": "Mhosaic Team",
   "detail.author.system": "System",
@@ -559,6 +565,12 @@ var FRENCH_STRINGS = {
   "detail.close_cta": "Marquer comme r\xE9solu",
   "detail.close_busy": "Validation\u2026",
   "detail.history": "Historique du statut",
+  "detail.context.submitted_at": "Envoy\xE9",
+  "detail.context.page": "Page",
+  "detail.context.capture.manual": "Capture manuelle",
+  "detail.context.capture.html2canvas": "Capture automatique",
+  "detail.context.capture.display_media": "Partage d\u2019\xE9cran",
+  "detail.context.capture.none": "Sans capture",
   "detail.author.staff": "Op\xE9rateur",
   "detail.author.mcp": "\xC9quipe Mhosaic",
   "detail.author.system": "Syst\xE8me",
@@ -593,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
@@ -1464,6 +1496,7 @@ function ReportDetailView({
       /* @__PURE__ */ jsx8("span", { class: `pill pill-status pill-status--${detail.status}`, children: strings[`status.${detail.status}`] ?? detail.status })
     ] }),
     /* @__PURE__ */ jsxs7("div", { class: "report-detail-body", children: [
+      /* @__PURE__ */ jsx8(ContextBlock, { detail, strings }),
       /* @__PURE__ */ jsx8("p", { class: "report-detail-description", children: detail.description }),
       detail.screenshot_url && /* @__PURE__ */ jsx8(
         "a",
@@ -1518,6 +1551,44 @@ function appendComment(current, next) {
   if (current.some((c) => c.id === next.id)) return current;
   return [...current, next];
 }
+function ContextBlock({ detail, strings }) {
+  const captureKey = `detail.context.capture.${detail.capture_method}`;
+  const captureLabel = strings[captureKey] ?? detail.capture_method;
+  return /* @__PURE__ */ jsxs7("div", { class: "report-detail-context", children: [
+    /* @__PURE__ */ jsxs7("div", { class: "report-detail-context-pills", children: [
+      /* @__PURE__ */ jsx8("span", { class: "pill pill-type", children: strings[`type.${detail.feedback_type}`] }),
+      /* @__PURE__ */ jsx8("span", { class: `pill pill-severity pill-severity--${detail.severity}`, children: strings[`severity.${detail.severity}`] }),
+      /* @__PURE__ */ jsx8("span", { class: "pill pill-capture", children: captureLabel })
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { class: "report-detail-context-line", children: [
+      /* @__PURE__ */ jsx8("span", { class: "report-detail-context-label", children: strings["detail.context.submitted_at"] }),
+      /* @__PURE__ */ jsx8("span", { children: formatSubmittedAt(detail.created_at) })
+    ] }),
+    detail.page_url && /* @__PURE__ */ jsxs7("div", { class: "report-detail-context-line", title: detail.page_url, children: [
+      /* @__PURE__ */ jsx8("span", { class: "report-detail-context-label", children: strings["detail.context.page"] }),
+      /* @__PURE__ */ jsx8(
+        "a",
+        {
+          class: "report-detail-context-url",
+          href: detail.page_url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: truncateUrl(detail.page_url, 64)
+        }
+      )
+    ] })
+  ] });
+}
+function formatSubmittedAt(iso) {
+  try {
+    return new Date(iso).toLocaleString(void 0, {
+      dateStyle: "medium",
+      timeStyle: "short"
+    });
+  } catch {
+    return iso;
+  }
+}
 
 // src/widget/styles.ts
 var WIDGET_STYLES = `
@@ -1550,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(-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; } }
+.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; }
+}
 
 .backdrop {
   position: fixed;
@@ -1585,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
@@ -1598,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;
@@ -1620,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);
@@ -1652,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; }
 
@@ -1697,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);
@@ -1770,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;
@@ -2052,6 +2199,43 @@ var WIDGET_STYLES = `
   margin: 8px 0 4px;
   font-weight: 600;
 }
+
+.report-detail-context {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  background: var(--mfb-surface);
+  border-radius: var(--mfb-radius);
+  border: 1px solid var(--mfb-border);
+}
+.report-detail-context-pills { display: flex; gap: 4px; flex-wrap: wrap; }
+.report-detail-context-line {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--mfb-text);
+}
+.report-detail-context-label {
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--mfb-text-muted);
+  min-width: 56px;
+}
+.report-detail-context-url {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: var(--mfb-accent);
+  text-decoration: none;
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.report-detail-context-url:hover { text-decoration: underline; }
+.pill-capture { background: var(--mfb-bg); color: var(--mfb-text-muted); border-color: var(--mfb-border); }
 .report-detail-empty {
   font-size: 12px;
   color: var(--mfb-text-muted);
@@ -2398,4 +2582,4 @@ function createFeedback(config) {
 export {
   createFeedback
 };
-//# sourceMappingURL=chunk-W6JAJT2U.mjs.map
+//# sourceMappingURL=chunk-2TLTE2VZ.mjs.map