@squaredr/fieldcraft-pro 1.6.4 → 1.8.0

package/dist/theme-editor/index.mjs

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

package/dist/types-bFHsZT1n.d.mts

@@ -0,0 +1,217 @@
+import { ReactNode } from 'react';
+import { FormEngineSchema, QuestionType, FormEngineTheme, FormEngine, FormResponse, Section, Question, Option } from '@squaredr/fieldcraft-core';
+import { FieldRegistry } from '@squaredr/fieldcraft-react';
+
+/**
+ * FormBuilder theme configuration.
+ * All values are CSS color strings (hex, oklch, hsl, etc.).
+ * Set these to customize the builder's appearance.
+ */
+type FormBuilderTheme = {
+    /** Main background of the entire builder */
+    background?: string;
+    /** Primary text color */
+    foreground?: string;
+    /** Card/panel background */
+    card?: string;
+    /** Primary accent color (buttons, selection, focus rings) */
+    primary?: string;
+    /** Text color on primary backgrounds */
+    primaryForeground?: string;
+    /** Secondary surfaces */
+    secondary?: string;
+    /** Text on secondary surfaces */
+    secondaryForeground?: string;
+    /** Muted background (disabled, subtle areas) */
+    muted?: string;
+    /** Muted text (labels, placeholders) */
+    mutedForeground?: string;
+    /** Hover/accent background */
+    accent?: string;
+    /** Text on accent background */
+    accentForeground?: string;
+    /** Destructive action color */
+    destructive?: string;
+    /** Text on destructive backgrounds */
+    destructiveForeground?: string;
+    /** Default border color */
+    border?: string;
+    /** Input border color */
+    input?: string;
+    /** Focus ring color */
+    ring?: string;
+    /** Border radius base (e.g. "6px", "0.375rem") */
+    radius?: string;
+    /** Surface color for panels/sidebars */
+    surface?: string;
+    /** Surface hover state */
+    surfaceHover?: string;
+    /** Main canvas background */
+    canvas?: string;
+    /** Panel background (palette, property panel) */
+    panel?: string;
+    /** Strong border color (for emphasis) */
+    borderStrong?: string;
+    /** Dim text color (secondary labels) */
+    textDim?: string;
+};
+
+type FormBuilderProps = {
+    /** Initial schema to load. If not provided, uses a default empty schema */
+    initialSchema?: FormEngineSchema;
+    /** URL to fetch schema JSON from on mount. Overrides initialSchema when provided and fetch succeeds. */
+    schemaUrl?: string;
+    /** Callback when schema changes */
+    onChange?: (schema: FormEngineSchema) => void;
+    /** Callback when user clicks "Save" */
+    onSave?: (schema: FormEngineSchema) => void;
+    /** Height of the builder container */
+    height?: string | number;
+    /** Theme customization — overrides CSS variables for all builder components */
+    theme?: FormBuilderTheme;
+    /** Additional CSS class name on the root element */
+    className?: string;
+    /** Extra content rendered in the toolbar, after the Save button */
+    toolbarExtra?: ReactNode;
+    /** Additional question type metadata — merged with built-in defaults (e.g. telehealth fields) */
+    questionTypes?: Record<string, QuestionTypeInfo>;
+    /** Additional palette categories — appended to built-in palette (e.g. telehealth categories) */
+    palette?: PaletteCategory[];
+    /** Configuration for the built-in preview mode renderer */
+    preview?: FormBuilderPreviewProps;
+    /** Templates to show in the template gallery */
+    templates?: FormBuilderTemplate[];
+};
+type FormBuilderPreviewProps = {
+    /** Theme passed to FormEngineRenderer in preview mode */
+    theme?: FormEngineTheme;
+    /** Custom field components for preview (e.g. telehealth fields) */
+    components?: FieldRegistry;
+    /** Callback when FormEngine is ready in preview mode */
+    onReady?: (engine: FormEngine) => void;
+    /** Callback when a field value changes in preview mode */
+    onFieldChange?: (fieldId: string, value: unknown) => void;
+    /** Callback when the preview form is submitted */
+    onSubmit?: (response: FormResponse) => void | Promise<void>;
+};
+type FormBuilderTemplate = {
+    meta: {
+        id: string;
+        name: string;
+        description: string;
+        category: string;
+        fieldCount: number;
+        sectionCount: number;
+        tags?: string[];
+    };
+    schema: FormEngineSchema;
+};
+type BuilderState = {
+    schema: FormEngineSchema;
+    selectedItem: SelectedItem | null;
+    isDirty: boolean;
+};
+type SelectedItem = {
+    type: "question";
+    sectionId: string;
+    questionId: string;
+} | {
+    type: "section";
+    sectionId: string;
+};
+type DragItem = {
+    type: "palette-item";
+    questionType: QuestionType;
+} | {
+    type: "question";
+    sectionId: string;
+    questionId: string;
+    questionIndex: number;
+} | {
+    type: "section";
+    sectionId: string;
+    sectionIndex: number;
+};
+type DropTarget = {
+    type: "section";
+    sectionId: string;
+    index: number;
+} | {
+    type: "canvas";
+    index: number;
+};
+type QuestionTypeCategory = "text" | "numeric" | "selection" | "datetime" | "media" | "advanced" | "structural" | "content" | (string & {});
+type PaletteCategory = {
+    category: string;
+    label: string;
+    types: string[];
+};
+type QuestionTypeInfo = {
+    type: QuestionType;
+    label: string;
+    category: QuestionTypeCategory;
+    icon: string;
+    description: string;
+    defaultConfig?: Record<string, unknown>;
+    requiresOptions?: boolean;
+};
+type PropertyPanelTab = "basic" | "validation" | "logic" | "advanced" | "options";
+type MutationAction = {
+    type: "add-section";
+    section: Section;
+    index: number;
+} | {
+    type: "remove-section";
+    sectionId: string;
+} | {
+    type: "update-section";
+    sectionId: string;
+    updates: Partial<Section>;
+} | {
+    type: "move-section";
+    sectionId: string;
+    newIndex: number;
+} | {
+    type: "add-question";
+    sectionId: string;
+    question: Question;
+    index: number;
+} | {
+    type: "remove-question";
+    sectionId: string;
+    questionId: string;
+} | {
+    type: "update-question";
+    sectionId: string;
+    questionId: string;
+    updates: Partial<Question>;
+} | {
+    type: "move-question";
+    sectionId: string;
+    questionId: string;
+    targetSectionId: string;
+    newIndex: number;
+} | {
+    type: "duplicate-question";
+    sectionId: string;
+    questionId: string;
+} | {
+    type: "add-option";
+    sectionId: string;
+    questionId: string;
+    option: Option;
+    index: number;
+} | {
+    type: "remove-option";
+    sectionId: string;
+    questionId: string;
+    optionIndex: number;
+} | {
+    type: "update-option";
+    sectionId: string;
+    questionId: string;
+    optionIndex: number;
+    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 };

