@squaredr/fieldcraft-pro 1.1.1 → 1.2.0

package/dist/index.js

@@ -3444,6 +3444,17 @@ function FormBuilderCore(props) {
   const builderState = useBuilderState(initialSchema);
   const dragDrop = useDragDrop(builderState);
   const fileInputRef = react.useRef(null);
+  const [mobilePanel, setMobilePanel] = react.useState("none");
+  react.useEffect(() => {
+    if (builderState.selectedItem && window.innerWidth < 768) {
+      setMobilePanel("properties");
+    }
+  }, [builderState.selectedItem]);
+  react.useEffect(() => {
+    if (!dragDrop.activeDragItem && mobilePanel === "palette") {
+      setMobilePanel("none");
+    }
+  }, [dragDrop.activeDragItem]);
   react.useEffect(() => {
     if (onChange && builderState.isDirty) {
       onChange(builderState.schema);
@@ -3565,7 +3576,7 @@ ${details}`);
             role: "application",
             "aria-label": "Form Builder",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-12 shrink-0 grid px-4 bg-card border-b border-border", style: { gridTemplateColumns: "1fr auto 1fr" }, role: "toolbar", "aria-label": "Builder toolbar", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-12 shrink-0 hidden md:grid px-4 bg-card border-b border-border", style: { gridTemplateColumns: "1fr auto 1fr" }, role: "toolbar", "aria-label": "Builder toolbar", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     fieldcraftReact.Button,
@@ -3625,23 +3636,124 @@ ${details}`);
                     /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { size: 14, strokeWidth: 2 }),
                     "Save"
                   ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 md:hidden bg-card border-b border-border", role: "toolbar", "aria-label": "Builder toolbar", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-10 grid px-2", style: { gridTemplateColumns: "auto 1fr auto" }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    fieldcraftReact.Button,
+                    {
+                      variant: mobilePanel === "palette" ? "secondary" : "ghost",
+                      size: "icon-sm",
+                      onClick: () => setMobilePanel((p) => p === "palette" ? "none" : "palette"),
+                      title: "Toggle field palette",
+                      "aria-label": "Toggle field palette",
+                      children: mobilePanel === "palette" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16, strokeWidth: 1.75 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeft, { size: 16, strokeWidth: 1.75 })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-1", children: [
+                    toolbarExtra,
+                    /* @__PURE__ */ jsxRuntime.jsxs(fieldcraftReact.Button, { onClick: handleSave, size: "sm", className: "border-0 shadow-sm fcb-glow ml-1", "aria-label": "Save form", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { size: 14, strokeWidth: 2 }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Save" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    fieldcraftReact.Button,
+                    {
+                      variant: mobilePanel === "properties" ? "secondary" : "ghost",
+                      size: "icon-sm",
+                      onClick: () => setMobilePanel((p) => p === "properties" ? "none" : "properties"),
+                      title: "Toggle properties panel",
+                      "aria-label": "Toggle properties panel",
+                      children: mobilePanel === "properties" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16, strokeWidth: 1.75 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelRight, { size: 16, strokeWidth: 1.75 })
+                    }
+                  ) })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-9 flex items-center justify-between px-2 border-t border-border/50", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      fieldcraftReact.Button,
+                      {
+                        variant: "ghost",
+                        size: "icon-sm",
+                        onClick: builderState.undo,
+                        disabled: !builderState.canUndo,
+                        className: "disabled:opacity-30",
+                        title: "Undo (Ctrl+Z)",
+                        "aria-label": "Undo",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo2, { size: 15, strokeWidth: 1.75 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      fieldcraftReact.Button,
+                      {
+                        variant: "ghost",
+                        size: "icon-sm",
+                        onClick: builderState.redo,
+                        disabled: !builderState.canRedo,
+                        className: "disabled:opacity-30",
+                        title: "Redo (Ctrl+Shift+Z)",
+                        "aria-label": "Redo",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Redo2, { size: 15, strokeWidth: 1.75 })
+                      }
+                    ),
+                    builderState.isDirty && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Separator, { orientation: "vertical", className: "mx-1 h-4" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-primary", role: "status", children: "Unsaved" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      fieldcraftReact.Button,
+                      {
+                        variant: "ghost",
+                        size: "icon-sm",
+                        onClick: handleImport,
+                        title: "Import schema JSON",
+                        "aria-label": "Import schema",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { size: 14, strokeWidth: 1.75 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      fieldcraftReact.Button,
+                      {
+                        variant: "ghost",
+                        size: "icon-sm",
+                        onClick: handleExport,
+                        title: "Export schema JSON",
+                        "aria-label": "Export schema",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { size: 14, strokeWidth: 1.75 })
+                      }
+                    )
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref: fileInputRef,
+                  type: "file",
+                  accept: ".json,application/json",
+                  onChange: handleFileChange,
+                  className: "hidden",
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex overflow-hidden relative", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsxRuntime.jsx(QuestionPalette, { questionTypes: mergedQuestionTypes, palette }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(FormCanvas, { builderState }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsxRuntime.jsx(PropertiesPanel, { builderState }) }),
+                mobilePanel === "palette" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 z-20 md:hidden shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(QuestionPalette, { questionTypes: mergedQuestionTypes, palette }) }),
+                mobilePanel === "properties" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 z-20 md:hidden shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(PropertiesPanel, { builderState }) }),
+                mobilePanel !== "none" && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
                   {
-                    ref: fileInputRef,
-                    type: "file",
-                    accept: ".json,application/json",
-                    onChange: handleFileChange,
-                    className: "hidden",
+                    className: "absolute inset-0 z-10 bg-black/20 md:hidden",
+                    onClick: () => setMobilePanel("none"),
                     "aria-hidden": "true"
                   }
                 )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex overflow-hidden", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(QuestionPalette, { questionTypes: mergedQuestionTypes, palette }),
