@dmitryvim/form-builder 0.1.4 → 0.1.5

package/dist/index.html

@@ -4,120 +4,104 @@
     <meta charset="utf-8" />
     <title>Form Builder - JSON Schema to Dynamic Forms</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'media',
+            theme: {
+                extend: {
+                    fontFamily: {
+                        mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace']
+                    }
+                }
+            }
+        }
+    </script>
     <style>
-        :root {
-            --bg: #f8fafc; --fg: #1e293b; --muted: #64748b; --accent: #3b82f6;
-            --bad: #ef4444; --good: #10b981; --card: #ffffff; --border: #e2e8f0;
-            --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
-            --sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
+        /* Custom styles for form validation states */
+        .invalid { 
+            @apply border-red-500 !important; 
         }
-        @media (prefers-color-scheme: dark) {
-            :root {
-                --bg: #0f1115; --fg: #e7e7e7; --muted: #9aa0a6; --accent: #7dd3fc;
-                --bad: #ff6b6b; --good: #34d399; --card: #151922; --border: #2a2f3a;
-            }
+        .field-hint { 
+            @apply text-gray-500 text-xs mt-1; 
+        }
+        .error-message { 
+            @apply text-red-500 text-xs mt-1; 
+        }
+        .file-preview-container {
+            @apply mb-3 p-3 border border-dashed border-gray-300 rounded-lg min-h-[60px] flex items-center justify-center bg-blue-50;
+        }
+        .dark .file-preview-container {
+            @apply bg-blue-900/20 border-gray-600;
         }
-        * { box-sizing: border-box; }
-        html, body { height: 100%; background: var(--bg); color: var(--fg); margin: 0; font-family: var(--sans); }
-        h1 { margin: 16px; font-size: 24px; font-weight: 600; color: var(--fg); text-align: center; }
-        .subtitle { text-align: center; color: var(--muted); margin: -8px 16px 24px; font-size: 14px; }
-        .grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(300px, auto); gap: 12px; padding: 12px; }
-        @media (min-width: 1400px) { .grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }
-        @media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
-        .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; min-height: 320px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
-        .card h2 { margin: 0 0 12px 0; font-size: 18px; color: var(--fg); font-weight: 600; }
-        .toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
-        .btn { background: var(--card); color: var(--fg); border: 1px solid var(--border); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s; }
-        .btn:hover { border-color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
-        .btn.good { background: var(--good); color: white; border-color: var(--good); }
-        .btn.good:hover { filter: brightness(0.9); }
-        .btn.bad { background: var(--bad); color: white; border-color: var(--bad); }
-        .btn.bad:hover { filter: brightness(0.9); }
-        .btn.ghost { background: transparent; }
-        .btn:disabled { opacity: 0.5; cursor: not-allowed; }
-        .textarea, .json, input[type="text"], textarea, select, input[type="number"], input[type="file"] {
-            width: 100%; border: 1px solid var(--border); background: var(--card); color: var(--fg); border-radius: 8px; padding: 10px; font-family: var(--mono); font-size: 13px; transition: border-color 0.2s;
+        .resource-pill {
+            @apply inline-flex items-center gap-1.5 bg-blue-50 border border-gray-300 rounded-full px-2.5 py-1 font-mono text-xs m-0.5;
+        }
+        .dark .resource-pill {
+            @apply bg-blue-900/20 border-gray-600;
         }
-        .json, .textarea { flex: 1; resize: vertical; min-height: 220px; }
-        input[type="text"], input[type="number"], select { font-family: var(--sans); }
-        input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
-        .hint { color: var(--muted); font-size: 12px; margin: 6px 0 0; }
-        .errors { color: var(--bad); font-size: 12px; white-space: pre-wrap; margin-top: 8px; background: rgba(239, 68, 68, 0.1); padding: 8px; border-radius: 6px; border-left: 3px solid var(--bad); }
-        .field { margin-bottom: 16px; }
-        .label { font-size: 14px; margin-bottom: 8px; color: var(--fg); display: flex; align-items: center; gap: 8px; font-weight: 500; }
-        .label .req { color: var(--bad); font-weight: 600; }
-        .invalid { border-color: var(--bad) !important; }
-        .msg { font-size: 12px; color: var(--bad); margin-top: 6px; }
-        .ok { color: var(--good); }
-        .muted { color: var(--muted); }
-        .pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(59, 130, 246, 0.1); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; font-family: var(--mono); font-size: 12px; margin: 2px; }
-        .list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
-        .groupHeader { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
-        .groupItem { border: 1px dashed var(--border); border-radius: 10px; padding: 12px; margin-bottom: 12px; background: rgba(59, 130, 246, 0.02); }
-        .footer { margin-top: auto; font-size: 11px; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--border); }
-        .url-params { background: rgba(59, 130, 246, 0.1); border: 1px solid var(--accent); border-radius: 8px; padding: 12px; margin: 16px; font-size: 13px; }
-        .url-params code { background: rgba(0,0,0,0.1); padding: 2px 4px; border-radius: 4px; font-family: var(--mono); }
     </style>
 </head>
-<body>
-    <h1>🚀 Form Builder</h1>
-    <div class="subtitle">JSON Schema → Dynamic Forms → Structured Output</div>
+<body class="min-h-screen bg-slate-50 text-slate-800 dark:bg-slate-900 dark:text-slate-200">
+    <h1 class="text-center text-2xl font-semibold m-4">🚀 Form Builder</h1>
+    <div class="text-center text-slate-600 dark:text-slate-400 text-sm mx-4 -mt-2 mb-6">JSON Schema → Dynamic Forms → Structured Output</div>
     
-    <div class="url-params" id="urlInfo" style="display: none;">
-        <strong>💡 URL Parameters:</strong> Add <code>?schema=BASE64_ENCODED_SCHEMA</code> to auto-load a schema.
+    <div class="hidden bg-blue-50 dark:bg-blue-900/20 border border-blue-300 dark:border-blue-600 rounded-lg p-3 mx-4 mb-4 text-sm" id="urlInfo">
+        <strong>💡 URL Parameters:</strong> Add <code class="bg-black/10 dark:bg-white/10 px-1 py-0.5 rounded font-mono">?schema=BASE64_ENCODED_SCHEMA</code> to auto-load a schema.
     </div>
 
-    <div class="grid">
-        <section class="card" id="schemaCard">
-            <h2>1️⃣ JSON Schema</h2>
-            <div class="toolbar">
-                <button class="btn good" id="applySchemaBtn">Apply Schema</button>
-                <button class="btn ghost" id="resetSchemaBtn">Reset to Example</button>
-                <button class="btn ghost" id="prettySchemaBtn">Format JSON</button>
-                <button class="btn ghost" id="downloadSchemaBtn">Download</button>
+    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-3 p-3 auto-rows-[minmax(300px,auto)]">
+        <section class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-4 flex flex-col min-h-[320px] shadow-sm" id="schemaCard">
+            <h2 class="text-lg font-semibold mb-3 text-slate-800 dark:text-slate-200">1️⃣ JSON Schema</h2>
+            <div class="flex flex-wrap gap-2 mb-3">
+                <button class="bg-emerald-600 hover:bg-emerald-700 text-white border-0 px-4 py-2 rounded-lg cursor-pointer text-xs font-medium transition-all" id="applySchemaBtn">Apply Schema</button>
+                <button class="bg-transparent hover:border-blue-500 text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-600 px-4 py-2 rounded-lg cursor-pointer text-xs font-medium transition-all hover:shadow-sm" id="resetSchemaBtn">Reset to Example</button>
+                <button class="bg-transparent hover:border-blue-500 text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-600 px-4 py-2 rounded-lg cursor-pointer text-xs font-medium transition-all hover:shadow-sm" id="prettySchemaBtn">Format JSON</button>
+                <button class="bg-transparent hover:border-blue-500 text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-600 px-4 py-2 rounded-lg cursor-pointer text-xs font-medium transition-all hover:shadow-sm" id="downloadSchemaBtn">Download</button>
             </div>
-            <textarea id="schemaInput" class="json" spellcheck="false" placeholder="Paste your JSON schema here..."></textarea>
-            <div id="schemaErrors" class="errors" style="display: none;"></div>
-            <div class="footer">
+            <textarea id="schemaInput" class="flex-1 w-full border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-200 rounded-lg p-2.5 font-mono text-xs resize-y min-h-[220px] focus:outline-none focus:border-blue-500" spellcheck="false" placeholder="Paste your JSON schema here..."></textarea>
+            <div id="schemaErrors" class="hidden text-red-500 text-xs whitespace-pre-wrap mt-2 bg-red-50 dark:bg-red-900/20 p-2 rounded-md border-l-4 border-red-500"></div>
+            <div class="mt-auto text-xs text-slate-500 dark:text-slate-400 pt-3 border-t border-slate-200 dark:border-slate-700">
                 Schema defines form structure. Supports: text, textarea, number, select, file, files, and nested groups.
             </div>
         </section>
 
-        <section class="card" id="formCard">
-            <h2>2️⃣ Generated Form</h2>
-            <div id="formContainer" style="max-height: 400px; overflow-y: auto;">
-                <div style="text-align: center; color: var(--muted); padding: 40px;">
+        <section class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-4 flex flex-col min-h-[320px] shadow-sm" id="formCard">
+            <h2 class="text-lg font-semibold mb-3 text-slate-800 dark:text-slate-200">2️⃣ Generated Form</h2>
+            <div id="formContainer" class="max-h-[400px] overflow-y-auto">
+                <div class="text-center text-slate-500 dark:text-slate-400 py-10">
                     Apply a schema to generate the form
                 </div>
             </div>
-            <div class="toolbar">
-                <button class="btn good" id="submitBtn">Submit Form</button>
-                <button class="btn ghost" id="clearFormBtn">Clear Values</button>
+            <div class="flex flex-wrap gap-2 mb-3">
+                <button class="bg-emerald-600 hover:bg-emerald-700 text-white border-0 px-4 py-2 rounded-lg cursor-pointer text-xs font-medium transition-all" id="submitBtn">Submit Form</button>
+                <button class="bg-slate-600 hover:bg-slate-700 text-white border-0 px-4 py-2 rounded-lg cursor-pointer text-xs font-medium transition-all" id="saveDraftBtn">Save Draft</button>
+                <button class="bg-transparent hover:border-blue-500 text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-600 px-4 py-2 rounded-lg cursor-pointer text-xs font-medium transition-all hover:shadow-sm" id="clearFormBtn">Clear Values</button>
             </div>
-            <div id="formErrors" class="errors" style="display: none;"></div>
-            <div class="footer">Interactive form generated from your schema. Files are simulated with resource IDs.</div>
+            <div id="formErrors" class="hidden text-red-500 text-xs whitespace-pre-wrap mt-2 bg-red-50 dark:bg-red-900/20 p-2 rounded-md border-l-4 border-red-500"></div>
+            <div class="mt-auto text-xs text-slate-500 dark:text-slate-400 pt-3 border-t border-slate-200 dark:border-slate-700">Interactive form generated from your schema. Files are simulated with resource IDs.</div>
         </section>
 
-        <section class="card" id="outputCard">
-            <h2>3️⃣ Form Output</h2>
-            <div class="toolbar">
-                <button class="btn" id="copyOutputBtn">Copy JSON</button>
-                <button class="btn ghost" id="downloadOutputBtn">Download</button>
-                <button class="btn ghost" id="shareUrlBtn">Share URL</button>
+        <section class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-4 flex flex-col min-h-[320px] shadow-sm" id="outputCard">
+            <h2 class="text-lg font-semibold mb-3 text-slate-800 dark:text-slate-200">3️⃣ Form Output</h2>
+            <div class="flex flex-wrap gap-2 mb-3">
+                <button class="bg-slate-600 hover:bg-slate-700 text-white border-0 px-4 py-2 rounded-lg cursor-pointer text-xs font-medium transition-all" id="copyOutputBtn">Copy JSON</button>
+                <button class="bg-transparent hover:border-blue-500 text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-600 px-4 py-2 rounded-lg cursor-pointer text-xs font-medium transition-all hover:shadow-sm" id="downloadOutputBtn">Download</button>
+                <button class="bg-transparent hover:border-blue-500 text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-600 px-4 py-2 rounded-lg cursor-pointer text-xs font-medium transition-all hover:shadow-sm" id="shareUrlBtn">Share URL</button>
             </div>
-            <textarea id="outputJson" class="json" readonly placeholder="Submit the form to see the output JSON here..."></textarea>
-            <div class="footer">Structured output matching your schema. Ready for API consumption or processing.</div>
+            <textarea id="outputJson" class="flex-1 w-full border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-200 rounded-lg p-2.5 font-mono text-xs resize-y min-h-[220px] focus:outline-none focus:border-blue-500" readonly placeholder="Submit the form to see the output JSON here..."></textarea>
+            <div class="mt-auto text-xs text-slate-500 dark:text-slate-400 pt-3 border-t border-slate-200 dark:border-slate-700">Structured output matching your schema. Ready for API consumption or processing.</div>
         </section>
 
-        <section class="card" id="prefillCard">
-            <h2>4️⃣ Prefill Data</h2>
-            <div class="toolbar">
-                <button class="btn" id="loadPrefillBtn">Load Prefill</button>
-                <button class="btn ghost" id="copyTemplateBtn">Generate Template</button>
+        <section class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-4 flex flex-col min-h-[320px] shadow-sm" id="prefillCard">
+            <h2 class="text-lg font-semibold mb-3 text-slate-800 dark:text-slate-200">4️⃣ Prefill Data</h2>
+            <div class="flex flex-wrap gap-2 mb-3">
+                <button class="bg-slate-600 hover:bg-slate-700 text-white border-0 px-4 py-2 rounded-lg cursor-pointer text-xs font-medium transition-all" id="loadPrefillBtn">Load Prefill</button>
+                <button class="bg-transparent hover:border-blue-500 text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-600 px-4 py-2 rounded-lg cursor-pointer text-xs font-medium transition-all hover:shadow-sm" id="copyTemplateBtn">Generate Template</button>
             </div>
-            <textarea id="prefillInput" class="json" spellcheck="false" placeholder='{"field1": "value1", "field2": "value2", ...}'></textarea>
-            <div id="prefillErrors" class="errors" style="display: none;"></div>
-            <div class="footer">Prefill form fields with existing data. Useful for editing or setting default values.</div>
+            <textarea id="prefillInput" class="flex-1 w-full border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-200 rounded-lg p-2.5 font-mono text-xs resize-y min-h-[220px] focus:outline-none focus:border-blue-500" spellcheck="false" placeholder='{"field1": "value1", "field2": "value2", ...}'></textarea>
+            <div id="prefillErrors" class="hidden text-red-500 text-xs whitespace-pre-wrap mt-2 bg-red-50 dark:bg-red-900/20 p-2 rounded-md border-l-4 border-red-500"></div>
+            <div class="mt-auto text-xs text-slate-500 dark:text-slate-400 pt-3 border-t border-slate-200 dark:border-slate-700">Prefill form fields with existing data. Useful for editing or setting default values.</div>
         </section>
     </div>
 
@@ -150,6 +134,7 @@
             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'),
@@ -162,59 +147,102 @@
             urlInfo: document.getElementById('urlInfo')
         };
 
-        // Example schema for demonstration
+        // Example schema for demonstration (from docs/13_form_builder.html)
         const EXAMPLE_SCHEMA = {
             "version": "0.3",
-            "title": "User Profile Form",
+            "title": "Asset Uploader with Slides",
             "elements": [
                 {
-                    "type": "text",
-                    "key": "name",
-                    "label": "Full Name",
+                    "type": "file",
+                    "key": "cover",
+                    "label": "Cover image",
                     "required": true,
-                    "minLength": 2,
-                    "maxLength": 50,
-                    "default": ""
+                    "accept": {
+                        "extensions": ["png", "jpg", "jpeg"],
+                        "mime": ["image/png", "image/jpeg"]
+                    },
+                    "maxSizeMB": 25
                 },
                 {
-                    "type": "textarea",
-                    "key": "bio",
-                    "label": "Biography",
+                    "type": "files",
+                    "key": "assets",
+                    "label": "Additional images",
                     "required": false,
-                    "maxLength": 500,
-                    "default": ""
+                    "accept": {
+                        "extensions": ["png", "jpg"],
+                        "mime": ["image/png", "image/jpeg"]
+                    },
+                    "minCount": 0,
+                    "maxCount": 10,
+                    "maxSizeMB": 25
                 },
                 {
-                    "type": "number",
-                    "key": "age",
-                    "label": "Age",
+                    "type": "text",
+                    "key": "title",
+                    "label": "Project title",
                     "required": true,
-                    "min": 18,
-                    "max": 120,
-                    "decimals": 0
+                    "minLength": 1,
+                    "maxLength": 120,
+                    "pattern": "^[A-Za-z0-9 _-]+$",
+                    "default": "My Project"
+                },
+                {
+                    "type": "textarea",
+                    "key": "description",
+                    "label": "Description",
+                    "required": false,
+                    "minLength": 0,
+                    "maxLength": 2000,
+                    "pattern": null,
+                    "default": ""
                 },
                 {
                     "type": "select",
-                    "key": "role",
-                    "label": "Role",
+                    "key": "theme",
+                    "label": "Theme",
                     "required": true,
                     "options": [
-                        {"value": "user", "label": "User"},
-                        {"value": "admin", "label": "Administrator"},
-                        {"value": "moderator", "label": "Moderator"}
+                        {"value": "light", "label": "Light"},
+                        {"value": "dark", "label": "Dark"}
                     ],
-                    "default": "user"
+                    "default": "dark"
                 },
                 {
-                    "type": "file",
-                    "key": "avatar",
-                    "label": "Profile Picture",
-                    "required": false,
-                    "accept": {
-                        "extensions": ["jpg", "jpeg", "png"],
-                        "mime": ["image/jpeg", "image/png"]
-                    },
-                    "maxSizeMB": 5
+                    "type": "number",
+                    "key": "opacity",
+                    "label": "Opacity",
+                    "required": true,
+                    "min": 0,
+                    "max": 1,
+                    "decimals": 2,
+                    "step": 0.01,
+                    "default": 0.85
+                },
+                {
+                    "type": "group",
+                    "key": "slides",
+                    "label": "Slides",
+                    "repeat": {"min": 1, "max": 5},
+                    "elements": [
+                        {
+                            "type": "text",
+                            "key": "title",
+                            "label": "Slide title",
+                            "required": true,
+                            "minLength": 1,
+                            "maxLength": 80,
+                            "default": ""
+                        },
+                        {
+                            "type": "textarea",
+                            "key": "body",
+                            "label": "Slide text",
+                            "required": true,
+                            "minLength": 1,
+                            "maxLength": 1000,
+                            "default": ""
+                        }
+                    ]
                 }
             ]
         };
@@ -253,12 +281,12 @@
         }
 
         function showError(container, message) {
-            container.style.display = 'block';
+            container.classList.remove('hidden');
             container.textContent = message;
         }
 
         function clearError(container) {
-            container.style.display = 'none';
+            container.classList.add('hidden');
             container.textContent = '';
         }
 