package/dist/types-bFHsZT1n.d.ts

@@ -0,0 +1,217 @@
+import { ReactNode } from 'react';
+import { FormEngineSchema, QuestionType, FormEngineTheme, FormEngine, FormResponse, Section, Question, Option } from '@squaredr/fieldcraft-core';
+import { FieldRegistry } from '@squaredr/fieldcraft-react';
+
+/**
+ * FormBuilder theme configuration.
+ * All values are CSS color strings (hex, oklch, hsl, etc.).
+ * Set these to customize the builder's appearance.
+ */
+type FormBuilderTheme = {
+    /** Main background of the entire builder */
+    background?: string;
+    /** Primary text color */
+    foreground?: string;
+    /** Card/panel background */
+    card?: string;
+    /** Primary accent color (buttons, selection, focus rings) */
+    primary?: string;
+    /** Text color on primary backgrounds */
+    primaryForeground?: string;
+    /** Secondary surfaces */
+    secondary?: string;
+    /** Text on secondary surfaces */
+    secondaryForeground?: string;
+    /** Muted background (disabled, subtle areas) */
+    muted?: string;
+    /** Muted text (labels, placeholders) */
+    mutedForeground?: string;
+    /** Hover/accent background */
+    accent?: string;
+    /** Text on accent background */
+    accentForeground?: string;
+    /** Destructive action color */
+    destructive?: string;
+    /** Text on destructive backgrounds */
+    destructiveForeground?: string;
+    /** Default border color */
+    border?: string;
+    /** Input border color */
+    input?: string;
+    /** Focus ring color */
+    ring?: string;
+    /** Border radius base (e.g. "6px", "0.375rem") */
+    radius?: string;
+    /** Surface color for panels/sidebars */
+    surface?: string;
+    /** Surface hover state */
+    surfaceHover?: string;
+    /** Main canvas background */
+    canvas?: string;
+    /** Panel background (palette, property panel) */
+    panel?: string;
+    /** Strong border color (for emphasis) */
+    borderStrong?: string;
+    /** Dim text color (secondary labels) */
+    textDim?: string;
+};
+
+type FormBuilderProps = {
+    /** Initial schema to load. If not provided, uses a default empty schema */
+    initialSchema?: FormEngineSchema;
+    /** URL to fetch schema JSON from on mount. Overrides initialSchema when provided and fetch succeeds. */
+    schemaUrl?: string;
+    /** Callback when schema changes */
+    onChange?: (schema: FormEngineSchema) => void;
+    /** Callback when user clicks "Save" */
+    onSave?: (schema: FormEngineSchema) => void;
+    /** Height of the builder container */
+    height?: string | number;
+    /** Theme customization — overrides CSS variables for all builder components */
+    theme?: FormBuilderTheme;
+    /** Additional CSS class name on the root element */
+    className?: string;
+    /** Extra content rendered in the toolbar, after the Save button */
+    toolbarExtra?: ReactNode;
+    /** Additional question type metadata — merged with built-in defaults (e.g. telehealth fields) */
+    questionTypes?: Record<string, QuestionTypeInfo>;
+    /** Additional palette categories — appended to built-in palette (e.g. telehealth categories) */
+    palette?: PaletteCategory[];
+    /** Configuration for the built-in preview mode renderer */
+    preview?: FormBuilderPreviewProps;
+    /** Templates to show in the template gallery */
+    templates?: FormBuilderTemplate[];
+};
+type FormBuilderPreviewProps = {
+    /** Theme passed to FormEngineRenderer in preview mode */
+    theme?: FormEngineTheme;
+    /** Custom field components for preview (e.g. telehealth fields) */
+    components?: FieldRegistry;
+    /** Callback when FormEngine is ready in preview mode */
+    onReady?: (engine: FormEngine) => void;
+    /** Callback when a field value changes in preview mode */
+    onFieldChange?: (fieldId: string, value: unknown) => void;
+    /** Callback when the preview form is submitted */
+    onSubmit?: (response: FormResponse) => void | Promise<void>;
+};
+type FormBuilderTemplate = {
+    meta: {
+        id: string;
+        name: string;
+        description: string;
+        category: string;
+        fieldCount: number;
+        sectionCount: number;
+        tags?: string[];
+    };
+    schema: FormEngineSchema;
+};
+type BuilderState = {
+    schema: FormEngineSchema;
+    selectedItem: SelectedItem | null;
+    isDirty: boolean;
+};
+type SelectedItem = {
+    type: "question";
+    sectionId: string;
+    questionId: string;
+} | {
+    type: "section";
+    sectionId: string;
+};
+type DragItem = {
+    type: "palette-item";
+    questionType: QuestionType;
+} | {
+    type: "question";
+    sectionId: string;
+    questionId: string;
+    questionIndex: number;
+} | {
+    type: "section";
+    sectionId: string;
+    sectionIndex: number;
+};
+type DropTarget = {
+    type: "section";
+    sectionId: string;
+    index: number;
+} | {
+    type: "canvas";
+    index: number;
+};
+type QuestionTypeCategory = "text" | "numeric" | "selection" | "datetime" | "media" | "advanced" | "structural" | "content" | (string & {});
+type PaletteCategory = {
+    category: string;
+    label: string;
+    types: string[];
+};
+type QuestionTypeInfo = {
+    type: QuestionType;
+    label: string;
+    category: QuestionTypeCategory;
+    icon: string;
+    description: string;
+    defaultConfig?: Record<string, unknown>;
+    requiresOptions?: boolean;
+};
+type PropertyPanelTab = "basic" | "validation" | "logic" | "advanced" | "options";
+type MutationAction = {
+    type: "add-section";
+    section: Section;
+    index: number;
+} | {
+    type: "remove-section";
+    sectionId: string;
+} | {
+    type: "update-section";
+    sectionId: string;
+    updates: Partial<Section>;
+} | {
+    type: "move-section";
+    sectionId: string;
+    newIndex: number;
+} | {
+    type: "add-question";
+    sectionId: string;
+    question: Question;
+    index: number;
+} | {
+    type: "remove-question";
+    sectionId: string;
+    questionId: string;
+} | {
+    type: "update-question";
+    sectionId: string;
+    questionId: string;
+    updates: Partial<Question>;
+} | {
+    type: "move-question";
+    sectionId: string;
+    questionId: string;
+    targetSectionId: string;
+    newIndex: number;
+} | {
+    type: "duplicate-question";
+    sectionId: string;
+    questionId: string;
+} | {
+    type: "add-option";
+    sectionId: string;
+    questionId: string;
+    option: Option;
+    index: number;
+} | {
+    type: "remove-option";
+    sectionId: string;
+    questionId: string;
+    optionIndex: number;
+} | {
+    type: "update-option";
+    sectionId: string;
+    questionId: string;
+    optionIndex: number;
+    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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squaredr/fieldcraft-pro",
-  "version": "1.6.4",
+  "version": "1.8.0",
   "description": "Pro components for FieldCraft — visual drag-and-drop Form Builder, Response Viewer, and Theme Editor for React",
   "keywords": [
     "fieldcraft",
@@ -40,6 +40,11 @@
       "import": "./dist/theme-editor/index.mjs",
       "require": "./dist/theme-editor/index.js"
     },
+    "./templates": {
+      "types": "./dist/templates/index.d.ts",
+      "import": "./dist/templates/index.mjs",
+      "require": "./dist/templates/index.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./theme-editor/styles.css": "./theme-editor/styles.css"
   },
@@ -58,45 +63,52 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@monaco-editor/react": "^4.6.0",
+    "@radix-ui/react-select": "^2.3.7",
     "@xyflow/react": "^12.11.3",
     "clsx": "^2.1.1",
     "lucide-react": "^1.16.0",
     "tailwind-merge": "^3.6.0"
   },
   "peerDependencies": {
-    "@squaredr/fieldcraft-core": "^1.6.0",
-    "@squaredr/fieldcraft-react": "^1.6.0",
+    "@squaredr/fieldcraft-core": "^1.8.1",
+    "@squaredr/fieldcraft-react": "^1.9.0",
+    "@squaredr/paykit": "^0.10.0",
     "@squaredr/paykit-react": "^1.0.0",
-    "@squaredr/paykit-stripe": "^1.0.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
   "peerDependenciesMeta": {
-    "@squaredr/paykit-react": {
+    "@squaredr/paykit": {
       "optional": true
     },
-    "@squaredr/paykit-stripe": {
+    "@squaredr/paykit-react": {
       "optional": true
     }
   },
   "devDependencies": {
-    "@squaredr/fieldcraft-core": "^1.6.0",
-    "@squaredr/fieldcraft-react": "^1.6.0",
+    "@squaredr/fieldcraft-core": "^1.8.1",
+    "@squaredr/fieldcraft-react": "^1.9.0",
+    "@squaredr/paykit": "^0.10.1",
+    "@squaredr/paykit-react": "^1.1.0",
     "@tailwindcss/cli": "^4.3.0",
+    "@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",
+    "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",
-    "@squaredr/fieldcraft-pro-license": "1.2.0",
-    "@squaredr/fieldcraft-pro-tsconfig": "0.0.1"
+    "@squaredr/fieldcraft-pro-tsconfig": "0.0.1",
+    "@squaredr/fieldcraft-pro-license": "1.4.0"
   },
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "SquaredR",
-  "homepage": "https://squaredr.tech/products/fieldcraft/admin-pro",
+  "homepage": "https://fieldcraft.squaredr.tech/pro",
   "repository": {
     "type": "git",
     "url": "https://github.com/SquaredR98/fieldcraft-pro.git",