@dmitryvim/form-builder 0.1.25 → 0.1.28

package/dist/demo.js

@@ -1,4 +1,4 @@
-// Demo Application for Form Builder
+// 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
@@ -92,6 +92,19 @@ const EXAMPLE_SCHEMA = {
       step: 0.01,
       default: 0.5,
     },
+    {
+      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: "group",
       key: "slides",
@@ -125,37 +138,129 @@ const EXAMPLE_SCHEMA = {
   ],
 };
 
-// DOM element references for demo app
+// 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"),
-  prettySchemaBtn: document.getElementById("prettySchemaBtn"),
-  downloadSchemaBtn: document.getElementById("downloadSchemaBtn"),
+  formatSchemaBtn: document.getElementById("formatSchemaBtn"),
+  readOnlyToggle: document.getElementById("readOnlyToggle"),
   formContainer: document.getElementById("formContainer"),
   formErrors: document.getElementById("formErrors"),
   submitBtn: document.getElementById("submitBtn"),
-  saveDraftBtn: document.getElementById("saveDraftBtn"),
   clearFormBtn: document.getElementById("clearFormBtn"),
-  outputJson: document.getElementById("outputJson"),
-  copyOutputBtn: document.getElementById("copyOutputBtn"),
-  downloadOutputBtn: document.getElementById("downloadOutputBtn"),
-  shareUrlBtn: document.getElementById("shareUrlBtn"),
-  prefillInput: document.getElementById("prefillInput"),
-  loadPrefillBtn: document.getElementById("loadPrefillBtn"),
-  copyTemplateBtn: document.getElementById("copyTemplateBtn"),
-  prefillErrors: document.getElementById("prefillErrors"),
-  urlInfo: document.getElementById("urlInfo"),
-  // Readonly demo elements
-  readonlySchemaInput: document.getElementById("readonlySchemaInput"),
-  applyReadonlyBtn: document.getElementById("applyReadonlyBtn"),
-  clearReadonlyBtn: document.getElementById("clearReadonlyBtn"),
-  readonlyErrors: document.getElementById("readonlyErrors"),
-  readonlyDemoContainer: document.getElementById("readonlyDemoContainer"),
+  dataTextarea: document.getElementById("dataTextarea"),
+  prefillBtn: document.getElementById("prefillBtn"),
+  copyDataBtn: document.getElementById("copyDataBtn"),
+  downloadDataBtn: document.getElementById("downloadDataBtn"),
+  dataErrors: document.getElementById("dataErrors"),
 };
 
-// Utility functions (using FormBuilder.pretty)
+// Utility functions
 function pretty(obj) {
   return FormBuilder.pretty(obj);
 }
@@ -180,13 +285,51 @@ function downloadFile(filename, content) {
   const a = document.createElement("a");
   a.href = url;
   a.download = filename;
+  document.body.appendChild(a);
   a.click();
+  document.body.removeChild(a);
   URL.revokeObjectURL(url);
 }
 
-// Demo event handlers
-el.applySchemaBtn.addEventListener("click", () => {
+// 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;
+  });
+
+  console.log("FormBuilder configured with in-memory file handlers");
+}
+
+// Schema management functions
+function applyCurrentSchema() {
   clearError(el.schemaErrors);
+  clearError(el.formErrors);
+
   try {
     const schema = JSON.parse(el.schemaInput.value);
     const errors = FormBuilder.validateSchema(schema);
@@ -194,160 +337,119 @@ el.applySchemaBtn.addEventListener("click", () => {
     if (errors.length > 0) {
       showError(
         el.schemaErrors,
-        "Schema validation errors: " + errors.join(", "),
+        `Schema validation errors: ${errors.join(", ")}`,
       );
-      return;
+      return false;
     }
 
-    FormBuilder.renderForm(schema, {});
-    el.outputJson.value = "";
-    clearError(el.formErrors);
-  } catch (e) {
-    showError(el.schemaErrors, "JSON parse error: " + e.message);
-  }
-});
+    // Set mode based on toggle
+    const isReadOnly = el.readOnlyToggle.checked;
+    FormBuilder.setMode(isReadOnly ? "readonly" : "edit");
 
-el.resetSchemaBtn.addEventListener("click", () => {
-  el.schemaInput.value = pretty(EXAMPLE_SCHEMA);
-  clearError(el.schemaErrors);
-  FormBuilder.renderForm(EXAMPLE_SCHEMA, {});
-  el.outputJson.value = "";
-  el.prefillInput.value = "";
-  clearError(el.prefillErrors);
-});
+    // 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
+    }
 