@@ -362,17 +390,17 @@
 
         function renderElement(element, ctx) {
             const wrapper = document.createElement('div');
-            wrapper.className = 'field';
+            wrapper.className = 'mb-4';
             
             const label = document.createElement('div');
-            label.className = 'label';
+            label.className = 'text-sm mb-2 text-slate-800 dark:text-slate-200 flex items-center gap-2 font-medium';
             const title = document.createElement('span');
             title.textContent = element.label || element.key;
             label.appendChild(title);
             
             if (element.required) {
                 const req = document.createElement('span');
-                req.className = 'req';
+                req.className = 'text-red-500 font-semibold';
                 req.textContent = '*';
                 label.appendChild(req);
             }
@@ -386,6 +414,7 @@
                     input.type = 'text';
                     input.name = pathKey;
                     input.dataset.type = 'text';
+                    input.className = 'w-full border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-200 rounded-lg p-2.5 text-sm focus:outline-none focus:border-blue-500';
                     setTextValueFromPrefill(input, element, ctx.prefill, element.key);
                     input.addEventListener('input', () => markValidity(input, null));
                     wrapper.appendChild(input);
@@ -397,6 +426,7 @@
                     ta.name = pathKey;
                     ta.rows = 4;
                     ta.dataset.type = 'textarea';
+                    ta.className = 'w-full border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-200 rounded-lg p-2.5 text-sm focus:outline-none focus:border-blue-500 resize-y';
                     setTextValueFromPrefill(ta, element, ctx.prefill, element.key);
                     ta.addEventListener('input', () => markValidity(ta, null));
                     wrapper.appendChild(ta);
@@ -408,6 +438,7 @@
                     input.type = 'number';
                     input.name = pathKey;
                     input.dataset.type = 'number';
+                    input.className = 'w-full border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-200 rounded-lg p-2.5 text-sm focus:outline-none focus:border-blue-500';
                     if (element.step != null) input.step = String(element.step);
                     if (element.min != null) input.min = String(element.min);
                     if (element.max != null) input.max = String(element.max);
@@ -428,6 +459,7 @@
                     const sel = document.createElement('select');
                     sel.name = pathKey;
                     sel.dataset.type = 'select';
+                    sel.className = 'w-full border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-200 rounded-lg p-2.5 text-sm focus:outline-none focus:border-blue-500';
                     
                     if (!element.required) {
                         const opt = document.createElement('option');
@@ -517,7 +549,7 @@
                     container.appendChild(hid);
                     
                     wrapper.appendChild(container);
-                    wrapper.appendChild(makeFieldHint(element, 'Files are uploaded to S3 and referenced by URL'));
+                    wrapper.appendChild(makeFieldHint(element, 'Returns resource ID for download/submission'));
                     break;
                 }
                 case 'files': {
@@ -581,7 +613,7 @@
                     wrapper.appendChild(picker);
                     wrapper.appendChild(list);
                     wrapper.appendChild(hid);
-                    wrapper.appendChild(makeFieldHint(element, 'Multiple files → resource ID array'));
+                    wrapper.appendChild(makeFieldHint(element, 'Multiple files return resource ID array'));
                     break;
                 }
                 case 'group': {
@@ -590,7 +622,7 @@
                     
                     const groupWrap = document.createElement('div');
                     const header = document.createElement('div');
-                    header.className = 'groupHeader';
+                    header.className = 'flex items-center justify-between my-2 pb-2 border-b border-slate-200 dark:border-slate-700';
                     
                     const left = document.createElement('div');
                     left.innerHTML = `<span>${element.label || element.key}</span>`;
@@ -609,7 +641,7 @@
                         
                         const addBtn = document.createElement('button');
                         addBtn.type = 'button';
-                        addBtn.className = 'btn';
+                        addBtn.className = 'bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded-md text-sm font-medium transition-colors';
                         addBtn.textContent = 'Add';
                         right.appendChild(addBtn);
                         header.appendChild(right);
@@ -618,7 +650,7 @@
                         const refreshControls = () => {
                             const n = countItems();
                             addBtn.disabled = n >= max;
-                            left.innerHTML = `<span>${element.label || element.key}</span> <span class="muted" style="font-size: 12px;">[${n} / ${max === Infinity ? '∞' : max}, min=${min}]</span>`;
+                            left.innerHTML = `<span>${element.label || element.key}</span> <span class="text-slate-500 dark:text-slate-400 text-xs">[${n} / ${max === Infinity ? '∞' : max}, min=${min}]</span>`;
                         };
 
                         const addItem = (prefillObj) => {
@@ -679,7 +711,7 @@
 
         function makeFieldHint(element, extra = '') {
             const hint = document.createElement('div');
-            hint.className = 'hint';
+            hint.className = 'text-slate-500 dark:text-slate-400 text-xs mt-1';
             const bits = [];
             
             if (element.required) bits.push('required');
@@ -805,15 +837,17 @@
         
         function renderResourcePills(container, rids, onRemove) {
             clear(container);
+            container.className = 'flex flex-wrap gap-1.5 mt-2';
+            
             rids.forEach(rid => {
                 const meta = state.resourceIndex.get(rid);
                 const pill = document.createElement('span');
-                pill.className = 'pill';
+                pill.className = 'resource-pill';
                 pill.textContent = rid;
                 
                 if (meta) {
                     const small = document.createElement('span');
-                    small.className = 'muted';
+                    small.className = 'text-slate-500 dark:text-slate-400';
                     small.textContent = ` (${meta.name ?? 'file'}, ${formatFileSize(meta.size ?? 0)})`;
                     pill.appendChild(small);
                 }
@@ -821,10 +855,8 @@
                 if (onRemove) {
                     const x = document.createElement('button');
                     x.type = 'button';
-                    x.className = 'btn bad';
+                    x.className = 'bg-red-500 hover:bg-red-600 text-white text-xs px-1.5 py-0.5 rounded ml-1.5';
                     x.textContent = '×';
-                    x.style.padding = '2px 6px';
-                    x.style.marginLeft = '6px';
                     x.addEventListener('click', () => onRemove(rid));
                     pill.appendChild(x);
                 }
@@ -842,14 +874,14 @@
         }
 
         function markValidity(input, msg) {
-            const prev = input?.parentElement?.querySelector?.('.msg');
+            const prev = input?.parentElement?.querySelector?.('.error-message');
             if (prev) prev.remove();
             
             if (input) input.classList.toggle('invalid', !!msg);
             
             if (msg && input?.parentElement) {
                 const m = document.createElement('div');
-                m.className = 'msg';
+                m.className = 'error-message text-red-500 text-xs mt-1';
                 m.textContent = msg;
                 input.parentElement.appendChild(m);
             }
@@ -905,7 +937,7 @@
         }
 
         // Form data collection and validation
-        function collectAndValidate(schema) {
+        function collectAndValidate(schema, skipValidation = false) {
             const form = document.getElementById('dynamicForm');
             const errors = [];
 
@@ -917,10 +949,10 @@
                     case 'textarea': {
                         const input = scopeRoot.querySelector(`[name$="${key}"]`);
                         const val = (input?.value ?? '').trim();
-                        if (element.required && val === '') {
+                        if (!skipValidation && element.required && val === '') {
                             errors.push(`${key}: required`);
                             markValidity(input, 'required');
-                        } else if (val !== '') {
+                        } else if (!skipValidation && val !== '') {
                             if (element.minLength != null && val.length < element.minLength) {
                                 errors.push(`${key}: minLength=${element.minLength}`);
                                 markValidity(input, `minLength=${element.minLength}`);
@@ -941,6 +973,8 @@
                                     markValidity(input, 'invalid pattern');
                                 }
                             }
+                        } else if (skipValidation) {
+                            markValidity(input, null);
                         } else {
                             markValidity(input, null);
                         }
@@ -949,7 +983,7 @@
                     case 'number': {
                         const input = scopeRoot.querySelector(`[name$="${key}"]`);
                         const raw = input?.value ?? '';
-                        if (element.required && raw === '') {
+                        if (!skipValidation && element.required && raw === '') {
                             errors.push(`${key}: required`);
                             markValidity(input, 'required');
                             return null;
@@ -959,16 +993,16 @@
                             return null;
                         }
                         const v = parseFloat(raw);
-                        if (!Number.isFinite(v)) {
+                        if (!skipValidation && !Number.isFinite(v)) {
                             errors.push(`${key}: not a number`);
                             markValidity(input, 'not a number');
                             return null;
                         }
-                        if (element.min != null && v < element.min) {
+                        if (!skipValidation && element.min != null && v < element.min) {
                             errors.push(`${key}: < min=${element.min}`);
                             markValidity(input, `< min=${element.min}`);
                         }
-                        if (element.max != null && v > element.max) {
+                        if (!skipValidation && element.max != null && v > element.max) {
                             errors.push(`${key}: > max=${element.max}`);
                             markValidity(input, `> max=${element.max}`);
                         }
@@ -982,12 +1016,12 @@
                         const sel = scopeRoot.querySelector(`select[name$="${key}"]`);
                         const val = sel?.value ?? '';
                         const values = new Set(element.options.map(o => String(o.value)));
-                        if (element.required && val === '') {
+                        if (!skipValidation && element.required && val === '') {
                             errors.push(`${key}: required`);
                             markValidity(sel, 'required');
                             return '';
                         }
-                        if (val !== '' && !values.has(String(val))) {
+                        if (!skipValidation && val !== '' && !values.has(String(val))) {
                             errors.push(`${key}: value not in options`);
                             markValidity(sel, 'not in options');
                         } else {
@@ -998,7 +1032,7 @@
                     case 'file': {
                         const hid = scopeRoot.querySelector(`input[type="hidden"][name$="${key}"]`);
                         const rid = hid?.value ?? '';
-                        if (element.required && !rid) {
+                        if (!skipValidation && element.required && !rid) {
                             errors.push(`${key}: required (file missing)`);
                             const picker = hid?.previousElementSibling;
                             if (picker) markValidity(picker, 'required');
@@ -1011,11 +1045,11 @@
                         const hid = scopeRoot.querySelector(`input[type="hidden"][name$="${key}"]`);
                         const arr = parseJSONSafe(hid?.value ?? '[]', []);
                         const count = Array.isArray(arr) ? arr.length : 0;
-                        if (!Array.isArray(arr)) errors.push(`${key}: internal value corrupted`);
-                        if (element.minCount != null && count < element.minCount) {
+                        if (!skipValidation && !Array.isArray(arr)) errors.push(`${key}: internal value corrupted`);
+                        if (!skipValidation && element.minCount != null && count < element.minCount) {
                             errors.push(`${key}: < minCount=${element.minCount}`);
                         }
-                        if (element.maxCount != null && count > element.maxCount) {
+                        if (!skipValidation && element.maxCount != null && count > element.maxCount) {
                             errors.push(`${key}: > maxCount=${element.maxCount}`);
                         }
                         if (hid?.previousElementSibling) markValidity(hid.previousElementSibling, null);
@@ -1039,8 +1073,8 @@
                             const n = items.length;
                             const min = element.repeat.min ?? 0;
                             const max = element.repeat.max ?? Infinity;
-                            if (n < min) errors.push(`${key}: count < min=${min}`);
-                            if (n > max) errors.push(`${key}: count > max=${max}`);
+                            if (!skipValidation && n < min) errors.push(`${key}: count < min=${min}`);
+                            if (!skipValidation && n > max) errors.push(`${key}: count > max=${max}`);
                             items.forEach(item => {
                                 const obj = {};
                                 element.elements.forEach(child => {
@@ -1077,7 +1111,7 @@
             const schemaParam = params.get('schema');
             
             if (schemaParam) {
-                el.urlInfo.style.display = 'block';
+                el.urlInfo.classList.remove('hidden');
                 try {
                     const schemaJson = atob(schemaParam);
                     const schema = JSON.parse(schemaJson);
@@ -1132,19 +1166,7 @@
             downloadFile('schema.json', el.schemaInput.value || pretty(EXAMPLE_SCHEMA));
         });
 
-        el.submitBtn.addEventListener('click', () => {
-            clearError(el.formErrors);
-            if (!state.schema) {
-                showError(el.formErrors, 'Schema not applied');
-                return;
-            }
-            const { result, errors } = collectAndValidate(state.schema);
-            if (errors.length) {
-                showError(el.formErrors, errors.join('\n'));
-                return;
-            }
-            el.outputJson.value = pretty(result);
-        });
+        // Submit handler is now defined as submitFormEnhanced below
 
         el.clearFormBtn.addEventListener('click', () => {
             if (!state.schema) return;
@@ -1261,12 +1283,265 @@
                 Object.assign(state.config, config);
             }
         };
+
+        // Geppetto Integration - Message Handler
+        function setupGeppettoMessaging() {
+            // Listen for messages from parent window (Geppetto SPA)
+            window.addEventListener('message', (event) => {
+                // Security check - adjust origins as needed for your deployment
+                const allowedOrigins = [
+                    'https://your-geppetto-domain.com',
+                    'http://localhost:3000',
+                    'http://localhost:8080',
+                    window.location.origin
+                ];
+                
+                if (!allowedOrigins.some(origin => event.origin.startsWith(origin))) {
+                    return;
+                }
+                
+                handleGeppettoMessage(event.data);
+            });
+            
+            // Notify parent that form builder is ready
+            if (window.parent !== window) {
+                window.parent.postMessage({
+                    type: 'formBuilderReady'
+                }, '*');
+            }
+        }
+
+        function handleGeppettoMessage(data) {
+            switch (data.type) {
+                case 'configure':
+                    if (data.config) {
+                        if (data.config.uploadHandler) {
+                            state.config.uploadFile = data.config.uploadHandler;
+                        }
+                        if (data.config.downloadHandler) {
+                            state.config.downloadFile = data.config.downloadHandler;
+                        }
+                        if (data.config.thumbnailHandler) {
+                            state.config.getThumbnail = data.config.thumbnailHandler;
+                        }
+                        Object.assign(state.config, data.config);
+                    }
+                    
+                    if (data.options) {
+                        if (data.options.readonly) {
+                            enableReadOnlyMode();
+                        }
+                        if (data.options.theme) {
+                            setTheme(data.options.theme);
+                        }
+                    }
+                    break;
+                    
+                case 'setSchema':
+                    if (data.schema) {
+                        el.schemaInput.value = pretty(data.schema);
+                        applySchema();
+                    }
+                    break;
+                    
+                case 'setData':
+                    if (data.data && state.formRoot) {
+                        loadFormData(data.data);
+                    }
+                    break;
+                    
+                case 'getData':
+                    const currentData = getFormData();
+                    window.parent.postMessage({
+                        type: 'currentData',
+                        data: currentData
+                    }, '*');
+                    break;
+                    
+                case 'validate':
+                    const isValid = validateForm();
+                    window.parent.postMessage({
+                        type: 'validationResult',
+                        isValid: isValid
+                    }, '*');
+                    break;
+            }
+        }
+
+        function enableReadOnlyMode() {
+            state.config.readonly = true;
+            
+            // Hide editing controls
+            const editingElements = [
+                el.applySchemaBtn, el.resetSchemaBtn, el.prettySchemaBtn, 
+                el.downloadSchemaBtn, el.submitBtn, el.clearFormBtn,
+                el.loadPrefillBtn, el.copyTemplateBtn
+            ];
+            
+            editingElements.forEach(element => {
+                if (element) element.style.display = 'none';
+            });
+            
+            // Make schema input readonly
+            if (el.schemaInput) {
+                el.schemaInput.readOnly = true;
+                el.schemaInput.style.backgroundColor = 'var(--muted)';
+            }
+            
+            // Disable form inputs
+            if (state.formRoot) {
+                const inputs = state.formRoot.querySelectorAll('input, textarea, select, button');
+                inputs.forEach(input => {
+                    input.disabled = true;
+                    input.style.opacity = '0.6';
+                });
+            }
+        }
+
+        function setTheme(theme) {
+            document.documentElement.setAttribute('data-theme', theme);
+            
+            if (theme === 'dark') {
+                document.documentElement.style.colorScheme = 'dark';
+            } else if (theme === 'light') {
+                document.documentElement.style.colorScheme = 'light';
+            } else {
+                document.documentElement.style.colorScheme = 'light dark';
+            }
+        }
+
+        function getFormData() {
+            if (!state.formRoot) return {};
+            
+            try {
+                const { result } = collectAndValidate(state.schema);
+                return result;
+            } catch (error) {
+                console.error('Error getting form data:', error);
+                return {};
+            }
+        }
+
+        function loadFormData(data) {
+            if (!state.formRoot || !data) return;
+            
+            Object.keys(data).forEach(key => {
+                const input = state.formRoot.querySelector(`[data-key="${key}"]`);
+                if (!input) return;
+                
+                if (input.type === 'checkbox') {
+                    input.checked = Boolean(data[key]);
+                } else if (input.type === 'file') {
+                    // For file inputs, store the value in dataset
+                    if (data[key]) {
+                        input.dataset.fileInfo = JSON.stringify(data[key]);
+                        // Trigger preview update if file preview is available
+                        const event = new Event('change');
+                        input.dispatchEvent(event);
+                    }
+                } else {
+                    input.value = data[key] || '';
+                }
+            });
+        }
+
+        function validateForm() {
+            if (!state.formRoot || !state.schema) return true;
+            
+            try {
+                const { errors } = collectAndValidate(state.schema);
+                return errors.length === 0;
+            } catch {
+                return false;
+            }
+        }
+
+        // Enhanced form submission to notify parent
+        function submitFormEnhanced() {
+            clearError(el.formErrors);
+            if (!state.schema) {
+                showError(el.formErrors, 'Schema not applied');
+                return;
+            }
+            
+            try {
+                const { result, errors } = collectAndValidate(state.schema);
+                
+                if (errors.length > 0) {
+                    showError(el.formErrors, errors.join('\n'));
+                    return;
+                }
+                
+                // Update output display
+                el.outputJson.value = pretty(result);
+                
+                // Notify parent window if embedded
+                if (window.parent !== window) {
+                    window.parent.postMessage({
+                        type: 'formSubmit',
+                        data: result,
+                        schema: state.schema
+                    }, '*');
+                }
+                
+                // Dispatch custom event for direct integration
+                document.dispatchEvent(new CustomEvent('formSubmit', {
+                    detail: { data: result, schema: state.schema }
+                }));
+                
+            } catch (error) {
+                showError(el.formErrors, 'Submission error: ' + error.message);
+            }
+        }
+
+        // Replace original submit handler
+        el.submitBtn.addEventListener('click', submitFormEnhanced);
+        
+        // Draft save handler
+        el.saveDraftBtn.addEventListener('click', () => {
+            clearError(el.formErrors);
+            if (!state.schema) {
+                showError(el.formErrors, 'Schema not applied');
+                return;
+            }
+            
+            try {
+                const { result } = collectAndValidate(state.schema, true); // Skip validation for drafts
+                
+                // Update output display
+                el.outputJson.value = pretty(result);
+                
+                // Notify parent window if embedded
+                if (window.parent !== window) {
+                    window.parent.postMessage({
+                        type: 'draftSaved',
+                        data: result,
+                        schema: state.schema
+                    }, '*');
+                }
+                
+                // Dispatch custom event for direct integration
+                document.dispatchEvent(new CustomEvent('draftSaved', {
+                    detail: { data: result, schema: state.schema }
+                }));
+                
+                // Visual feedback
+                el.saveDraftBtn.textContent = 'Draft Saved!';
+                setTimeout(() => {
+                    el.saveDraftBtn.textContent = 'Save Draft';
+                }, 2000);
+                
+            } catch (error) {
+                showError(el.formErrors, 'Draft save error: ' + error.message);
+            }
+        });
         
         // Initialize
         function init() {
             el.schemaInput.value = pretty(EXAMPLE_SCHEMA);
             renderForm(EXAMPLE_SCHEMA, {});
             loadSchemaFromURL();
+            setupGeppettoMessaging();
             
             // Expose configuration API
             window.dispatchEvent(new CustomEvent('formBuilderReady', { detail: window.FormBuilderConfig }));