@squaredr/fieldcraft-pro 0.0.5 → 1.1.0

package/dist/form-builder/index.js

@@ -1,15 +1,336 @@
 '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/form-builder/components/FormBuilderGated.tsx
+// ../license/dist/index.mjs
+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
+};
+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 defaultContext = { status: "validating", tier: null };
+var LicenseCtx = react.createContext(defaultContext);
+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 +401,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 +441,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 +496,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 +1335,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 +1705,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 +1720,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 +2134,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 +2155,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 +2168,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 +2203,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 +2215,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 +2254,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 +2276,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 +2298,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 +2306,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 +2356,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 +2383,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 +2626,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 +2640,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 +2685,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 +2853,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 +2955,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 +3221,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 +3442,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 = {