@dmitryvim/form-builder 0.1.41 → 0.2.0

package/dist/demo.js

@@ -1,861 +0,0 @@
-// Demo Application for Form Builder - Redesigned 3-Column Layout
-// This file contains demo-specific code and should not be part of the core library
-
-// Example schema for demonstration
-const EXAMPLE_SCHEMA = {
-  version: "0.3",
-  title: "Asset Uploader with Slides",
-  actions: [
-    {
-      key: "test-missing",
-      label: "Другая потеря"
-    },
-    {
-      key: "save-draft",
-      label: "Сохранить черновик"
-    }
-  ],
-  elements: [
-    {
-      type: "file",
-      key: "cover",
-      label: "Изображение товара",
-      description:
-        "Source of facts: Use only the description text and visible labels/markings in the photo. Target scene: Show the product in a real-life usage context, highlighting its purpose and benefits. Product integrity: Do not change geometry, proportions, color, texture, hardware/stitching, or functional elements.",
-      required: true,
-      accept: {
-        extensions: ["png", "jpg", "gif"],
-        mime: ["image/png", "image/jpeg", "image/gif"],
-      },
-      maxSizeMB: 10,
-      actions: [
-        { key: "retry", label: "А давай ещё разок" },
-        { key: "enhance", label: "Улучшить качество" },
-        { key: "crop", label: "Обрезать изображение" },
-      ],
-    },
-    {
-      type: "file",
-      key: "assets",
-      label: "Другие изображения",
-      description:
-        "Additional images that provide context, show different angles, or demonstrate product usage. These will be used to enhance the infographic composition.",
-      required: false,
-      multiple: true,
-      minCount: 0,
-      maxCount: 10,
-      accept: {
-        extensions: ["png", "jpg", "gif"],
-        mime: ["image/png", "image/jpeg", "image/gif"],
-      },
-      maxSizeMB: 5,
-    },
-    {
-      type: "text",
-      key: "title",
-      label: "Название товара",
-      placeholder: "Введите название товара",
-      description:
-        "The exact product name as it should appear on the infographic. Use the official product name without marketing terms or decorative elements.",
-      required: true,
-      multiple: true,
-      minCount: 1,
-      maxCount: 4,
-      minLength: 1,
-      maxLength: 100,
-      pattern: "^[A-Za-zА-Яа-я0-9 _*-]+$",
-      default: "",
-    },
-    {
-      type: "textarea",
-      key: "description",
-      label: "Описание товара",
-      placeholder: "Введите описание товара",
-      description:
-        "Detailed product description focusing on key features, benefits, and usage scenarios. This text will be used to create compelling infographic content.",
-      required: false,
-      minLength: 0,
-      maxLength: 500,
-      pattern: "^[A-Za-zА-Яа-я0-9 ,.!?()_-]*$",
-      default: "",
-    },
-    {
-      type: "select",
-      key: "theme",
-      label: "Тема",
-      placeholder: "Выберите тему",
-      description:
-        "Visual theme that determines color scheme, typography, and overall aesthetic of the generated infographic.",
-      required: true,
-      options: [
-        { value: "", label: "Выберите тему" },
-        { value: "modern-minimal", label: "Современный минимализм" },
-        { value: "warm-vintage", label: "Теплый винтаж" },
-        { value: "tech-blue", label: "Технологичный синий" },
-        { value: "nature-green", label: "Природный зеленый" },
-        { value: "luxury-gold", label: "Роскошный золотой" },
-      ],
-      default: "",
-    },
-    {
-      type: "number",
-      key: "opacity",
-      label: "Прозрачность",
-      placeholder: "0.50",
-      description:
-        "Transparency level for background elements in the infographic. Values between 0 (fully transparent) and 1 (fully opaque).",
-      required: true,
-      min: 0,
-      max: 1,
-      decimals: 2,
-      step: 0.01,
-      default: 0.5,
-    },
-    {
-      type: "text",
-      key: "tags",
-      label: "Теги товара",
-      description: "Добавьте ключевые теги для лучшего описания товара",
-      placeholder: "Введите тег",
-      required: false,
-      multiple: true,
-      minCount: 1,
-      maxCount: 5,
-      minLength: 2,
-      maxLength: 20,
-      default: "popular",
-    },
-    {
-      type: "textarea",
-      key: "features",
-      label: "Особенности товара",
-      description: "Опишите ключевые особенности и преимущества товара",
-      placeholder: "Опишите особенность...",
-      required: false,
-      multiple: true,
-      minCount: 2,
-      maxCount: 4,
-      minLength: 10,
-      maxLength: 200,
-      rows: 3,
-    },
-    {
-      type: "number",
-      key: "dimensions",
-      label: "Размеры (см)",
-      description:
-        "Укажите размеры товара в сантиметрах: длина, ширина, высота",
-      placeholder: "0",
-      required: false,
-      multiple: true,
-      minCount: 2,
-      maxCount: 3,
-      min: 0,
-      max: 500,
-      step: 0.1,
-      decimals: 1,
-    },
-    {
-      type: "select",
-      key: "colors",
-      label: "Доступные цвета",
-      description: "Выберите доступные цветовые варианты товара",
-      required: false,
-      multiple: true,
-      minCount: 1,
-      maxCount: 3,
-      options: [
-        { value: "white", label: "Белый" },
-        { value: "black", label: "Черный" },
-        { value: "red", label: "Красный" },
-        { value: "blue", label: "Синий" },
-        { value: "green", label: "Зеленый" },
-        { value: "gray", label: "Серый" },
-      ],
-      default: "white",
-    },
-    {
-      type: "file",
-      key: "video",
-      label: "Video Content",
-      description:
-        "Optional video content to enhance the infographic. Supports MP4, WebM, and MOV formats for dynamic product demonstrations.",
-      required: false,
-      accept: {
-        extensions: ["mp4", "webm", "mov"],
-        mime: ["video/mp4", "video/webm", "video/quicktime"],
-      },
-      maxSizeMB: 50,
-    },
-    {
-      type: "container",
-      key: "slides",
-      label: "Слайды",
-      description:
-        "Additional slides to showcase different aspects of your product. Each slide can have its own main image and decorative elements to create a comprehensive infographic presentation.",
-      multiple: true,
-      minCount: 1,
-      maxCount: 5,
-      elements: [
-        {
-          type: "text",
-          key: "title",
-          label: "Заголовок слайда",
-          required: true,
-          minLength: 1,
-          maxLength: 80,
-          pattern: "^[A-Za-zА-Яа-я0-9 _*-]+$",
-          default: "",
-        },
-        {
-          type: "textarea",
-          key: "body",
-          label: "Текст слайда",
-          required: true,
-          minLength: 1,
-          maxLength: 1000,
-          pattern: "^[A-Za-zА-Яа-я0-9 ,.!?()_*-]*$",
-          default: "",
-        },
-      ],
-    },
-    {
-      type: "text",
-      key: "session_id",
-      label: "Session ID",
-      description: "Hidden session identifier for tracking purposes",
-      hidden: true,
-      default: `session_${Math.random().toString(36).substr(2, 9)}`,
-    },
-  ],
-};
-
-// In-Memory File Storage System
-class InMemoryFileStorage {
-  constructor() {
-    this.files = new Map(); // resourceId -> { blob, metadata }
-    this.resourceCounter = 0;
-  }
-
-  // Generate unique resource ID
-  generateResourceId() {
-    return `res_${Date.now()}_${++this.resourceCounter}`;
-  }
-
-  // Store file in memory and return resource ID
-  async storeFile(file) {
-    const resourceId = this.generateResourceId();
-
-    // Create blob from file
-    const blob = new Blob([file], { type: file.type });
-
-    // Store file data
-    this.files.set(resourceId, {
-      blob,
-      metadata: {
-        name: file.name,
-        type: file.type,
-        size: file.size,
-        uploadedAt: new Date().toISOString(),
-      },
-    });
-
-    return resourceId;
-  }
-
-  // Retrieve file blob by resource ID
-  getFile(resourceId) {
-    const fileData = this.files.get(resourceId);
-    return fileData ? fileData.blob : null;
-  }
-
-  // Get file metadata
-  getMetadata(resourceId) {
-    const fileData = this.files.get(resourceId);
-    return fileData ? fileData.metadata : null;
-  }
-
-  // Generate thumbnail URL for preview
-  getThumbnailUrl(resourceId) {
-    const blob = this.getFile(resourceId);
-    if (!blob) return null;
-
-    // For images and videos, return object URL for preview
-    if (blob.type.startsWith("image/") || blob.type.startsWith("video/")) {
-      return URL.createObjectURL(blob);
-    }
-
-    // For other files, return null (no thumbnail)
-    return null;
-  }
-
-  // Download file from memory
-  downloadFile(resourceId, fileName) {
-    const blob = this.getFile(resourceId);
-    const metadata = this.getMetadata(resourceId);
-
-    if (!blob) {
-      console.error("File not found:", resourceId);
-      return;
-    }
-
-    // Use provided fileName or fall back to original name
-    const downloadName = fileName || metadata.name;
-
-    // Create download link
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = downloadName;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-
-    // Clean up object URL
-    setTimeout(() => URL.revokeObjectURL(url), 100);
-  }
-
-  // Clear all stored files
-  clear() {
-    // Revoke any object URLs that might be in use
-    this.files.forEach((fileData, resourceId) => {
-      const thumbnailUrl = this.getThumbnailUrl(resourceId);
-      if (thumbnailUrl) {
-        URL.revokeObjectURL(thumbnailUrl);
-      }
-    });
-
-    this.files.clear();
-    this.resourceCounter = 0;
-  }
-}
-
-// Initialize file storage
-const fileStorage = new InMemoryFileStorage();
-
-
-// DOM element references
-const el = {
-  schemaInput: document.getElementById("schemaInput"),
-  schemaErrors: document.getElementById("schemaErrors"),
-  applySchemaBtn: document.getElementById("applySchemaBtn"),
-  resetSchemaBtn: document.getElementById("resetSchemaBtn"),
-  formatSchemaBtn: document.getElementById("formatSchemaBtn"),
-  readOnlyToggle: document.getElementById("readOnlyToggle"),
-  formContainer: document.getElementById("formContainer"),
-  formErrors: document.getElementById("formErrors"),
-  submitBtn: document.getElementById("submitBtn"),
-  clearFormBtn: document.getElementById("clearFormBtn"),
-  dataTextarea: document.getElementById("dataTextarea"),
-  prefillBtn: document.getElementById("prefillBtn"),
-  copyDataBtn: document.getElementById("copyDataBtn"),
-  downloadDataBtn: document.getElementById("downloadDataBtn"),
-  dataErrors: document.getElementById("dataErrors"),
-  actionsTextarea: document.getElementById("actionsTextarea"),
-  formatActionsBtn: document.getElementById("formatActionsBtn"),
-  clearActionsBtn: document.getElementById("clearActionsBtn"),
-  actionsErrors: document.getElementById("actionsErrors"),
-};
-
-// Utility functions
-function pretty(obj) {
-  return FormBuilder.pretty(obj);
-}
-
-function showError(element, message) {
-  if (element) {
-    element.textContent = message;
-    element.classList.remove("hidden");
-  }
-}
-
-function clearError(element) {
-  if (element) {
-    element.textContent = "";
-    element.classList.add("hidden");
-  }
-}
-
-function downloadFile(filename, content) {
-  const blob = new Blob([content], { type: "text/plain" });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = filename;
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-  URL.revokeObjectURL(url);
-}
-
-// Parse and validate external actions
-function parseActions(actionsText) {
-  if (!actionsText || actionsText.trim() === "") {
-    return [];
-  }
-
-  try {
-    const actions = JSON.parse(actionsText);
-
-    if (!Array.isArray(actions)) {
-      throw new Error("Actions must be an array");
-    }
-
-    // Validate each action
-    for (let i = 0; i < actions.length; i++) {
-      const action = actions[i];
-      if (!action || typeof action !== "object") {
-        throw new Error(`Action at index ${i} must be an object`);
-      }
-      if (!action.key || typeof action.key !== "string") {
-        throw new Error(
-          `Action at index ${i} missing valid 'key' property`,
-        );
-      }
-      if (!action.value || typeof action.value !== "string") {
-        throw new Error(`Action at index ${i} missing valid 'value' property`);
-      }
-      // related_field is optional - if not provided, action is form-level
-      if (action.related_field && typeof action.related_field !== "string") {
-        throw new Error(`Action at index ${i} has invalid 'related_field' property type`);
-      }
-      // Label is optional - will be resolved from schema or key
-      if (action.label && typeof action.label !== "string") {
-        throw new Error(`Action at index ${i} has invalid 'label' property type`);
-      }
-    }
-
-    return actions;
-  } catch (error) {
-    throw new Error(`Actions JSON error: ${error.message}`);
-  }
-}
-
-// Configure FormBuilder with in-memory handlers
-function setupFormBuilder() {
-  // Set form container
-  FormBuilder.setFormRoot(el.formContainer);
-
-  // Upload handler - store file in memory and return resource ID
-  FormBuilder.setUploadHandler(async (file) => {
-    try {
-      console.log("Uploading file to memory:", file.name);
-      const resourceId = await fileStorage.storeFile(file);
-      console.log("File stored with resource ID:", resourceId);
-      return resourceId;
-    } catch (error) {
-      console.error("Upload failed:", error);
-      throw error;
-    }
-  });
-
-  // Download handler - download file from memory
-  FormBuilder.setDownloadHandler((resourceId, fileName) => {
-    console.log("Downloading file from memory:", resourceId, fileName);
-    fileStorage.downloadFile(resourceId, fileName);
-  });
-
-  // Thumbnail handler - get thumbnail URL for preview
-  FormBuilder.setThumbnailHandler((resourceId) => {
-    const thumbnailUrl = fileStorage.getThumbnailUrl(resourceId);
-    console.log("Getting thumbnail for:", resourceId, thumbnailUrl);
-    return thumbnailUrl;
-  });
-
-  // Action handler - display message when action button is clicked
-  // New system: value, key, related_field parameters
-  FormBuilder.setActionHandler((value, key, relatedField) => {
-    console.log("Action clicked:", {
-      value,
-      key,
-      relatedField,
-      type: relatedField ? "field-level" : "form-level",
-    });
-
-    // Show message to user (compatible with all environments)
-    if (typeof window !== "undefined" && window.alert) {
-      if (relatedField) {
-        window.alert(
-          `Field Action: "${key}" clicked for field "${relatedField}" with value: ${value}`,
-        );
-      } else {
-        window.alert(`Form Action: "${key}" clicked with value: ${value}`);
-      }
-    } else {
-      console.log(
-        `Demo action: ${key} clicked with value: ${value}`,
-        relatedField ? ` for field: ${relatedField}` : " (form-level)",
-      );
-    }
-  });
-
-  console.log(
-    "FormBuilder configured with in-memory file handlers and action handler",
-  );
-}
-
-// Schema management functions
-function applyCurrentSchema() {
-  clearError(el.schemaErrors);
-  clearError(el.formErrors);
-  clearError(el.actionsErrors);
-
-  try {
-    const schema = JSON.parse(el.schemaInput.value);
-    const errors = FormBuilder.validateSchema(schema);
-
-    if (errors.length > 0) {
-      showError(
-        el.schemaErrors,
-        `Schema validation errors: ${errors.join(", ")}`,
-      );
-      return false;
-    }
-
-    // Parse external actions
-    let externalActions = [];
-    try {
-      externalActions = parseActions(el.actionsTextarea.value);
-    } catch (error) {
-      showError(el.actionsErrors, error.message);
-      return false;
-    }
-
-
-    // Set mode based on toggle
-    const isReadOnly = el.readOnlyToggle.checked;
-    FormBuilder.setMode(isReadOnly ? "readonly" : "edit");
-
-    // Get current data to preserve during re-render
-    let currentData = {};
-    try {
-      const formResult = FormBuilder.getFormData();
-      if (formResult.valid) {
-        currentData = formResult.data;
-      }
-    } catch {
-      // Ignore errors when getting current data
-    }
-
-    // Render form with current data and external actions
-    FormBuilder.renderForm(schema, currentData, externalActions);
-
-    console.log(`Form rendered in ${isReadOnly ? "readonly" : "edit"} mode`);
-    console.log(`External actions:`, externalActions);
-
-    return true;
-  } catch (e) {
-    showError(el.schemaErrors, `JSON parse error: ${e.message}`);
-    return false;
-  }
-}
-
-// Event handlers
-el.applySchemaBtn.addEventListener("click", () => {
-  applyCurrentSchema();
-});
-
-el.resetSchemaBtn.addEventListener("click", () => {
-  el.schemaInput.value = pretty(EXAMPLE_SCHEMA);
-  clearError(el.schemaErrors);
-  clearError(el.formErrors);
-  clearError(el.dataErrors);
-  clearError(el.actionsErrors);
-  el.dataTextarea.value = "";
-  el.actionsTextarea.value = "";
-
-  // Clear file storage
-  fileStorage.clear();
-
-  // Apply schema
-  applyCurrentSchema();
-});
-
-el.formatSchemaBtn.addEventListener("click", () => {
-  try {
-    const parsed = JSON.parse(el.schemaInput.value);
-    el.schemaInput.value = pretty(parsed);
-    clearError(el.schemaErrors);
-  } catch (e) {
-    showError(el.schemaErrors, `Format: JSON parse error: ${e.message}`);
-  }
-});
-
-// Read-only toggle handler
-el.readOnlyToggle.addEventListener("change", () => {
-  applyCurrentSchema(); // Re-render form with new mode
-});
-
-// Form interaction handlers
-el.submitBtn.addEventListener("click", () => {
-  clearError(el.formErrors);
-  clearError(el.dataErrors);
-
-  const result = FormBuilder.getFormData();
-
-  if (!result.valid) {
-    showError(el.formErrors, `Validation errors: ${result.errors.join(", ")}`);
-    return;
-  }
-
-  // For demo purposes, we can show either raw data or enhanced data
-  // Let's provide both options - you can choose which one to use
-
-  // Option 1: Show raw data with just resource IDs (what you might want)
-  const rawData = JSON.parse(JSON.stringify(result.data));
-
-  // Option 2: Show enhanced data with file metadata (for demo visualization)
-  const enhancedData = JSON.parse(JSON.stringify(result.data));
-
-  function replaceResourceIds(obj) {
-    for (const key in obj) {
-      if (typeof obj[key] === "string" && obj[key].startsWith("res_")) {
-        const metadata = fileStorage.getMetadata(obj[key]);
-        if (metadata) {
-          obj[key] = {
-            resourceId: obj[key],
-            name: metadata.name,
-            type: metadata.type,
-            size: metadata.size,
-            uploadedAt: metadata.uploadedAt,
-          };
-        }
-      } else if (Array.isArray(obj[key])) {
-        obj[key].forEach((item, index) => {
-          if (typeof item === "string" && item.startsWith("res_")) {
-            const metadata = fileStorage.getMetadata(item);
-            if (metadata) {
-              obj[key][index] = {
-                resourceId: item,
-                name: metadata.name,
-                type: metadata.type,
-                size: metadata.size,
-                uploadedAt: metadata.uploadedAt,
-              };
-            }
-          } else if (typeof item === "object" && item !== null) {
-            replaceResourceIds(item);
-          }
-        });
-      } else if (typeof obj[key] === "object" && obj[key] !== null) {
-        replaceResourceIds(obj[key]);
-      }
-    }
-  }
-
-  replaceResourceIds(enhancedData);
-
-  // Show raw data (just resource IDs) - change to enhancedData for metadata
-  el.dataTextarea.value = pretty(rawData);
-  console.log("Form submitted successfully");
-  console.log("Raw data:", rawData);
-  console.log("Enhanced data:", enhancedData);
-});
-
-el.clearFormBtn.addEventListener("click", () => {
-  FormBuilder.clearForm();
-  clearError(el.formErrors);
-  console.log("Form values cleared");
-});
-
-// Data management handlers
-el.prefillBtn.addEventListener("click", () => {
-  clearError(el.dataErrors);
-  clearError(el.formErrors);
-
-  try {
-    const prefillData = JSON.parse(el.dataTextarea.value || "{}");
-    const currentSchema = JSON.parse(el.schemaInput.value);
-
-    // Parse external actions
-    let externalActions = [];
-    try {
-      externalActions = parseActions(el.actionsTextarea.value);
-    } catch (error) {
-      showError(el.actionsErrors, error.message);
-      return;
-    }
-
-    // Convert enhanced data back to raw format for prefilling
-    const processedData = JSON.parse(JSON.stringify(prefillData));
-
-    function extractResourceIds(obj) {
-      for (const key in obj) {
-        // Handle enhanced file objects - extract just the resourceId
-        if (
-          obj[key] &&
-          typeof obj[key] === "object" &&
-          obj[key].resourceId &&
-          typeof obj[key].resourceId === "string" &&
-          obj[key].resourceId.startsWith("res_")
-        ) {
-          obj[key] = obj[key].resourceId;
-        } else if (Array.isArray(obj[key])) {
-          obj[key].forEach((item, index) => {
-            if (
-              item &&
-              typeof item === "object" &&
-              item.resourceId &&
-              typeof item.resourceId === "string" &&
-              item.resourceId.startsWith("res_")
-            ) {
-              obj[key][index] = item.resourceId;
-            } else if (typeof item === "object" && item !== null) {
-              extractResourceIds(item);
-            }
-          });
-        } else if (typeof obj[key] === "object" && obj[key] !== null) {
-          extractResourceIds(obj[key]);
-        }
-      }
-    }
-
-    extractResourceIds(processedData);
-
-    // Set mode based on toggle
-    const isReadOnly = el.readOnlyToggle.checked;
-    FormBuilder.setMode(isReadOnly ? "readonly" : "edit");
-
-    FormBuilder.renderForm(currentSchema, processedData, externalActions);
-    console.log("Form prefilled with data");
-    console.log("Processed prefill data:", processedData);
-    console.log("External actions:", externalActions);
-  } catch (e) {
-    showError(el.dataErrors, `JSON parse error: ${e.message}`);
-    console.error("Prefill error:", e);
-  }
-});
-
-el.copyDataBtn.addEventListener("click", async () => {
-  try {
-    await navigator.clipboard.writeText(el.dataTextarea.value || "");
-    el.copyDataBtn.textContent = "Copied!";
-    setTimeout(() => {
-      el.copyDataBtn.textContent = "Copy JSON";
-    }, 1000);
-    console.log("Data copied to clipboard");
-  } catch (e) {
-    console.warn("Copy failed:", e);
-  }
-});
-
-el.downloadDataBtn.addEventListener("click", () => {
-  downloadFile("form-data.json", el.dataTextarea.value || "{}");
-  console.log("Data downloaded");
-});
-
-// Actions management handlers
-el.formatActionsBtn.addEventListener("click", () => {
-  try {
-    const actions = parseActions(el.actionsTextarea.value);
-    el.actionsTextarea.value = pretty(actions);
-    clearError(el.actionsErrors);
-    console.log("Actions formatted");
-  } catch (e) {
-    showError(el.actionsErrors, e.message);
-    console.error("Format actions error:", e);
-  }
-});
-
-el.clearActionsBtn.addEventListener("click", () => {
-  el.actionsTextarea.value = "";
-  clearError(el.actionsErrors);
-  // Re-apply schema to remove external actions from the form
-  applyCurrentSchema();
-  console.log("Actions cleared");
-});
-
-// Example external actions for demonstration
-const EXAMPLE_ACTIONS = [
-  // Field-level actions using predefined labels from schema
-  {
-    related_field: "cover",
-    key: "retry",
-    value: "regenerate_cover_image", // Specific action value for handler
-  },
-  {
-    related_field: "cover",
-    key: "enhance",
-    value: "enhance_cover_quality", // Specific action value for handler
-  },
-  {
-    related_field: "cover",
-    key: "crop",
-    value: "auto_crop_cover", // Specific action value for handler
-  },
-  // Field-level actions with custom labels
-  {
-    related_field: "title[0]",
-    key: "generate",
-    value: "ai_generate_title",
-    label: "🤖 Generate Title", // Custom label overrides schema
-  },
-  {
-    related_field: "description",
-    key: "improve",
-    value: "ai_improve_description", // Key will be used as fallback label
-  },
-  {
-    related_field: "slides[0].title",
-    key: "optimize",
-    value: "ai_optimize_slide_title",
-    label: "🎯 Optimize Slide Title", // Custom label
-  },
-  // Form-level actions (no related_field)
-  {
-    key: "save-draft",
-    value: "save_form_draft",
-    label: "💾 Save Draft",
-  },
-  // Action with missing related field (should appear at bottom of form)
-  {
-    related_field: "non_existent_field",
-    key: "test-missing",
-    value: "test_missing_field_action",
-    label: "🔍 Test Missing Field Action",
-  },
-  {
-    key: "preview",
-    value: "preview_infographic",
-    label: "👁️ Preview",
-  },
-  {
-    key: "export",
-    value: "export_json_data",
-    label: "📄 Export JSON",
-  },
-];
-
-// Initialize demo application
-function initDemo() {
-  // Set up FormBuilder
-  setupFormBuilder();
-
-  // Initialize with example schema
-  el.schemaInput.value = pretty(EXAMPLE_SCHEMA);
-
-  // Initialize with example actions
-  el.actionsTextarea.value = pretty(EXAMPLE_ACTIONS);
-
-  // Apply initial schema
-  applyCurrentSchema();
-
-  console.log("Demo initialized successfully");
-}
-
-// Start the demo when the page loads
-document.addEventListener("DOMContentLoaded", () => {
-  // Wait for FormBuilder to be available
-  if (typeof FormBuilder !== "undefined") {
-    initDemo();
-  } else {
-    // Fallback: wait a bit for scripts to load
-    setTimeout(() => {
-      if (typeof FormBuilder !== "undefined") {
-        initDemo();
-      } else {
-        console.error("FormBuilder not found!");
-      }
-    }, 100);
-  }
-});