@squaredr/fieldcraft-pro 1.2.0 → 1.4.0

package/dist/response-viewer/index.js

@@ -465,10 +465,30 @@ function getScoreSeverity(instrumentKey, score) {
   if (!thresholds) return void 0;
   return thresholds.find((t) => score >= t.min && score <= t.max);
 }
-function ResponseTable({ schema, responses, onRowClick }) {
+function ResponseTable({
+  schema,
+  responses,
+  onRowClick,
+  selectable,
+  selectedIds,
+  onToggleSelect,
+  onSelectAll
+}) {
   const questions = getAllQuestions(schema);
+  const allPageSelected = selectable && responses.length > 0 && responses.every(
+    (r) => r.sessionToken && selectedIds?.has(r.sessionToken)
+  );
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse text-[13px]", children: [
     /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "bg-muted", children: [
+      selectable && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 w-8 border-b-2 border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: allPageSelected,
+          onChange: () => onSelectAll?.(),
+          className: "accent-primary"
+        }
+      ) }),
       /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left font-semibold text-foreground border-b-2 border-border whitespace-nowrap", children: "Submitted" }),
       questions.map((q) => /* @__PURE__ */ jsxRuntime.jsx(
         "th",
@@ -487,6 +507,19 @@ function ResponseTable({ schema, responses, onRowClick }) {
           onClick: () => onRowClick?.(response),
           className: onRowClick ? "cursor-pointer border-b border-border hover:bg-accent transition-colors" : "border-b border-border",
           children: [
+            selectable && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 w-8", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: !!(response.sessionToken && selectedIds?.has(response.sessionToken)),
+                onChange: (e) => {
+                  e.stopPropagation();
+                  if (response.sessionToken) onToggleSelect?.(response.sessionToken);
+                },
+                onClick: (e) => e.stopPropagation(),
+                className: "accent-primary"
+              }
+            ) }),
             /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-foreground max-w-50 overflow-hidden text-ellipsis whitespace-nowrap", children: new Date(response.submittedAt).toLocaleString() }),
             questions.map((q) => /* @__PURE__ */ jsxRuntime.jsx(
               "td",
@@ -504,7 +537,7 @@ function ResponseTable({ schema, responses, onRowClick }) {
       responses.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
         "td",
         {
-          colSpan: questions.length + 2,
+          colSpan: questions.length + 2 + (selectable ? 1 : 0),
           className: "px-3 py-8 text-center text-muted-foreground",
           children: "No responses yet"
         }
@@ -592,15 +625,37 @@ function formatCellValue(value, type) {
   if (typeof value === "object") return JSON.stringify(value);
   return String(value);
 }
-function ResponseCard({ response, fields, onClick }) {
+function ResponseCard({
+  response,
+  fields,
+  onClick,
+  selectable,
+  selected,
+  onToggleSelect
+}) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       onClick,
-      className: onClick ? "border border-border rounded-lg p-4 bg-card cursor-pointer transition-shadow hover:shadow-md" : "border border-border rounded-lg p-4 bg-card",
+      className: (onClick ? "border border-border rounded-lg p-4 bg-card cursor-pointer transition-shadow hover:shadow-md" : "border border-border rounded-lg p-4 bg-card") + (selected ? " ring-2 ring-primary" : ""),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between mb-3 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: new Date(response.submittedAt).toLocaleString() }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            selectable && /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: !!selected,
+                onChange: (e) => {
+                  e.stopPropagation();
+                  onToggleSelect?.();
+                },
+                onClick: (e) => e.stopPropagation(),
+                className: "accent-primary"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: new Date(response.submittedAt).toLocaleString() })
+          ] }),
           response.completionTimeMs != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
             Math.round(response.completionTimeMs / 1e3),
             "s"
@@ -691,18 +746,19 @@ function formatCardValue(value, type) {
   if (typeof value === "object") return JSON.stringify(value);
   return String(value);
 }
-function ResponseDetail({ response, fields, onBack }) {
+function ResponseDetail({ response, fields, onBack, onDelete }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-5 pb-3 border-b border-border", children: [
       onBack && /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "outline", size: "sm", onClick: onBack, children: "Back" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-foreground", children: "Response Detail" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground", children: [
           "Submitted ",
           new Date(response.submittedAt).toLocaleString(),
           response.completionTimeMs != null && ` \u2014 ${Math.round(response.completionTimeMs / 1e3)}s`
         ] })
