@squaredr/fieldcraft-pro 0.0.5 → 1.1.0

package/dist/index.js

@@ -1,15 +1,591 @@
 'use strict';
 
-var fieldcraftProLicense = require('@squaredr/fieldcraft-pro-license');
 var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var core = require('@dnd-kit/core');
 var lucideReact = require('lucide-react');
 var fieldcraftReact = require('@squaredr/fieldcraft-react');
+var fieldcraftCore = require('@squaredr/fieldcraft-core');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var jsxRuntime = require('react/jsx-runtime');
 
-// src/index.ts
+// ../license/dist/index.mjs
+var LEGACY_TIER_MAP = {
+  "01": "starter",
+  "02": "pro",
+  "03": "business",
+  "04": "enterprise"
+};
+var TIER_MAP_NUMERIC = {
+  1: "starter",
+  2: "pro",
+  3: "business",
+  4: "enterprise"
+};
+var PRO_FEATURES = [
+  "SchemaEditor",
+  "ResponseViewer",
+  "ThemeEditor",
+  "FormBuilder",
+  "ApiManager",
+  "Analytics"
+];
+var ALL_FEATURES = [
+  ...PRO_FEATURES,
+  "Telehealth"
+];
+var TIER_FEATURES = {
+  starter: ["SchemaEditor", "ResponseViewer"],
+  pro: PRO_FEATURES,
+  business: ALL_FEATURES,
+  enterprise: ALL_FEATURES
+};
+var HMAC_SECRET = "e50a657813a5ab9563050728a605b9ab58b911d5c1a9f48c6825f379a533ccd7685d11d01937d9f135776a0db3efeefe29b3e5282b27ede8cee93758f94f2d75";
+var B32_CHARS = "0123456789ABCDEFGHIJKLMNOPQRSTUV";
+function base32hexDecode(str) {
+  const upper = str.toUpperCase();
+  let bits = 0;
+  let value = 0;
+  const bytes = [];
+  for (let i = 0; i < upper.length; i++) {
+    const idx = B32_CHARS.indexOf(upper[i]);
+    if (idx === -1) return null;
+    value = value << 5 | idx;
+    bits += 5;
+    if (bits >= 8) {
+      bits -= 8;
+      bytes.push(value >>> bits & 255);
+    }
+  }
+  return new Uint8Array(bytes);
+}
+function parseLegacyKey(key) {
+  const parts = key.split("-");
+  if (parts.length !== 5) return null;
+  const [p1, p2, tierHex, expiryHex, hash] = parts;
+  if (p1 !== "FC" || p2 !== "PRO") return null;
+  if (!(tierHex in LEGACY_TIER_MAP)) return null;
+  if (!/^[0-9A-Fa-f]{8}$/.test(expiryHex)) return null;
+  if (!/^[0-9A-Fa-f]{8}$/.test(hash)) return null;
+  return { format: "legacy", tierHex, expiryHex, hash };
+}
+function parseOpaqueKey(key) {
+  const stripped = key.replace(/-/g, "");
+  if (!stripped.startsWith("FCPRO")) return null;
+  const encoded = stripped.slice(5);
+  const decoded = base32hexDecode(encoded);
+  if (!decoded || decoded.length < 17) return null;
+  const tier = decoded[0];
+  if (!(tier in TIER_MAP_NUMERIC)) return null;
+  const expiryTimestamp = decoded[1] << 24 | decoded[2] << 16 | decoded[3] << 8 | decoded[4];
+  const expiryUnsigned = expiryTimestamp >>> 0;
+  const nonce = decoded.slice(5, 9);
+  const signature = decoded.slice(9, 17);
+  return { format: "opaque", tier, expiryTimestamp: expiryUnsigned, nonce, signature };
+}
+function parseKey(key) {
+  if (!key || typeof key !== "string") return null;
+  if (key.startsWith("FCPRO-")) {
+    return parseOpaqueKey(key);
+  }
+  return parseLegacyKey(key);
+}
+async function computeHmacLegacy(tierHex, expiryHex) {
+  const encoder = new TextEncoder();
+  const keyData = encoder.encode(HMAC_SECRET);
+  const message = encoder.encode(`FC-PRO-${tierHex}-${expiryHex}`);
+  const cryptoKey = await crypto.subtle.importKey(
+    "raw",
+    keyData,
+    { name: "HMAC", hash: "SHA-256" },
+    false,
+    ["sign"]
+  );
+  const signature = await crypto.subtle.sign("HMAC", cryptoKey, message);
+  const hashBytes = new Uint8Array(signature).slice(0, 4);
+  return Array.from(hashBytes).map((b) => b.toString(16).padStart(2, "0")).join("").toUpperCase();
+}
+async function computeHmacOpaque(payload) {
+  const encoder = new TextEncoder();
+  const keyData = encoder.encode(HMAC_SECRET);
+  const cryptoKey = await crypto.subtle.importKey(
+    "raw",
+    keyData,
+    { name: "HMAC", hash: "SHA-256" },
+    false,
+    ["sign"]
+  );
+  const signature = await crypto.subtle.sign("HMAC", cryptoKey, payload);
+  return new Uint8Array(signature).slice(0, 8);
+}
+function isExpiredLegacy(expiryHex) {
+  const expiryTimestamp = parseInt(expiryHex, 16);
+  if (expiryTimestamp === 4294967295) return false;
+  return Date.now() / 1e3 > expiryTimestamp;
+}
+function isExpiredOpaque(expiryTimestamp) {
+  if (expiryTimestamp === 4294967295) return false;
+  return Date.now() / 1e3 > expiryTimestamp;
+}
+async function validateLicense(key) {
+  if (!key || typeof key !== "string") {
+    return { status: "invalid", tier: null };
+  }
+  const parsed = parseKey(key);
+  if (!parsed) {
+    return { status: "invalid", tier: null };
+  }
+  if (parsed.format === "opaque") {
+    const payload = new Uint8Array(9);
+    payload[0] = parsed.tier;
+    payload[1] = parsed.expiryTimestamp >>> 24 & 255;
+    payload[2] = parsed.expiryTimestamp >>> 16 & 255;
+    payload[3] = parsed.expiryTimestamp >>> 8 & 255;
+    payload[4] = parsed.expiryTimestamp & 255;
+    payload.set(parsed.nonce, 5);
+    const expectedSig = await computeHmacOpaque(payload);
+    let match = true;
+    for (let i = 0; i < 8; i++) {
+      if (parsed.signature[i] !== expectedSig[i]) {
+        match = false;
+        break;
+      }
+    }
+    if (!match) {
+      return { status: "invalid", tier: null };
+    }
+    const tier2 = TIER_MAP_NUMERIC[parsed.tier];
+    if (!tier2) {
+      return { status: "invalid", tier: null };
+    }
+    if (isExpiredOpaque(parsed.expiryTimestamp)) {
+      return { status: "expired", tier: tier2 };
+    }
+    return { status: "valid", tier: tier2 };
+  }
+  const expectedHash = await computeHmacLegacy(parsed.tierHex, parsed.expiryHex);
+  if (parsed.hash.toUpperCase() !== expectedHash) {
+    return { status: "invalid", tier: null };
+  }
+  const tier = LEGACY_TIER_MAP[parsed.tierHex];
+  if (isExpiredLegacy(parsed.expiryHex)) {
+    return { status: "expired", tier };
+  }
+  return { status: "valid", tier };
+}
+function tierHasFeature(tier, featureName) {
+  return TIER_FEATURES[tier]?.includes(featureName) ?? false;
+}
+var DEV_HOSTNAMES = /* @__PURE__ */ new Set([
+  "localhost",
+  "127.0.0.1",
+  "0.0.0.0",
+  "[::1]",
+  "::1"
+]);
+var DEV_HOSTNAME_PATTERNS = [
+  /^192\.168\.\d+\.\d+$/,
+  // local network
+  /^10\.\d+\.\d+\.\d+$/,
+  // local network
+  /^172\.(1[6-9]|2\d|3[01])\.\d+\.\d+$/
+  // local network
+];
+var PRODUCTION_HOST_SUFFIXES = [
+  ".vercel.app",
+  ".netlify.app",
+  ".netlify.com",
+  ".herokuapp.com",
+  ".fly.dev",
+  ".railway.app",
+  ".render.com",
+  ".onrender.com",
+  ".pages.dev",
+  // Cloudflare Pages
+  ".workers.dev",
+  // Cloudflare Workers
+  ".azurewebsites.net",
+  ".web.app",
+  // Firebase
+  ".firebaseapp.com",
+  ".amplifyapp.com",
+  ".surge.sh",
+  ".github.io",
+  ".gitlab.io"
+];
+function isDevHostname(hostname) {
+  if (DEV_HOSTNAMES.has(hostname)) return true;
+  for (const pattern of DEV_HOSTNAME_PATTERNS) {
+    if (pattern.test(hostname)) return true;
+  }
+  return false;
+}
+function isKnownProductionHost(hostname) {
+  for (const suffix of PRODUCTION_HOST_SUFFIXES) {
+    if (hostname.endsWith(suffix)) return true;
+  }
+  return false;
+}
+function hasRealTLD(hostname) {
+  return /\.[a-z]{2,}$/i.test(hostname) && !isDevHostname(hostname);
+}
+function isProductionEnvironment() {
+  const _proc = typeof globalThis !== "undefined" ? globalThis.process : void 0;
+  if (_proc?.env) {
+    const nodeEnv = _proc.env.NODE_ENV;
+    if (nodeEnv === "production") return true;
+    if (nodeEnv === "development" || nodeEnv === "test") return false;
+  }
+  if (typeof window !== "undefined" && window.location) {
+    const { hostname, protocol, port } = window.location;
+    if (protocol === "file:") return false;
+    if (isDevHostname(hostname)) return false;
+    if (port && port !== "443" && port !== "80") return false;
+    if (isKnownProductionHost(hostname)) return true;
+    if (protocol === "https:" && hasRealTLD(hostname)) return true;
+    if (hasRealTLD(hostname)) return true;
+  }
+  return false;
+}
+var PING_URL = "https://squaredr.tech/api/license/ping";
+var CACHE_KEY = "fcpro_lp";
+var CACHE_TTL_MS = 24 * 60 * 60 * 1e3;
+function hashKey(key) {
+  let hash = 0;
+  for (let i = 0; i < key.length; i++) {
+    hash = (hash << 5) - hash + key.charCodeAt(i) | 0;
+  }
+  return Math.abs(hash).toString(36);
+}
+function cacheId(key) {
+  return `${CACHE_KEY}_${hashKey(key)}`;
+}
+function readCache(key) {
+  if (typeof window === "undefined" || !window.localStorage) return null;
+  try {
+    const raw = localStorage.getItem(cacheId(key));
+    if (!raw) return null;
+    const entry = JSON.parse(raw);
+    if (Date.now() - entry.ts > CACHE_TTL_MS) {
+      localStorage.removeItem(cacheId(key));
+      return null;
+    }
+    return entry;
+  } catch {
+    return null;
+  }
+}
+function writeCache(key, status, tier, reason = null) {
+  if (typeof window === "undefined" || !window.localStorage) return;
+  try {
+    const entry = { s: status, t: tier, r: reason, ts: Date.now() };
+    localStorage.setItem(cacheId(key), JSON.stringify(entry));
+  } catch {
+  }
+}
+function getCachedPingResult(key) {
+  const cached = readCache(key);
+  if (!cached) return null;
+  return { status: cached.s, tier: cached.t, reason: cached.r || void 0 };
+}
+async function performPing(key) {
+  const cached = readCache(key);
+  if (cached) {
+    return { status: cached.s, tier: cached.t };
+  }
+  try {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 1e4);
+    const res = await fetch(PING_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ key }),
+      signal: controller.signal
+    });
+    clearTimeout(timeout);
+    if (!res.ok) return null;
+    const data = await res.json();
+    const tier = data.tier || null;
+    if (data.status === "active") {
+      writeCache(key, "valid", tier);
+      return { status: "valid", tier };
+    }
+    if (data.status === "revoked") {
+      writeCache(key, "revoked", null, data.reason);
+      return { status: "revoked", tier: null, reason: data.reason };
+    }
+    if (data.status === "expired") {
+      writeCache(key, "expired", tier);
+      return { status: "expired", tier };
+    }
+    if (data.status === "domain_mismatch") {
+      writeCache(key, "domain_mismatch", null, data.reason);
+      return { status: "domain_mismatch", tier: null, reason: data.reason };
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+var defaultContext = { status: "validating", tier: null };
+var LicenseCtx = react.createContext(defaultContext);
+function FieldCraftProProvider({ licenseKey, children }) {
+  const [license, setLicense] = react.useState(defaultContext);
+  react.useEffect(() => {
+    let cancelled = false;
+    setLicense(defaultContext);
+    validateLicense(licenseKey).then((clientResult) => {
+      if (cancelled) return;
+      setLicense(clientResult);
+      if (clientResult.status !== "valid" || !isProductionEnvironment()) return;
+      const cached = getCachedPingResult(licenseKey);
+      if (cached) {
+        if (cached.status === "revoked" || cached.status === "domain_mismatch") {
+          setLicense({ status: cached.status, tier: null });
+        }
+        return;
+      }
+      performPing(licenseKey).then((pingResult) => {
+        if (cancelled) return;
+        if (!pingResult) return;
+        if (pingResult.status === "revoked" || pingResult.status === "domain_mismatch") {
+          setLicense({ status: pingResult.status, tier: null });
+        }
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [licenseKey]);
+  return /* @__PURE__ */ jsxRuntime.jsx(LicenseCtx.Provider, { value: license, children });
+}
+function useLicense() {
+  return react.useContext(LicenseCtx);
+}
+function UnlicensedOverlay({ featureName, reason, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", minHeight: "200px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { pointerEvents: "none", userSelect: "none", filter: "blur(2px)" }, children }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          zIndex: 2147483647,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "rgba(0, 0, 0, 0.75)",
+          backdropFilter: "blur(4px)",
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          padding: "32px"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                overflow: "hidden",
+                pointerEvents: "none",
+                zIndex: 0
+              },
+              children: Array.from({ length: 12 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: `${i * 80}px`,
+                    left: "-50%",
+                    right: "-50%",
+                    textAlign: "center",
+                    transform: "rotate(-30deg)",
+                    fontSize: "18px",
+                    fontWeight: 700,
+                    color: "rgba(255, 255, 255, 0.06)",
+                    letterSpacing: "8px",
+                    textTransform: "uppercase",
+                    whiteSpace: "nowrap",
+                    userSelect: "none"
+                  },
+                  children: "UNLICENSED \u2022 FIELDCRAFT PRO \u2022 UNLICENSED \u2022 FIELDCRAFT PRO \u2022 UNLICENSED \u2022 FIELDCRAFT PRO"
+                },
+                i
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                position: "relative",
+                zIndex: 1,
+                textAlign: "center",
+                maxWidth: "420px"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      width: "64px",
+                      height: "64px",
+                      margin: "0 auto 16px",
+                      borderRadius: "50%",
+                      backgroundColor: "rgba(239, 68, 68, 0.2)",
+                      border: "2px solid rgba(239, 68, 68, 0.5)",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontSize: "28px"
+                    },
+                    children: "\u{1F6E1}"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "22px",
+                      fontWeight: 700,
+                      color: "#ffffff",
+                      marginBottom: "8px",
+                      letterSpacing: "-0.02em"
+                    },
+                    children: "License Required"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "15px",
+                      fontWeight: 600,
+                      color: "#f87171",
+                      marginBottom: "6px"
+                    },
+                    children: featureName
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      color: "#d1d5db",
+                      marginBottom: "24px",
+                      lineHeight: "1.5"
+                    },
+                    children: reason
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "10px", justifyContent: "center", flexWrap: "wrap" }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "a",
+                    {
+                      href: "https://squaredr.tech/products/fieldcraft/admin-pro#pricing",
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      style: {
+                        display: "inline-block",
+                        padding: "12px 24px",
+                        fontSize: "14px",
+                        fontWeight: 600,
+                        color: "#ffffff",
+                        backgroundColor: "#2563eb",
+                        borderRadius: "8px",
+                        textDecoration: "none",
+                        boxShadow: "0 4px 14px rgba(37, 99, 235, 0.4)"
+                      },
+                      children: "Get a License"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "a",
+                    {
+                      href: "https://discord.gg/zMxdu5UVW",
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      style: {
+                        display: "inline-block",
+                        padding: "12px 24px",
+                        fontSize: "14px",
+                        fontWeight: 600,
+                        color: "#93c5fd",
+                        backgroundColor: "rgba(37, 99, 235, 0.15)",
+                        border: "1px solid rgba(37, 99, 235, 0.4)",
+                        borderRadius: "8px",
+                        textDecoration: "none"
+                      },
+                      children: "Join Discord"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      color: "#6b7280",
+                      marginTop: "16px"
+                    },
+                    children: [
+                      "This component works freely in development.",
+                      " ",
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "a",
+                        {
+                          href: "https://squaredr.tech/products/fieldcraft/docs/pro/license",
+                          target: "_blank",
+                          rel: "noopener noreferrer",
+                          style: { color: "#9ca3af", textDecoration: "underline" },
+                          children: "Learn more"
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function requireLicense(Component2, featureName) {
+  function LicenseGated(props) {
+    const { status, tier } = useLicense();
+    const isProduction = isProductionEnvironment();
+    if (!isProduction) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Component2, { ...props });
+    }
+    if (status === "validating") {
+      return null;
+    }
+    const isLicensed = status === "valid" && tier != null && tierHasFeature(tier, featureName);
+    if (isLicensed) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Component2, { ...props });
+    }
+    let reason = "A valid license is required for production use.";
+    if (status === "invalid") {
+      reason = "Invalid license key. Please check your license key and try again.";
+    } else if (status === "expired") {
+      reason = "Your license has expired. Please renew to continue using this component in production.";
+    } else if (status === "revoked") {
+      reason = "This license key has been revoked. Please contact support or purchase a new license.";
+    } else if (status === "domain_mismatch") {
+      reason = "This license key is registered to a different domain. Each key can only be used on one production domain. Please purchase a new license for this domain.";
+    } else if (!tier || !tierHasFeature(tier, featureName)) {
+      reason = "Your license does not include this feature. Please upgrade your plan.";
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(UnlicensedOverlay, { featureName, reason, children: /* @__PURE__ */ jsxRuntime.jsx(Component2, { ...props }) });
+  }
+  LicenseGated.displayName = `requireLicense(${Component2.displayName || Component2.name || "Component"})`;
+  return LicenseGated;
+}
 var MAX_HISTORY = 50;
 function useUndoRedo(currentSchema, setSchema) {
   const historyRef = react.useRef([currentSchema]);
@@ -80,6 +656,39 @@ function generateOptionId() {
 function deepClone(obj) {
   return structuredClone(obj);
 }
+function cleanCondition(expr, deletedFieldId) {
+  if (expr.field === deletedFieldId) return void 0;
+  if (expr.field && expr.field !== deletedFieldId) return expr;
+  if (expr.conditions) {
+    const cleaned = expr.conditions.map((c) => cleanCondition(c, deletedFieldId)).filter((c) => c !== void 0);
+    if (cleaned.length === 0) return void 0;
+    if (cleaned.length === 1) return cleaned[0];
+    return { ...expr, conditions: cleaned };
+  }
+  return expr;
+}
+function cleanupOrphanConditions(schema, deletedFieldId) {
+  for (const section of schema.sections) {
+    if (section.showIf) {
+      const cleaned = cleanCondition(section.showIf, deletedFieldId);
+      if (cleaned) {
+        section.showIf = cleaned;
+      } else {
+        delete section.showIf;
+      }
+    }
+    for (const question of section.questions) {
+      if (question.showIf) {
+        const cleaned = cleanCondition(question.showIf, deletedFieldId);
+        if (cleaned) {
+          question.showIf = cleaned;
+        } else {
+          delete question.showIf;
+        }
+      }
+    }
+  }
+}
 function addSection(schema, section, index) {
   const newSchema = deepClone(schema);
   newSchema.sections.splice(index, 0, section);
@@ -87,7 +696,12 @@ function addSection(schema, section, index) {
 }
 function removeSection(schema, sectionId) {
   const newSchema = deepClone(schema);
+  const removedSection = newSchema.sections.find((s) => s.id === sectionId);
+  const removedFieldIds = removedSection ? removedSection.questions.map((q) => q.id) : [];
   newSchema.sections = newSchema.sections.filter((s) => s.id !== sectionId);
+  for (const fieldId of removedFieldIds) {
+    cleanupOrphanConditions(newSchema, fieldId);
+  }
   return newSchema;
 }
 function updateSection(schema, sectionId, updates) {
@@ -137,6 +751,7 @@ function removeQuestion(schema, sectionId, questionId) {
   const section = newSchema.sections.find((s) => s.id === sectionId);
   if (!section) return schema;
   section.questions = section.questions.filter((q) => q.id !== questionId);
+  cleanupOrphanConditions(newSchema, questionId);
   return newSchema;
 }
 function updateQuestion(schema, sectionId, questionId, updates) {
@@ -975,11 +1590,13 @@ function QuestionPalette({ questionTypes, palette }) {
       const isCollapsed = collapsed[category.category] && !search;
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+          fieldcraftReact.Button,
           {
             type: "button",
+            variant: "ghost",
+            size: "xs",
             onClick: () => toggleCategory(category.category),
-            className: "flex items-center gap-1.5 w-full px-1 py-1 text-left text-[11px] font-semibold uppercase tracking-widest text-muted-foreground bg-transparent border-0 cursor-pointer",
+            className: "w-full justify-start px-1 text-[11px] font-semibold uppercase tracking-widest text-muted-foreground",
             "aria-expanded": !isCollapsed,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -1343,11 +1960,12 @@ function FormCanvas({ builderState }) {
         section.id
       )),
       /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+        fieldcraftReact.Button,
         {
           type: "button",
+          variant: "outline",
           onClick: handleAddSection,
-          className: "w-full py-4 text-sm font-medium rounded-lg border border-dashed border-fcb-border-strong text-muted-foreground bg-transparent flex items-center justify-center gap-2 cursor-pointer transition-colors hover:border-primary hover:text-primary hover:bg-primary/5",
+          className: "w-full py-4 h-auto text-sm font-medium border-dashed border-fcb-border-strong text-muted-foreground hover:border-primary hover:text-primary hover:bg-primary/5",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 14, strokeWidth: 2 }),
             "Add Section"
@@ -1357,6 +1975,26 @@ function FormCanvas({ builderState }) {
     ] })
   ] }) });
 }
