@squaredr/fieldcraft-pro 0.0.0

package/dist/chunk-MQGR25NG.mjs

@@ -0,0 +1,409 @@
+import { requireLicense } from '@squaredr/fieldcraft-pro-license';
+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/ThemeEditor.tsx
+
+// 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 };