-      ] })
+      ] }),
+      onDelete && /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "destructive", size: "sm", onClick: onDelete, children: "Delete" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: fields.map((field) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -1055,6 +1111,491 @@ function formatFallbackValue(value) {
   if (typeof value === "object") return JSON.stringify(value, null, 2);
   return String(value);
 }
+function TimelineView({ responses, questions, onSelect }) {
+  const grouped = react.useMemo(() => groupByDay(responses), [responses]);
+  if (responses.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 text-center text-muted-foreground text-sm", children: "No responses to display." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 space-y-6", children: grouped.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-border" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-muted-foreground shrink-0", children: group.dateLabel }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground shrink-0", children: [
+        "(",
+        group.responses.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-border" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 ml-4 border-l-2 border-border/50 pl-4", children: group.responses.map((response, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+      TimelineEntry,
+      {
+        response,
+        questions,
+        onView: () => onSelect(response)
+      },
+      response.sessionToken || idx
+    )) })
+  ] }, group.dateLabel)) });
+}
+function TimelineEntry({
+  response,
+  questions,
+  onView
+}) {
+  const time = new Date(response.submittedAt).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+  const preview = [];
+  for (const q of questions) {
+    if (preview.length >= 3) break;
+    const val = response.values[q.id];
+    if (val != null && val !== "") {
+      preview.push({ questionId: q.id, label: q.label, type: q.type, value: val });
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-start gap-3 group", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-[21px] top-2.5 w-2 h-2 rounded-full bg-border group-hover:bg-primary transition-colors" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 rounded border border-border bg-card p-3 hover:border-primary/40 transition-colors", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-foreground", children: time }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          response.totalScore != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            "Score: ",
+            response.totalScore
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "ghost", size: "sm", className: "h-6 text-xs", onClick: onView, children: "View" })
+        ] })
+      ] }),
+      preview.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-x-4 gap-y-1", children: preview.map((field) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+          field.label,
+          ": "
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground", children: formatPreviewValue(field.value, field.type) })
+      ] }, field.questionId)) })
+    ] })
+  ] });
+}
+function groupByDay(responses) {
+  const sorted = [...responses].sort(
+    (a, b) => new Date(b.submittedAt).getTime() - new Date(a.submittedAt).getTime()
+  );
+  const groups = /* @__PURE__ */ new Map();
+  for (const r of sorted) {
+    const date = new Date(r.submittedAt).toLocaleDateString(void 0, {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    });
+    const existing = groups.get(date);
+    if (existing) {
+      existing.push(r);
+    } else {
+      groups.set(date, [r]);
+    }
+  }
+  return Array.from(groups.entries()).map(([dateLabel, responses2]) => ({
+    dateLabel,
+    responses: responses2
+  }));
+}
+function formatPreviewValue(value, type) {
+  if (value == null) return "\u2014";
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (Array.isArray(value)) return value.length > 0 ? value.slice(0, 2).join(", ") + (value.length > 2 ? "..." : "") : "\u2014";
+  if (typeof value === "object") {
+    if (type === "legal_name") {
+      const n = value;
+      return [n.first, n.last].filter(Boolean).join(" ") || "\u2014";
+    }
+    return "...";
+  }
+  const str = String(value);
+  return str.length > 40 ? str.slice(0, 40) + "..." : str;
+}
+
+// src/response-viewer/stats-utils.ts
+function computeStats(responses, schema) {
+  if (responses.length === 0) {
+    return {
+      totalCount: 0,
+      completionRate: 0,
+      avgCompletionTimeMs: null,
+      dateRange: null,
+      fieldSummaries: []
+    };
+  }
+  const questions = getStatsQuestions(schema);
+  const requiredIds = new Set(questions.filter((q) => q.required).map((q) => q.id));
+  let completedCount = 0;
+  for (const r of responses) {
+    let allFilled = true;
+    for (const id of requiredIds) {
+      if (r.values[id] == null || r.values[id] === "") {
+        allFilled = false;
+        break;
+      }
+    }
+    if (allFilled) completedCount++;
+  }
+  const completionRate = requiredIds.size > 0 ? completedCount / responses.length : 1;
+  const completionTimes = responses.map((r) => r.completionTimeMs).filter((t) => t != null && t > 0);
+  const avgCompletionTimeMs = completionTimes.length > 0 ? completionTimes.reduce((a, b) => a + b, 0) / completionTimes.length : null;
+  const timestamps = responses.map((r) => new Date(r.submittedAt).getTime());
+  const earliest = new Date(Math.min(...timestamps)).toISOString();
+  const latest = new Date(Math.max(...timestamps)).toISOString();
+  const fieldSummaries = questions.map((q) => computeFieldSummary(q, responses));
+  return {
+    totalCount: responses.length,
+    completionRate,
+    avgCompletionTimeMs,
+    dateRange: { earliest, latest },
+    fieldSummaries
+  };
+}
+function computeFieldSummary(question, responses) {
+  const values = responses.map((r) => r.values[question.id]).filter((v) => v != null && v !== "");
+  const filledCount = values.length;
+  const filledRate = responses.length > 0 ? filledCount / responses.length : 0;
+  const base = {
+    fieldId: question.id,
+    label: question.label,
+    type: question.type,
+    filledCount,
+    filledRate
+  };
+  if (isNumericType(question.type)) {
+    const nums = values.map((v) => typeof v === "number" ? v : Number(v)).filter((n) => !isNaN(n));
+    if (nums.length > 0) {
+      return {
+        ...base,
+        kind: "numeric",
+        mean: nums.reduce((a, b) => a + b, 0) / nums.length,
+        min: Math.min(...nums),
+        max: Math.max(...nums)
+      };
+    }
+    return { ...base, kind: "other" };
+  }
+  if (isCategoricalType(question.type)) {
+    const counts = /* @__PURE__ */ new Map();
+    for (const v of values) {
+      const key = String(v);
+      counts.set(key, (counts.get(key) ?? 0) + 1);
+    }
+    let mode = "";
+    let modeCount = 0;
+    for (const [key, count] of counts) {
+      if (count > modeCount) {
+        mode = key;
+        modeCount = count;
+      }
+    }
+    return {
+      ...base,
+      kind: "categorical",
+      mode,
+      modeCount,
+      uniqueCount: counts.size
+    };
+  }
+  return { ...base, kind: "other" };
+}
+function isNumericType(type) {
+  return [
+    "number",
+    "slider",
+    "rating",
+    "nps",
+    "opinion_scale",
+    "pain_scale"
+  ].includes(type);
+}
+function isCategoricalType(type) {
+  return [
+    "single_select",
+    "dropdown",
+    "country_select",
+    "boolean",
+    "consent",
+    "multi_select",
+    "checkbox_group"
+  ].includes(type);
+}
+function getStatsQuestions(schema) {
+  const questions = [];
+  for (const section of schema.sections) {
+    for (const q of section.questions) {
+      if (q.type === "info-block" || q.type === "section-header" || q.type === "page-break") {
+        continue;
+      }
+      questions.push(q);
+    }
+  }
+  return questions;
+}
+function StatsPanel({ schema, responses, onClose }) {
+  const stats = react.useMemo(() => computeStats(responses, schema), [responses, schema]);
+  if (stats.totalCount === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 text-sm text-muted-foreground", children: "No responses to compute statistics." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-border bg-muted/30", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-b border-border/50", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-foreground", children: "Statistics" }),
+      /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "ghost", size: "sm", className: "h-6 text-xs", onClick: onClose, children: "Close" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StatCard,
+          {
+            label: "Total Responses",
+            value: String(stats.totalCount)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StatCard,
+          {
+            label: "Completion Rate",
+            value: `${Math.round(stats.completionRate * 100)}%`
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StatCard,
+          {
+            label: "Avg. Completion Time",
+            value: formatTime(stats.avgCompletionTimeMs)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StatCard,
+          {
+            label: "Date Range",
+            value: formatDateRange(stats.dateRange)
+          }
+        )
+      ] }),
+      stats.fieldSummaries.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 grid grid-cols-2 sm:grid-cols-3 gap-2", children: stats.fieldSummaries.slice(0, 6).map((f) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "px-2.5 py-2 rounded border border-border bg-background text-xs",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground truncate mb-1", children: f.label }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-foreground font-medium", children: [
+                Math.round(f.filledRate * 100),
+                "% filled"
+              ] }),
+              f.kind === "numeric" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+                "avg ",
+                f.mean.toFixed(1),
+                " (",
+                f.min,
+                "\u2013",
+                f.max,
+                ")"
+              ] }),
+              f.kind === "categorical" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground truncate", children: [
+                "top: ",
+                f.mode,
+                " (",
+                f.modeCount,
+                ")"
+              ] })
+            ] })
+          ]
+        },
+        f.fieldId
+      )) })
+    ] })
+  ] });
+}
+function StatCard({ label, value }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 rounded border border-border bg-background", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[11px] text-muted-foreground mb-0.5", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-foreground", children: value })
+  ] });
+}
+function formatTime(ms) {
+  if (ms == null) return "\u2014";
+  const seconds = Math.round(ms / 1e3);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  return `${minutes}m ${remainingSeconds}s`;
+}
+function formatDateRange(range) {
+  if (!range) return "\u2014";
+  const fmt = (iso) => new Date(iso).toLocaleDateString();
+  return `${fmt(range.earliest)} \u2013 ${fmt(range.latest)}`;
+}
+
+// src/response-viewer/chart-utils.ts
+function computeFieldDistribution(responses, fieldId) {
+  const counts = /* @__PURE__ */ new Map();
+  let total = 0;
+  for (const r of responses) {
+    const raw = r.values[fieldId];
+    if (raw == null || raw === "") continue;
+    total++;
+    if (typeof raw === "boolean") {
+      const key = raw ? "Yes" : "No";
+      counts.set(key, (counts.get(key) ?? 0) + 1);
+    } else if (Array.isArray(raw)) {
+      for (const item of raw) {
+        const key = String(item);
+        counts.set(key, (counts.get(key) ?? 0) + 1);
+      }
+    } else {
+      const key = String(raw);
+      counts.set(key, (counts.get(key) ?? 0) + 1);
+    }
+  }
+  if (total === 0) return [];
+  const entries = [];
+  for (const [value, count] of counts) {
+    entries.push({
+      value,
+      count,
+      percentage: count / total * 100
+    });
+  }
+  entries.sort((a, b) => b.count - a.count);
+  return entries;
+}
+function getChartableFieldIds(schema) {
+  const chartable = [];
+  const chartTypes = /* @__PURE__ */ new Set([
+    "single_select",
+    "dropdown",
+    "country_select",
+    "boolean",
+    "consent",
+    "multi_select",
+    "checkbox_group",
+    "rating",
+    "nps",
+    "opinion_scale",
+    "pain_scale"
+  ]);
+  for (const section of schema.sections) {
+    for (const q of section.questions) {
+      if (chartTypes.has(q.type)) {
+        chartable.push({ id: q.id, label: q.label, type: q.type });
+      }
+    }
+  }
+  return chartable;
+}
+function ChartPanel({ schema, responses, onClose }) {
+  const chartableFields = react.useMemo(() => getChartableFieldIds(schema), [schema]);
+  const [selectedFieldId, setSelectedFieldId] = react.useState(chartableFields[0]?.id ?? "");
+  const distribution = react.useMemo(() => {
+    if (!selectedFieldId) return [];
+    return computeFieldDistribution(responses, selectedFieldId);
+  }, [responses, selectedFieldId]);
+  const selectedField = chartableFields.find((f) => f.id === selectedFieldId);
+  const maxCount = distribution.length > 0 ? Math.max(...distribution.map((d) => d.count)) : 1;
+  if (chartableFields.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-6 border-b border-border bg-muted/30 text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "No chartable fields found in this schema." }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "Charts work with select, dropdown, boolean, rating, and similar field types." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-border bg-muted/30", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-b border-border/50", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-foreground", children: "Field Distribution" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            value: selectedFieldId,
+            onChange: (e) => setSelectedFieldId(e.target.value),
+            className: "text-xs bg-background border border-border rounded px-2 py-1 text-foreground",
+            children: chartableFields.map((f) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: f.id, children: f.label }, f.id))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "ghost", size: "sm", className: "h-6 text-xs", onClick: onClose, children: "Close" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
+      distribution.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground text-center py-4", children: "No data for this field." }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+        distribution.slice(0, 10).map((entry) => /* @__PURE__ */ jsxRuntime.jsx(BarRow, { entry, maxCount }, entry.value)),
+        distribution.length > 10 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground mt-2", children: [
+          "+",
+          distribution.length - 10,
+          " more values"
+        ] })
+      ] }),
+      selectedField && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 text-[11px] text-muted-foreground", children: [
+        responses.length,
+        " response",
+        responses.length !== 1 ? "s" : "",
+        " \xB7 ",
+        distribution.length,
+        " unique value",
+        distribution.length !== 1 ? "s" : ""
+      ] })
+    ] })
+  ] });
+}
+function BarRow({ entry, maxCount }) {
+  const widthPct = maxCount > 0 ? entry.count / maxCount * 100 : 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-24 shrink-0 text-xs text-foreground truncate", title: entry.value, children: entry.value }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-5 bg-background rounded overflow-hidden border border-border/50", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "h-full bg-primary/60 rounded transition-all",
+        style: { width: `${widthPct}%` }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-16 shrink-0 text-xs text-muted-foreground text-right", children: [
+      entry.count,
+      " (",
+      Math.round(entry.percentage),
+      "%)"
+    ] })
+  ] });
+}
+function ConfirmDialog({
+  title,
+  message,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  variant = "default",
+  onConfirm,
+  onCancel
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/50",
+        onClick: onCancel
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative bg-background border border-border rounded-lg shadow-lg p-6 max-w-sm w-full mx-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-foreground mb-2", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mb-4", children: message }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "outline", size: "sm", onClick: onCancel, children: cancelLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          fieldcraftReact.Button,
+          {
+            variant: variant === "destructive" ? "destructive" : "default",
+            size: "sm",
+            onClick: onConfirm,
+            children: confirmLabel
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
 
 // src/response-viewer/export-utils.ts
 function buildCsvContent(schema, responses, options = {}) {
@@ -1189,6 +1730,84 @@ function paginate(items, currentPage, pageSize) {
   };
 }
 
+// src/response-viewer/search-utils.ts
+function searchResponses(responses, query, schema) {
+  if (!query.trim()) return responses;
+  const lowerQuery = query.toLowerCase().trim();
+  const questions = getSearchableQuestions(schema);
+  return responses.filter((response) => {
+    if (new Date(response.submittedAt).toLocaleString().toLowerCase().includes(lowerQuery)) {
+      return true;
+    }
+    if (response.sessionToken?.toLowerCase().includes(lowerQuery)) {
+      return true;
+    }
+    for (const q of questions) {
+      const value = response.values[q.id];
+      if (value == null) continue;
+      const stringified = stringifyValue(value, q.type);
+      if (stringified.toLowerCase().includes(lowerQuery)) {
+        return true;
+      }
+    }
+    if (response.totalScore != null && String(response.totalScore).includes(lowerQuery)) {
+      return true;
+    }
+    return false;
+  });
+}
+function getSearchableQuestions(schema) {
+  const questions = [];
+  for (const section of schema.sections) {
+    for (const q of section.questions) {
+      if (q.type === "info-block" || q.type === "section-header" || q.type === "page-break") {
+        continue;
+      }
+      questions.push(q);
+    }
+  }
+  return questions;
+}
+function stringifyValue(value, type) {
+  if (value == null) return "";
+  switch (type) {
+    case "vitals_entry": {
+      if (typeof value !== "object" || value === null) break;
+      const v = value;
+      const parts = [];
+      if (v.systolicBp && v.diastolicBp) parts.push(`BP ${v.systolicBp}/${v.diastolicBp}`);
+      if (v.heartRate) parts.push(`HR ${v.heartRate}`);
+      if (v.temperature) parts.push(`${v.temperature}`);
+      if (v.oxygenSaturation) parts.push(`SpO2 ${v.oxygenSaturation}`);
+      return parts.join(" ");
+    }
+    case "medication_list":
+      if (Array.isArray(value)) {
+        return value.map((m) => [m.name, m.dosage, m.frequency].filter(Boolean).join(" ")).join(" ");
+      }
+      break;
+    case "allergy_list":
+      if (Array.isArray(value)) {
+        return value.map((a) => [a.allergen, a.severity].filter(Boolean).join(" ")).join(" ");
+      }
+      break;
+    case "legal_name": {
+      if (typeof value !== "object" || value === null) break;
+      const n = value;
+      return [n.first, n.middle, n.last].filter(Boolean).join(" ");
+    }
+    case "address": {
+      if (typeof value !== "object" || value === null) break;
+      const a = value;
+      return [a.street, a.city, a.state, a.zip].filter(Boolean).join(" ");
+    }
+  }
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (Array.isArray(value)) return value.map(String).join(" ");
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+
 // src/response-viewer/filter-utils.ts
 function createEmptyFilterState() {
   return { filters: [], dateRange: {} };
@@ -1290,7 +1909,11 @@ function ResponseViewerInner({
   dateFormat,
   columnLabels,
   onExport,
-  pageSize = 25
+  pageSize = 25,
+  onDelete,
+  onBulkDelete,
+  onBulkExport,
+  selectable = false
 }) {
   const [viewMode, setViewMode] = react.useState("table");
   const [selectedResponse, setSelectedResponse] = react.useState(null);
@@ -1298,6 +1921,11 @@ function ResponseViewerInner({
   const [effectivePageSize, setEffectivePageSize] = react.useState(pageSize);
   const [filterState, setFilterState] = react.useState(createEmptyFilterState);
   const [showFilterPanel, setShowFilterPanel] = react.useState(false);
+  const [searchQuery, setSearchQuery] = react.useState("");
+  const [showStats, setShowStats] = react.useState(false);
+  const [showCharts, setShowCharts] = react.useState(false);
+  const [selectedIds, setSelectedIds] = react.useState(/* @__PURE__ */ new Set());
+  const [confirmDialog, setConfirmDialog] = react.useState(null);
   const [draftFieldId, setDraftFieldId] = react.useState("");
   const [draftOperator, setDraftOperator] = react.useState("contains");
   const [draftValue, setDraftValue] = react.useState("");
@@ -1308,9 +1936,18 @@ function ResponseViewerInner({
     setEffectivePageSize(pageSize);
     setCurrentPage(1);
   }, [pageSize]);
+  react.useEffect(() => {
+    setSelectedIds(/* @__PURE__ */ new Set());
+  }, [responses]);
+  const searchedResponses = react.useMemo(
+    () => searchResponses(responses, searchQuery, schema),
+    [responses, searchQuery, schema]
+  );
   const isFiltered = hasActiveFilters(filterState);
-  const filteredResponses = applyFilters(responses, filterState);
+  const filteredResponses = applyFilters(searchedResponses, filterState);
   const pag = paginate(filteredResponses, currentPage, effectivePageSize);
+  const questions = getAllQuestions2(schema);
+  const isSelectable = selectable && (!!onBulkDelete || !!onBulkExport);
   function handleSelect(response) {
     setSelectedResponse(response);
     onResponseSelect?.(response);
@@ -1357,7 +1994,59 @@ function ResponseViewerInner({
     setFilterState(createEmptyFilterState());
     setCurrentPage(1);
   }
-  const questions = getAllQuestions2(schema);
+  function handleToggleSelect(token) {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(token)) {
+        next.delete(token);
+      } else {
+        next.add(token);
+      }
+      return next;
+    });
+  }
+  function handleSelectAll() {
+    const currentTokens = pag.pageItems.map((r) => r.sessionToken).filter(Boolean);
+    const allSelected = currentTokens.every((t) => selectedIds.has(t));
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (allSelected) {
+        currentTokens.forEach((t) => next.delete(t));
+      } else {
+        currentTokens.forEach((t) => next.add(t));
+      }
+      return next;
+    });
+  }
+  function handleBulkDelete() {
+    if (!onBulkDelete || selectedIds.size === 0) return;
+    setConfirmDialog({
+      title: "Delete selected responses",
+      message: `Are you sure you want to delete ${selectedIds.size} response${selectedIds.size !== 1 ? "s" : ""}? This cannot be undone.`,
+      onConfirm: () => {
+        onBulkDelete(Array.from(selectedIds));
+        setSelectedIds(/* @__PURE__ */ new Set());
+        setConfirmDialog(null);
+      }
+    });
+  }
+  function handleBulkExport() {
+    if (!onBulkExport || selectedIds.size === 0) return;
+    const selected = responses.filter((r) => r.sessionToken && selectedIds.has(r.sessionToken));
+    onBulkExport(selected);
+  }
+  function handleDeleteSingle(token) {
+    if (!onDelete) return;
+    setConfirmDialog({
+      title: "Delete response",
+      message: "Are you sure you want to delete this response? This cannot be undone.",
+      onConfirm: () => {
+        onDelete(token);
+        setSelectedResponse(null);
+        setConfirmDialog(null);
+      }
+    });
+  }
   function getFields(response) {
     return questions.map((q) => ({
       questionId: q.id,
@@ -1368,6 +2057,19 @@ function ResponseViewerInner({
   }
   const heightValue = typeof height === "number" ? `${height}px` : height;
   const widthValue = typeof width === "number" ? `${width}px` : width;
+  const countText = (() => {
+    const hasSearch = searchQuery.trim().length > 0;
+    if (hasSearch && isFiltered) {
+      return `${filteredResponses.length} of ${responses.length} responses (searched + filtered)`;
+    }
+    if (hasSearch) {
+      return `${searchedResponses.length} result${searchedResponses.length !== 1 ? "s" : ""} for "${searchQuery}"`;
+    }
+    if (isFiltered) {
+      return `Showing ${filteredResponses.length} of ${responses.length} responses (filtered)`;
+    }
+    return `${responses.length} response${responses.length !== 1 ? "s" : ""}`;
+  })();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1375,7 +2077,20 @@ function ResponseViewerInner({
       style: { height: heightValue, width: widthValue },
       children: [
         !selectedResponse && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 px-3 py-2 border-b border-border", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground mr-auto", children: isFiltered ? `Showing ${filteredResponses.length} of ${responses.length} responses (filtered)` : `${responses.length} response${responses.length !== 1 ? "s" : ""}` }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            fieldcraftReact.Input,
+            {
+              type: "text",
+              placeholder: "Search responses...",
+              className: "h-7 text-xs w-40",
+              value: searchQuery,
+              onChange: (e) => {
+                setSearchQuery(e.target.value);
+                setCurrentPage(1);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground mr-auto", children: countText }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               fieldcraftReact.Button,
@@ -1402,6 +2117,48 @@ function ResponseViewerInner({
                 onClick: () => setViewMode("card"),
                 children: "Cards"
               }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              fieldcraftReact.Button,
+              {
+                variant: viewMode === "timeline" ? "secondary" : "ghost",
+                size: "sm",
+                className: cn(
+                  "h-7 text-xs",
+                  viewMode === "timeline" && "font-semibold border border-ring"
+                ),
+                onClick: () => setViewMode("timeline"),
+                children: "Timeline"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Separator, { orientation: "vertical", className: "h-5 hidden sm:block" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              fieldcraftReact.Button,
+              {
+                variant: showStats ? "secondary" : "ghost",
+                size: "sm",
+                className: cn(
+                  "h-7 text-xs",
+                  showStats && "font-semibold border border-ring"
+                ),
+                onClick: () => setShowStats((v) => !v),
+                children: "Stats"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              fieldcraftReact.Button,
+              {
+                variant: showCharts ? "secondary" : "ghost",
+                size: "sm",
+                className: cn(
+                  "h-7 text-xs",
+                  showCharts && "font-semibold border border-ring"
+                ),
+                onClick: () => setShowCharts((v) => !v),
+                children: "Charts"
+              }
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Separator, { orientation: "vertical", className: "h-5 hidden sm:block" }),
@@ -1467,6 +2224,26 @@ function ResponseViewerInner({
             )
           ] })
         ] }),
+        !selectedResponse && isSelectable && selectedIds.size > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border bg-accent/50", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-foreground", children: [
+            selectedIds.size,
+            " selected"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
+            onBulkExport && /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "outline", size: "sm", className: "h-6 text-xs", onClick: handleBulkExport, children: "Export Selected" }),
+            onBulkDelete && /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "destructive", size: "sm", className: "h-6 text-xs", onClick: handleBulkDelete, children: "Delete Selected" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              fieldcraftReact.Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-6 text-xs",
+                onClick: () => setSelectedIds(/* @__PURE__ */ new Set()),
+                children: "Clear"
+              }
+            )
+          ] })
+        ] }),
         !selectedResponse && showFilterPanel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fc-rv-filter__panel px-3 py-2 border-b border-border bg-muted/50", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground w-16 shrink-0", children: "Date:" }),