+var NativeSelect = react.forwardRef(
+  ({ className, wrapperClassName, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", wrapperClassName), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "select",
+        {
+          ref,
+          className: cn(
+            "flex h-9 w-full appearance-none rounded-md border border-input bg-card px-3 py-1 pr-8 text-sm shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring text-foreground cursor-pointer",
+            className
+          ),
+          ...props,
+          children
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" })
+    ] });
+  }
+);
+NativeSelect.displayName = "NativeSelect";
 function useConfigUpdater(question, onUpdate) {
   return (field, value) => {
     const current = question.config ?? {};
@@ -1751,18 +2389,7 @@ function SelectField({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Label, { className: "text-xs text-muted-foreground mb-1", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "select",
-        {
-          value,
-          onChange: (e) => onChange(e.target.value),
-          className: "flex h-9 w-full appearance-none rounded-md border border-input bg-card px-3 py-1 pr-8 text-sm shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring text-foreground cursor-pointer",
-          children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" }) })
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsx(NativeSelect, { value, onChange: (e) => onChange(e.target.value), children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value)) })
   ] });
 }
 function LikertLabelsEditor({
@@ -1783,15 +2410,7 @@ function LikertLabelsEditor({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Label, { className: "text-xs text-muted-foreground", children: "Scale Labels" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleAdd,
-          className: "text-xs text-primary hover:underline",
-          children: "+ Add"
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { type: "button", variant: "link", size: "xs", onClick: handleAdd, className: "px-0", children: "+ Add" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5", children: labels.map((label, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 group", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground w-4 text-right shrink-0", children: index + 1 }),
@@ -1804,11 +2423,13 @@ function LikertLabelsEditor({
         }
       ),
       labels.length > 2 && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+        fieldcraftReact.Button,
         {
           type: "button",
+          variant: "ghost",
+          size: "icon-xs",
           onClick: () => handleRemove(index),
-          className: "text-xs text-destructive opacity-0 group-hover:opacity-100 transition-opacity px-1",
+          className: "text-destructive opacity-0 group-hover:opacity-100 transition-opacity",
           children: "x"
         }
       )
@@ -1837,15 +2458,7 @@ function MatrixItemsEditor({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Label, { className: "text-xs text-muted-foreground", children: label }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleAdd,
-          className: "text-xs text-primary hover:underline",
-          children: "+ Add"
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { type: "button", variant: "link", size: "xs", onClick: handleAdd, className: "px-0", children: "+ Add" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5", children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 group", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1857,11 +2470,13 @@ function MatrixItemsEditor({
         }
       ),
       items.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+        fieldcraftReact.Button,
         {
           type: "button",
+          variant: "ghost",
+          size: "icon-xs",
           onClick: () => handleRemove(index),
-          className: "text-xs text-destructive opacity-0 group-hover:opacity-100 transition-opacity px-1",
+          className: "text-destructive opacity-0 group-hover:opacity-100 transition-opacity",
           children: "x"
         }
       )
@@ -1894,7 +2509,7 @@ function ScoringOptionsEditor({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Label, { className: "text-xs text-muted-foreground", children: "Score Options" }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleAdd, className: "text-xs text-primary hover:underline", children: "+ Add" })
+      /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { type: "button", variant: "link", size: "xs", onClick: handleAdd, className: "px-0", children: "+ Add" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5", children: options.map((opt, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 group", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1916,7 +2531,7 @@ function ScoringOptionsEditor({
           placeholder: "Score"
         }
       ),
-      options.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => handleRemove(index), className: "text-xs text-destructive opacity-0 group-hover:opacity-100 transition-opacity px-1", children: "x" })
+      options.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { type: "button", variant: "ghost", size: "icon-xs", onClick: () => handleRemove(index), className: "text-destructive opacity-0 group-hover:opacity-100 transition-opacity", children: "x" })
     ] }, index)) })
   ] });
 }
