@squaredr/fieldcraft-pro 1.8.0 → 1.9.0

package/dist/{chunk-CYXJGOQH.mjs → chunk-KTIU7VCP.mjs}

@@ -419,16 +419,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",
@@ -1474,6 +1478,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"),
@@ -1506,6 +1516,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
     }
   };
 }
@@ -1560,6 +1581,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",
@@ -1810,6 +1834,7 @@ function ThemeEditorInner({
     a.click();
     URL.revokeObjectURL(url);
   }, [theme]);
+  const [importError, setImportError] = useState(null);
   const importJson = useCallback(() => {
     const input = document.createElement("input");
     input.type = "file";
@@ -1821,10 +1846,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);
@@ -1902,6 +1933,10 @@ function ThemeEditorInner({
             onSave && /* @__PURE__ */ jsx("button", { onClick: () => onSave(theme, presetKey), className: "fcte-btn fcte-btn--primary", children: "Save" })
           ] })
         ] }),
+        importError && /* @__PURE__ */ jsxs("div", { className: "fcte-import-error", role: "alert", children: [
+          /* @__PURE__ */ jsx("span", { children: importError }),
+          /* @__PURE__ */ jsx("button", { onClick: () => setImportError(null), className: "fcte-import-error__close", children: "\xD7" })
+        ] }),
         showPalette && /* @__PURE__ */ jsx(
           PaletteGenerator,
           {
@@ -1935,6 +1970,8 @@ function ThemeEditorInner({
             /* @__PURE__ */ 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__ */ jsxs("div", { className: "fcte-field", children: [
                   /* @__PURE__ */ jsx("label", { className: "fcte-field__label", children: field.label }),
                   /* @__PURE__ */ jsxs("div", { className: "fcte-field__color-row", children: [
@@ -1942,7 +1979,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"
                       }
@@ -1951,10 +1988,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"
                       }
                     )
                   ] })
@@ -1983,9 +2034,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"
                       }
                     ),
@@ -2003,7 +2061,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/default-schema-BGxf9Jrg.d.ts

@@ -0,0 +1,174 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { c as FormBuilderProps, F as FormBuilderTheme, e as QuestionTypeInfo, S as SelectedItem, D as DragItem } from './types-BQOeI3LX.js';
+import { FormEngineSchema, Option, Question, Section } from '@squaredr/fieldcraft-core';
+import { ClassValue } from 'clsx';
+import * as _dnd_kit_core from '@dnd-kit/core';
+import { DragStartEvent, DragEndEvent } from '@dnd-kit/core';
+
+declare const FormBuilder: react.ComponentType<FormBuilderProps>;
+
+declare function useBuilderTheme(): FormBuilderTheme;
+type FormBuilderThemeProviderProps = {
+    theme?: FormBuilderTheme;
+    children: ReactNode;
+};
+declare function FormBuilderThemeProvider({ theme, children }: FormBuilderThemeProviderProps): react.JSX.Element;
+
+/**
+ * Metadata for all question types available in the Pro palette.
+ * Icons are lucide-react component names (imported dynamically via ICON_MAP).
+ *
+ * 44 field types — general-purpose form building.
+ * Telehealth-specific fields (15) are in @squaredr/fieldcraft-pro-telehealth.
+ */
+declare const QUESTION_TYPE_INFO: Record<string, QuestionTypeInfo>;
+/**
+ * Default palette layout with categories (44 Pro field types).
+ * Telehealth fields can be appended via FormBuilder's `palette` prop.
+ */
+declare const DEFAULT_PALETTE: ({
+    category: "text";
+    label: string;
+    types: string[];
+} | {
+    category: "numeric";
+    label: string;
+    types: string[];
+} | {
+    category: "selection";
+    label: string;
+    types: string[];
+} | {
+    category: "datetime";
+    label: string;
+    types: string[];
+} | {
+    category: "media";
+    label: string;
+    types: string[];
+} | {
+    category: "content";
+    label: string;
+    types: string[];
+} | {
+    category: "structural";
+    label: string;
+    types: string[];
+} | {
+    category: "advanced";
+    label: string;
+    types: string[];
+})[];
+
+/**
+ * Generate unique IDs for sections, questions, and options.
+ * Format: {prefix}_{uuid}
+ */
+declare function generateId(prefix: string): string;
+declare function generateSectionId(): string;
+declare function generateQuestionId(): string;
+declare function generateOptionId(): string;
+
+/**
+ * Pure functions for mutating FormEngineSchema.
+ * All functions return a new schema object (immutable updates).
+ */
+
+declare function addSection(schema: FormEngineSchema, section: Section, index: number): FormEngineSchema;
+declare function removeSection(schema: FormEngineSchema, sectionId: string): FormEngineSchema;
+declare function updateSection(schema: FormEngineSchema, sectionId: string, updates: Partial<Section>): FormEngineSchema;
+declare function moveSection(schema: FormEngineSchema, sectionId: string, newIndex: number): FormEngineSchema;
+declare function duplicateSection(schema: FormEngineSchema, sectionId: string): FormEngineSchema;
+declare function addQuestion(schema: FormEngineSchema, sectionId: string, question: Question, index: number): FormEngineSchema;
+declare function removeQuestion(schema: FormEngineSchema, sectionId: string, questionId: string): FormEngineSchema;
+declare function updateQuestion(schema: FormEngineSchema, sectionId: string, questionId: string, updates: Partial<Question>): FormEngineSchema;
+declare function moveQuestion(schema: FormEngineSchema, sectionId: string, questionId: string, targetSectionId: string, newIndex: number): FormEngineSchema;
+declare function duplicateQuestion(schema: FormEngineSchema, sectionId: string, questionId: string): FormEngineSchema;
+declare function addOption(schema: FormEngineSchema, sectionId: string, questionId: string, option: Option, index: number): FormEngineSchema;
+declare function removeOption(schema: FormEngineSchema, sectionId: string, questionId: string, optionIndex: number): FormEngineSchema;
+declare function updateOption(schema: FormEngineSchema, sectionId: string, questionId: string, optionIndex: number, updates: Partial<Option>): FormEngineSchema;
+declare function moveOption(schema: FormEngineSchema, sectionId: string, questionId: string, oldIndex: number, newIndex: number): FormEngineSchema;
+declare function findQuestion(schema: FormEngineSchema, sectionId: string, questionId: string): {
+    section: Section;
+    question: Question;
+    questionIndex: number;
+} | null;
+declare function findSection(schema: FormEngineSchema, sectionId: string): {
+    section: Section;
+    sectionIndex: number;
+} | null;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * Master state hook for the FormBuilder.
+ * Combines schema state, selection, and undo/redo.
+ *
+ * All mutation callbacks use a ref to read the latest schema,
+ * avoiding stale closures when multiple mutations fire in the
+ * same render tick.
+ */
+declare function useBuilderState(initialSchema: FormEngineSchema): {
+    schema: FormEngineSchema;
+    selectedItem: SelectedItem | null;
+    isDirty: boolean;
+    updateSchema: (newSchema: FormEngineSchema) => void;
+    addSection: (section: Section, index: number) => void;
+    removeSection: (sectionId: string) => void;
+    updateSection: (sectionId: string, updates: Partial<Section>) => void;
+    moveSection: (sectionId: string, newIndex: number) => void;
+    duplicateSection: (sectionId: string) => void;
+    addQuestion: (sectionId: string, question: Question, index: number) => void;
+    removeQuestion: (sectionId: string, questionId: string) => void;
+    updateQuestion: (sectionId: string, questionId: string, updates: Partial<Question>) => void;
+    moveQuestion: (sectionId: string, questionId: string, targetSectionId: string, newIndex: number) => void;
+    duplicateQuestion: (sectionId: string, questionId: string) => void;
+    selectQuestion: (sectionId: string, questionId: string) => void;
+    selectSection: (sectionId: string) => void;
+    clearSelection: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+    undo: () => void;
+    redo: () => void;
+    resetSchema: (newSchema: FormEngineSchema) => void;
+    markClean: () => void;
+};
+type BuilderStateHook = ReturnType<typeof useBuilderState>;
+
+type UndoRedoState = {
+    canUndo: boolean;
+    canRedo: boolean;
+    undo: () => void;
+    redo: () => void;
+    push: (schema: FormEngineSchema) => void;
+    clear: () => void;
+};
+/**
+ * Hook for undo/redo functionality.
+ * Maintains a history stack of schemas with max 50 entries.
+ * Uses state for the index so canUndo/canRedo trigger re-renders.
+ * The history array is kept in a ref since its identity doesn't
+ * need to cause re-renders — only the index matters.
+ */
+declare function useUndoRedo(currentSchema: FormEngineSchema, setSchema: (schema: FormEngineSchema) => void): UndoRedoState;
+
+/**
+ * Hook to wire up @dnd-kit drag-and-drop.
+ * Returns DndContext props and handlers.
+ */
+declare function useDragDrop(builderState: BuilderStateHook): {
+    sensors: _dnd_kit_core.SensorDescriptor<_dnd_kit_core.SensorOptions>[];
+    handleDragStart: (event: DragStartEvent) => void;
+    handleDragEnd: (event: DragEndEvent) => void;
+    handleDragCancel: () => void;
+    activeDragItem: DragItem | null;
+};
+
+/**
+ * Default empty schema for new forms.
+ * Contains one section with one question to get started.
+ */
+declare const DEFAULT_SCHEMA: FormEngineSchema;
+
+export { useUndoRedo as A, type BuilderStateHook as B, DEFAULT_PALETTE as D, FormBuilder as F, QUESTION_TYPE_INFO as Q, type UndoRedoState as U, DEFAULT_SCHEMA as a, FormBuilderThemeProvider as b, addOption as c, addQuestion as d, addSection as e, cn as f, duplicateQuestion as g, duplicateSection as h, findQuestion as i, findSection as j, generateId as k, generateOptionId as l, generateQuestionId as m, generateSectionId as n, moveOption as o, moveQuestion as p, moveSection as q, removeOption as r, removeQuestion as s, removeSection as t, updateOption as u, updateQuestion as v, updateSection as w, useBuilderState as x, useBuilderTheme as y, useDragDrop as z };

package/dist/default-schema-Bwq8FATF.d.mts

@@ -0,0 +1,174 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { c as FormBuilderProps, F as FormBuilderTheme, e as QuestionTypeInfo, S as SelectedItem, D as DragItem } from './types-BQOeI3LX.mjs';
+import { FormEngineSchema, Option, Question, Section } from '@squaredr/fieldcraft-core';
+import { ClassValue } from 'clsx';
+import * as _dnd_kit_core from '@dnd-kit/core';
+import { DragStartEvent, DragEndEvent } from '@dnd-kit/core';
+
+declare const FormBuilder: react.ComponentType<FormBuilderProps>;
+
+declare function useBuilderTheme(): FormBuilderTheme;
+type FormBuilderThemeProviderProps = {
+    theme?: FormBuilderTheme;
+    children: ReactNode;
+};
+declare function FormBuilderThemeProvider({ theme, children }: FormBuilderThemeProviderProps): react.JSX.Element;
+
+/**
+ * Metadata for all question types available in the Pro palette.
+ * Icons are lucide-react component names (imported dynamically via ICON_MAP).
+ *
+ * 44 field types — general-purpose form building.
+ * Telehealth-specific fields (15) are in @squaredr/fieldcraft-pro-telehealth.
+ */
+declare const QUESTION_TYPE_INFO: Record<string, QuestionTypeInfo>;
+/**
+ * Default palette layout with categories (44 Pro field types).
+ * Telehealth fields can be appended via FormBuilder's `palette` prop.
+ */
+declare const DEFAULT_PALETTE: ({
+    category: "text";
+    label: string;
+    types: string[];
+} | {
+    category: "numeric";
+    label: string;
+    types: string[];
+} | {
+    category: "selection";
+    label: string;
+    types: string[];
+} | {
+    category: "datetime";
+    label: string;
+    types: string[];
+} | {
+    category: "media";
+    label: string;
+    types: string[];
+} | {
+    category: "content";
+    label: string;
+    types: string[];
+} | {
+    category: "structural";
+    label: string;
+    types: string[];
+} | {
+    category: "advanced";
+    label: string;
+    types: string[];
+})[];
+
+/**
+ * Generate unique IDs for sections, questions, and options.
+ * Format: {prefix}_{uuid}
+ */
+declare function generateId(prefix: string): string;
+declare function generateSectionId(): string;
+declare function generateQuestionId(): string;
+declare function generateOptionId(): string;
+
+/**
+ * Pure functions for mutating FormEngineSchema.
+ * All functions return a new schema object (immutable updates).
+ */
+
+declare function addSection(schema: FormEngineSchema, section: Section, index: number): FormEngineSchema;
+declare function removeSection(schema: FormEngineSchema, sectionId: string): FormEngineSchema;
+declare function updateSection(schema: FormEngineSchema, sectionId: string, updates: Partial<Section>): FormEngineSchema;
+declare function moveSection(schema: FormEngineSchema, sectionId: string, newIndex: number): FormEngineSchema;
+declare function duplicateSection(schema: FormEngineSchema, sectionId: string): FormEngineSchema;
+declare function addQuestion(schema: FormEngineSchema, sectionId: string, question: Question, index: number): FormEngineSchema;
+declare function removeQuestion(schema: FormEngineSchema, sectionId: string, questionId: string): FormEngineSchema;
+declare function updateQuestion(schema: FormEngineSchema, sectionId: string, questionId: string, updates: Partial<Question>): FormEngineSchema;
+declare function moveQuestion(schema: FormEngineSchema, sectionId: string, questionId: string, targetSectionId: string, newIndex: number): FormEngineSchema;
+declare function duplicateQuestion(schema: FormEngineSchema, sectionId: string, questionId: string): FormEngineSchema;
+declare function addOption(schema: FormEngineSchema, sectionId: string, questionId: string, option: Option, index: number): FormEngineSchema;
+declare function removeOption(schema: FormEngineSchema, sectionId: string, questionId: string, optionIndex: number): FormEngineSchema;
+declare function updateOption(schema: FormEngineSchema, sectionId: string, questionId: string, optionIndex: number, updates: Partial<Option>): FormEngineSchema;
+declare function moveOption(schema: FormEngineSchema, sectionId: string, questionId: string, oldIndex: number, newIndex: number): FormEngineSchema;
+declare function findQuestion(schema: FormEngineSchema, sectionId: string, questionId: string): {
+    section: Section;
+    question: Question;
+    questionIndex: number;
+} | null;
+declare function findSection(schema: FormEngineSchema, sectionId: string): {
+    section: Section;
+    sectionIndex: number;
+} | null;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * Master state hook for the FormBuilder.
+ * Combines schema state, selection, and undo/redo.
+ *
+ * All mutation callbacks use a ref to read the latest schema,
+ * avoiding stale closures when multiple mutations fire in the
+ * same render tick.
+ */
+declare function useBuilderState(initialSchema: FormEngineSchema): {
+    schema: FormEngineSchema;
+    selectedItem: SelectedItem | null;
+    isDirty: boolean;
+    updateSchema: (newSchema: FormEngineSchema) => void;
+    addSection: (section: Section, index: number) => void;
+    removeSection: (sectionId: string) => void;
+    updateSection: (sectionId: string, updates: Partial<Section>) => void;
+    moveSection: (sectionId: string, newIndex: number) => void;
+    duplicateSection: (sectionId: string) => void;
+    addQuestion: (sectionId: string, question: Question, index: number) => void;
+    removeQuestion: (sectionId: string, questionId: string) => void;
+    updateQuestion: (sectionId: string, questionId: string, updates: Partial<Question>) => void;
+    moveQuestion: (sectionId: string, questionId: string, targetSectionId: string, newIndex: number) => void;
+    duplicateQuestion: (sectionId: string, questionId: string) => void;
+    selectQuestion: (sectionId: string, questionId: string) => void;
+    selectSection: (sectionId: string) => void;
+    clearSelection: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+    undo: () => void;
+    redo: () => void;
+    resetSchema: (newSchema: FormEngineSchema) => void;
+    markClean: () => void;
+};
+type BuilderStateHook = ReturnType<typeof useBuilderState>;
+
+type UndoRedoState = {
+    canUndo: boolean;
+    canRedo: boolean;
+    undo: () => void;
+    redo: () => void;
+    push: (schema: FormEngineSchema) => void;
+    clear: () => void;
+};
+/**
+ * Hook for undo/redo functionality.
+ * Maintains a history stack of schemas with max 50 entries.
+ * Uses state for the index so canUndo/canRedo trigger re-renders.
+ * The history array is kept in a ref since its identity doesn't
+ * need to cause re-renders — only the index matters.
+ */
+declare function useUndoRedo(currentSchema: FormEngineSchema, setSchema: (schema: FormEngineSchema) => void): UndoRedoState;
+
+/**
+ * Hook to wire up @dnd-kit drag-and-drop.
+ * Returns DndContext props and handlers.
+ */
+declare function useDragDrop(builderState: BuilderStateHook): {
+    sensors: _dnd_kit_core.SensorDescriptor<_dnd_kit_core.SensorOptions>[];
+    handleDragStart: (event: DragStartEvent) => void;
+    handleDragEnd: (event: DragEndEvent) => void;
+    handleDragCancel: () => void;
+    activeDragItem: DragItem | null;
+};
+
+/**
+ * Default empty schema for new forms.
+ * Contains one section with one question to get started.
+ */
+declare const DEFAULT_SCHEMA: FormEngineSchema;
+
+export { useUndoRedo as A, type BuilderStateHook as B, DEFAULT_PALETTE as D, FormBuilder as F, QUESTION_TYPE_INFO as Q, type UndoRedoState as U, DEFAULT_SCHEMA as a, FormBuilderThemeProvider as b, addOption as c, addQuestion as d, addSection as e, cn as f, duplicateQuestion as g, duplicateSection as h, findQuestion as i, findSection as j, generateId as k, generateOptionId as l, generateQuestionId as m, generateSectionId as n, moveOption as o, moveQuestion as p, moveSection as q, removeOption as r, removeQuestion as s, removeSection as t, updateOption as u, updateQuestion as v, updateSection as w, useBuilderState as x, useBuilderTheme as y, useDragDrop as z };