@squaredr/fieldcraft-pro 1.1.0 → 1.2.0

package/README.md

@@ -1,12 +1,17 @@
 # @squaredr/fieldcraft-pro
 
-Pro components for [FieldCraft](https://squaredr.tech/products/fieldcraft) — a schema-driven form engine for React.
+[![npm version](https://img.shields.io/npm/v/@squaredr/fieldcraft-pro.svg)](https://www.npmjs.com/package/@squaredr/fieldcraft-pro)
+[![license](https://img.shields.io/badge/license-Commercial-blue.svg)](https://squaredr.tech/products/fieldcraft/admin-pro#pricing)
 
-**Includes:**
+Pro components for [FieldCraft](https://squaredr.tech/products/fieldcraft) — a schema-driven form engine for React. Build forms visually, view responses, and customize themes without writing code.
 
-- **Form Builder** — Drag-and-drop visual form designer with 32 field types, undo/redo, import/export, and live preview
-- **Response Viewer** — Read-only viewer for submitted form data with table and detail views, CSV/JSON export
-- **Theme Editor** — Visual theme editor for form styling and branding with CSS custom properties and live preview
+## What's Included
+
+| Component | Description |
+|-----------|-------------|
+| **FormBuilder** | Drag-and-drop visual form designer with 32 field types, undo/redo, import/export, and live preview |
+| **ResponseViewer** | Read-only viewer for submitted form data with table and detail views, CSV/JSON export |
+| **ThemeEditor** | Visual theme editor for form styling with color pickers, typography controls, and live preview |
 
 ## Install
 
@@ -48,38 +53,21 @@ import "@squaredr/fieldcraft-pro/styles.css";              // Form Builder style
 import "@squaredr/fieldcraft-pro/theme-editor/styles.css"; // Theme Editor styles
 ```
 
-## Response Viewer
-
-Display submitted form responses in table or card/detail views:
-
-```tsx
-import { ResponseViewer } from "@squaredr/fieldcraft-pro";
-
-<ResponseViewer
-  schema={schema}
-  responses={responses}
-  onExport={(format) => console.log(`Export as ${format}`)}
-/>
-```
-
-Supports clinical field rendering (scoring instruments, body diagrams, pain scales, BMI, vitals) when paired with `@squaredr/fieldcraft-pro-telehealth`.
-
-## Theme Editor
+## Form Builder
 
-Live-edit form themes with color pickers, typography controls, and shape/spacing sliders:
+Visual form designer with drag-and-drop, live preview, and schema export:
 
 ```tsx
-import { ThemeEditor } from "@squaredr/fieldcraft-pro";
+import { FormBuilder } from "@squaredr/fieldcraft-pro";
 
-<ThemeEditor
-  onChange={(theme) => console.log(theme)}
-  onSave={(theme) => saveToServer(theme)}
+<FormBuilder
+  onSave={(schema) => saveToServer(schema)}
+  onChange={(schema) => setPreview(schema)}
+  height="100vh"
 />
 ```
 
-Includes presets: Clean, Dark, Modern, High Contrast, Clinical, Playful.
-
-## Field Types (32)
+### Field Types (32)
 
 | Category | Fields |
 |----------|--------|
@@ -92,9 +80,7 @@ Includes presets: Clean, Dark, Modern, High Contrast, Clinical, Playful.
 | Structural | Section Header, Info Block, Page Break, Consent |
 | Advanced | Matrix, Calculated, Hidden |
 
-Need telehealth fields (PHQ-9, GAD-7, clinical instruments, patient intake)? See [`@squaredr/fieldcraft-pro-telehealth`](https://www.npmjs.com/package/@squaredr/fieldcraft-pro-telehealth).
-
-## Extending with Custom Fields
+### Extending with Custom Fields
 
 The FormBuilder accepts `questionTypes` and `palette` props to inject additional field types at runtime:
 
@@ -107,11 +93,40 @@ import { FormBuilder, QUESTION_TYPE_INFO, DEFAULT_PALETTE } from "@squaredr/fiel
 />
 ```
 
+## Response Viewer
+
+Display submitted form responses in table or card/detail views:
+
+```tsx
+import { ResponseViewer } from "@squaredr/fieldcraft-pro";
+
+<ResponseViewer
+  schema={schema}
+  responses={responses}
+  onExport={(format) => console.log(`Export as ${format}`)}
+/>
+```
+
+## Theme Editor
+
+Live-edit form themes with color pickers, typography controls, and shape/spacing sliders:
+
+```tsx
+import { ThemeEditor } from "@squaredr/fieldcraft-pro";
+
+<ThemeEditor
+  onChange={(theme) => console.log(theme)}
+  onSave={(theme) => saveToServer(theme)}
+/>
+```
+
+Includes presets: Clean, Dark, Modern, High Contrast, Clinical, Playful.
+
 ## Requirements
 
 - React 18 or 19
-- `@squaredr/fieldcraft-core` ^1.3.3
-- `@squaredr/fieldcraft-react` ^1.2.8
+- `@squaredr/fieldcraft-core` >= 1.3.3
+- `@squaredr/fieldcraft-react` >= 1.2.8
 
 ## License
 
@@ -119,4 +134,6 @@ Commercial license required for production use. Free in development mode.
 
 See [LICENSE.txt](./LICENSE.txt) for details.
 
-[Get a license](https://squaredr.tech/products/fieldcraft/admin-pro#pricing) | [Documentation](https://squaredr.tech/products/fieldcraft/docs/pro) | [Discord](https://discord.gg/zMxdu5UVW)
+---
+
+[Get a license](https://squaredr.tech/products/fieldcraft/admin-pro#pricing) | [Documentation](https://squaredr.tech/products/fieldcraft/docs/pro) | [GitHub](https://github.com/SquaredR98/fieldcraft-pro) | [Discord](https://discord.gg/squaredr)

package/dist/{chunk-RSU3X25P.mjs → chunk-4BX7FCXH.mjs}

@@ -1,7 +1,7 @@
 import { cn } from './chunk-QQ4JZGTD.mjs';
 import { requireLicense } from './chunk-VECQKSWS.mjs';
-import { useState } from 'react';
-import { Button, Separator } from '@squaredr/fieldcraft-react';
+import { useState, useEffect } from 'react';
+import { Button, Separator, Input, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@squaredr/fieldcraft-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/response-viewer/clinical-display-data.ts
@@ -732,16 +732,24 @@ function formatFallbackValue(value) {
 }
 
 // src/response-viewer/export-utils.ts
-function exportToCsv(schema, responses, filename = "responses.csv") {
+function buildCsvContent(schema, responses, options = {}) {
+  const { dateFormat = "locale", columnLabels } = options;
   const questions = getExportableQuestions(schema);
-  const headers = ["Submitted", ...questions.map((q) => q.label), "Score"];
+  const headers = [
+    "Submitted",
+    ...questions.map((q) => columnLabels?.[q.id] ?? q.label),
+    "Score"
+  ];
   const rows = responses.map((r) => {
-    const submitted = new Date(r.submittedAt).toLocaleString();
+    const submitted = dateFormat === "iso" ? new Date(r.submittedAt).toISOString() : new Date(r.submittedAt).toLocaleString();
     const values = questions.map((q) => formatExportValue(r.values[q.id], q.type));
     const score = r.totalScore != null ? String(r.totalScore) : "";
     return [submitted, ...values, score];
   });
-  const csvContent = [headers, ...rows].map((row) => row.map(escapeCsvField).join(",")).join("\n");
+  return [headers, ...rows].map((row) => row.map(escapeCsvField).join(",")).join("\n");
+}
+function exportToCsv(schema, responses, filename = "responses.csv", options = {}) {
+  const csvContent = buildCsvContent(schema, responses, options);
   downloadBlob(csvContent, filename, "text/csv;charset=utf-8;");
 }
 function exportToJson(responses, filename = "responses.json") {
@@ -836,15 +844,145 @@ function downloadBlob(content, filename, mimeType) {
   document.body.removeChild(link);
   URL.revokeObjectURL(url);
 }
+
+// src/response-viewer/pagination-utils.ts
+function paginate(items, currentPage, pageSize) {
+  const totalItems = items.length;
+  const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
+  const page = Math.max(1, Math.min(currentPage, totalPages));
+  const startIndex = (page - 1) * pageSize;
+  const endIndex = Math.min(startIndex + pageSize, totalItems);
+  const pageItems = items.slice(startIndex, endIndex);
+  return {
+    pageItems,
+    currentPage: page,
+    totalPages,
+    startItem: totalItems === 0 ? 0 : startIndex + 1,
+    endItem: endIndex,
+    totalItems,
+    showPagination: totalItems > pageSize
+  };
+}
+
+// src/response-viewer/filter-utils.ts
+function createEmptyFilterState() {
+  return { filters: [], dateRange: {} };
+}
+function hasActiveFilters(state) {
+  return state.filters.length > 0 || !!state.dateRange.from || !!state.dateRange.to;
+}
+function applyFilters(responses, state) {
+  if (!hasActiveFilters(state)) return responses;
+  return responses.filter((r) => {
+    if (!matchesDateRange(r.submittedAt, state.dateRange)) return false;
+    for (const filter of state.filters) {
+      if (!matchesFieldFilter(r.values[filter.fieldId], filter)) return false;
+    }
+    return true;
+  });
+}
+function matchesDateRange(submittedAt, range) {
+  if (!range.from && !range.to) return true;
+  const submitted = new Date(submittedAt);
+  if (range.from) {
+    const from = new Date(range.from);
+    from.setHours(0, 0, 0, 0);
+    if (submitted < from) return false;
+  }
+  if (range.to) {
+    const to = new Date(range.to);
+    to.setHours(23, 59, 59, 999);
+    if (submitted > to) return false;
+  }
+  return true;
+}
+function matchesFieldFilter(value, filter) {
+  switch (filter.operator) {
+    case "equals":
+      if (value == null) return false;
+      return String(value).toLowerCase() === String(filter.value).toLowerCase();
+    case "contains":
+      if (value == null) return false;
+      return String(value).toLowerCase().includes(String(filter.value).toLowerCase());
+    case "gt":
+      if (typeof value !== "number") return false;
+      return value > Number(filter.value);
+    case "lt":
+      if (typeof value !== "number") return false;
+      return value < Number(filter.value);
+    case "is_true":
+      return value === true || value === "true" || value === "agreed";
+    case "is_false":
+      return value === false || value === "false" || value == null;
+    default:
+      return true;
+  }
+}
+var PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
+var FIELD_FILTER_OPERATORS = {
+  text: [
+    { label: "equals", value: "equals" },
+    { label: "contains", value: "contains" }
+  ],
+  number: [
+    { label: "equals", value: "equals" },
+    { label: "greater than", value: "gt" },
+    { label: "less than", value: "lt" }
+  ],
+  boolean: [
+    { label: "is true", value: "is_true" },
+    { label: "is false", value: "is_false" }
+  ],
+  select: [
+    { label: "equals", value: "equals" }
+  ]
+};
+function getOperatorsForType(type) {
+  if (type === "number" || type === "slider" || type === "rating" || type === "nps" || type === "opinion_scale" || type === "pain_scale") {
+    return FIELD_FILTER_OPERATORS.number;
+  }
+  if (type === "boolean" || type === "consent") {
+    return FIELD_FILTER_OPERATORS.boolean;
+  }
+  if (type === "single_select" || type === "dropdown" || type === "country_select") {
+    return FIELD_FILTER_OPERATORS.select;
+  }
+  return FIELD_FILTER_OPERATORS.text;
+}
+function operatorNeedsValue(operator) {
+  return operator !== "is_true" && operator !== "is_false";
+}
 function ResponseViewerInner({
   schema,
   responses,
   onResponseSelect,
   height = "500px",
-  width = "100%"
+  width = "100%",
+  filename,
+  dateFormat,
+  columnLabels,
+  onExport,
+  pageSize = 25
 }) {
   const [viewMode, setViewMode] = useState("table");
   const [selectedResponse, setSelectedResponse] = useState(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [effectivePageSize, setEffectivePageSize] = useState(pageSize);
+  const [filterState, setFilterState] = useState(createEmptyFilterState);
+  const [showFilterPanel, setShowFilterPanel] = useState(false);
+  const [draftFieldId, setDraftFieldId] = useState("");
+  const [draftOperator, setDraftOperator] = useState("contains");
+  const [draftValue, setDraftValue] = useState("");
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [responses]);
+  useEffect(() => {
+    setEffectivePageSize(pageSize);
+    setCurrentPage(1);
+  }, [pageSize]);
+  const isFiltered = hasActiveFilters(filterState);
+  const filteredResponses = applyFilters(responses, filterState);
+  const pag = paginate(filteredResponses, currentPage, effectivePageSize);
   function handleSelect(response) {
     setSelectedResponse(response);
     onResponseSelect?.(response);
@@ -852,6 +990,45 @@ function ResponseViewerInner({
   function handleBack() {
     setSelectedResponse(null);
   }
+  function handlePageSizeChange(newSize) {
+    setEffectivePageSize(Number(newSize));
+    setCurrentPage(1);
+  }
+  function handleAddFilter() {
+    if (!draftFieldId) return;
+    if (operatorNeedsValue(draftOperator) && !draftValue) return;
+    const newFilter = {
+      fieldId: draftFieldId,
+      operator: draftOperator,
+      value: draftOperator === "gt" || draftOperator === "lt" ? Number(draftValue) : draftValue
+    };
+    setFilterState((prev) => ({
+      ...prev,
+      filters: [...prev.filters, newFilter]
+    }));
+    setDraftFieldId("");
+    setDraftOperator("contains");
+    setDraftValue("");
+    setCurrentPage(1);
+  }
+  function handleRemoveFilter(index) {
+    setFilterState((prev) => ({
+      ...prev,
+      filters: prev.filters.filter((_, i) => i !== index)
+    }));
+    setCurrentPage(1);
+  }
+  function handleDateRangeChange(field, value) {
+    setFilterState((prev) => ({
+      ...prev,
+      dateRange: { ...prev.dateRange, [field]: value || void 0 }
+    }));
+    setCurrentPage(1);
+  }
+  function handleClearAllFilters() {
+    setFilterState(createEmptyFilterState());
+    setCurrentPage(1);
+  }
   const questions = getAllQuestions2(schema);
   function getFields(response) {
     return questions.map((q) => ({
@@ -869,12 +1046,8 @@ function ResponseViewerInner({
       className: "flex flex-col border border-border rounded-lg overflow-hidden bg-background text-foreground",
       style: { height: heightValue, width: widthValue },
       children: [
-        !selectedResponse && /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center px-3 py-2 border-b border-border", children: [
-          /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
-            responses.length,
-            " response",
-            responses.length !== 1 ? "s" : ""
-          ] }),
+        !selectedResponse && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 px-3 py-2 border-b border-border", children: [
+          /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1", children: [
             /* @__PURE__ */ jsx(
               Button,
@@ -901,15 +1074,50 @@ function ResponseViewerInner({
                 onClick: () => setViewMode("card"),
                 children: "Cards"
               }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-5 hidden sm:block" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: showFilterPanel ? "secondary" : "outline",
+                size: "sm",
+                className: cn(
+                  "fc-rv-filter__button h-7 text-xs",
+                  showFilterPanel && "font-semibold border border-ring"
+                ),
+                onClick: () => setShowFilterPanel((v) => !v),
+                children: [
+                  "Filter",
+                  isFiltered ? ` (${filterState.filters.length + (filterState.dateRange.from || filterState.dateRange.to ? 1 : 0)})` : ""
+                ]
+              }
             ),
-            /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-5 mx-1" }),
+            isFiltered && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-7 text-xs text-destructive",
+                onClick: handleClearAllFilters,
+                children: "Clear all"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-5 hidden sm:block" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
             /* @__PURE__ */ jsx(
               Button,
               {
                 variant: "outline",
                 size: "sm",
                 className: "h-7 text-xs",
-                onClick: () => exportToCsv(schema, responses),
+                onClick: () => {
+                  const csvFilename = filename ? filename.replace(/\.\w+$/, ".csv") : "responses.csv";
+                  exportToCsv(schema, responses, csvFilename, { dateFormat, columnLabels });
+                  onExport?.("csv", responses.length);
+                },
                 disabled: responses.length === 0,
                 children: "Export CSV"
               }
@@ -920,14 +1128,146 @@ function ResponseViewerInner({
                 variant: "outline",
                 size: "sm",
                 className: "h-7 text-xs",
-                onClick: () => exportToJson(responses),
+                onClick: () => {
+                  const jsonFilename = filename ? filename.replace(/\.\w+$/, ".json") : "responses.json";
+                  exportToJson(responses, jsonFilename);
+                  onExport?.("json", responses.length);
+                },
                 disabled: responses.length === 0,
                 children: "Export JSON"
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("flex-1 overflow-auto", selectedResponse && "p-4"), children: selectedResponse ? /* @__PURE__ */ jsx(
+        !selectedResponse && showFilterPanel && /* @__PURE__ */ jsxs("div", { className: "fc-rv-filter__panel px-3 py-2 border-b border-border bg-muted/50", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground w-16 shrink-0", children: "Date:" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "date",
+                className: "h-7 text-xs w-36",
+                value: filterState.dateRange.from ?? "",
+                onChange: (e) => handleDateRangeChange("from", e.target.value)
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "to" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "date",
+                className: "h-7 text-xs w-36",
+                value: filterState.dateRange.to ?? "",
+                onChange: (e) => handleDateRangeChange("to", e.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground w-16 shrink-0", children: "Field:" }),
+            /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: draftFieldId || void 0,
+                onValueChange: (val) => {
+                  setDraftFieldId(val);
+                  const q = questions.find((q2) => q2.id === val);
+                  if (q) {
+                    const ops = getOperatorsForType(q.type);
+                    setDraftOperator(ops[0].value);
+                  }
+                  setDraftValue("");
+                },
+                children: [
+                  /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "h-7 text-xs w-40", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select field" }) }),
+                  /* @__PURE__ */ jsx(SelectContent, { children: questions.map((q) => /* @__PURE__ */ jsx(SelectItem, { value: q.id, children: q.label }, q.id)) })
+                ]
+              }
+            ),
+            draftFieldId && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  value: draftOperator,
+                  onValueChange: (val) => setDraftOperator(val),
+                  children: [
+                    /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "h-7 text-xs w-32", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                    /* @__PURE__ */ jsx(SelectContent, { children: getOperatorsForType(
+                      questions.find((q) => q.id === draftFieldId)?.type ?? "short_text"
+                    ).map((op) => /* @__PURE__ */ jsx(SelectItem, { value: op.value, children: op.label }, op.value)) })
+                  ]
+                }
+              ),
+              operatorNeedsValue(draftOperator) && /* @__PURE__ */ jsx(
+                Input,
+                {
+                  className: "h-7 text-xs w-32",
+                  placeholder: "Value",
+                  value: draftValue,
+                  onChange: (e) => setDraftValue(e.target.value),
+                  onKeyDown: (e) => e.key === "Enter" && handleAddFilter()
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  className: "h-7 text-xs",
+                  onClick: handleAddFilter,
+                  children: "Add"
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        !selectedResponse && isFiltered && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 px-3 py-1.5 border-b border-border flex-wrap", children: [
+          filterState.dateRange.from && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "fc-rv-filter__chip inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-accent text-xs text-foreground cursor-pointer hover:bg-destructive/20",
+              onClick: () => handleDateRangeChange("from", ""),
+              children: [
+                "From: ",
+                filterState.dateRange.from,
+                " \xD7"
+              ]
+            }
+          ),
+          filterState.dateRange.to && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "fc-rv-filter__chip inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-accent text-xs text-foreground cursor-pointer hover:bg-destructive/20",
+              onClick: () => handleDateRangeChange("to", ""),
+              children: [
+                "To: ",
+                filterState.dateRange.to,
+                " \xD7"
+              ]
+            }
+          ),
+          filterState.filters.map((f, i) => {
+            const q = questions.find((q2) => q2.id === f.fieldId);
+            const label = q?.label ?? f.fieldId;
+            const opLabel = f.operator.replace("_", " ");
+            const valueStr = operatorNeedsValue(f.operator) ? ` "${f.value}"` : "";
+            return /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "fc-rv-filter__chip inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-accent text-xs text-foreground cursor-pointer hover:bg-destructive/20",
+                onClick: () => handleRemoveFilter(i),
+                children: [
+                  label,
+                  " ",
+                  opLabel,
+                  valueStr,
+                  " \xD7"
+                ]
+              },
+              i
+            );
+          })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: cn("flex-1 min-w-0 overflow-auto", selectedResponse && "p-4"), children: selectedResponse ? /* @__PURE__ */ jsx(
           ResponseDetail,
           {
             response: selectedResponse,
@@ -938,11 +1278,11 @@ function ResponseViewerInner({
           ResponseTable,
           {
             schema,
-            responses,
+            responses: pag.pageItems,
             onRowClick: handleSelect
           }
         ) : /* @__PURE__ */ jsxs("div", { className: "grid gap-3 p-3 grid-cols-[repeat(auto-fill,minmax(280px,1fr))]", children: [
-          responses.map((response, idx) => /* @__PURE__ */ jsx(
+          pag.pageItems.map((response, idx) => /* @__PURE__ */ jsx(
             ResponseCard,
             {
               response,
@@ -951,8 +1291,63 @@ function ResponseViewerInner({
             },
             response.sessionToken || idx
           )),
-          responses.length === 0 && /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-muted-foreground", children: "No responses yet" })
-        ] }) })
+          filteredResponses.length === 0 && /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-muted-foreground", children: isFiltered ? "No matching responses" : "No responses yet" })
+        ] }) }),
+        !selectedResponse && pag.showPagination && /* @__PURE__ */ 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__ */ jsxs("div", { className: "fc-rv-pagination__info text-xs text-muted-foreground mr-auto", children: [
+            "Showing ",
+            pag.startItem,
+            "\u2013",
+            pag.endItem,
+            " of ",
+            pag.totalItems,
+            " responses"
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "fc-rv-pagination__size-select flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Per page:" }),
+              /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  value: String(effectivePageSize),
+                  onValueChange: handlePageSizeChange,
+                  children: [
+                    /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "h-7 w-16 text-xs", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                    /* @__PURE__ */ jsx(SelectContent, { children: PAGE_SIZE_OPTIONS.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: String(size), children: size }, size)) })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+              "Page ",
+              pag.currentPage,
+              " of ",
+              pag.totalPages
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "fc-rv-pagination__button h-7 text-xs",
+                onClick: () => setCurrentPage((p) => p - 1),
+                disabled: pag.currentPage <= 1,
+                children: "Previous"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "fc-rv-pagination__button h-7 text-xs",
+                onClick: () => setCurrentPage((p) => p + 1),
+                disabled: pag.currentPage >= pag.totalPages,
+                children: "Next"
+              }
+            )
+          ] })
+        ] })
       ]
     }
   );