@@ -1938,7 +2553,7 @@ function ScoreRangesEditor({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Label, { className: "text-xs text-muted-foreground", children: "Score Ranges" }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleAdd, className: "text-xs text-primary hover:underline", children: "+ Add" })
+      /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { type: "button", variant: "link", size: "xs", onClick: handleAdd, className: "px-0", children: "+ Add" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: ranges.map((range, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 rounded-md border border-border space-y-1.5 group", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
@@ -1946,7 +2561,7 @@ function ScoreRangesEditor({
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "to" }),
         /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Input, { type: "number", value: range.max, onChange: (e) => handleUpdate(index, { max: Number(e.target.value) }), className: "h-7 text-xs w-16", placeholder: "Max" }),
         /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Input, { value: range.label, onChange: (e) => handleUpdate(index, { label: e.target.value }), className: "h-7 text-xs flex-1", placeholder: "Label" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => handleRemove(index), className: "text-xs text-destructive opacity-0 group-hover:opacity-100 transition-opacity px-1", children: "x" })
+        /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { type: "button", variant: "ghost", size: "icon-xs", onClick: () => handleRemove(index), className: "text-destructive opacity-0 group-hover:opacity-100 transition-opacity", children: "x" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Input, { value: range.description ?? "", onChange: (e) => handleUpdate(index, { description: e.target.value || void 0 }), className: "h-7 text-xs", placeholder: "Description (optional)" })
     ] }, index)) })
@@ -1996,26 +2611,20 @@ function ValidationRulesEditor({ question, onUpdate }) {
       },
       `${rule.type}-${index}`
     )) }),
-    availableTypes.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "select",
-        {
-          value: "",
-          onChange: (e) => {
-            if (e.target.value) addRule(e.target.value);
-          },
-          className: "flex h-8 w-full appearance-none rounded-md border border-input bg-card px-3 py-1 pr-8 text-xs shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring text-muted-foreground cursor-pointer",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("option", { value: "", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 12 }),
-              " Add validation rule..."
-            ] }),
-            availableTypes.map((t) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: t.value, children: t.label }, t.value))
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" }) })
-    ] }) })
+    availableTypes.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      NativeSelect,
+      {
+        value: "",
+        onChange: (e) => {
+          if (e.target.value) addRule(e.target.value);
+        },
+        className: "h-8 text-xs text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Add validation rule..." }),
+          availableTypes.map((t) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: t.value, children: t.label }, t.value))
+        ]
+      }
+    ) })
   ] });
 }
 function RuleRow({
@@ -2029,13 +2638,15 @@ function RuleRow({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-foreground", children: label }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+        fieldcraftReact.Button,
         {
           type: "button",
+          variant: "ghost",
+          size: "icon-xs",
           onClick: onRemove,
-          className: "opacity-0 group-hover:opacity-100 transition-opacity",
+          className: "opacity-0 group-hover:opacity-100 transition-opacity hover:bg-destructive/10 hover:text-destructive",
           title: "Remove rule",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: 12, className: "text-destructive", strokeWidth: 1.75 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: 12, strokeWidth: 1.75 })
         }
       )
     ] }),
