@squaredr/fieldcraft-pro 1.8.0 → 1.9.1

package/dist/templates/index.js

@@ -380,6 +380,7 @@ var consultationBookingSchema = {
           required: true,
           config: {
             type: "appointment",
+            // Example slots — replace with dynamic data or a slots URL in production
             slots: [
               {
                 date: "2026-09-01",
@@ -480,6 +481,55 @@ var consultationBookingSchema = {
           type: "divider",
           label: ""
         },
+        {
+          id: "hourly_rate",
+          type: "calculated",
+          label: "Hourly Rate",
+          config: {
+            type: "calculated",
+            expression: 'IF({service_type} = "legal", 150, IF({service_type} = "business", 200, IF({service_type} = "technical", 175, 0)))',
+            format: "currency",
+            decimalPlaces: 2,
+            prefix: "$"
+          }
+        },
+        {
+          id: "session_cost",
+          type: "calculated",
+          label: "Session Cost",
+          helpText: "Based on service type and session duration",
+          config: {
+            type: "calculated",
+            expression: "{hourly_rate} * {session_duration} / 60",
+            format: "currency",
+            decimalPlaces: 2,
+            prefix: "$"
+          }
+        },
+        {
+          id: "rush_fee",
+          type: "calculated",
+          label: "Rush Fee",
+          config: {
+            type: "calculated",
+            expression: 'IF({urgency} = "rush", 50, 0)',
+            format: "currency",
+            decimalPlaces: 2,
+            prefix: "$"
+          }
+        },
+        {
+          id: "total_cost",
+          type: "calculated",
+          label: "Total",
+          config: {
+            type: "calculated",
+            expression: "{session_cost} + {rush_fee}",
+            format: "currency",
+            decimalPlaces: 2,
+            prefix: "$"
+          }
+        },
         {
           id: "promo_code",
           type: "short_text",
@@ -499,10 +549,10 @@ var consultationBookingSchema = {
             provider: "stripe",
             publicKey: "",
             // Set your Stripe publishable key (pk_test_... or pk_live_...)
-            amount: 2e4,
+            amountField: "total_cost",
             currency: "USD",
             description: "Consultation Session"
-            // No serverUrl — developer must configure their own endpoint via customProps or serverUrl
+            // serverUrl: "" — developer must configure their own payment intent endpoint
           }
         }
       ]
@@ -999,13 +1049,50 @@ var ecommerceCheckoutSchema = {
             prefix: "$"
           }
         },
+        {
+          id: "shipping_cost",
+          type: "calculated",
+          label: "Shipping",
+          helpText: "Based on your selected shipping method",
+          config: {
+            type: "calculated",
+            expression: 'IF({shipping_method} = "overnight", 29.99, IF({shipping_method} = "express", 14.99, IF({shipping_method} = "standard", 7.99, 0)))',
+            format: "currency",
+            decimalPlaces: 2,
+            prefix: "$"
+          }
+        },
+        {
+          id: "insurance_cost",
+          type: "calculated",
+          label: "Shipping Insurance",
+          config: {
+            type: "calculated",
+            expression: "IF({shipping_insurance} = true, 4.99, 0)",
+            format: "currency",
+            decimalPlaces: 2,
+            prefix: "$"
+          }
+        },
+        {
+          id: "gift_wrap_cost",
+          type: "calculated",
+          label: "Gift Wrapping",
+          config: {
+            type: "calculated",
+            expression: "IF({gift_wrap} = true, 5.99, 0)",
+            format: "currency",
+            decimalPlaces: 2,
+            prefix: "$"
+          }
+        },
         {
           id: "order_total",
           type: "calculated",
           label: "Order Total",
           config: {
             type: "calculated",
-            expression: "{order_subtotal} + {order_tax}",
+            expression: "{order_subtotal} + {order_tax} + {shipping_cost} + {insurance_cost} + {gift_wrap_cost}",
             format: "currency",
             decimalPlaces: 2,
             prefix: "$"
@@ -1027,10 +1114,10 @@ var ecommerceCheckoutSchema = {
             provider: "stripe",
             publicKey: "",
             // Set your Stripe publishable key (pk_test_... or pk_live_...)
-            amount: 1e4,
+            amountField: "order_total",
             currency: "USD",
             description: "E-commerce Order"
-            // No serverUrl — developer must configure their own endpoint via customProps or serverUrl
+            // serverUrl: "" — developer must configure their own payment intent endpoint
           }
         }
       ]

package/dist/templates/index.mjs

@@ -1 +1 @@
-export { consultationBooking, consultationBookingMeta, consultationBookingSchema, ecommerceCheckout, ecommerceCheckoutMeta, ecommerceCheckoutSchema, proTemplates } from '../chunk-IW654Z3M.mjs';
+export { consultationBooking, consultationBookingMeta, consultationBookingSchema, ecommerceCheckout, ecommerceCheckoutMeta, ecommerceCheckoutSchema, proTemplates } from '../chunk-5QXKDYWY.mjs';

package/dist/theme-editor/index.d.mts

@@ -1,7 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { FormEngineTheme, FormEngineSchema } from '@squaredr/fieldcraft-core';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
  * ThemeEditor chrome theme configuration.
@@ -65,7 +64,7 @@ type ThemeEditorThemeProviderProps = {
     theme?: ThemeEditorTheme;
     children: ReactNode;
 };
-declare function ThemeEditorThemeProvider({ theme, children }: ThemeEditorThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function ThemeEditorThemeProvider({ theme, children }: ThemeEditorThemeProviderProps): react.JSX.Element;
 
 /**
  * Drafting Teal light chrome preset (default).

package/dist/theme-editor/index.d.ts

@@ -1,7 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { FormEngineTheme, FormEngineSchema } from '@squaredr/fieldcraft-core';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
  * ThemeEditor chrome theme configuration.
@@ -65,7 +64,7 @@ type ThemeEditorThemeProviderProps = {
     theme?: ThemeEditorTheme;
     children: ReactNode;
 };
-declare function ThemeEditorThemeProvider({ theme, children }: ThemeEditorThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function ThemeEditorThemeProvider({ theme, children }: ThemeEditorThemeProviderProps): react.JSX.Element;
 
 /**
  * Drafting Teal light chrome preset (default).

package/dist/theme-editor/index.js

@@ -720,16 +720,20 @@ function deepMerge(base, partial) {
 
 // src/theme-editor/palette-generator.ts
 function generatePalette(baseHex) {
+  const cleaned = baseHex.replace("#", "");
+  if (!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$/.test(cleaned)) {
+    return generatePalette("#6B7280");
+  }
   const [h, s, l] = hexToHsl(baseHex);
   const secH = (h + 180) % 360;
   const isLightBase = l > 50;
   return {
     // Primary
     primary: hslToHex(h, s, clamp(l, 30, 60)),
-    primaryForeground: isLightBase ? "#ffffff" : "#ffffff",
+    primaryForeground: isLightBase ? "#ffffff" : "#000000",
     // Secondary (complementary)
     secondary: hslToHex(secH, Math.max(s - 15, 10), clamp(l, 35, 55)),
-    secondaryForeground: "#ffffff",
+    secondaryForeground: isLightBase ? "#ffffff" : "#000000",
     // Surfaces
     surface: hslToHex(h, Math.max(s - 35, 3), 97),
     background: "#F4F7F8",
@@ -1775,6 +1779,12 @@ function resolveThemeFromDOM() {
     const val = styles.getPropertyValue(prop).trim();
     return val || void 0;
   };
+  const getNumber = (prop) => {
+    const val = get(prop);
+    if (val == null) return void 0;
+    const num = parseFloat(val);
+    return isNaN(num) ? void 0 : num;
+  };
   return {
     colors: {
       primary: get("--primary"),
@@ -1807,6 +1817,17 @@ function resolveThemeFromDOM() {
       inputRadius: get("--fc-radius-input"),
       buttonRadius: get("--fc-radius-button"),
       cardRadius: get("--fc-radius-card")
+    },
+    spacing: {
+      base: getNumber("--fc-spacing-base"),
+      sectionGap: getNumber("--fc-section-gap"),
+      fieldGap: getNumber("--fc-field-gap"),
+      inputPaddingX: getNumber("--fc-input-padding-x"),
+      inputPaddingY: getNumber("--fc-input-padding-y")
+    },
+    layout: {
+      maxWidth: get("--fc-max-width")
+      // alignment, progressPosition, sectionLayout are enums — not resolvable from CSS
     }
   };
 }
@@ -1861,6 +1882,9 @@ function detectPresetFamily(theme) {
   }
   return null;
 }
+function isValidHex(value) {
+  return /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value);
+}
 var SECTIONS = [
   {
     id: "colors",
@@ -2111,6 +2135,7 @@ function ThemeEditorInner({
     a.click();
     URL.revokeObjectURL(url);
   }, [theme]);
+  const [importError, setImportError] = react.useState(null);
   const importJson = react.useCallback(() => {
     const input = document.createElement("input");
     input.type = "file";
@@ -2122,10 +2147,16 @@ function ThemeEditorInner({
       reader.onload = () => {
         try {
           const parsed = JSON.parse(reader.result);
+          if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed) || !("colors" in parsed || "typography" in parsed || "shape" in parsed || "spacing" in parsed || "layout" in parsed)) {
+            setImportError("Invalid theme file: expected an object with colors, typography, shape, spacing, or layout.");
+            return;
+          }
+          setImportError(null);
           setTheme(parsed);
           setPresetKey("custom");
           onChange?.(parsed, "custom");
         } catch {
+          setImportError("Failed to parse JSON file. Please check the file format.");
         }
       };
       reader.readAsText(file);
@@ -2203,6 +2234,10 @@ function ThemeEditorInner({
             onSave && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => onSave(theme, presetKey), className: "fcte-btn fcte-btn--primary", children: "Save" })
           ] })
         ] }),
+        importError && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-import-error", role: "alert", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: importError }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setImportError(null), className: "fcte-import-error__close", children: "\xD7" })
+        ] }),
         showPalette && /* @__PURE__ */ jsxRuntime.jsx(
           PaletteGenerator,
           {
@@ -2236,6 +2271,8 @@ function ThemeEditorInner({
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-fields", children: currentSection.fields.map((field) => {
               const val = sectionValues[field.key];
               if (field.kind === "color") {
+                const colorVal = typeof val === "string" ? val : "#000000";
+                const isInvalid = colorVal.length > 0 && !isValidHex(colorVal);
                 return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-field", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("label", { className: "fcte-field__label", children: field.label }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-field__color-row", children: [
@@ -2243,7 +2280,7 @@ function ThemeEditorInner({
                       "input",
                       {
                         type: "color",
-                        value: typeof val === "string" ? val : "#000000",
+                        value: isValidHex(colorVal) ? colorVal : "#000000",
                         onChange: (e) => updateField(currentSection.themeKey, field.key, e.target.value),
                         className: "fcte-field__swatch"
                       }
@@ -2252,10 +2289,24 @@ function ThemeEditorInner({
                       "input",
                       {
                         type: "text",
-                        value: typeof val === "string" ? val : "",
-                        onChange: (e) => updateField(currentSection.themeKey, field.key, e.target.value),
-                        className: "fcte-field__text",
-                        spellCheck: false
+                        value: colorVal,
+                        onChange: (e) => {
+                          const v = e.target.value;
+                          if (isValidHex(v)) {
+                            updateField(currentSection.themeKey, field.key, v);
+                          } else {
+                            setTheme((prev) => ({
+                              ...prev,
+                              [currentSection.themeKey]: {
+                                ...prev[currentSection.themeKey],
+                                [field.key]: v
+                              }
+                            }));
+                          }
+                        },
+                        className: `fcte-field__text${isInvalid ? " fcte-field__text--invalid" : ""}`,
+                        spellCheck: false,
+                        placeholder: "#RRGGBB"
                       }
                     )
                   ] })
@@ -2284,9 +2335,16 @@ function ThemeEditorInner({
                       {
                         type: "number",
                         value: typeof val === "number" ? val : 0,
-                        onChange: (e) => updateField(currentSection.themeKey, field.key, Number(e.target.value)),
+                        onChange: (e) => {
+                          let n = Math.round(Number(e.target.value));
+                          if (isNaN(n)) n = 0;
+                          if (field.min != null) n = Math.max(field.min, n);
+                          if (field.max != null) n = Math.min(field.max, n);
+                          updateField(currentSection.themeKey, field.key, n);
+                        },
                         min: field.min,
                         max: field.max,
+                        step: 1,
                         className: "fcte-field__number"
                       }
                     ),
@@ -2304,7 +2362,8 @@ function ThemeEditorInner({
                     onChange: (e) => updateField(currentSection.themeKey, field.key, e.target.value),
                     placeholder: field.placeholder,
                     className: "fcte-field__text",
-                    spellCheck: false
+                    spellCheck: false,
+                    maxLength: 200
                   }
                 )
               ] }, field.key);

package/dist/theme-editor/index.mjs

@@ -1,2 +1,2 @@
-export { PRESET_FAMILIES, PREVIEW_SCHEMA, ThemeEditor, ThemeEditorThemeProvider, resolveThemeFromDOM, themeEditorDarkPreset, themeEditorLightPreset, useEditorTheme } from '../chunk-CYXJGOQH.mjs';
+export { PRESET_FAMILIES, PREVIEW_SCHEMA, ThemeEditor, ThemeEditorThemeProvider, resolveThemeFromDOM, themeEditorDarkPreset, themeEditorLightPreset, useEditorTheme } from '../chunk-KTIU7VCP.mjs';
 import '../chunk-4MMKB2EW.mjs';

package/dist/{types-bFHsZT1n.d.mts → types-BQOeI3LX.d.mts}

@@ -214,4 +214,4 @@ type MutationAction = {
     updates: Partial<Option>;
 };
 
-export type { BuilderState as B, DragItem as D, FormBuilderPreviewProps as F, MutationAction as M, PaletteCategory as P, QuestionTypeCategory as Q, SelectedItem as S, DropTarget as a, FormBuilderProps as b, FormBuilderTemplate as c, FormBuilderTheme as d, PropertyPanelTab as e, QuestionTypeInfo as f };
+export type { BuilderState as B, DragItem as D, FormBuilderTheme as F, MutationAction as M, PaletteCategory as P, QuestionTypeCategory as Q, SelectedItem as S, DropTarget as a, FormBuilderPreviewProps as b, FormBuilderProps as c, PropertyPanelTab as d, QuestionTypeInfo as e, FormBuilderTemplate as f };

package/dist/{types-bFHsZT1n.d.ts → types-BQOeI3LX.d.ts}

@@ -214,4 +214,4 @@ type MutationAction = {
     updates: Partial<Option>;
 };
 
-export type { BuilderState as B, DragItem as D, FormBuilderPreviewProps as F, MutationAction as M, PaletteCategory as P, QuestionTypeCategory as Q, SelectedItem as S, DropTarget as a, FormBuilderProps as b, FormBuilderTemplate as c, FormBuilderTheme as d, PropertyPanelTab as e, QuestionTypeInfo as f };
+export type { BuilderState as B, DragItem as D, FormBuilderTheme as F, MutationAction as M, PaletteCategory as P, QuestionTypeCategory as Q, SelectedItem as S, DropTarget as a, FormBuilderPreviewProps as b, FormBuilderProps as c, PropertyPanelTab as d, QuestionTypeInfo as e, FormBuilderTemplate as f };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squaredr/fieldcraft-pro",
-  "version": "1.8.0",
+  "version": "1.9.1",
   "description": "Pro components for FieldCraft — visual drag-and-drop Form Builder, Response Viewer, and Theme Editor for React",
   "keywords": [
     "fieldcraft",
@@ -59,19 +59,19 @@
     "./theme-editor/styles.css"
   ],
   "dependencies": {
-    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@monaco-editor/react": "^4.6.0",
+    "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-select": "^2.3.7",
-    "@xyflow/react": "^12.11.3",
+    "@xyflow/react": "^12.11.5",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.16.0",
+    "lucide-react": "^1.37.0",
     "tailwind-merge": "^3.6.0"
   },
   "peerDependencies": {
-    "@squaredr/fieldcraft-core": "^1.8.1",
-    "@squaredr/fieldcraft-react": "^1.9.0",
+    "@squaredr/fieldcraft-core": "^1.9.1",
+    "@squaredr/fieldcraft-react": "^1.9.2",
     "@squaredr/paykit": "^0.10.0",
     "@squaredr/paykit-react": "^1.0.0",
     "react": "^18 || ^19",
@@ -86,25 +86,25 @@
     }
   },
   "devDependencies": {
-    "@squaredr/fieldcraft-core": "^1.8.1",
-    "@squaredr/fieldcraft-react": "^1.9.0",
-    "@squaredr/paykit": "^0.10.1",
+    "@squaredr/fieldcraft-core": "^1.10.0",
+    "@squaredr/fieldcraft-react": "^1.10.0",
+    "@squaredr/paykit": "^0.10.2",
     "@squaredr/paykit-react": "^1.1.0",
-    "@tailwindcss/cli": "^4.3.0",
+    "@tailwindcss/cli": "^4.3.3",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.6",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
     "jsdom": "^30.0.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "tailwindcss": "^4.3.0",
-    "tsup": "^8.0",
-    "typescript": "^5.5",
-    "vitest": "^2.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tailwindcss": "^4.3.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^2.1.9",
     "@squaredr/fieldcraft-pro-tsconfig": "0.0.1",
-    "@squaredr/fieldcraft-pro-license": "1.4.0"
+    "@squaredr/fieldcraft-pro-license": "1.4.1"
   },
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "SquaredR",

package/theme-editor/styles.css

@@ -119,6 +119,35 @@
   font-size: 11px;
 }
 
+/* ─── Import error banner ──────────────────────────────────────── */
+.fcte-import-error {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  background: #fef2f2;
+  border-bottom: 1px solid #fca5a5;
+  color: #991b1b;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.fcte-import-error__close {
+  background: none;
+  border: none;
+  color: #991b1b;
+  font-size: 16px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+/* ─── Invalid color input ──────────────────────────────────────── */
+.fcte-field__text--invalid {
+  border-color: #ef4444;
+  background: #fef2f2;
+}
+
 /* ─── Body split ────────────────────────────────────────────────── */
 .fcte-body {
   display: flex;