form-builder-pro 1.2.0 → 1.2.2

package/dist/index.css

@@ -632,7 +632,7 @@ video {
   }
 /* Grid column spans - explicit !important to override Angular styles */
 .form-builder-field-wrapper.selected-field {
-    border: 1px solid #3b497e !important;
+    border: 1px solid #635bff !important;
     border-radius: 6px;
     box-shadow: none;
   }
@@ -843,12 +843,18 @@ body {
 .static {
   position: static;
 }
+.fixed {
+  position: fixed;
+}
 .absolute {
   position: absolute;
 }
 .relative {
   position: relative;
 }
+.inset-0 {
+  inset: 0px;
+}
 .right-1 {
   right: 0.25rem;
 }
@@ -864,6 +870,9 @@ body {
 .z-10 {
   z-index: 10;
 }
+.z-\[9999\] {
+  z-index: 9999;
+}
 .\!m-0 {
   margin: 0px !important;
 }
@@ -895,6 +904,9 @@ body {
 .ml-1 {
   margin-left: 0.25rem;
 }
+.ml-1\.5 {
+  margin-left: 0.375rem;
+}
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -955,6 +967,9 @@ body {
 .h-6 {
   height: 1.5rem;
 }
+.h-64 {
+  height: 16rem;
+}
 .h-8 {
   height: 2rem;
 }
@@ -964,6 +979,9 @@ body {
 .h-screen {
   height: 100vh;
 }
+.max-h-\[90vh\] {
+  max-height: 90vh;
+}
 .min-h-\[100px\] {
   min-height: 100px;
 }
@@ -997,6 +1015,12 @@ body {
 .w-full {
   width: 100%;
 }
+.max-w-2xl {
+  max-width: 42rem;
+}
+.max-w-\[180px\] {
+  max-width: 180px;
+}
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1017,6 +1041,9 @@ body {
      -moz-user-select: none;
           user-select: none;
 }
+.resize-y {
+  resize: vertical;
+}
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1032,6 +1059,9 @@ body {
 .items-center {
   align-items: center;
 }
+.justify-end {
+  justify-content: flex-end;
+}
 .justify-center {
   justify-content: center;
 }
@@ -1134,9 +1164,6 @@ body {
 .border-b {
   border-bottom-width: 1px;
 }
-.border-b-2 {
-  border-bottom-width: 2px;
-}
 .border-l {
   border-left-width: 1px;
 }
@@ -1152,10 +1179,6 @@ body {
 .border-dashed {
   border-style: dashed;
 }
-.border-\[\#019FA2\] {
-  --tw-border-opacity: 1;
-  border-color: rgb(1 159 162 / var(--tw-border-opacity, 1));
-}
 .border-\[\#e9e9e9\] {
   --tw-border-opacity: 1;
   border-color: rgb(233 233 233 / var(--tw-border-opacity, 1));
@@ -1198,16 +1221,19 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(59 73 126 / var(--tw-bg-opacity, 1));
 }
-.bg-\[\#acbdfe33\] {
-  background-color: #acbdfe33;
-}
-.bg-\[\#f8faff\] {
+.bg-\[\#635bff\] {
   --tw-bg-opacity: 1;
-  background-color: rgb(248 250 255 / var(--tw-bg-opacity, 1));
+  background-color: rgb(99 91 255 / var(--tw-bg-opacity, 1));
+}
+.bg-\[\#847dff1a\] {
+  background-color: #847dff1a;
 }
 .bg-background {
   background-color: hsl(var(--background));
 }
+.bg-black\/50 {
+  background-color: rgb(0 0 0 / 0.5);
+}
 .bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
@@ -1272,6 +1298,10 @@ body {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1327,6 +1357,10 @@ body {
   font-size: 1rem;
   line-height: 1.5rem;
 }
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -1360,10 +1394,6 @@ body {
 .tracking-wider {
   letter-spacing: 0.05em;
 }
-.text-\[\#019FA2\] {
-  --tw-text-opacity: 1;
-  color: rgb(1 159 162 / var(--tw-text-opacity, 1));
-}
 .text-\[\#3b497e\] {
   --tw-text-opacity: 1;
   color: rgb(59 73 126 / var(--tw-text-opacity, 1));
@@ -1432,6 +1462,11 @@ body {
 .opacity-50 {
   opacity: 0.5;
 }
+.shadow-\[0_17px_20px_-8px_rgba\(77\2c 91\2c 236\2c 0\.231372549\)\] {
+  --tw-shadow: 0 17px 20px -8px rgba(77,91,236,0.231372549);
+  --tw-shadow-colored: 0 17px 20px -8px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-none {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
@@ -1442,6 +1477,11 @@ body {
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .ring-2 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1485,17 +1525,21 @@ input[type="checkbox"] {
   -moz-appearance: none;
        appearance: none;
   -webkit-appearance: none;
-  width: 18px;
-  height: 18px;
-  border: 2px solid #019FA2;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #635bff;
   border-radius: 4px;
   background-color: #f8faff;
   cursor: pointer;
+  min-height: 20px;
+  box-shadow: 0 17px 20px -8px rgba(77, 91, 236, 0.231372549);
+  
 }
 
 input[type="checkbox"]:checked {
-  background-color: #019FA2;
-  border-color: #019FA2;
+  background-color: #635bff;
+  border-color: #635bff;
+  box-shadow: 0 17px 20px -8px rgba(77, 91, 236, 0.231372549);
 }
 
 input[type="checkbox"]:checked::after {
@@ -1513,24 +1557,27 @@ input[type="radio"] {
   -webkit-appearance: none;
   width: 18px;
   height: 18px;
-  border: 2px solid #019FA2;
+  border: 2px solid #635bff;
   border-radius: 50%;
   background-color: #fff;
   cursor: pointer;
+  box-shadow: 0 17px 20px -8px rgba(77, 91, 236, 0.231372549);
 }
 
 input[type="radio"]:checked {
-  border-color: #019FA2;
+  border-color: #635bff;
+  box-shadow: 0 17px 20px -8px rgba(77, 91, 236, 0.231372549);
 }
 
 input[type="radio"]:checked::after {
   content: "";
   width: 10px;
   height: 10px;
-  background-color: #019FA2;
+  background-color: #635bff;
   border-radius: 50%;
   display: block;
   margin: 2px auto;
+  box-shadow: 0 17px 20px -8px rgba(77, 91, 236, 0.231372549);
 }
 
 .file\:border-0::file-selector-button {
@@ -1656,6 +1703,11 @@ input[type="radio"]:checked::after {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-gray-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
@@ -1888,6 +1940,11 @@ input[type="radio"]:checked::after {
   color: rgb(250 204 21 / var(--tw-text-opacity, 1));
 }
 
+.dark\:hover\:bg-gray-600:hover:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
+}
+
 .dark\:hover\:bg-gray-700:hover:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));

package/dist/index.d.mts

@@ -32,6 +32,7 @@ interface FormField {
     id: string;
     type: FieldType;
     label: string;
+    fieldName?: string;
     placeholder?: string;
     description?: string;
     required?: boolean;
@@ -253,6 +254,8 @@ interface FormBuilderOptions {
         lookupSourceType: 'MODULE' | 'MASTER_TYPE';
         lookupSource: string;
     }) => void;
+    onProfileClick?: () => void;
+    onSettingsClick?: () => void;
 }
 declare class FormBuilder {
     private container;
@@ -304,7 +307,7 @@ declare class FormRenderer {
     constructor(container: HTMLElement, schema: FormSchema, onSubmit?: (data: any) => void, onDropdownValueChange?: (event: {
         fieldId: string;
         value: string;
-    }) => void);
+    }) => void, initialData?: Record<string, any>);
     setSchema(schema: FormSchema): void;
     private render;
 }

package/dist/index.d.ts

@@ -32,6 +32,7 @@ interface FormField {
     id: string;
     type: FieldType;
     label: string;
+    fieldName?: string;
     placeholder?: string;
     description?: string;
     required?: boolean;
@@ -253,6 +254,8 @@ interface FormBuilderOptions {
         lookupSourceType: 'MODULE' | 'MASTER_TYPE';
         lookupSource: string;
     }) => void;
+    onProfileClick?: () => void;
+    onSettingsClick?: () => void;
 }
 declare class FormBuilder {
     private container;
@@ -304,7 +307,7 @@ declare class FormRenderer {
     constructor(container: HTMLElement, schema: FormSchema, onSubmit?: (data: any) => void, onDropdownValueChange?: (event: {
         fieldId: string;
         value: string;
-    }) => void);
+    }) => void, initialData?: Record<string, any>);
     setSchema(schema: FormSchema): void;
     private render;
 }

package/dist/index.js

@@ -5368,7 +5368,8 @@ var ICONS = {
   "CreditCard": '<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />',
   "MapPin": '<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />',
   "Briefcase": '<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.67.38-1.053.33-2.177.58-3.345.726-.26.032-.52.05-.778.066m-13.882-6.626h.008v.008h-.008v-.008zm1.096-3.837a48.116 48.116 0 00-3.413.387c-1.069.16-1.837 1.094-1.837 2.175v4.784c0 .493.196.958.536 1.344m0 0a17.8 17.8 0 013.344.726c.25.085.476.215.67.38m13.784-5.32c-.34-.386-.536-.851-.536-1.344v-4.784c0-1.081-.768-2.015-1.837-2.175a48.041 48.041 0 01-3.413-.387m-4.5 8.006c.194.165.42.295.67.38 1.053.33 2.177.58 3.345.726.26.032.52.05.778.066m0-7.384V5.626a2.25 2.25 0 00-2.25-2.25h-4.5a2.25 2.25 0 00-2.25 2.25v2.247M16.5 6h-9" />',
-  "Eye": '<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />'
+  "Eye": '<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />',
+  "Cog": '<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />'
 };
 function getIcon(name, size = 20) {
   const svgString = ICONS[name] || `<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />`;
@@ -5866,8 +5867,11 @@ function convertValidationToArray(validation) {
     rules.push({ type: "maxDate", value: obj.maxDate });
   return rules;
 }
+function getModelKey(field) {
+  return field.fieldName ?? field.id;
+}
 var FormRenderer = class {
-  constructor(container, schema, onSubmit, onDropdownValueChange) {
+  constructor(container, schema, onSubmit, onDropdownValueChange, initialData) {
     __publicField(this, "container");
     __publicField(this, "schema");
     __publicField(this, "data", {});
@@ -5877,6 +5881,9 @@ var FormRenderer = class {
     this.schema = schema;
     this.onSubmit = onSubmit;
     this.onDropdownValueChange = onDropdownValueChange;
+    if (initialData && typeof initialData === "object") {
+      this.data = { ...initialData };
+    }
     this.render();
   }
   setSchema(schema) {
@@ -5891,7 +5898,8 @@ var FormRenderer = class {
       const sectionEl = createElement("div", { className: "space-y-3 md:space-y-4 !m-0" });
       sectionEl.appendChild(createElement("h2", { className: "text-xl  font-semibold text-[#3b497e] dark:text-gray-200 border-b pb-2", text: section.title }));
       const grid = createElement("div", { className: "form-builder-grid" });
-      section.fields.forEach((field) => {
+      const sortedFields = [...section.fields].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+      sortedFields.forEach((field) => {
         const isVisible = field.visible !== false;
         if (!isVisible) {
           return;
@@ -5905,8 +5913,9 @@ var FormRenderer = class {
           spanClass = getColSpanFromWidth(field.width || 100);
         }
         fieldWrapper.className = spanClass;
-        const fieldEl = FieldRenderer.render(field, this.data[field.id], (val) => {
-          this.data[field.id] = val;
+        const modelKey = getModelKey(field);
+        const fieldEl = FieldRenderer.render(field, this.data[modelKey], (val) => {
+          this.data[modelKey] = val;
           if (field.type === "select" && this.onDropdownValueChange) {
             this.onDropdownValueChange({
               fieldId: field.id,
@@ -5933,7 +5942,8 @@ var FormRenderer = class {
         section.fields.forEach((field) => {
           if (field.visible === false)
             return;
-          const fieldValue = this.data[field.id];
+          const modelKey = getModelKey(field);
+          const fieldValue = this.data[modelKey];
           const fieldElement = form.querySelector(`input[id*="${field.id}"], textarea[id*="${field.id}"], select[id*="${field.id}"]`);
           if (!fieldElement) {
             const altElement = Array.from(form.querySelectorAll("input, textarea, select")).find((el) => {
@@ -8335,7 +8345,7 @@ var FieldWrapper = class {
       });
     }
     if (isSelected) {
-      fieldWrapper.classList.add("ring-2", "bg-[#acbdfe33]", "dark:bg-blue-900/20");
+      fieldWrapper.classList.add("ring-2", "bg-[#847dff1a]", "dark:bg-blue-900/20");
     }
     fieldWrapper.appendChild(createElement("div", {
       className: `absolute top-2 right-6 cursor-move p-1 rounded bg-[#3b497e] p-[0.5px] mr-1 text-white group-hover:opacity-100 transition-opacity field-handle z-10 ${isSelected ? "opacity-100" : ""}`
@@ -8998,6 +9008,26 @@ var FormBuilder = class {
     left.appendChild(redoBtn);
     toolbar.appendChild(left);
     const right = createElement("div", { className: "flex items-center space-x-2" });
+    const profileBtn = createElement("button", {
+      className: "p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors text-gray-600 dark:text-gray-400",
+      title: "Profile",
+      onclick: () => {
+        if (this.options.onProfileClick) {
+          this.options.onProfileClick();
+        }
+      }
+    }, [getIcon("User", 20)]);
+    right.appendChild(profileBtn);
+    const settingsBtn = createElement("button", {
+      className: "p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors text-gray-600 dark:text-gray-400",
+      title: "Settings",
+      onclick: () => {
+        if (this.options.onSettingsClick) {
+          this.options.onSettingsClick();
+        }
+      }
+    }, [getIcon("Cog", 20)]);
+    right.appendChild(settingsBtn);
     const clearBtn = createElement("button", {
       className: "flex items-center px-3 py-2 text-sm font-medium text-red-600 bg-red-500 text-white rounded-md transition-colors",
       onclick: () => {
@@ -9032,12 +9062,12 @@ var FormBuilder = class {
     return toolbar;
   }
   renderToolbox() {
-    const toolbox = createElement("div", { className: "bg-[#f8faff] dark:bg-gray-900 flex flex-col h-full" });
-    const tabs = createElement("div", { className: "flex border-b border-gray-200 dark:border-gray-800" });
+    const toolbox = createElement("div", { className: "bg-[#847dff1a] dark:bg-gray-900 flex flex-col h-full" });
+    const tabs = createElement("div", { className: "flex border-b border-gray-200 dark:border-gray-800 p-1" });
     const createTab = (id, label) => {
       const isActive = this.activeTab === id;
       return createElement("button", {
-        className: `flex-1 py-3 text-sm font-medium transition-colors ${isActive ? "text-[#019FA2] border-b-2 border-[#019FA2]" : "text-gray-500 hover:text-gray-700 dark:text-gray-400"}`,
+        className: `flex-1 py-3 text-sm font-medium transition-colors ${isActive ? "text-white bg-[#635bff] rounded " : "text-gray-500 hover:text-gray-700 dark:text-gray-400"}`,
         text: label,
         onclick: () => {
           this.activeTab = id;
@@ -9049,7 +9079,7 @@ var FormBuilder = class {
     tabs.appendChild(createTab("templates", "Templates"));
     tabs.appendChild(createTab("import", "Import"));
     toolbox.appendChild(tabs);
-    const content = createElement("div", { className: "flex-1 overflow-y-auto p-4" });
+    const content = createElement("div", { className: "flex-1 overflow-y-auto p-4 bg-white" });
     if (this.activeTab === "fields") {
       const list = createElement("div", { className: "grid grid-cols-2 gap-3", id: "toolbox-list" });
       FIELD_TYPES.forEach((field) => {
@@ -9131,7 +9161,7 @@ var FormBuilder = class {
   }
   renderCanvas(state) {
     const canvas = createElement("div", {
-      className: "flex-1 bg-[#f8faff] dark:bg-gray-950 p-4 md:p-8 overflow-y-auto",
+      className: "flex-1 dark:bg-gray-950 p-4 md:p-8 overflow-y-auto",
       onclick: (e) => {
         if (e.target === canvas || e.target === canvas.firstElementChild) {
           formStore.getState().selectField(null);
@@ -9152,7 +9182,7 @@ var FormBuilder = class {
     const sectionList = new SectionList(state.schema, state.selectedFieldId);
     inner.appendChild(sectionList.getElement());
     const addSectionBtn = createElement("button", {
-      className: "w-full mt-6 py-3  dark:border-gray-700 rounded-lg text-gray-500 bg-[#3b497e] text-white transition-colors flex items-center justify-center font-medium",
+      className: "w-full mt-6 py-3  dark:border-gray-700 rounded-lg text-gray-500 bg-[#635bff] max-w-[180px] shadow-[0_17px_20px_-8px_rgba(77,91,236,0.231372549)] text-white transition-colors flex items-center justify-center font-medium",
       onclick: () => formStore.getState().addSection()
     }, [getIcon("Plus", 20), createElement("span", { className: "ml-2", text: "Add Section" })]);
     inner.appendChild(addSectionBtn);
@@ -9186,7 +9216,7 @@ var FormBuilder = class {
     return container;
   }
   renderConfigPanel(state, focusState = null) {
-    const panel = createElement("div", { className: "bg-[#f8faff]  dark:bg-gray-900 flex flex-col h-full overflow-y-auto" });
+    const panel = createElement("div", { className: " dark:bg-gray-900 flex flex-col h-full overflow-y-auto" });
     const selectedField = state.schema.sections.flatMap((s) => s.fields).find((f) => f.id === state.selectedFieldId);
     if (!selectedField) {
       panel.appendChild(createElement("div", { className: "p-4 text-center text-gray-500", text: "Select a field to configure" }));