@@ -2270,11 +2881,13 @@ function ConditionEditor({ question, schema, onUpdate }) {
     !hasConditions && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mb-3", children: "Always visible. Add a rule to show this field conditionally." }),
     hasConditions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 mb-3", children: showIf.conditions.map((cond, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       index > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+        fieldcraftReact.Button,
         {
           type: "button",
+          variant: "link",
+          size: "xs",
           onClick: toggleCombine,
-          className: "text-[10px] font-semibold uppercase tracking-wider text-primary mb-1.5 block cursor-pointer hover:underline",
+          className: "text-[10px] font-semibold uppercase tracking-wider px-0 mb-1.5",
           children: showIf.combine ?? "AND"
         }
       ),
@@ -2282,43 +2895,39 @@ function ConditionEditor({ question, schema, onUpdate }) {
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground uppercase tracking-wider", children: "When" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+            fieldcraftReact.Button,
             {
               type: "button",
+              variant: "ghost",
+              size: "icon-xs",
               onClick: () => removeCondition(index),
-              className: "opacity-0 group-hover:opacity-100 transition-opacity",
+              className: "opacity-0 group-hover:opacity-100 transition-opacity hover:bg-destructive/10 hover:text-destructive",
               title: "Remove condition",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: 12, className: "text-destructive", strokeWidth: 1.75 })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: 12, strokeWidth: 1.75 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "select",
-            {
-              value: cond.field ?? "",
-              onChange: (e) => updateCondition(index, { field: e.target.value }),
-              className: "flex h-7 w-full appearance-none rounded-md border border-input bg-card px-2 py-1 pr-7 text-xs shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring text-foreground cursor-pointer",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select field..." }),
-                fieldOptions.map((f) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: f.id, children: f.label }, f.id))
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 size-3 text-muted-foreground", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "select",
-            {
-              value: cond.operator ?? "eq",
-              onChange: (e) => updateCondition(index, { operator: e.target.value }),
-              className: "flex h-7 w-full appearance-none rounded-md border border-input bg-card px-2 py-1 pr-7 text-xs shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring text-foreground cursor-pointer",
-              children: OPERATORS.map((op) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: op.value, children: op.label }, op.value))
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 size-3 text-muted-foreground", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" }) })
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          NativeSelect,
+          {
+            value: cond.field ?? "",
+            onChange: (e) => updateCondition(index, { field: e.target.value }),
+            className: "h-7 text-xs",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select field..." }),
+              fieldOptions.map((f) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: f.id, children: f.label }, f.id))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          NativeSelect,
+          {
+            value: cond.operator ?? "eq",
+            onChange: (e) => updateCondition(index, { operator: e.target.value }),
+            className: "h-7 text-xs",
+            children: OPERATORS.map((op) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: op.value, children: op.label }, op.value))
+          }
+        ),
         cond.operator !== "exists" && cond.operator !== "notExists" && /* @__PURE__ */ jsxRuntime.jsx(
           fieldcraftReact.Input,
           {
@@ -2331,11 +2940,13 @@ function ConditionEditor({ question, schema, onUpdate }) {
       ] })
     ] }, index)) }),
     fieldOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
+      fieldcraftReact.Button,
       {
         type: "button",
+        variant: "link",
+        size: "xs",
         onClick: addCondition,
-        className: "flex items-center gap-1.5 text-xs text-primary hover:underline",
+        className: "px-0 gap-1.5",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 12, strokeWidth: 2 }),
           "Add condition"
@@ -2497,18 +3108,7 @@ function SettingsSelect({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Label, { className: "text-xs text-muted-foreground mb-1", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "select",
-        {
-          value,
-          onChange: (e) => onChange(e.target.value),
-          className: "flex h-9 w-full appearance-none rounded-md border border-input bg-card px-3 py-1 pr-8 text-sm shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring text-foreground cursor-pointer",
-          children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" }) })
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsx(NativeSelect, { value, onChange: (e) => onChange(e.target.value), children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value)) })
   ] });
 }
 function PropertiesPanel({ builderState }) {
@@ -2610,13 +3210,14 @@ function QuestionProperties({ question, sectionId, builderState, onClose, onOpen
       typeInfo?.label
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 px-4 pt-3 flex gap-0.5", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
+      fieldcraftReact.Button,
       {
         type: "button",
+        variant: activeTab === tab.key ? "default" : "ghost",
+        size: "xs",
         onClick: () => setActiveTab(tab.key),
         className: cn(
-          "px-3 py-1.5 text-xs font-medium rounded-md border-0 cursor-pointer transition-colors",
-          activeTab === tab.key ? "bg-primary text-primary-foreground" : "bg-transparent text-muted-foreground hover:bg-accent hover:text-foreground"
+          activeTab !== tab.key && "text-muted-foreground"
         ),
         children: tab.label
       },
@@ -2875,13 +3476,18 @@ function FormBuilderCore(props) {
       reader.onload = (event) => {
         try {
           const parsed = JSON.parse(event.target?.result);
-          if (parsed && parsed.sections && Array.isArray(parsed.sections)) {
-            builderState.resetSchema(parsed);
+          const validated = fieldcraftCore.validateSchema(parsed);
+          builderState.resetSchema(validated);
+        } catch (err) {
+          if (err instanceof fieldcraftCore.FormEngineSchemaError) {
+            const details = err.issues.slice(0, 3).map((i) => `\u2022 ${i.path.join(".")}: ${i.message}`).join("\n");
+            alert(`Invalid schema:
+${details}`);
+          } else if (err instanceof SyntaxError) {
+            alert("Failed to parse JSON file.");
           } else {
-            alert("Invalid schema: must contain a 'sections' array.");
+            alert("Invalid schema file.");
           }
-        } catch {
-          alert("Failed to parse JSON file.");
         }
       };
       reader.readAsText(file);
@@ -3091,7 +3697,7 @@ function FormBuilderInner(props) {
 }
 
 // src/form-builder/components/FormBuilderGated.tsx
-var FormBuilder = fieldcraftProLicense.requireLicense(FormBuilderInner, "FormBuilder");
+var FormBuilder = requireLicense(FormBuilderInner, "FormBuilder");
 
 // src/form-builder/theme/presets.ts
 var squaredrDarkPreset = {
@@ -3166,74 +3772,190 @@ var cleanPreset = {
   borderStrong: "#d1d5db",
   textDim: "#9ca3af"
 };
-function ResponseTable({ schema, responses, onRowClick }) {
-  const questions = getAllQuestions(schema);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "auto", fontFamily: "inherit" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "table",
-    {
-      style: {
-        width: "100%",
-        borderCollapse: "collapse",
-        fontSize: "13px"
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { backgroundColor: "var(--muted, #111113)" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("th", { style: thStyle, children: "Submitted" }),
-          questions.map((q) => /* @__PURE__ */ jsxRuntime.jsx("th", { style: thStyle, children: q.label }, q.id)),
-          /* @__PURE__ */ jsxRuntime.jsx("th", { style: thStyle, children: "Score" })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
-          responses.map((response, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "tr",
-            {
-              onClick: () => onRowClick?.(response),
-              style: {
-                cursor: onRowClick ? "pointer" : "default",
-                borderBottom: "1px solid var(--border, #1c1c20)"
-              },
-              onMouseEnter: (e) => {
-                if (onRowClick) e.currentTarget.style.backgroundColor = "var(--accent, #17171a)";
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.backgroundColor = "transparent";
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("td", { style: tdStyle, children: new Date(response.submittedAt).toLocaleString() }),
-                questions.map((q) => /* @__PURE__ */ jsxRuntime.jsx("td", { style: tdStyle, children: formatCellValue(response.values[q.id]) }, q.id)),
-                /* @__PURE__ */ jsxRuntime.jsx("td", { style: tdStyle, children: response.totalScore ?? "\u2014" })
-              ]
-            },
-            response.sessionToken || idx
-          )),
-          responses.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            "td",
-            {
-              colSpan: questions.length + 2,
-              style: { ...tdStyle, textAlign: "center", color: "var(--muted-foreground, #8a8a95)", padding: "32px" },
-              children: "No responses yet"
-            }
-          ) })
-        ] })
-      ]
-    }
-  ) });
+
+// src/response-viewer/clinical-display-data.ts
+var BODY_REGION_LABELS = {
+  head: "Head",
+  neck: "Neck",
+  "left-shoulder": "Left Shoulder",
+  "right-shoulder": "Right Shoulder",
+  chest: "Chest",
+  abdomen: "Abdomen",
+  "left-upper-arm": "Left Upper Arm",
+  "right-upper-arm": "Right Upper Arm",
+  "left-forearm": "Left Forearm",
+  "right-forearm": "Right Forearm",
+  "left-hand": "Left Hand",
+  "right-hand": "Right Hand",
+  pelvis: "Pelvis",
+  "left-thigh": "Left Thigh",
+  "right-thigh": "Right Thigh",
+  "left-knee": "Left Knee",
+  "right-knee": "Right Knee",
+  "left-shin": "Left Shin",
+  "right-shin": "Right Shin",
+  "left-foot": "Left Foot",
+  "right-foot": "Right Foot"
+};
+var PAIN_FACE_LABELS = [
+  { score: 0, label: "No Hurt", color: "#22c55e" },
+  { score: 2, label: "Hurts Little Bit", color: "#84cc16" },
+  { score: 4, label: "Hurts Little More", color: "#eab308" },
+  { score: 6, label: "Hurts Even More", color: "#f97316" },
+  { score: 8, label: "Hurts Whole Lot", color: "#ef4444" },
+  { score: 10, label: "Hurts Worst", color: "#dc2626" }
+];
+function getPainLabel(score) {
+  const face = PAIN_FACE_LABELS.reduce(
+    (closest, f) => closest == null || Math.abs(f.score - score) < Math.abs(closest.score - score) ? f : closest,
+    void 0
+  );
+  return face;
+}
+var SEVERITY_COLORS = {
+  mild: "#eab308",
+  moderate: "#f97316",
+  severe: "#ef4444",
+  "life-threatening": "#991b1b"
+};
+var BMI_CATEGORIES = [
+  { label: "Underweight", max: 18.5, color: "#3b82f6" },
+  { label: "Normal", max: 25, color: "#22c55e" },
+  { label: "Overweight", max: 30, color: "#eab308" },
+  { label: "Obese", max: Infinity, color: "#ef4444" }
+];
+function getBmiCategory(bmi) {
+  return BMI_CATEGORIES.find((c) => bmi < c.max) ?? BMI_CATEGORIES[BMI_CATEGORIES.length - 1];
 }