-el.prettySchemaBtn.addEventListener("click", () => {
-  try {
-    const parsed = JSON.parse(el.schemaInput.value);
-    el.schemaInput.value = pretty(parsed);
+    // Render form with current data
+    FormBuilder.renderForm(schema, currentData);
+
+    console.log(`Form rendered in ${isReadOnly ? "readonly" : "edit"} mode`);
+    return true;
   } catch (e) {
-    showError(el.schemaErrors, "Prettify: JSON parse error: " + e.message);
+    showError(el.schemaErrors, `JSON parse error: ${e.message}`);
+    return false;
   }
-});
+}
 
-el.downloadSchemaBtn.addEventListener("click", () => {
-  downloadFile("schema.json", el.schemaInput.value || pretty(EXAMPLE_SCHEMA));
+// Event handlers
+el.applySchemaBtn.addEventListener("click", () => {
+  applyCurrentSchema();
 });
 
-el.clearFormBtn.addEventListener("click", () => {
-  FormBuilder.clearForm();
+el.resetSchemaBtn.addEventListener("click", () => {
+  el.schemaInput.value = pretty(EXAMPLE_SCHEMA);
+  clearError(el.schemaErrors);
   clearError(el.formErrors);
-});
+  clearError(el.dataErrors);
+  el.dataTextarea.value = "";
 
-el.copyOutputBtn.addEventListener("click", async () => {
-  try {
-    await navigator.clipboard.writeText(el.outputJson.value || "");
-    el.copyOutputBtn.textContent = "Copied!";
-    setTimeout(() => {
-      el.copyOutputBtn.textContent = "Copy JSON";
-    }, 1000);
-  } catch (e) {
-    console.warn("Copy failed:", e);
-  }
-});
+  // Clear file storage
+  fileStorage.clear();
 
-el.downloadOutputBtn.addEventListener("click", () => {
-  downloadFile("form-data.json", el.outputJson.value || "{}");
+  // Apply schema
+  applyCurrentSchema();
 });
 
-el.shareUrlBtn.addEventListener("click", () => {
+el.formatSchemaBtn.addEventListener("click", () => {
   try {
-    const schema = JSON.parse(el.schemaInput.value);
-    const schemaBase64 = btoa(JSON.stringify(schema));
-    const url = `${window.location.origin}${window.location.pathname}?schema=${schemaBase64}`;
-    navigator.clipboard.writeText(url);
-    el.shareUrlBtn.textContent = "URL Copied!";
-    setTimeout(() => {
-      el.shareUrlBtn.textContent = "Share URL";
-    }, 2000);
-  } catch (e) {
-    alert("Please apply a valid schema first");
-  }
-});
-
-el.loadPrefillBtn.addEventListener("click", () => {
-  clearError(el.prefillErrors);
-  try {
-    const pre = JSON.parse(el.prefillInput.value || "{}");
-    const currentSchema = JSON.parse(el.schemaInput.value);
-    FormBuilder.renderForm(currentSchema, pre);
-    el.outputJson.value = "";
-    clearError(el.formErrors);
+    const parsed = JSON.parse(el.schemaInput.value);
+    el.schemaInput.value = pretty(parsed);
+    clearError(el.schemaErrors);
   } catch (e) {
-    showError(el.prefillErrors, "JSON parse error: " + e.message);
+    showError(el.schemaErrors, `Format: JSON parse error: ${e.message}`);
   }
 });
 
-el.copyTemplateBtn.addEventListener("click", () => {
-  try {
-    const schema = JSON.parse(el.schemaInput.value);
-    const template = {};
-
-    function processElements(elements, target) {
-      elements.forEach((element) => {
-        if (element.type === "group" && element.repeat) {
-          target[element.key] = [{}];
-          if (element.elements) {
-            processElements(element.elements, target[element.key][0]);
-          }
-        } else if (element.type === "group") {
-          target[element.key] = {};
-          if (element.elements) {
-            processElements(element.elements, target[element.key]);
-          }
-        } else {
-          target[element.key] = element.default || null;
-        }
-      });
-    }
-
-    processElements(schema.elements, template);
-    el.prefillInput.value = pretty(template);
-  } catch (e) {
-    showError(el.prefillErrors, "Schema parse error: " + e.message);
-  }
+// Read-only toggle handler
+el.readOnlyToggle.addEventListener("change", () => {
+  applyCurrentSchema(); // Re-render form with new mode
 });
 
-// Form submission handlers
-function submitFormEnhanced() {
+// 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(", "));
+    showError(el.formErrors, `Validation errors: ${result.errors.join(", ")}`);
     return;
   }
 
-  // Convert resource IDs to file info for demo
-  const processedData = JSON.parse(JSON.stringify(result.data));
+  // 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 meta = FormBuilder.state.resourceIndex.get(obj[key]);
-        if (meta) {
+        const metadata = fileStorage.getMetadata(obj[key]);
+        if (metadata) {
           obj[key] = {
             resourceId: obj[key],
-            name: meta.name,
-            type: meta.type,
-            size: meta.size,
+            name: metadata.name,
+            type: metadata.type,
+            size: metadata.size,
+            uploadedAt: metadata.uploadedAt,
           };
         }
       } else if (Array.isArray(obj[key])) {
-        obj[key].forEach((item) => {
+        obj[key].forEach((item, index) => {
           if (typeof item === "string" && item.startsWith("res_")) {
-            const index = obj[key].indexOf(item);
-            const meta = FormBuilder.state.resourceIndex.get(item);
-            if (meta) {
+            const metadata = fileStorage.getMetadata(item);
+            if (metadata) {
               obj[key][index] = {
                 resourceId: item,
-                name: meta.name,
-                type: meta.type,
-                size: meta.size,
+                name: metadata.name,
+                type: metadata.type,
+                size: metadata.size,
+                uploadedAt: metadata.uploadedAt,
               };
             }
-          } else if (typeof item === "object") {
+          } else if (typeof item === "object" && item !== null) {
             replaceResourceIds(item);
           }
         });
@@ -357,218 +459,109 @@ function submitFormEnhanced() {
     }
   }
 
-  replaceResourceIds(processedData);
+  replaceResourceIds(enhancedData);
 
-  el.outputJson.value = pretty(processedData);
-}
+  // 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.submitBtn.addEventListener("click", submitFormEnhanced);
-el.saveDraftBtn.addEventListener("click", () => {
-  const result = FormBuilder.getFormData();
-  el.outputJson.value = pretty(result.data);
+el.clearFormBtn.addEventListener("click", () => {
+  FormBuilder.clearForm();
+  clearError(el.formErrors);
+  console.log("Form values cleared");
 });
 
-// Readonly demo handlers
-el.applyReadonlyBtn.addEventListener("click", () => {
-  clearError(el.readonlyErrors);
+// Data management handlers
+el.prefillBtn.addEventListener("click", () => {
+  clearError(el.dataErrors);
+  clearError(el.formErrors);
+
   try {
-    const schema = JSON.parse(el.readonlySchemaInput.value);
-    const errors = FormBuilder.validateSchema(schema);
+    const prefillData = JSON.parse(el.dataTextarea.value || "{}");
+    const currentSchema = JSON.parse(el.schemaInput.value);
 
-    if (errors.length > 0) {
-      showError(
-        el.readonlyErrors,
-        "Schema validation errors: " + errors.join(", "),
-      );
-      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]);
+        }
+      }
     }
 
-    // Clear container
-    el.readonlyDemoContainer.innerHTML = "";
+    extractResourceIds(processedData);
 
-    // Store original form settings
-    const originalFormRoot = FormBuilder.state.formRoot;
-    const originalMode = FormBuilder.state.config.readonly;
+    // Set mode based on toggle
+    const isReadOnly = el.readOnlyToggle.checked;
+    FormBuilder.setMode(isReadOnly ? "readonly" : "edit");
 
-    try {
-      // Temporarily use readonly container
-      FormBuilder.setFormRoot(el.readonlyDemoContainer);
-      FormBuilder.setMode("readonly");
-      FormBuilder.renderForm(schema, DEFAULT_READONLY_DATA);
-    } finally {
-      // Restore original settings
-      FormBuilder.setFormRoot(originalFormRoot);
-      FormBuilder.state.config.readonly = originalMode;
-    }
+    FormBuilder.renderForm(currentSchema, processedData);
+    console.log("Form prefilled with data");
+    console.log("Processed prefill data:", processedData);
   } catch (e) {
-    showError(el.readonlyErrors, "JSON parse error: " + e.message);
+    showError(el.dataErrors, `JSON parse error: ${e.message}`);
+    console.error("Prefill error:", e);
   }
 });
 
-el.clearReadonlyBtn.addEventListener("click", () => {
-  el.readonlyDemoContainer.innerHTML =
-    '<div class="text-center text-gray-500 py-8">Apply a schema to see readonly mode</div>';
-  clearError(el.readonlyErrors);
-});
-
-// URL schema loading
-function loadSchemaFromURL() {
-  const urlParams = new URLSearchParams(window.location.search);
-  const schemaParam = urlParams.get("schema");
-
-  if (schemaParam) {
-    try {
-      const schema = JSON.parse(atob(schemaParam));
-      el.schemaInput.value = pretty(schema);
-      FormBuilder.renderForm(schema, {});
-      el.urlInfo.classList.remove("hidden");
-    } catch (e) {
-      console.warn("Failed to load schema from URL:", e);
-    }
-  }
-}
-
-// Read-only demo functions
-function downloadDemoFile(filePath, fileName) {
-  console.log("downloadDemoFile called with:", filePath, fileName);
-
-  // Check if we're running on a local dev server
-  const isLocalDev =
-    window.location.protocol === "http:" &&
-    window.location.hostname === "localhost";
-
-  if (isLocalDev) {
-    console.log("Running on local dev server, using fetch method");
-    // Force download by fetching the file and creating a blob
-    fetch(filePath)
-      .then((response) => {
-        console.log("Fetch response:", response.ok, response.status);
-        return response.blob();
-      })
-      .then((blob) => {
-        console.log("Creating download link for blob:", blob.size, "bytes");
-        const link = document.createElement("a");
-        link.href = URL.createObjectURL(blob);
-        link.download = fileName;
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        URL.revokeObjectURL(link.href);
-        console.log("Download completed successfully");
-      })
-      .catch((error) => {
-        console.error("Fetch download failed:", error);
-        simpleLinkDownload(filePath, fileName);
-      });
-  } else {
-    console.log("Not on local dev server, using simple link method");
-    simpleLinkDownload(filePath, fileName);
+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);
   }
-}
-
-function simpleLinkDownload(filePath, fileName) {
-  console.log("Using simple link download:", filePath, fileName);
-  const link = document.createElement("a");
-  link.href = filePath;
-  link.download = fileName;
-  link.style.display = "none";
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-  console.log("Simple link download triggered");
-}
-
-// Configure download handler for readonly demo
-function setupReadonlyDemo() {
-  // Set up download handler that works with local demo files
-  FormBuilder.setDownloadHandler((resourceId, fileName) => {
-    const demoFileMap = {
-      demo_infographic: "images/infographic_draft.jpg",
-      demo_video: "images/final_video.mp4",
-    };
-
-    const filePath = demoFileMap[resourceId] || `images/${fileName}`;
-    downloadDemoFile(filePath, fileName);
-  });
-
-  // Set up thumbnail handler for demo (returns URL directly, not Promise)
-  FormBuilder.setThumbnailHandler((resourceId) => {
-    const demoFileMap = {
-      demo_infographic: "images/infographic_draft.jpg",
-      demo_video: "images/final_video.mp4",
-    };
-
-    return demoFileMap[resourceId] || null;
-  });
-
-  // Pre-populate demo resource metadata
-  FormBuilder.state.resourceIndex.set("demo_infographic", {
-    name: "infographic_result.jpg",
-    type: "image/jpeg",
-    size: 150000,
-    file: null,
-  });
-
-  FormBuilder.state.resourceIndex.set("demo_video", {
-    name: "final_video.mp4",
-    type: "video/mp4",
-    size: 2500000,
-    file: null,
-  });
-}
-
-// Default readonly schema for demo
-const DEFAULT_READONLY_SCHEMA = {
-  version: "0.3",
-  title: "Результаты работы",
-  elements: [
-    {
-      type: "file",
-      key: "result_image",
-      label: "Изображение результата",
-      description: "Готовая инфографика на основе загруженных данных",
-    },
-    {
-      type: "file",
-      key: "result_video",
-      label: "Видео результат",
-      description: "Финальное видео презентации",
-    },
-  ],
-};
-
-// Default readonly data
-const DEFAULT_READONLY_DATA = {
-  result_image: "demo_infographic",
-  result_video: "demo_video",
-};
+});
 
-function renderReadonlyDemo() {
-  // Set default schema in textarea
-  const textarea = document.getElementById("readonlySchemaInput");
-  if (textarea && !textarea.value.trim()) {
-    textarea.value = pretty(DEFAULT_READONLY_SCHEMA);
-  }
-}
+el.downloadDataBtn.addEventListener("click", () => {
+  downloadFile("form-data.json", el.dataTextarea.value || "{}");
+  console.log("Data downloaded");
+});
 
 // Initialize demo application
 function initDemo() {
-  // Set up the form builder for main form
-  FormBuilder.setFormRoot(el.formContainer);
-
-  // Set up handlers for readonly demo
-  setupReadonlyDemo();
+  // Set up FormBuilder
+  setupFormBuilder();
 
   // Initialize with example schema
   el.schemaInput.value = pretty(EXAMPLE_SCHEMA);
-  FormBuilder.setMode("edit"); // Ensure main form is in edit mode
-  FormBuilder.renderForm(EXAMPLE_SCHEMA, {});
 
-  // Load schema from URL if present
-  loadSchemaFromURL();
+  // Apply initial schema
+  applyCurrentSchema();
 
-  // Initialize read-only demo
-  setTimeout(renderReadonlyDemo, 500);
+  console.log("Demo initialized successfully");
 }
 
 // Start the demo when the page loads