@squaredr/fieldcraft-pro 1.2.0 → 1.4.0

package/dist/chunk-7LQW5QYT.mjs

@@ -1,407 +0,0 @@
-import { requireLicense } from './chunk-VECQKSWS.mjs';
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import { cleanPreset, playfulPreset, clinicalPreset, highContrastPreset, modernPreset, darkPreset, FormEngineRenderer } from '@squaredr/fieldcraft-react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-// src/theme-editor/preview-schema.ts
-var PREVIEW_SCHEMA = {
-  id: "theme-preview",
-  version: "1.0.0",
-  title: "Theme Preview",
-  description: "See how your theme looks on a real form.",
-  sections: [
-    {
-      id: "s1",
-      title: "Contact Information",
-      questions: [
-        {
-          id: "name",
-          type: "short_text",
-          label: "Full Name",
-          required: true,
-          placeholder: "Jane Doe"
-        },
-        {
-          id: "email",
-          type: "email",
-          label: "Email Address",
-          required: true,
-          placeholder: "jane@example.com"
-        },
-        {
-          id: "department",
-          type: "dropdown",
-          label: "Department",
-          options: [
-            { label: "Engineering", value: "engineering" },
-            { label: "Design", value: "design" },
-            { label: "Marketing", value: "marketing" }
-          ]
-        },
-        {
-          id: "rating",
-          type: "rating",
-          label: "How would you rate this experience?",
-          config: { type: "rating", max: 5 }
-        },
-        {
-          id: "notes",
-          type: "long_text",
-          label: "Additional Notes",
-          placeholder: "Any other feedback..."
-        }
-      ]
-    }
-  ],
-  submitAction: { type: "adapter" }
-};
-var PRESETS = {
-  clean: cleanPreset,
-  dark: darkPreset,
-  modern: modernPreset,
-  "high-contrast": highContrastPreset,
-  clinical: clinicalPreset,
-  playful: playfulPreset
-};
-var SECTIONS = [
-  {
-    id: "colors",
-    label: "Colors",
-    themeKey: "colors",
-    fields: [
-      { kind: "color", key: "primary", label: "Primary" },
-      { kind: "color", key: "primaryForeground", label: "Primary Foreground" },
-      { kind: "color", key: "secondary", label: "Secondary" },
-      { kind: "color", key: "secondaryForeground", label: "Secondary Foreground" },
-      { kind: "color", key: "error", label: "Error" },
-      { kind: "color", key: "errorForeground", label: "Error Foreground" },
-      { kind: "color", key: "warning", label: "Warning" },
-      { kind: "color", key: "success", label: "Success" },
-      { kind: "color", key: "surface", label: "Surface" },
-      { kind: "color", key: "background", label: "Background" },
-      { kind: "color", key: "text", label: "Text" },
-      { kind: "color", key: "textMuted", label: "Text Muted" },
-      { kind: "color", key: "textDisabled", label: "Text Disabled" },
-      { kind: "color", key: "border", label: "Border" },
-      { kind: "color", key: "borderFocus", label: "Border Focus" },
-      { kind: "color", key: "inputBackground", label: "Input Background" }
-    ]
-  },
-  {
-    id: "typography",
-    label: "Typography",
-    themeKey: "typography",
-    fields: [
-      { kind: "text", key: "fontFamily", label: "Font Family", placeholder: "Inter, system-ui, sans-serif" },
-      {
-        kind: "select",
-        key: "scale",
-        label: "Scale",
-        options: [
-          { label: "Compact", value: "compact" },
-          { label: "Comfortable", value: "comfortable" },
-          { label: "Spacious", value: "spacious" }
-        ]
-      },
-      { kind: "text", key: "questionSize", label: "Question Size", placeholder: "1.125rem" },
-      { kind: "text", key: "labelSize", label: "Label Size", placeholder: "0.875rem" },
-      { kind: "text", key: "helpTextSize", label: "Help Text Size", placeholder: "0.8125rem" },
-      { kind: "text", key: "bodySize", label: "Body Size", placeholder: "0.9375rem" }
-    ]
-  },
-  {
-    id: "shape",
-    label: "Shape",
-    themeKey: "shape",
-    fields: [
-      {
-        kind: "select",
-        key: "radius",
-        label: "Radius",
-        options: [
-          { label: "None", value: "none" },
-          { label: "Small", value: "sm" },
-          { label: "Medium", value: "md" },
-          { label: "Large", value: "lg" },
-          { label: "Full", value: "full" }
-        ]
-      },
-      { kind: "text", key: "inputRadius", label: "Input Radius", placeholder: "8px" },
-      { kind: "text", key: "buttonRadius", label: "Button Radius", placeholder: "8px" },
-      { kind: "text", key: "cardRadius", label: "Card Radius", placeholder: "12px" }
-    ]
-  },
-  {
-    id: "spacing",
-    label: "Spacing",
-    themeKey: "spacing",
-    fields: [
-      { kind: "number", key: "base", label: "Base", min: 4, max: 32, suffix: "px" },
-      { kind: "number", key: "sectionGap", label: "Section Gap", min: 0, max: 64, suffix: "px" },
-      { kind: "number", key: "fieldGap", label: "Field Gap", min: 0, max: 64, suffix: "px" },
-      { kind: "number", key: "inputPaddingX", label: "Input Padding X", min: 0, max: 32, suffix: "px" },
-      { kind: "number", key: "inputPaddingY", label: "Input Padding Y", min: 0, max: 32, suffix: "px" }
-    ]
-  },
-  {
-    id: "layout",
-    label: "Layout",
-    themeKey: "layout",
-    fields: [
-      { kind: "text", key: "maxWidth", label: "Max Width", placeholder: "640px" },
-      {
-        kind: "select",
-        key: "alignment",
-        label: "Alignment",
-        options: [
-          { label: "Left", value: "left" },
-          { label: "Center", value: "center" }
-        ]
-      },
-      {
-        kind: "select",
-        key: "progressPosition",
-        label: "Progress Position",
-        options: [
-          { label: "Top", value: "top" },
-          { label: "Bottom", value: "bottom" },
-          { label: "None", value: "none" }
-        ]
-      },
-      {
-        kind: "select",
-        key: "sectionLayout",
-        label: "Section Layout",
-        options: [
-          { label: "Card", value: "card" },
-          { label: "Flat", value: "flat" },
-          { label: "Bordered", value: "bordered" }
-        ]
-      }
-    ]
-  }
-];
-function ThemeEditorInner({
-  initialTheme,
-  onChange,
-  onSave,
-  height,
-  width,
-  className,
-  toolbarExtra,
-  showPreview = true
-}) {
-  const [theme, setTheme] = useState(initialTheme ?? cleanPreset);
-  const [activeSection, setActiveSection] = useState("colors");
-  const [presetKey, setPresetKey] = useState("custom");
-  const themeRef = useRef(theme);
-  themeRef.current = theme;
-  useEffect(() => {
-    function handleKeyDown(e) {
-      if ((e.metaKey || e.ctrlKey) && e.key === "s") {
-        e.preventDefault();
-        onSave?.(themeRef.current);
-      }
-    }
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [onSave]);
-  const updateField = useCallback(
-    (section, key, value) => {
-      setTheme((prev) => {
-        const next = {
-          ...prev,
-          [section]: { ...prev[section], [key]: value }
-        };
-        onChange?.(next);
-        return next;
-      });
-      setPresetKey("custom");
-    },
-    [onChange]
-  );
-  const loadPreset = useCallback(
-    (key) => {
-      const preset = PRESETS[key];
-      if (preset) {
-        setTheme(preset);
-        setPresetKey(key);
-        onChange?.(preset);
-      }
-    },
-    [onChange]
-  );
-  const exportJson = useCallback(() => {
-    const blob = new Blob([JSON.stringify(theme, null, 2)], { type: "application/json" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "fieldcraft-theme.json";
-    a.click();
-    URL.revokeObjectURL(url);
-  }, [theme]);
-  const importJson = useCallback(() => {
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = ".json";
-    input.onchange = () => {
-      const file = input.files?.[0];
-      if (!file) return;
-      const reader = new FileReader();
-      reader.onload = () => {
-        try {
-          const parsed = JSON.parse(reader.result);
-          setTheme(parsed);
-          setPresetKey("custom");
-          onChange?.(parsed);
-        } catch {
-        }
-      };
-      reader.readAsText(file);
-    };
-    input.click();
-  }, [onChange]);
-  const currentSection = useMemo(
-    () => SECTIONS.find((s) => s.id === activeSection),
-    [activeSection]
-  );
-  const sectionValues = theme[currentSection.themeKey] ?? {};
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `fcte-root${className ? ` ${className}` : ""}`,
-      style: {
-        height: height ?? "100%",
-        width: width ?? "100%"
-      },
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "fcte-toolbar", children: [
-          /* @__PURE__ */ jsxs("div", { className: "fcte-toolbar__left", children: [
-            /* @__PURE__ */ jsx("span", { className: "fcte-toolbar__title", children: "Theme Editor" }),
-            /* @__PURE__ */ jsxs(
-              "select",
-              {
-                value: presetKey,
-                onChange: (e) => loadPreset(e.target.value),
-                className: "fcte-toolbar__preset",
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "custom", disabled: true, children: "Custom" }),
-                  Object.keys(PRESETS).map((k) => /* @__PURE__ */ jsx("option", { value: k, children: k.charAt(0).toUpperCase() + k.slice(1).replace("-", " ") }, k))
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "fcte-toolbar__right", children: [
-            toolbarExtra,
-            /* @__PURE__ */ jsx("button", { onClick: importJson, className: "fcte-btn fcte-btn--secondary", children: "Import" }),
-            /* @__PURE__ */ jsx("button", { onClick: exportJson, className: "fcte-btn fcte-btn--secondary", children: "Export" }),
-            onSave && /* @__PURE__ */ jsx("button", { onClick: () => onSave(theme), className: "fcte-btn fcte-btn--primary", children: "Save" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "fcte-body", children: [
-          /* @__PURE__ */ jsxs("div", { className: "fcte-editor", children: [
-            /* @__PURE__ */ jsx("div", { className: "fcte-tabs", children: SECTIONS.map((s) => /* @__PURE__ */ jsx(
-              "button",
-              {
-                className: `fcte-tab${activeSection === s.id ? " fcte-tab--active" : ""}`,
-                onClick: () => setActiveSection(s.id),
-                children: s.label
-              },
-              s.id
-            )) }),
-            /* @__PURE__ */ jsx("div", { className: "fcte-fields", children: currentSection.fields.map((field) => {
-              const val = sectionValues[field.key];
-              if (field.kind === "color") {
-                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: [
-                    /* @__PURE__ */ jsx(
-                      "input",
-                      {
-                        type: "color",
-                        value: typeof val === "string" ? val : "#000000",
-                        onChange: (e) => updateField(currentSection.themeKey, field.key, e.target.value),
-                        className: "fcte-field__swatch"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "input",
-                      {
-                        type: "text",
-                        value: typeof val === "string" ? val : "",
-                        onChange: (e) => updateField(currentSection.themeKey, field.key, e.target.value),
-                        className: "fcte-field__text",
-                        spellCheck: false
-                      }
-                    )
-                  ] })
-                ] }, field.key);
-              }
-              if (field.kind === "select") {
-                return /* @__PURE__ */ jsxs("div", { className: "fcte-field", children: [
-                  /* @__PURE__ */ jsx("label", { className: "fcte-field__label", children: field.label }),
-                  /* @__PURE__ */ jsx(
-                    "select",
-                    {
-                      value: typeof val === "string" ? val : "",
-                      onChange: (e) => updateField(currentSection.themeKey, field.key, e.target.value),
-                      className: "fcte-field__select",
-                      children: field.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
-                    }
-                  )
-                ] }, field.key);
-              }
-              if (field.kind === "number") {
-                return /* @__PURE__ */ jsxs("div", { className: "fcte-field", children: [
-                  /* @__PURE__ */ jsx("label", { className: "fcte-field__label", children: field.label }),
-                  /* @__PURE__ */ jsxs("div", { className: "fcte-field__number-row", children: [
-                    /* @__PURE__ */ jsx(
-                      "input",
-                      {
-                        type: "number",
-                        value: typeof val === "number" ? val : 0,
-                        onChange: (e) => updateField(currentSection.themeKey, field.key, Number(e.target.value)),
-                        min: field.min,
-                        max: field.max,
-                        className: "fcte-field__number"
-                      }
-                    ),
-                    field.suffix && /* @__PURE__ */ jsx("span", { className: "fcte-field__suffix", children: field.suffix })
-                  ] })
-                ] }, field.key);
-              }
-              return /* @__PURE__ */ jsxs("div", { className: "fcte-field", children: [
-                /* @__PURE__ */ jsx("label", { className: "fcte-field__label", children: field.label }),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "text",
-                    value: typeof val === "string" ? val : "",
-                    onChange: (e) => updateField(currentSection.themeKey, field.key, e.target.value),
-                    placeholder: field.placeholder,
-                    className: "fcte-field__text",
-                    spellCheck: false
-                  }
-                )
-              ] }, field.key);
-            }) })
-          ] }),
-          showPreview && /* @__PURE__ */ jsx("div", { className: "fcte-preview", children: /* @__PURE__ */ jsx("div", { className: "fcte-preview__inner", children: /* @__PURE__ */ jsx(
-            FormEngineRenderer,
-            {
-              schema: PREVIEW_SCHEMA,
-              theme,
-              onSubmit: () => {
-              }
-            }
-          ) }) })
-        ] })
-      ]
-    }
-  );
-}
-
-// src/theme-editor/ThemeEditor.tsx
-var ThemeEditor = requireLicense(ThemeEditorInner, "ThemeEditor");
-
-export { PREVIEW_SCHEMA, ThemeEditor, ThemeEditorInner };