-var thStyle = {
-  padding: "8px 12px",
-  textAlign: "left",
-  fontWeight: 600,
-  color: "var(--foreground, #e8e8ea)",
-  borderBottom: "2px solid var(--border, #1c1c20)",
-  whiteSpace: "nowrap"
+var INSTRUMENT_DISPLAY_NAMES = {
+  phq9: "PHQ-9",
+  phq2: "PHQ-2",
+  gad7: "GAD-7",
+  gad2: "GAD-2",
+  "audit-c": "AUDIT-C",
+  dast10: "DAST-10",
+  cssrs: "C-SSRS",
+  epds: "EPDS",
+  isi: "ISI",
+  pcl5: "PCL-5",
+  psc17: "PSC-17"
 };
-var tdStyle = {
-  padding: "8px 12px",
-  color: "var(--foreground, #e8e8ea)",
-  maxWidth: "200px",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
+var SCORE_THRESHOLDS = {
+  phq9: [
+    { min: 0, max: 4, label: "Minimal", color: "#22c55e" },
+    { min: 5, max: 9, label: "Mild", color: "#eab308" },
+    { min: 10, max: 14, label: "Moderate", color: "#f97316" },
+    { min: 15, max: 19, label: "Moderately Severe", color: "#ef4444" },
+    { min: 20, max: 27, label: "Severe", color: "#dc2626" }
+  ],
+  phq2: [
+    { min: 0, max: 2, label: "Negative Screen", color: "#22c55e" },
+    { min: 3, max: 6, label: "Positive Screen", color: "#ef4444" }
+  ],
+  gad7: [
+    { min: 0, max: 4, label: "Minimal", color: "#22c55e" },
+    { min: 5, max: 9, label: "Mild", color: "#eab308" },
+    { min: 10, max: 14, label: "Moderate", color: "#f97316" },
+    { min: 15, max: 21, label: "Severe", color: "#ef4444" }
+  ],
+  gad2: [
+    { min: 0, max: 2, label: "Negative Screen", color: "#22c55e" },
+    { min: 3, max: 6, label: "Positive Screen", color: "#ef4444" }
+  ],
+  "audit-c": [
+    { min: 0, max: 3, label: "Low Risk", color: "#22c55e" },
+    { min: 4, max: 7, label: "At Risk", color: "#eab308" },
+    { min: 8, max: 12, label: "High Risk", color: "#ef4444" }
+  ],
+  dast10: [
+    { min: 0, max: 0, label: "No Problems", color: "#22c55e" },
+    { min: 1, max: 2, label: "Low Level", color: "#eab308" },
+    { min: 3, max: 5, label: "Moderate Level", color: "#f97316" },
+    { min: 6, max: 8, label: "Substantial Level", color: "#ef4444" },
+    { min: 9, max: 10, label: "Severe Level", color: "#dc2626" }
+  ],
+  cssrs: [
+    { min: 0, max: 0, label: "No Risk Identified", color: "#22c55e" },
+    { min: 1, max: 1, label: "Wish to be Dead", color: "#eab308" },
+    { min: 2, max: 2, label: "Non-specific Active Suicidal Thoughts", color: "#f97316" },
+    { min: 3, max: 3, label: "Active Suicidal Ideation", color: "#ef4444" },
+    { min: 4, max: 4, label: "Active Ideation with Intent", color: "#dc2626" },
+    { min: 5, max: 5, label: "Active Ideation with Plan", color: "#991b1b" },
+    { min: 6, max: 6, label: "Imminent Risk", color: "#7f1d1d" }
+  ],
+  epds: [
+    { min: 0, max: 8, label: "Low Likelihood", color: "#22c55e" },
+    { min: 9, max: 11, label: "Possible Depression", color: "#eab308" },
+    { min: 12, max: 13, label: "Fairly High Possibility", color: "#f97316" },
+    { min: 14, max: 30, label: "Probable Depression", color: "#ef4444" }
+  ],
+  isi: [
+    { min: 0, max: 7, label: "No Clinically Significant Insomnia", color: "#22c55e" },
+    { min: 8, max: 14, label: "Subthreshold Insomnia", color: "#eab308" },
+    { min: 15, max: 21, label: "Clinical Insomnia (Moderate)", color: "#f97316" },
+    { min: 22, max: 28, label: "Clinical Insomnia (Severe)", color: "#ef4444" }
+  ],
+  pcl5: [
+    { min: 0, max: 30, label: "Below Threshold", color: "#22c55e" },
+    { min: 31, max: 80, label: "Probable PTSD", color: "#ef4444" }
+  ],
+  psc17: [
+    { min: 0, max: 14, label: "No Significant Concerns", color: "#22c55e" },
+    { min: 15, max: 34, label: "Significant Concerns", color: "#ef4444" }
+  ]
 };
+function getScoreSeverity(instrumentKey, score) {
+  const thresholds = SCORE_THRESHOLDS[instrumentKey];
+  if (!thresholds) return void 0;
+  return thresholds.find((t) => score >= t.min && score <= t.max);
+}
+function ResponseTable({ schema, responses, onRowClick }) {
+  const questions = getAllQuestions(schema);
+  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: [
+      /* @__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",
+        {
+          className: "px-3 py-2 text-left font-semibold text-foreground border-b-2 border-border whitespace-nowrap",
+          children: q.label
+        },
+        q.id
+      )),
+      /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left font-semibold text-foreground border-b-2 border-border whitespace-nowrap", children: "Score" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
+      responses.map((response, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "tr",
+        {
+          onClick: () => onRowClick?.(response),
+          className: onRowClick ? "cursor-pointer border-b border-border hover:bg-accent transition-colors" : "border-b border-border",
+          children: [
+            /* @__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",
+              {
+                className: "px-3 py-2 text-foreground max-w-50 overflow-hidden text-ellipsis whitespace-nowrap",
+                children: formatCellValue(response.values[q.id], q.type)
+              },
+              q.id
+            )),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-foreground max-w-50 overflow-hidden text-ellipsis whitespace-nowrap", children: response.totalScore ?? "\u2014" })
+          ]
+        },
+        response.sessionToken || idx
+      )),
+      responses.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        "td",
+        {
+          colSpan: questions.length + 2,
+          className: "px-3 py-8 text-center text-muted-foreground",
+          children: "No responses yet"
+        }
+      ) })
+    ] })
+  ] }) });
+}
 function getAllQuestions(schema) {
   const questions = [];
   for (const section of schema.sections) {
@@ -3246,8 +3968,69 @@ function getAllQuestions(schema) {
   }
   return questions;
 }
-function formatCellValue(value) {
+function formatCellValue(value, type) {
   if (value == null) return "\u2014";
+  if (type) {
+    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}\xB0F`);
+        if (v.oxygenSaturation) parts.push(`SpO\u2082 ${v.oxygenSaturation}%`);
+        return parts.length > 0 ? parts.join(", ") : "\u2014";
+      }
+      case "medication_list":
+        if (Array.isArray(value)) return `${value.length} medication${value.length !== 1 ? "s" : ""}`;
+        break;
+      case "allergy_list":
+        if (Array.isArray(value)) return `${value.length} allerg${value.length !== 1 ? "ies" : "y"}`;
+        break;
+      case "body_diagram":
+        if (Array.isArray(value)) {
+          const labels = value.map((id) => BODY_REGION_LABELS[id] ?? id);
+          return labels.join(", ");
+        }
+        break;
+      case "pain_scale":
+        if (typeof value === "number") return `${value}/10`;
+        break;
+      case "bmi_calculator": {
+        if (typeof value !== "object" || value === null) break;
+        const d = value;
+        if (d.bmi != null) return `BMI ${d.bmi}`;
+        break;
+      }
+      case "payment": {
+        if (typeof value !== "object" || value === null) break;
+        const p = value;
+        const status = p.status;
+        return status ? status.charAt(0).toUpperCase() + status.slice(1) : "\u2014";
+      }
+      case "insurance_card": {
+        if (typeof value !== "object" || value === null) break;
+        const ins = value;
+        const parts = [ins.carrierId, ins.planName].filter(Boolean);
+        return parts.length > 0 ? parts.join(" \u2014 ") : "Card uploaded";
+      }
+      case "legal_name": {
+        if (typeof value !== "object" || value === null) break;
+        const n = value;
+        return [n.first, n.last].filter(Boolean).join(" ") || "\u2014";
+      }
+      case "address": {
+        if (typeof value !== "object" || value === null) break;
+        const a = value;
+        return [a.city, a.state].filter(Boolean).join(", ") || "\u2014";
+      }
+      case "consent":
+        return value === true || value === "true" || value === "agreed" ? "Agreed" : "Not agreed";
+      case "signature":
+        return typeof value === "string" && value.startsWith("data:image") ? "Signed" : "\u2014";
+    }
+  }
   if (typeof value === "boolean") return value ? "Yes" : "No";
   if (Array.isArray(value)) return value.join(", ");
   if (typeof value === "object") return JSON.stringify(value);
@@ -3258,238 +4041,570 @@ function ResponseCard({ response, fields, onClick }) {
     "div",
     {
       onClick,
-      style: {
-        border: "1px solid var(--border, #1c1c20)",
-        borderRadius: "8px",
-        padding: "16px",
-        backgroundColor: "var(--card, #111113)",
-        cursor: onClick ? "pointer" : "default",
-        fontFamily: "inherit",
-        transition: "box-shadow 0.15s"
-      },
-      onMouseEnter: (e) => {
-        if (onClick) e.currentTarget.style.boxShadow = "0 2px 8px rgba(0,0,0,0.3)";
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.boxShadow = "none";
-      },
+      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",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              justifyContent: "space-between",
-              marginBottom: "12px",
-              fontSize: "12px",
-              color: "var(--muted-foreground, #8a8a95)"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: new Date(response.submittedAt).toLocaleString() }),
-              response.completionTimeMs != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                Math.round(response.completionTimeMs / 1e3),
-                "s"
-              ] })
-            ]
-          }
-        ),
-        fields.slice(0, 4).map((field) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "8px" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "11px", color: "var(--muted-foreground, #8a8a95)", marginBottom: "2px" }, children: field.label }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "13px", color: "var(--foreground, #e8e8ea)" }, children: formatValue(field.value) })
+        /* @__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() }),
+          response.completionTimeMs != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            Math.round(response.completionTimeMs / 1e3),
+            "s"
+          ] })
+        ] }),
+        fields.slice(0, 4).map((field) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[11px] text-muted-foreground mb-0.5", children: field.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[13px] text-foreground", children: formatCardValue(field.value, field.type) })
         ] }, field.questionId)),
-        fields.length > 4 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "12px", color: "var(--muted-foreground, #8a8a95)", marginTop: "8px" }, children: [
+        fields.length > 4 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground mt-2", children: [
           "+",
           fields.length - 4,
           " more fields"
         ] }),
-        response.totalScore != null && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              marginTop: "12px",
-              paddingTop: "8px",
-              borderTop: "1px solid var(--border, #1c1c20)",
-              fontSize: "13px",
-              fontWeight: 600,
-              color: "var(--foreground, #e8e8ea)"
-            },
-            children: [
-              "Score: ",
-              response.totalScore
-            ]
-          }
-        )
+        response.totalScore != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 pt-2 border-t border-border text-[13px] font-semibold text-foreground", children: [
+          "Score: ",
+          response.totalScore
+        ] })
       ]
     }
   );
 }
-function formatValue(value) {
+function formatCardValue(value, type) {
   if (value == null) return "\u2014";
+  if (type) {
+    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}\xB0F`);
+        if (v.oxygenSaturation) parts.push(`SpO\u2082 ${v.oxygenSaturation}%`);
+        return parts.length > 0 ? parts.join(", ") : "\u2014";
+      }
+      case "medication_list":
+        if (Array.isArray(value)) return `${value.length} medication${value.length !== 1 ? "s" : ""}`;
+        break;
+      case "allergy_list":
+        if (Array.isArray(value)) return `${value.length} allerg${value.length !== 1 ? "ies" : "y"}`;
+        break;
+      case "body_diagram":
+        if (Array.isArray(value)) {
+          const labels = value.map((id) => BODY_REGION_LABELS[id] ?? id);
+          return labels.join(", ");
+        }
+        break;
+      case "pain_scale":
+        if (typeof value === "number") return `${value}/10`;
+        break;
+      case "bmi_calculator": {
+        if (typeof value !== "object" || value === null) break;
+        const d = value;
+        if (d.bmi != null) return `BMI ${d.bmi}`;
+        break;
+      }
+      case "payment": {
+        if (typeof value !== "object" || value === null) break;
+        const p = value;
+        const status = p.status;
+        return status ? status.charAt(0).toUpperCase() + status.slice(1) : "\u2014";
+      }
+      case "insurance_card": {
+        if (typeof value !== "object" || value === null) break;
+        const ins = value;
+        const parts = [ins.carrierId, ins.planName].filter(Boolean);
+        return parts.length > 0 ? parts.join(" \u2014 ") : "Card uploaded";
+      }
+      case "legal_name": {
+        if (typeof value !== "object" || value === null) break;
+        const n = value;
+        return [n.first, n.last].filter(Boolean).join(" ") || "\u2014";
+      }
+      case "address": {
+        if (typeof value !== "object" || value === null) break;
+        const a = value;
+        return [a.city, a.state].filter(Boolean).join(", ") || "\u2014";
+      }
+      case "consent":
+        return value === true || value === "true" || value === "agreed" ? "Agreed" : "Not agreed";
+      case "signature":
+        return typeof value === "string" && value.startsWith("data:image") ? "Signed" : "\u2014";
+    }
+  }
   if (typeof value === "boolean") return value ? "Yes" : "No";
-  if (Array.isArray(value)) return value.map(formatValue).join(", ");
+  if (Array.isArray(value)) return value.map(String).join(", ");
   if (typeof value === "object") return JSON.stringify(value);
   return String(value);
 }
 function ResponseDetail({ response, fields, onBack }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontFamily: "inherit" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: "12px",
-          marginBottom: "20px",
-          paddingBottom: "12px",
-          borderBottom: "1px solid var(--border, #1c1c20)"
-        },
-        children: [
-          onBack && /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: onBack,
-              style: {
-                padding: "4px 10px",
-                fontSize: "13px",
-                color: "var(--secondary-foreground, #e8e8ea)",
-                backgroundColor: "var(--secondary, #17171a)",
-                border: "1px solid var(--border, #1c1c20)",
-                borderRadius: "6px",
-                cursor: "pointer"
-              },
-              children: "Back"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "14px", fontWeight: 600, color: "var(--foreground, #e8e8ea)" }, children: "Response Detail" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "12px", color: "var(--muted-foreground, #8a8a95)" }, children: [
-              "Submitted ",
-              new Date(response.submittedAt).toLocaleString(),
-              response.completionTimeMs != null && ` \u2014 ${Math.round(response.completionTimeMs / 1e3)}s`
-            ] })
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: fields.map((field) => /* @__PURE__ */ jsxRuntime.jsxs(
+  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.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`
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: fields.map((field) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        style: {
-          padding: "12px",
-          backgroundColor: "var(--muted, #111113)",
-          borderRadius: "6px"
-        },
+        className: "p-3 bg-muted rounded-md",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "12px", color: "var(--muted-foreground, #8a8a95)", marginBottom: "4px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground mb-1", children: [
             field.label,
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { marginLeft: "8px", fontSize: "11px", color: "var(--muted-foreground, #8a8a95)" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-2 text-[11px] text-muted-foreground", children: [
               "(",
               field.type,
               ")"
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "14px", color: "var(--foreground, #e8e8ea)", whiteSpace: "pre-wrap" }, children: formatDetailValue(field.value) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-foreground", children: renderFieldValue(field) })
         ]
       },
       field.questionId
     )) }),
-    response.scores && Object.keys(response.scores).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "20px" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          style: {
-            fontSize: "14px",
-            fontWeight: 600,
-            color: "var(--foreground, #e8e8ea)",
-            marginBottom: "12px"
-          },
-          children: "Scores"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "12px", flexWrap: "wrap" }, children: [
-        Object.entries(response.scores).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              padding: "8px 16px",
-              backgroundColor: "var(--accent, #17171a)",
-              borderRadius: "6px",
-              fontSize: "13px"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "var(--muted-foreground, #8a8a95)" }, children: [
-                key,
-                ": "
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, color: "var(--primary, oklch(0.82 0.14 210))" }, children: value })
-            ]
-          },
-          key
-        )),
-        response.totalScore != null && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              padding: "8px 16px",
-              backgroundColor: "var(--accent, #17171a)",
-              borderRadius: "6px",
-              fontSize: "13px"
+    response.scores && Object.keys(response.scores).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-foreground mb-3", children: "Scores" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 flex-wrap", children: [
+        Object.entries(response.scores).map(([key, value]) => {
+          const displayName = INSTRUMENT_DISPLAY_NAMES[key] ?? key;
+          const severity = typeof value === "number" ? getScoreSeverity(key, value) : void 0;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "px-4 py-2 bg-accent rounded-md text-[13px] flex items-center gap-2",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+                  displayName,
+                  ": "
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-primary", children: value }),
+                severity && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "text-[11px] font-semibold px-2 py-0.5 rounded-full text-white",
+                    style: { backgroundColor: severity.color },
+                    children: severity.label
+                  }
+                )
+              ]
             },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--muted-foreground, #8a8a95)" }, children: "Total: " }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, color: "var(--primary, oklch(0.82 0.14 210))" }, children: response.totalScore })
-            ]
-          }
-        )
+            key
+          );
+        }),
+        response.totalScore != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2 bg-accent rounded-md text-[13px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Total: " }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-primary", children: response.totalScore })
+        ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-5 pt-3 border-t border-border text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        "Schema: ",
+        response.schemaId,
+        " (v",
+        response.schemaVersion,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        "Session: ",
+        response.sessionToken
+      ] })
+    ] })
+  ] });
+}
+function renderFieldValue(field) {
+  const { type, value } = field;
+  if (value == null) return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+  switch (type) {
+    case "vitals_entry":
+      return renderVitals(value);
+    case "medication_list":
+      return renderMedications(value);
+    case "allergy_list":
+      return renderAllergies(value);
+    case "bmi_calculator":
+      return renderBmi(value);
+    case "body_diagram":
+      return renderBodyDiagram(value);
+    case "pain_scale":
+      return renderPainScale(value);
+    case "insurance_card":
+      return renderInsurance(value);
+    case "payment":
+      return renderPayment(value);
+    case "legal_name":
+      return renderLegalName(value);
+    case "address":
+      return renderAddress(value);
+    case "consent":
+      return renderConsent(value);
+    case "signature":
+      return renderSignature(value);
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-pre-wrap", children: formatFallbackValue(value) });
+  }
+}
+var VITALS_LABELS = {
+  systolicBp: { label: "Systolic BP", unit: "mmHg", normalRange: "90-140" },
+  diastolicBp: { label: "Diastolic BP", unit: "mmHg", normalRange: "60-90" },
+  heartRate: { label: "Heart Rate", unit: "bpm", normalRange: "60-100" },
+  temperature: { label: "Temperature", unit: "\xB0F", normalRange: "97.0-99.5" },
+  respiratoryRate: { label: "Respiratory Rate", unit: "/min", normalRange: "12-20" },
+  oxygenSaturation: { label: "SpO\u2082", unit: "%", normalRange: "95-100" }
+};
+function renderVitals(value) {
+  if (typeof value !== "object" || value === null) return formatFallbackValue(value);
+  const vitals = value;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2", children: Object.entries(VITALS_LABELS).map(([key, meta]) => {
+    const val = vitals[key];
+    if (val == null || val === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[13px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+        meta.label,
+        ": "
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
+        String(val),
+        " ",
+        meta.unit
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] text-muted-foreground ml-1", children: [
+        "(",
+        meta.normalRange,
+        ")"
+      ] })
+    ] }, key);
+  }) });
+}
+function renderMedications(value) {
+  if (!Array.isArray(value) || value.length === 0) return "No medications";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: value.map((med, idx) => {
+    const m = med;
+    const parts = [m.dosage, m.frequency, m.route].filter(Boolean);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        style: {
-          marginTop: "20px",
-          paddingTop: "12px",
-          borderTop: "1px solid var(--border, #1c1c20)",
-          fontSize: "12px",
-          color: "var(--muted-foreground, #8a8a95)"
-        },
+        className: "px-3 py-2 border border-border rounded-md text-[13px]",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            "Schema: ",
-            response.schemaId,
-            " (v",
-            response.schemaVersion,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: m.name || "Unnamed" }),
+          parts.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+            " \u2014 ",
+            parts.join(" \xB7 ")
+          ] }),
+          m.notes && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: m.notes })
+        ]
+      },
+      idx
+    );
+  }) });
+}
+function renderAllergies(value) {
+  if (!Array.isArray(value) || value.length === 0) return "No allergies";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: value.map((allergy, idx) => {
+    const a = allergy;
+    const sevColor = SEVERITY_COLORS[a.severity];
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "px-3 py-2 border border-border rounded-md text-[13px] flex items-center gap-2 flex-wrap",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: a.allergen || "Unknown" }),
+          a.type && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] text-muted-foreground", children: [
+            "(",
+            a.type,
             ")"
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            "Session: ",
-            response.sessionToken
+          a.severity && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "text-[11px] font-semibold px-2 py-0.5 rounded-full",
+              style: {
+                backgroundColor: sevColor ?? "var(--accent)",
+                color: sevColor ? "#fff" : "var(--foreground)"
+              },
+              children: a.severity
+            }
+          ),
+          a.reaction && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            "\u2014 ",
+            a.reaction
           ] })
         ]
+      },
+      idx
+    );
+  }) });
+}
+function renderBmi(value) {
+  if (typeof value !== "object" || value === null) return formatFallbackValue(value);
+  const data = value;
+  const bmi = data.bmi;
+  const unit = data.unit ?? "imperial";
+  const height = data.height;
+  const weight = data.weight;
+  const heightUnit = unit === "metric" ? "cm" : "in";
+  const weightUnit = unit === "metric" ? "kg" : "lbs";
+  const category = bmi != null ? getBmiCategory(bmi) : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[13px] flex items-center gap-2 flex-wrap", children: [
+    height != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      "Height: ",
+      height,
+      " ",
+      heightUnit
+    ] }),
+    height != null && weight != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "|" }),
+    weight != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      "Weight: ",
+      weight,
+      " ",
+      weightUnit
+    ] }),
+    bmi != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "\u2014" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold", children: [
+        "BMI: ",
+        bmi
+      ] }),
+      category && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "text-[11px] font-semibold px-2 py-0.5 rounded-full text-white",
+          style: { backgroundColor: category.color },
+          children: category.label
+        }
+      )
+    ] })
+  ] });
+}
+function renderBodyDiagram(value) {
+  if (!Array.isArray(value) || value.length === 0) return "No regions selected";
+  const labels = value.map((id) => BODY_REGION_LABELS[id] ?? id);
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { children: labels.join(", ") });
+}
+function renderPainScale(value) {
+  if (typeof value !== "number") return formatFallbackValue(value);
+  const face = getPainLabel(value);
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold", style: { color: face?.color }, children: [
+    value,
+    "/10",
+    face ? ` \u2014 ${face.label}` : ""
+  ] });
+}
+function renderInsurance(value) {
+  if (typeof value !== "object" || value === null) return formatFallbackValue(value);
+  const ins = value;
+  const textFields = [
+    { key: "carrierId", label: "Carrier" },
+    { key: "planName", label: "Plan" },
+    { key: "memberId", label: "Member ID" },
+    { key: "groupNumber", label: "Group #" },
+    { key: "subscriberName", label: "Subscriber" },
+    { key: "relationship", label: "Relationship" }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-x-3 gap-y-1 text-[13px]", children: textFields.map(({ key, label }) => {
+      const val = ins[key];
+      if (!val) return null;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+          label,
+          ": "
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: String(val) })
+      ] }, key);
+    }) }),
+    !!(ins.frontImage || ins.backImage) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 mt-1", children: [
+      typeof ins.frontImage === "string" && /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: ins.frontImage,
+          alt: "Front of card",
+          className: "h-12 rounded border border-border"
+        }
+      ),
+      typeof ins.backImage === "string" && /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: ins.backImage,
+          alt: "Back of card",
+          className: "h-12 rounded border border-border"
+        }
+      )
+    ] })
+  ] });
+}
+function renderPayment(value) {
+  if (typeof value !== "object" || value === null) return formatFallbackValue(value);
+  const payment = value;
+  const status = payment.status;
+  const statusConfig = {
+    succeeded: { bg: "#22c55e", label: "Succeeded" },
+    failed: { bg: "#ef4444", label: "Failed" },
+    processing: { bg: "#eab308", label: "Processing" }
+  };
+  const cfg = statusConfig[status];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-[13px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "text-[11px] font-semibold px-2.5 py-0.5 rounded-full text-white",
+        style: { backgroundColor: cfg?.bg ?? "var(--accent)" },
+        children: cfg?.label ?? status
       }
-    )
+    ),
+    !!payment.chargeId && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: String(payment.chargeId) }),
+    !!payment.error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-destructive", children: String(payment.error) })
   ] });
 }
-function formatDetailValue(value) {
+function renderLegalName(value) {
+  if (typeof value !== "object" || value === null) return formatFallbackValue(value);
+  const name = value;
+  const parts = [name.first, name.middle, name.last].filter(Boolean);
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: parts.join(" ") || "\u2014" });
+}
+function renderAddress(value) {
+  if (typeof value !== "object" || value === null) return formatFallbackValue(value);
+  const addr = value;
+  const line1 = [addr.street, addr.street2].filter(Boolean).join(", ");
+  const line2 = [addr.city, addr.state, addr.zip].filter(Boolean).join(", ");
+  const full = [line1, line2].filter(Boolean).join(", ");
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { children: full || "\u2014" });
+}
+function renderConsent(value) {
+  const agreed = value === true || value === "true" || value === "agreed";
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: agreed ? "font-semibold text-green-500" : "font-semibold text-muted-foreground", children: agreed ? "Agreed" : "Not agreed" });
+}
+function renderSignature(value) {
+  if (typeof value !== "string") return formatFallbackValue(value);
+  if (value.startsWith("data:image")) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: value,
+        alt: "Signature",
+        className: "h-15 border border-border rounded"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { children: value });
+}
+function formatFallbackValue(value) {
   if (value == null) return "\u2014";
   if (typeof value === "boolean") return value ? "Yes" : "No";
-  if (Array.isArray(value)) return value.map(formatDetailValue).join("\n");
+  if (Array.isArray(value)) return value.map(formatFallbackValue).join(", ");
   if (typeof value === "object") return JSON.stringify(value, null, 2);
   return String(value);
 }
-var viewButtonStyle = (active) => ({
-  padding: "4px 10px",
-  fontSize: "12px",
-  fontWeight: active ? 600 : 400,
-  color: active ? "var(--primary, oklch(0.82 0.14 210))" : "var(--muted-foreground, #8a8a95)",
-  backgroundColor: active ? "var(--accent, #17171a)" : "transparent",
-  border: "1px solid",
-  borderColor: active ? "var(--ring, oklch(0.82 0.14 210))" : "var(--border, #1c1c20)",
-  borderRadius: "6px",
-  cursor: "pointer",
-  fontFamily: "inherit"
-});
+
+// src/response-viewer/export-utils.ts
+function exportToCsv(schema, responses, filename = "responses.csv") {
+  const questions = getExportableQuestions(schema);
+  const headers = ["Submitted", ...questions.map((q) => q.label), "Score"];
+  const rows = responses.map((r) => {
+    const submitted = 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");
+  downloadBlob(csvContent, filename, "text/csv;charset=utf-8;");
+}
+function exportToJson(responses, filename = "responses.json") {
+  const content = JSON.stringify(responses, null, 2);
+  downloadBlob(content, filename, "application/json;charset=utf-8;");
+}
+function getExportableQuestions(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 formatExportValue(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}\xB0F`);
+      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 "body_diagram":
+      if (Array.isArray(value)) {
+        return value.map((id) => BODY_REGION_LABELS[id] ?? id).join("; ");
+      }
+      break;
+    case "pain_scale":
+      return typeof value === "number" ? `${value}/10` : String(value);
+    case "bmi_calculator": {
+      if (typeof value !== "object" || value === null) break;
+      const d = value;
+      return d.bmi != null ? `BMI ${d.bmi}` : "";
+    }
+    case "payment": {
+      if (typeof value !== "object" || value === null) break;
+      return value.status ?? "";
+    }
+    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(", ");
+    }
+    case "consent":
+      return value === true || value === "true" || value === "agreed" ? "Agreed" : "Not agreed";
+    case "signature":
+      return typeof value === "string" && value.startsWith("data:image") ? "Signed" : "";
+  }
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (Array.isArray(value)) return value.join("; ");
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+function escapeCsvField(field) {
+  if (field.includes(",") || field.includes('"') || field.includes("\n")) {
+    return `"${field.replace(/"/g, '""')}"`;
+  }
+  return field;
+}
+function downloadBlob(content, filename, mimeType) {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
 function ResponseViewerInner({
   schema,
   responses,
@@ -3515,62 +4630,73 @@ function ResponseViewerInner({
       value: response.values[q.id]
     }));
   }
+  const heightValue = typeof height === "number" ? `${height}px` : height;
+  const widthValue = typeof width === "number" ? `${width}px` : width;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        height: typeof height === "number" ? `${height}px` : height,
-        width: typeof width === "number" ? `${width}px` : width,
-        border: "1px solid var(--border, #1c1c20)",
-        borderRadius: "8px",
-        overflow: "hidden",
-        fontFamily: "inherit",
-        backgroundColor: "var(--background, #0a0a0b)",
-        color: "var(--foreground, #e8e8ea)"
-      },
+      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",
-          {
-            style: {
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-              padding: "8px 12px",
-              borderBottom: "1px solid var(--border, #1c1c20)"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "13px", color: "var(--muted-foreground, #8a8a95)" }, children: [
-                responses.length,
-                " response",
-                responses.length !== 1 ? "s" : ""
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "4px" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    style: viewButtonStyle(viewMode === "table"),
-                    onClick: () => setViewMode("table"),
-                    children: "Table"
-                  }
+        !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" : ""
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              fieldcraftReact.Button,
+              {
+                variant: viewMode === "table" ? "secondary" : "ghost",
+                size: "sm",
+                className: cn(
+                  "h-7 text-xs",
+                  viewMode === "table" && "font-semibold border border-ring"
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    style: viewButtonStyle(viewMode === "card"),
-                    onClick: () => setViewMode("card"),
-                    children: "Cards"
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, overflow: "auto", padding: selectedResponse ? "16px" : void 0 }, children: selectedResponse ? /* @__PURE__ */ jsxRuntime.jsx(
+                onClick: () => setViewMode("table"),
+                children: "Table"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              fieldcraftReact.Button,
+              {
+                variant: viewMode === "card" ? "secondary" : "ghost",
+                size: "sm",
+                className: cn(
+                  "h-7 text-xs",
+                  viewMode === "card" && "font-semibold border border-ring"
+                ),
+                onClick: () => setViewMode("card"),
+                children: "Cards"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Separator, { orientation: "vertical", className: "h-5 mx-1" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              fieldcraftReact.Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "h-7 text-xs",
+                onClick: () => exportToCsv(schema, responses),
+                disabled: responses.length === 0,
+                children: "Export CSV"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              fieldcraftReact.Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "h-7 text-xs",
+                onClick: () => exportToJson(responses),
+                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(
           ResponseDetail,
           {
             response: selectedResponse,
@@ -3584,29 +4710,18 @@ function ResponseViewerInner({
             responses,
             onRowClick: handleSelect
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              display: "grid",
-              gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
-              gap: "12px",
-              padding: "12px"
+        ) : /* @__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(
+            ResponseCard,
+            {
+              response,
+              fields: getFields(response),
+              onClick: () => handleSelect(response)
             },
-            children: [
-              responses.map((response, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-                ResponseCard,
-                {
-                  response,
-                  fields: getFields(response),
-                  onClick: () => handleSelect(response)
-                },
-                response.sessionToken || idx
-              )),
-              responses.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "32px", textAlign: "center", color: "var(--muted-foreground, #8a8a95)" }, children: "No responses yet" })
-            ]
-          }
-        ) })
+            response.sessionToken || idx
+          )),
+          responses.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 text-center text-muted-foreground", children: "No responses yet" })
+        ] }) })
       ]
     }
   );
@@ -3625,7 +4740,7 @@ function getAllQuestions2(schema) {
 }
 
 // src/response-viewer/ResponseViewer.tsx
-var ResponseViewer = fieldcraftProLicense.requireLicense(ResponseViewerInner, "ResponseViewer");
+var ResponseViewer = requireLicense(ResponseViewerInner, "ResponseViewer");
 
 // src/theme-editor/preview-schema.ts
 var PREVIEW_SCHEMA = {
@@ -4026,12 +5141,12 @@ function ThemeEditorInner({
 }
 
 // src/theme-editor/ThemeEditor.tsx
-var ThemeEditor = fieldcraftProLicense.requireLicense(ThemeEditorInner, "ThemeEditor");
+var ThemeEditor = requireLicense(ThemeEditorInner, "ThemeEditor");
 
 // src/index.ts
 if (typeof globalThis !== "undefined" && typeof globalThis.process !== "undefined" && globalThis.process.env?.NODE_ENV !== "production") {
   const _fc_banner = `
-%c FieldCraft Pro %c v0.0.0 
+%c FieldCraft Pro %c v1.0.1 
 
 %cForm Builder \xB7 Response Viewer \xB7 Theme Editor
 
@@ -4049,32 +5164,9 @@ Need a license? \u2192 https://squaredr.tech/products/fieldcraft/admin-pro#prici
   );
 }
 
-Object.defineProperty(exports, "FieldCraftProProvider", {
-  enumerable: true,
-  get: function () { return fieldcraftProLicense.FieldCraftProProvider; }
-});
-Object.defineProperty(exports, "UnlicensedOverlay", {
-  enumerable: true,
-  get: function () { return fieldcraftProLicense.UnlicensedOverlay; }
-});
-Object.defineProperty(exports, "isProductionEnvironment", {
-  enumerable: true,
-  get: function () { return fieldcraftProLicense.isProductionEnvironment; }
-});
-Object.defineProperty(exports, "requireLicense", {
-  enumerable: true,
-  get: function () { return fieldcraftProLicense.requireLicense; }
-});
-Object.defineProperty(exports, "useLicense", {
-  enumerable: true,
-  get: function () { return fieldcraftProLicense.useLicense; }
-});
-Object.defineProperty(exports, "validateLicense", {
-  enumerable: true,
-  get: function () { return fieldcraftProLicense.validateLicense; }
-});
 exports.DEFAULT_PALETTE = DEFAULT_PALETTE;
 exports.DEFAULT_SCHEMA = DEFAULT_SCHEMA;
+exports.FieldCraftProProvider = FieldCraftProProvider;
 exports.FormBuilder = FormBuilder;
 exports.FormBuilderThemeProvider = FormBuilderThemeProvider;
 exports.PREVIEW_SCHEMA = PREVIEW_SCHEMA;
@@ -4082,6 +5174,7 @@ exports.QUESTION_TYPE_INFO = QUESTION_TYPE_INFO;
 exports.ResponseViewer = ResponseViewer;
 exports.ThemeEditor = ThemeEditor;
 exports.ThemeEditorInner = ThemeEditorInner;
+exports.UnlicensedOverlay = UnlicensedOverlay;
 exports.addOption = addOption;
 exports.addQuestion = addQuestion;
 exports.addSection = addSection;
@@ -4095,12 +5188,14 @@ exports.generateId = generateId;
 exports.generateOptionId = generateOptionId;
 exports.generateQuestionId = generateQuestionId;
 exports.generateSectionId = generateSectionId;
+exports.isProductionEnvironment = isProductionEnvironment;
 exports.moveOption = moveOption;
 exports.moveQuestion = moveQuestion;
 exports.moveSection = moveSection;
 exports.removeOption = removeOption;
 exports.removeQuestion = removeQuestion;
 exports.removeSection = removeSection;
+exports.requireLicense = requireLicense;
 exports.squaredrDarkPreset = squaredrDarkPreset;
 exports.updateOption = updateOption;
 exports.updateQuestion = updateQuestion;
@@ -4108,4 +5203,6 @@ exports.updateSection = updateSection;
 exports.useBuilderState = useBuilderState;
 exports.useBuilderTheme = useBuilderTheme;
 exports.useDragDrop = useDragDrop;
+exports.useLicense = useLicense;
 exports.useUndoRedo = useUndoRedo;
+exports.validateLicense = validateLicense;