@@ -1595,19 +2372,47 @@ function ResponseViewerInner({
             );
           })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 min-w-0 overflow-auto", selectedResponse && "p-4"), children: selectedResponse ? /* @__PURE__ */ jsxRuntime.jsx(
+        !selectedResponse && showStats && /* @__PURE__ */ jsxRuntime.jsx(
+          StatsPanel,
+          {
+            schema,
+            responses: filteredResponses,
+            onClose: () => setShowStats(false)
+          }
+        ),
+        !selectedResponse && showCharts && /* @__PURE__ */ jsxRuntime.jsx(
+          ChartPanel,
+          {
+            schema,
+            responses: filteredResponses,
+            onClose: () => setShowCharts(false)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 min-w-0 overflow-auto", selectedResponse && "p-4"), children: selectedResponse ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
           ResponseDetail,
           {
             response: selectedResponse,
             fields: getFields(selectedResponse),
-            onBack: handleBack
+            onBack: handleBack,
+            onDelete: onDelete && selectedResponse.sessionToken ? () => handleDeleteSingle(selectedResponse.sessionToken) : void 0
+          }
+        ) }) : viewMode === "timeline" ? /* @__PURE__ */ jsxRuntime.jsx(
+          TimelineView,
+          {
+            responses: filteredResponses,
+            questions,
+            onSelect: handleSelect
           }
         ) : viewMode === "table" ? /* @__PURE__ */ jsxRuntime.jsx(
           ResponseTable,
           {
             schema,
             responses: pag.pageItems,
-            onRowClick: handleSelect
+            onRowClick: handleSelect,
+            selectable: isSelectable,
+            selectedIds,
+            onToggleSelect: handleToggleSelect,
+            onSelectAll: handleSelectAll
           }
         ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3 p-3 grid-cols-[repeat(auto-fill,minmax(280px,1fr))]", children: [
           pag.pageItems.map((response, idx) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1615,13 +2420,16 @@ function ResponseViewerInner({
             {
               response,
               fields: getFields(response),
-              onClick: () => handleSelect(response)
+              onClick: () => handleSelect(response),
+              selectable: isSelectable,
+              selected: !!(response.sessionToken && selectedIds.has(response.sessionToken)),
+              onToggleSelect: response.sessionToken ? () => handleToggleSelect(response.sessionToken) : void 0
             },
             response.sessionToken || idx
           )),
-          filteredResponses.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 text-center text-muted-foreground", children: isFiltered ? "No matching responses" : "No responses yet" })
+          filteredResponses.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 text-center text-muted-foreground", children: isFiltered || searchQuery.trim() ? "No matching responses" : "No responses yet" })
         ] }) }),
-        !selectedResponse && pag.showPagination && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fc-rv-pagination flex flex-wrap items-center gap-x-2 gap-y-1 px-3 py-2 border-t border-border", children: [
+        !selectedResponse && viewMode !== "timeline" && pag.showPagination && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fc-rv-pagination flex flex-wrap items-center gap-x-2 gap-y-1 px-3 py-2 border-t border-border", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fc-rv-pagination__info text-xs text-muted-foreground mr-auto", children: [
             "Showing ",
             pag.startItem,
@@ -1675,7 +2483,18 @@ function ResponseViewerInner({
               }
             )
           ] })
-        ] })
+        ] }),
+        confirmDialog && /* @__PURE__ */ jsxRuntime.jsx(
+          ConfirmDialog,
+          {
+            title: confirmDialog.title,
+            message: confirmDialog.message,
+            confirmLabel: "Delete",
+            variant: "destructive",
+            onConfirm: confirmDialog.onConfirm,
+            onCancel: () => setConfirmDialog(null)
+          }
+        )
       ]
     }
   );