-                /* @__PURE__ */ jsxRuntime.jsx(FormCanvas, { builderState }),
-                /* @__PURE__ */ jsxRuntime.jsx(PropertiesPanel, { builderState })
               ] })
             ]
           }
@@ -4501,16 +4613,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") {
@@ -4605,15 +4725,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] = react.useState("table");
   const [selectedResponse, setSelectedResponse] = react.useState(null);
+  const [currentPage, setCurrentPage] = react.useState(1);
+  const [effectivePageSize, setEffectivePageSize] = react.useState(pageSize);
+  const [filterState, setFilterState] = react.useState(createEmptyFilterState);
+  const [showFilterPanel, setShowFilterPanel] = react.useState(false);
+  const [draftFieldId, setDraftFieldId] = react.useState("");
+  const [draftOperator, setDraftOperator] = react.useState("contains");
+  const [draftValue, setDraftValue] = react.useState("");
+  react.useEffect(() => {
+    setCurrentPage(1);
+  }, [responses]);
+  react.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);
@@ -4621,6 +4871,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) => ({
@@ -4638,12 +4927,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__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center px-3 py-2 border-b border-border", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground", children: [
-            responses.length,
-            " response",
-            responses.length !== 1 ? "s" : ""
-          ] }),
+        !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.jsxs("div", { className: "flex items-center gap-1", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               fieldcraftReact.Button,
@@ -4670,15 +4955,50 @@ function ResponseViewerInner({
                 onClick: () => setViewMode("card"),
                 children: "Cards"
               }
+            )
+          ] }),
+          /* @__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.jsxs(
+              fieldcraftReact.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__ */ jsxRuntime.jsx(fieldcraftReact.Separator, { orientation: "vertical", className: "h-5 mx-1" }),
+            isFiltered && /* @__PURE__ */ jsxRuntime.jsx(
+              fieldcraftReact.Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-7 text-xs text-destructive",
+                onClick: handleClearAllFilters,
+                children: "Clear all"
+              }
+            )
+          ] }),
+          /* @__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: "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"
               }
@@ -4689,14 +5009,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__ */ jsxRuntime.jsx("div", { className: cn("flex-1 overflow-auto", selectedResponse && "p-4"), children: selectedResponse ? /* @__PURE__ */ jsxRuntime.jsx(
+        !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:" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              fieldcraftReact.Input,
+              {
+                type: "date",
+                className: "h-7 text-xs w-36",
+                value: filterState.dateRange.from ?? "",
+                onChange: (e) => handleDateRangeChange("from", e.target.value)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "to" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              fieldcraftReact.Input,
+              {
+                type: "date",
+                className: "h-7 text-xs w-36",
+                value: filterState.dateRange.to ?? "",
+                onChange: (e) => handleDateRangeChange("to", e.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground w-16 shrink-0", children: "Field:" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              fieldcraftReact.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__ */ jsxRuntime.jsx(fieldcraftReact.SelectTrigger, { size: "sm", className: "h-7 text-xs w-40", children: /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.SelectValue, { placeholder: "Select field" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.SelectContent, { children: questions.map((q) => /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.SelectItem, { value: q.id, children: q.label }, q.id)) })
+                ]
+              }
+            ),
+            draftFieldId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                fieldcraftReact.Select,
+                {
+                  value: draftOperator,
+                  onValueChange: (val) => setDraftOperator(val),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.SelectTrigger, { size: "sm", className: "h-7 text-xs w-32", children: /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.SelectValue, {}) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.SelectContent, { children: getOperatorsForType(
+                      questions.find((q) => q.id === draftFieldId)?.type ?? "short_text"
+                    ).map((op) => /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.SelectItem, { value: op.value, children: op.label }, op.value)) })
+                  ]
+                }
+              ),
+              operatorNeedsValue(draftOperator) && /* @__PURE__ */ jsxRuntime.jsx(
+                fieldcraftReact.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__ */ jsxRuntime.jsx(
+                fieldcraftReact.Button,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  className: "h-7 text-xs",
+                  onClick: handleAddFilter,
+                  children: "Add"
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        !selectedResponse && isFiltered && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 px-3 py-1.5 border-b border-border flex-wrap", children: [
+          filterState.dateRange.from && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("flex-1 min-w-0 overflow-auto", selectedResponse && "p-4"), children: selectedResponse ? /* @__PURE__ */ jsxRuntime.jsx(
           ResponseDetail,
           {
             response: selectedResponse,
@@ -4707,11 +5159,11 @@ function ResponseViewerInner({
           ResponseTable,
           {
             schema,
-            responses,
+            responses: pag.pageItems,
             onRowClick: handleSelect
           }
         ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3 p-3 grid-cols-[repeat(auto-fill,minmax(280px,1fr))]", children: [
-          responses.map((response, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+          pag.pageItems.map((response, idx) => /* @__PURE__ */ jsxRuntime.jsx(
             ResponseCard,
             {
               response,
@@ -4720,8 +5172,63 @@ function ResponseViewerInner({
             },
             response.sessionToken || idx
           )),
-          responses.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 text-center text-muted-foreground", children: "No responses yet" })
-        ] }) })
+          filteredResponses.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 text-center text-muted-foreground", children: isFiltered ? "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: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fc-rv-pagination__size-select flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Per page:" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                fieldcraftReact.Select,
+                {
+                  value: String(effectivePageSize),
+                  onValueChange: handlePageSizeChange,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.SelectTrigger, { size: "sm", className: "h-7 w-16 text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.SelectValue, {}) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.SelectContent, { children: PAGE_SIZE_OPTIONS.map((size) => /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.SelectItem, { value: String(size), children: size }, size)) })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+              "Page ",
+              pag.currentPage,
+              " of ",
+              pag.totalPages
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              fieldcraftReact.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__ */ jsxRuntime.jsx(
+              fieldcraftReact.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"
+              }
+            )
+          ] })
+        ] })
       ]
     }
   );