@openg2p/registry-widgets 0.1.3 → 0.1.5

package/dist/index.js

@@ -951,32 +951,63 @@ const useBaseWidget = (options) => {
         if (isLayoutWidget) {
             return undefined; // Layout widgets don't have values
         }
+        // Helper to extract displayable value from object (especially geo hierarchy objects)
+        const extractValueFromObject = (obj) => {
+            if (!obj || typeof obj !== 'object' || Array.isArray(obj)) {
+                return obj;
+            }
+            // Check for geo hierarchy structure first
+            if ('geo_code_hierarchy_json' in obj || 'geo_lowest_level_value_id' in obj) {
+                if ('geo_lowest_level_value_id' in obj) {
+                    return obj.geo_lowest_level_value_id;
+                }
+                // If it's a geo hierarchy object but no extractable ID, return undefined to avoid rendering object
+                return undefined;
+            }
+            // Try common value fields
+            if ('value' in obj) {
+                return obj.value;
+            }
+            if ('id' in obj) {
+                return obj.id;
+            }
+            if ('label' in obj) {
+                return obj.label;
+            }
+            if ('name' in obj) {
+                return obj.name;
+            }
+            // If no extractable value found, return undefined to avoid rendering object as React child
+            // This prevents "Objects are not valid as a React child" errors
+            return undefined;
+        };
         // Try to get value from widgetId first (this should have the actual selected value)
         // For geo widgets with dataPath, widgetId stores the actual ID, while dataPath stores the hierarchy object
         let value = values[widgetId];
+        // Extract value if it's an object (handles geo hierarchy objects stored in widgetId)
+        if (value !== null && value !== undefined && typeof value === 'object' && !Array.isArray(value)) {
+            value = extractValueFromObject(value);
+        }
         // If widgetId doesn't have a value, try dataPath
         if (value === undefined && config['widget-data-path']) {
             value = getWidgetValue(values, config['widget-data-path'], widgetId);
-            // CRITICAL: For geo widgets with dataPath, the value might be stored as a hierarchy object
-            // Extract the actual value (geo_lowest_level_value_id) if it's an object
-            const geoConfig = config['widget-geo-config'];
-            if (geoConfig?.isLastLevel && value && typeof value === 'object' && !Array.isArray(value)) {
-                // If it's a geo hierarchy object, extract the actual value
-                if ('geo_lowest_level_value_id' in value) {
-                    value = value.geo_lowest_level_value_id;
-                }
-                else if ('value' in value) {
-                    value = value.value;
-                }
-                else if ('id' in value) {
-                    value = value.id;
-                }
+            // Extract value if it's an object (handles geo hierarchy objects from dataPath)
+            if (value !== null && value !== undefined && typeof value === 'object' && !Array.isArray(value)) {
+                value = extractValueFromObject(value);
             }
         }
         // If value is still undefined and user has set a value, try reading from widgetId as backup
         // This handles cases where dataPath lookup might fail temporarily
         if (value === undefined && userHasSetValueRef.current && values[widgetId] !== undefined) {
             value = values[widgetId];
+            // Extract value if it's an object (handles geo hierarchy objects)
+            if (value !== null && value !== undefined && typeof value === 'object' && !Array.isArray(value)) {
+                value = extractValueFromObject(value);
+            }
+        }
+        // Final safety check: if value is still an object, extract displayable value
+        if (value !== null && value !== undefined && typeof value === 'object' && !Array.isArray(value)) {
+            value = extractValueFromObject(value);
         }
         // If user has explicitly set a value, always return it (even if undefined/null)
         // This prevents the default from overwriting user selections
@@ -2246,7 +2277,7 @@ const WidgetProvider = ({ store, dataSourceRequestHandler, schemaData, translate
             widgetStore.dispatch(setValues(schemaData));
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []); // Only run on mount
+    }, [schemaData, widgetStore]); // Only run on mount
     const content = (jsxRuntimeExports.jsx(reactRedux.Provider, { store: widgetStore, children: jsxRuntimeExports.jsx(WidgetContext.Provider, { value: contextValue, children: jsxRuntimeExports.jsx(WidgetEventBusContext.Provider, { value: eventBus, children: children }) }) }));
     return content;
 };
@@ -2256,8 +2287,11 @@ const WidgetRenderer = ({ config, dataSourceRequestHandler: propDataSourceReques
     const context = useWidgetContext();
     const dataSourceRequestHandler = propDataSourceRequestHandler || context.dataSourceRequestHandler;
     const schemaData = propSchemaData || context.schemaData;
+    // Warn if dataSourceRequestHandler is missing for API data sources, but don't break rendering
+    // This allows widgets to render in read-only or static modes (e.g., CRView)
     if (!dataSourceRequestHandler && config['widget-data-source']?.type === 'api') {
-        console.error(`[WidgetRenderer] dataSourceRequestHandler is required for widget ${config['widget-id']} with API data source`);
+        console.warn(`[WidgetRenderer] dataSourceRequestHandler is not provided for widget ${config['widget-id']} with API data source. ` +
+            `The widget will render but API data source functionality will be disabled.`);
     }
     // Get values from Redux for cascade hooks
     const values = reactRedux.useSelector((state) => state.widget.values);
@@ -3193,7 +3227,7 @@ const namespaceSectionConfig = (section, namespace) => {
  * - Panels wrap when they exceed available width
  * - Sections can sit side-by-side if there's space
  */
-const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequestHandler, schemaData, onValueChange, gridColumnSpan, onSectionSave, hideEditButton = false, mode = 'RegistryView', namespace, }) => {
+const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequestHandler, schemaData, onValueChange, gridColumnSpan, onSectionSave, hideEditButton = false, mode = 'RegistryView', namespace, changeRequestType, showChangeRequestLabel = true, }) => {
     const { translateConfig, translate } = useWidgetTranslation();
     const { schemaData: contextSchemaData, dataSourceRequestHandler: contextDataSourceRequestHandler } = useWidgetContext();
     const store = reactRedux.useStore();
@@ -3811,11 +3845,12 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
           align-items: center;
           gap: 0.5rem;
         }
-      ` }), jsxRuntimeExports.jsxs("div", { ref: sectionRef, className: `section ${sectionClassId} px-4 sm:px-6 lg:px-8 border-2 border-gray-300`, "data-section-id": sectionId, "data-has-table": hasTableWidget ? 'true' : 'false', "data-has-explicit-span": hasExplicitTableSpan ? 'true' : 'false', "data-edit-mode": isEditMode ? 'true' : 'false', "data-column-span": columnSpan, style: {
+      ` }), jsxRuntimeExports.jsxs("div", { ref: sectionRef, className: `section ${sectionClassId} px-4 sm:px-6 lg:px-8 border-2 border-white `, "data-section-id": sectionId, "data-has-table": hasTableWidget ? 'true' : 'false', "data-has-explicit-span": hasExplicitTableSpan ? 'true' : 'false', "data-edit-mode": isEditMode ? 'true' : 'false', "data-column-span": columnSpan, "data-change-request-type": changeRequestType, style: {
                     gridColumn: `span ${columnSpan}`,
                     width: '100%',
                     borderRadius: '10px',
-                    backgroundColor: '#FFFFFF',
+                    backgroundColor: changeRequestType === 'old' ? '#F9F9F9' : '#FFFFFF', // Faded background for old change requests
+                    opacity: changeRequestType === 'old' ? 0.95 : 1, // Slight opacity reduction for old sections
                     ...(isEditMode && sectionHeight ? {
                         height: `${sectionHeight}px`,
                         minHeight: `${sectionHeight}px`
@@ -3824,7 +3859,27 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                         minHeight: 'auto',
                         height: 'auto'
                     }),
-                }, children: [sectionToRender['section-title'] && (jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold mb-4", style: { marginTop: '35px' }, children: translateConfig(sectionToRender['section-title']) })), jsxRuntimeExports.jsxs("div", { id: gridId, className: "section-panels", style: mode === 'RegistryView' && hideEditButton ? { paddingBottom: '40px' } : {}, children: [editableSection.panels.map((panel, index) => (jsxRuntimeExports.jsx("div", { className: "panel-wrapper", children: jsxRuntimeExports.jsx(PanelRenderer, { panel: panel, dataSourceRequestHandler: dataSourceRequestHandler, schemaData: namespacedSchemaData, onValueChange: onValueChange }) }, panel['panel-id'] || `section-panel-${index}`))), mode === 'CRView' && crViewData && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("hr", { className: "border-gray-300 w-full", style: { height: '1px', marginTop: '20px', marginBottom: '0px' } }), jsxRuntimeExports.jsxs("div", { className: "cr-view-container", style: {
+                }, children: [sectionToRender['section-title'] && (jsxRuntimeExports.jsxs("div", { style: {
+                            marginTop: '35px',
+                            marginBottom: '16px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '12px',
+                            flexWrap: 'wrap',
+                        }, children: [jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold", style: { margin: 0 }, children: translateConfig(sectionToRender['section-title']) }), mode === 'CRView' && changeRequestType && showChangeRequestLabel && (jsxRuntimeExports.jsx("span", { style: {
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    padding: '4px 12px',
+                                    borderRadius: '4px',
+                                    fontSize: '12px',
+                                    fontWeight: 600,
+                                    textTransform: 'uppercase',
+                                    letterSpacing: '0.5px',
+                                    backgroundColor: changeRequestType === 'new' ? '#28a745' : '#ffcccc', // Green for new, faded red for old
+                                    color: changeRequestType === 'new' ? '#FFFFFF' : '#cc0000',
+                                    whiteSpace: 'nowrap',
+                                    boxShadow: changeRequestType === 'new' ? '0 2px 4px rgba(40, 167, 69, 0.3)' : 'none',
+                                }, children: changeRequestType === 'new' ? 'New' : 'Old' }))] })), jsxRuntimeExports.jsxs("div", { id: gridId, className: "section-panels", style: mode === 'RegistryView' && hideEditButton ? { paddingBottom: '40px' } : {}, children: [editableSection.panels.map((panel, index) => (jsxRuntimeExports.jsx("div", { className: "panel-wrapper", children: jsxRuntimeExports.jsx(PanelRenderer, { panel: panel, dataSourceRequestHandler: dataSourceRequestHandler, schemaData: namespacedSchemaData, onValueChange: onValueChange }) }, panel['panel-id'] || `section-panel-${index}`))), mode === 'CRView' && crViewData && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("hr", { className: "border-gray-300 w-full", style: { height: '1px', marginTop: '20px', marginBottom: '0px' } }), jsxRuntimeExports.jsxs("div", { className: "cr-view-container", style: {
                                             marginTop: '20px',
                                             paddingBottom: '30px',
                                             display: 'flex',
@@ -4117,7 +4172,7 @@ if (typeof document !== 'undefined') {
 /**
  * JSON Editor Panel - Left side of Section Builder
  */
-const JSONEditorPanel = ({ section, onChange, onReset, onSelectNode, context = 'section', }) => {
+const JSONEditorPanel = ({ section, onChange, onReset, context = 'section', }) => {
     const [jsonData, setJsonData] = React.useState(section);
     const [validationErrors, setValidationErrors] = React.useState([]);
     const [rawJsonView, setRawJsonView] = React.useState(false);
@@ -4189,96 +4244,6 @@ const JSONEditorPanel = ({ section, onChange, onReset, onSelectNode, context = '
         window.addEventListener('keydown', handleEscape);
         return () => window.removeEventListener('keydown', handleEscape);
     }, [showPreview]);
-    // Handle clicks in JSON editor to select corresponding node in visual builder
-    React.useEffect(() => {
-        if (!onSelectNode || rawJsonView)
-            return; // Only work in tree view, not raw JSON view
-        const handleJsonEditorClick = (e) => {
-            const mouseEvent = e;
-            const target = mouseEvent.target;
-            // Find the key text element (json-edit-react uses .jer-key-text class)
-            const keyElement = target.closest('.jer-key-text') ||
-                target.querySelector('.jer-key-text') ||
-                (target.classList.contains('jer-key-text') ? target : null);
-            if (!keyElement)
-                return;
-            const keyText = keyElement.textContent?.trim();
-            if (!keyText)
-                return;
-            // Remove colon if present
-            const keyName = keyText.replace(':', '').trim();
-            // Map key names to node types and find the corresponding node
-            let nodeId = null;
-            let nodeType = null;
-            if (keyName === 'section-id') {
-                // Find the section-id value
-                const keyRow = keyElement.closest('.jer-collection-header-row, .jer-value-row');
-                if (keyRow) {
-                    const valueElement = keyRow.querySelector('.jer-value-text, .jer-string-value');
-                    if (valueElement) {
-                        nodeId = valueElement.textContent?.replace(/^"|"$/g, '').trim() || section['section-id'];
-                        nodeType = 'section';
-                    }
-                }
-            }
-            else if (keyName === 'panel-id') {
-                // Find the panel-id value in the current panel object
-                const panelContainer = keyElement.closest('.jer-collection-component');
-                if (panelContainer) {
-                    const valueElement = panelContainer.querySelector('.jer-value-text, .jer-string-value');
-                    if (valueElement) {
-                        // Try to find panel-id value in this panel
-                        const allKeys = panelContainer.querySelectorAll('.jer-key-text');
-                        for (const key of Array.from(allKeys)) {
-                            if (key.textContent?.includes('panel-id')) {
-                                const keyRow = key.closest('.jer-collection-header-row, .jer-value-row');
-                                if (keyRow) {
-                                    const valElement = keyRow.querySelector('.jer-value-text, .jer-string-value');
-                                    if (valElement) {
-                                        nodeId = valElement.textContent?.replace(/^"|"$/g, '').trim() || null;
-                                        nodeType = 'panel';
-                                        break;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-            else if (keyName === 'widget-id') {
-                // Find the widget-id value in the current widget object
-                const widgetContainer = keyElement.closest('.jer-collection-component');
-                if (widgetContainer) {
-                    const allKeys = widgetContainer.querySelectorAll('.jer-key-text');
-                    for (const key of Array.from(allKeys)) {
-                        if (key.textContent?.includes('widget-id')) {
-                            const keyRow = key.closest('.jer-collection-header-row, .jer-value-row');
-                            if (keyRow) {
-                                const valElement = keyRow.querySelector('.jer-value-text, .jer-string-value');
-                                if (valElement) {
-                                    nodeId = valElement.textContent?.replace(/^"|"$/g, '').trim() || null;
-                                    nodeType = 'widget';
-                                    break;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-            // If we found a node, select it in the visual builder
-            if (nodeId && nodeType) {
-                onSelectNode(nodeId, nodeType);
-            }
-        };
-        // Add click listener to the JSON editor container
-        const editorContainer = document.querySelector('.json-editor-scroll-container');
-        if (editorContainer) {
-            editorContainer.addEventListener('click', handleJsonEditorClick);
-            return () => {
-                editorContainer.removeEventListener('click', handleJsonEditorClick);
-            };
-        }
-    }, [onSelectNode, rawJsonView, section]);
     // Make section editable for preview - remove readonly flags from widgets
     const makeSectionEditable = React.useCallback((section) => {
         const processWidget = (widget) => {
@@ -4523,7 +4488,7 @@ const JSONEditorPanel = ({ section, onChange, onReset, onSelectNode, context = '
             minHeight: 0,
             borderRight: '0px',
         }, children: [jsxRuntimeExports.jsxs("div", { style: {
-                    padding: '15px 20px',
+                    padding: '16px 20px',
                     background: '#ffffff',
                     display: 'flex',
                     justifyContent: 'space-between',
@@ -4545,8 +4510,8 @@ const JSONEditorPanel = ({ section, onChange, onReset, onSelectNode, context = '
                         }, children: [jsxRuntimeExports.jsxs("button", { onClick: handleReset, style: {
                                     padding: '6px 12px',
                                     border: '1px solid #ddd',
-                                    borderRadius: '4px',
-                                    background: 'white',
+                                    borderRadius: '10px',
+                                    background: '#f3f3f3',
                                     color: '#666',
                                     cursor: 'pointer',
                                     display: 'flex',
@@ -4564,8 +4529,8 @@ const JSONEditorPanel = ({ section, onChange, onReset, onSelectNode, context = '
                                 }, title: "Reset to original JSON", children: [jsxRuntimeExports.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }), jsxRuntimeExports.jsx("path", { d: "M21 3v5h-5" }), jsxRuntimeExports.jsx("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }), jsxRuntimeExports.jsx("path", { d: "M3 21v-5h5" })] }), "Reset"] }), jsxRuntimeExports.jsxs("button", { onClick: () => setShowPreview(true), style: {
                                     padding: '6px 12px',
                                     border: '1px solid #ddd',
-                                    borderRadius: '4px',
-                                    background: 'white',
+                                    borderRadius: '10px',
+                                    background: '#f3f3f3',
                                     color: '#666',
                                     cursor: 'pointer',
                                     display: 'flex',
@@ -4921,18 +4886,24 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
                                 border: '1px solid #ccc',
                                 borderRadius: '4px',
                                 fontSize: '12px',
+                                background: 'white',
+                                color: '#333',
                             } })] }), jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '12px', fontWeight: 500 }, children: "Section Title" }), jsxRuntimeExports.jsx("input", { type: "text", value: section['section-title'] || '', onChange: (e) => handleChange('section-title', e.target.value), style: {
                                 width: '100%',
                                 padding: '8px 12px',
                                 border: '1px solid #ccc',
                                 borderRadius: '4px',
                                 fontSize: '12px',
+                                background: 'white',
+                                color: '#333',
                             } })] }), jsxRuntimeExports.jsx("div", { style: { marginBottom: '20px' }, children: jsxRuntimeExports.jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '12px' }, children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: section['section-editable'] || false, onChange: (e) => handleChange('section-editable', e.target.checked) }), jsxRuntimeExports.jsx("span", { children: "Editable" })] }) }), jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '12px', fontWeight: 500 }, children: "Column Span" }), jsxRuntimeExports.jsx("input", { type: "number", value: section['section-column-span'] || 1, onChange: (e) => handleChange('section-column-span', parseInt(e.target.value) || 1), min: "1", style: {
                                 width: '100%',
                                 padding: '8px 12px',
                                 border: '1px solid #ccc',
                                 borderRadius: '4px',
                                 fontSize: '12px',
+                                background: 'white',
+                                color: '#333',
                             } })] })] }));
     };
     const renderPanelProperties = () => {
@@ -4943,6 +4914,8 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
                                 border: '1px solid #ccc',
                                 borderRadius: '4px',
                                 fontSize: '12px',
+                                background: 'white',
+                                color: '#333',
                             } })] }), jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '12px', fontWeight: 500 }, children: "Orientation" }), jsxRuntimeExports.jsx("select", { value: panel['panel-orientation'] || 'vertical', onChange: (e) => handleChange('panel-orientation', e.target.value), style: {
                                 width: '100%',
                                 padding: '8px 12px',
@@ -4956,6 +4929,8 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
                                 border: '1px solid #ccc',
                                 borderRadius: '4px',
                                 fontSize: '12px',
+                                background: 'white',
+                                color: '#333',
                             } })] })] }));
     };
     const renderWidgetProperties = () => {
@@ -4989,24 +4964,32 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
                                 border: '1px solid #ccc',
                                 borderRadius: '4px',
                                 fontSize: '12px',
+                                background: 'white',
+                                color: '#333',
                             } })] }), jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '12px', fontWeight: 500 }, children: "Widget Label" }), jsxRuntimeExports.jsx("input", { type: "text", value: widget['widget-label'] || '', onChange: (e) => handleChange('widget-label', e.target.value), style: {
                                 width: '100%',
                                 padding: '8px 12px',
                                 border: '1px solid #ccc',
                                 borderRadius: '4px',
                                 fontSize: '12px',
+                                background: 'white',
+                                color: '#333',
                             }, placeholder: "Enter label..." })] }), jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '12px', fontWeight: 500 }, children: "Data Path" }), jsxRuntimeExports.jsx("input", { type: "text", value: typeof widget['widget-data-path'] === 'string' ? widget['widget-data-path'] : '', onChange: (e) => handleChange('widget-data-path', e.target.value), style: {
                                 width: '100%',
                                 padding: '8px 12px',
                                 border: '1px solid #ccc',
                                 borderRadius: '4px',
                                 fontSize: '12px',
+                                background: 'white',
+                                color: '#333',
                             }, placeholder: "person.name" })] }), jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '12px', fontWeight: 500 }, children: "Placeholder" }), jsxRuntimeExports.jsx("input", { type: "text", value: widget['widget-data-placeholder'] || '', onChange: (e) => handleChange('widget-data-placeholder', e.target.value), style: {
                                 width: '100%',
                                 padding: '8px 12px',
                                 border: '1px solid #ccc',
                                 borderRadius: '4px',
                                 fontSize: '12px',
+                                background: 'white',
+                                color: '#333',
                             }, placeholder: "Enter placeholder..." })] }), jsxRuntimeExports.jsx("div", { style: { marginBottom: '20px' }, children: jsxRuntimeExports.jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '12px' }, children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: widget['widget-required'] || false, onChange: (e) => handleChange('widget-required', e.target.checked) }), jsxRuntimeExports.jsx("span", { children: "Required" })] }) }), jsxRuntimeExports.jsx("div", { style: { marginBottom: '20px' }, children: jsxRuntimeExports.jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '12px' }, children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: widget['widget-readonly'] || false, onChange: (e) => handleChange('widget-readonly', e.target.checked) }), jsxRuntimeExports.jsx("span", { children: "Readonly" })] }) }), ['select', 'radio', 'checkbox'].includes(widget.widget) && (jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px', padding: '10px', background: '#e3f2fd', borderRadius: '4px' }, children: [jsxRuntimeExports.jsxs("label", { style: { display: 'block', marginBottom: '8px', fontSize: '12px', fontWeight: 600 }, children: ["Data Source (Required for ", widget.widget, ")"] }), jsxRuntimeExports.jsxs("div", { style: { marginBottom: '10px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '11px' }, children: "Source Type" }), jsxRuntimeExports.jsxs("select", { value: widget['widget-data-source']?.type || 'static', onChange: (e) => {
                                         ensureNestedObject('widget-data-source');
                                         handleNestedChange('widget-data-source', 'type', e.target.value);
@@ -5033,6 +5016,8 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
                                         fontSize: '11px',
                                         fontFamily: 'monospace',
                                         minHeight: '80px',
+                                        background: 'white',
+                                        color: '#333',
                                     }, placeholder: '[{"value": "opt1", "label": "Option 1"}]' })] })), widget['widget-data-source']?.type === 'api' && (() => {
                             const apiSource = widget['widget-data-source'];
                             return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { style: { marginBottom: '10px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '11px' }, children: "API URL" }), jsxRuntimeExports.jsx("input", { type: "text", value: apiSource.url || '', onChange: (e) => handleNestedChange('widget-data-source', 'url', e.target.value), style: {
@@ -5041,18 +5026,24 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
                                                     border: '1px solid #ccc',
                                                     borderRadius: '4px',
                                                     fontSize: '11px',
+                                                    background: 'white',
+                                                    color: '#333',
                                                 }, placeholder: "https://api.example.com/options" })] }), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '11px' }, children: "Value/Label Keys (e.g., \"id\"/\"name\")" }), jsxRuntimeExports.jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [jsxRuntimeExports.jsx("input", { type: "text", value: apiSource.valueKey || '', onChange: (e) => handleNestedChange('widget-data-source', 'valueKey', e.target.value), style: {
                                                             flex: 1,
                                                             padding: '6px 8px',
                                                             border: '1px solid #ccc',
                                                             borderRadius: '4px',
                                                             fontSize: '11px',
+                                                            background: 'white',
+                                                            color: '#333',
                                                         }, placeholder: "value key" }), jsxRuntimeExports.jsx("input", { type: "text", value: apiSource.labelKey || '', onChange: (e) => handleNestedChange('widget-data-source', 'labelKey', e.target.value), style: {
                                                             flex: 1,
                                                             padding: '6px 8px',
                                                             border: '1px solid #ccc',
                                                             borderRadius: '4px',
                                                             fontSize: '11px',
+                                                            background: 'white',
+                                                            color: '#333',
                                                         }, placeholder: "label key" })] })] })] }));
                         })()] })), widget.widget === 'table' && (jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px', padding: '10px', background: '#fff3e0', borderRadius: '4px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '8px', fontSize: '12px', fontWeight: 600 }, children: "Table Columns" }), jsxRuntimeExports.jsx("div", { style: { fontSize: '11px', color: '#666', marginBottom: '10px' }, children: "Configure columns in JSON editor or add via code" }), jsxRuntimeExports.jsx("textarea", { value: JSON.stringify(widget['widget-data-columns'] || [], null, 2), onChange: (e) => {
                                 try {
@@ -5070,30 +5061,40 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
                                 fontSize: '11px',
                                 fontFamily: 'monospace',
                                 minHeight: '100px',
+                                background: 'white',
+                                color: '#333',
                             }, placeholder: '[{"column-key": "col1", "widget-label": "Column 1", "widget": "text"}]' })] })), widget.widget === 'number' && (jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px', padding: '10px', background: '#f3e5f5', borderRadius: '4px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '8px', fontSize: '12px', fontWeight: 600 }, children: "Number Validation" }), jsxRuntimeExports.jsxs("div", { style: { display: 'flex', gap: '10px', marginBottom: '10px' }, children: [jsxRuntimeExports.jsxs("div", { style: { flex: 1 }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '11px' }, children: "Min Value" }), jsxRuntimeExports.jsx("input", { type: "number", value: widget['widget-data-validation']?.min ?? '', onChange: (e) => handleNestedChange('widget-data-validation', 'min', e.target.value ? parseFloat(e.target.value) : undefined), style: {
                                                 width: '100%',
                                                 padding: '6px 8px',
                                                 border: '1px solid #ccc',
                                                 borderRadius: '4px',
                                                 fontSize: '11px',
+                                                background: 'white',
+                                                color: '#333',
                                             } })] }), jsxRuntimeExports.jsxs("div", { style: { flex: 1 }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '11px' }, children: "Max Value" }), jsxRuntimeExports.jsx("input", { type: "number", value: widget['widget-data-validation']?.max ?? '', onChange: (e) => handleNestedChange('widget-data-validation', 'max', e.target.value ? parseFloat(e.target.value) : undefined), style: {
                                                 width: '100%',
                                                 padding: '6px 8px',
                                                 border: '1px solid #ccc',
                                                 borderRadius: '4px',
                                                 fontSize: '11px',
+                                                background: 'white',
+                                                color: '#333',
                                             } })] })] })] })), ['date', 'datetime'].includes(widget.widget) && (jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px', padding: '10px', background: '#e8f5e9', borderRadius: '4px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '8px', fontSize: '12px', fontWeight: 600 }, children: "Date Range Options" }), jsxRuntimeExports.jsxs("div", { style: { display: 'flex', gap: '10px', marginBottom: '10px' }, children: [jsxRuntimeExports.jsxs("div", { style: { flex: 1 }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '11px' }, children: "Min Date" }), jsxRuntimeExports.jsx("input", { type: "date", value: widget['widget-data-options']?.minDate || '', onChange: (e) => handleNestedChange('widget-data-options', 'minDate', e.target.value || undefined), style: {
                                                 width: '100%',
                                                 padding: '6px 8px',
                                                 border: '1px solid #ccc',
                                                 borderRadius: '4px',
                                                 fontSize: '11px',
+                                                background: 'white',
+                                                color: '#333',
                                             } })] }), jsxRuntimeExports.jsxs("div", { style: { flex: 1 }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '11px' }, children: "Max Date" }), jsxRuntimeExports.jsx("input", { type: "date", value: widget['widget-data-options']?.maxDate || '', onChange: (e) => handleNestedChange('widget-data-options', 'maxDate', e.target.value || undefined), style: {
                                                 width: '100%',
                                                 padding: '6px 8px',
                                                 border: '1px solid #ccc',
                                                 borderRadius: '4px',
                                                 fontSize: '11px',
+                                                background: 'white',
+                                                color: '#333',
                                             } })] })] }), jsxRuntimeExports.jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '11px' }, children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: widget['widget-data-options']?.showCalendar || false, onChange: (e) => handleNestedChange('widget-data-options', 'showCalendar', e.target.checked) }), jsxRuntimeExports.jsx("span", { children: "Show Calendar" })] })] })), jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px', padding: '10px', background: '#f0f0f0', borderRadius: '4px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '8px', fontSize: '12px', fontWeight: 600 }, children: "Validation" }), jsxRuntimeExports.jsx("div", { style: { marginBottom: '10px' }, children: jsxRuntimeExports.jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '12px' }, children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: widget['widget-data-validation']?.required || false, onChange: (e) => {
                                             if (!widget['widget-data-validation']) {
                                                 handleChange('widget-data-validation', { required: e.target.checked });
@@ -5113,6 +5114,8 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
                                                 border: '1px solid #ccc',
                                                 borderRadius: '4px',
                                                 fontSize: '11px',
+                                                background: 'white',
+                                                color: '#333',
                                             } })] }), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '11px' }, children: "Max Length" }), jsxRuntimeExports.jsx("input", { type: "number", value: widget['widget-data-validation']?.maxLength || '', onChange: (e) => {
                                                 const validation = widget['widget-data-validation'] || {};
                                                 handleChange('widget-data-validation', {
@@ -5125,6 +5128,8 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
                                                 border: '1px solid #ccc',
                                                 borderRadius: '4px',
                                                 fontSize: '11px',
+                                                background: 'white',
+                                                color: '#333',
                                             } })] })] }))] })] }));
     };
     const getHeaderColor = () => {
@@ -5154,7 +5159,7 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
                             flex: 1,
                             padding: '10px',
                             border: 'none',
-                            borderRadius: '4px',
+                            borderRadius: '10px',
                             background: '#f44336',
                             color: 'white',
                             fontWeight: 600,
@@ -5164,7 +5169,7 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
                             flex: 1,
                             padding: '10px',
                             border: 'none',
-                            borderRadius: '4px',
+                            borderRadius: '10px',
                             background: '#ff9800',
                             color: 'white',
                             fontWeight: 600,
@@ -5323,17 +5328,18 @@ const VisualBuilderPanel = ({ section, selectedNode, onSelectNode, onSectionChan
             height: '100%',
             width: '100%',
             minHeight: 0,
+            paddingBottom: '10px',
+            borderRight: '0px',
         }, children: [jsxRuntimeExports.jsxs("div", { style: {
-                    padding: '15px 20px',
+                    padding: '20px 20px 20px 20px',
                     background: '#ffffff',
-                    borderBottom: '1px solid #ddd',
                     display: 'flex',
                     justifyContent: 'space-between',
                     alignItems: 'center',
-                }, children: [jsxRuntimeExports.jsx("div", { style: { fontWeight: 600, fontSize: '16px', color: '#2c3e50' }, children: "Visual Builder" }), jsxRuntimeExports.jsxs("div", { style: { display: 'flex', gap: '10px' }, children: [jsxRuntimeExports.jsx("button", { onClick: handleAddPanel, style: {
+                }, children: [jsxRuntimeExports.jsx("div", { style: { fontWeight: 600, fontSize: '16px', color: '#2c3e50', paddingTop: '5px' }, children: "Visual Builder" }), jsxRuntimeExports.jsxs("div", { style: { display: 'flex', gap: '10px' }, children: [jsxRuntimeExports.jsx("button", { onClick: handleAddPanel, style: {
                                     padding: '8px 16px',
                                     border: 'none',
-                                    borderRadius: '4px',
+                                    borderRadius: '10px',
                                     background: '#2196f3',
                                     color: 'white',
                                     fontWeight: 600,
@@ -5343,7 +5349,7 @@ const VisualBuilderPanel = ({ section, selectedNode, onSelectNode, onSectionChan
                                 }, children: "+ Add Panel" }), jsxRuntimeExports.jsx("button", { onClick: handleAddWidget, style: {
                                     padding: '8px 16px',
                                     border: 'none',
-                                    borderRadius: '4px',
+                                    borderRadius: '10px',
                                     background: '#4caf50',
                                     color: 'white',
                                     fontWeight: 600,
@@ -5353,8 +5359,8 @@ const VisualBuilderPanel = ({ section, selectedNode, onSelectNode, onSectionChan
                                 }, children: "+ Add Widget" }), onSave && (jsxRuntimeExports.jsx("button", { onClick: handleSave, style: {
                                     padding: '8px 16px',
                                     border: 'none',
-                                    borderRadius: '4px',
-                                    background: '#ff9800',
+                                    borderRadius: '10px',
+                                    background: '#000000',
                                     color: 'white',
                                     fontWeight: 600,
                                     cursor: 'pointer',
@@ -5376,6 +5382,8 @@ const VisualBuilderPanel = ({ section, selectedNode, onSelectNode, onSectionChan
                     flex: 1,
                     display: 'flex',
                     overflow: 'hidden',
+                    border: '1px solid #ddd',
+                    borderRadius: '10px',
                     minHeight: 0, // Important for flex children to respect overflow
                 }, children: [jsxRuntimeExports.jsx("div", { style: {
                             width: '45%',
@@ -5435,77 +5443,6 @@ const SectionBuilder = ({ initialSection, onChange, onSave, }) => {
             onChange(original);
         }
     }, [onChange]);
-    // Handle node selection from JSON editor
-    const handleSelectNodeFromJson = React.useCallback((nodeId, nodeType) => {
-        // Find the corresponding node in the section structure
-        const findNode = () => {
-            if (nodeType === 'section') {
-                return {
-                    type: 'section',
-                    id: section['section-id'],
-                    label: `Section: ${section['section-id']}`,
-                    data: section,
-                };
-            }
-            // Recursively search for panel or widget
-            const searchInPanels = (panels, parent) => {
-                for (const panel of panels) {
-                    if (nodeType === 'panel' && panel['panel-id'] === nodeId) {
-                        return {
-                            type: 'panel',
-                            id: panel['panel-id'],
-                            label: `Panel: ${panel['panel-id']}`,
-                            data: panel,
-                            parent: parent,
-                        };
-                    }
-                    // Check nested panels
-                    if (panel.panels) {
-                        const panelNode = {
-                            type: 'panel',
-                            id: panel['panel-id'],
-                            label: `Panel: ${panel['panel-id']}`,
-                            data: panel,
-                            parent: parent,
-                        };
-                        const found = searchInPanels(panel.panels, panelNode);
-                        if (found)
-                            return found;
-                    }
-                    // Check widgets
-                    if (panel.widgets) {
-                        const panelNode = {
-                            type: 'panel',
-                            id: panel['panel-id'],
-                            label: `Panel: ${panel['panel-id']}`,
-                            data: panel,
-                            parent: parent,
-                        };
-                        for (const widget of panel.widgets) {
-                            if (nodeType === 'widget' && widget['widget-id'] === nodeId) {
-                                return {
-                                    type: 'widget',
-                                    id: widget['widget-id'],
-                                    label: `Widget: ${widget['widget-id']} (${widget.widget})`,
-                                    data: widget,
-                                    parent: panelNode,
-                                };
-                            }
-                        }
-                    }
-                }
-                return null;
-            };
-            if (section.panels) {
-                return searchInPanels(section.panels);
-            }
-            return null;
-        };
-        const node = findNode();
-        if (node) {
-            setSelectedNode(node);
-        }
-    }, [section]);
     const handleAddPanel = React.useCallback((parentId, parentType) => {
         const updatedSection = JSON.parse(JSON.stringify(section));
         const newPanel = {
@@ -5685,7 +5622,7 @@ const SectionBuilder = ({ initialSection, onChange, onSave, }) => {
                             padding: '10px 10px 10px 10px',
                             flexDirection: 'column',
                             borderRight: '0px',
-                        }, children: jsxRuntimeExports.jsx(JSONEditorPanel, { section: section, onChange: handleSectionChange, onReset: handleReset, onSelectNode: handleSelectNodeFromJson }) }), jsxRuntimeExports.jsx("div", { style: {
+                        }, children: jsxRuntimeExports.jsx(JSONEditorPanel, { section: section, onChange: handleSectionChange, onReset: handleReset }) }), jsxRuntimeExports.jsx("div", { style: {
                             width: '50%',
                             height: '100%',
                             minHeight: 0,
@@ -7515,8 +7452,41 @@ const CurrencyInputWidget = ({ config }) => {
 const DisplayWidget = ({ config }) => {
     const { value, formattedValue, config: widgetConfig, } = useBaseWidget({ config });
     const { translateConfig } = useWidgetTranslation();
-    // Use formatted value if available, otherwise raw value
-    const displayValue = formattedValue !== undefined ? formattedValue : (value || '');
+    // Helper to safely convert value to display string
+    const getDisplayValue = (val) => {
+        if (val === null || val === undefined) {
+            return '';
+        }
+        // If it's already a string or number, return as string
+        if (typeof val === 'string' || typeof val === 'number') {
+            return String(val);
+        }
+        // If it's an object (like geo hierarchy), try to extract a meaningful value
+        if (typeof val === 'object' && !Array.isArray(val)) {
+            // For geo hierarchy objects, try to extract the actual value
+            if ('geo_lowest_level_value_id' in val) {
+                return String(val.geo_lowest_level_value_id || '');
+            }
+            if ('value' in val) {
+                return String(val.value || '');
+            }
+            if ('id' in val) {
+                return String(val.id || '');
+            }
+            // If no extractable value, return empty string to avoid rendering object
+            return '';
+        }
+        // For arrays, join them or return empty
+        if (Array.isArray(val)) {
+            return val.length > 0 ? val.map(String).join(', ') : '';
+        }
+        // Fallback: convert to string
+        return String(val);
+    };
+    // Use formatted value if available, otherwise safely convert raw value
+    const displayValue = formattedValue !== undefined
+        ? (typeof formattedValue === 'object' ? getDisplayValue(formattedValue) : String(formattedValue))
+        : getDisplayValue(value);
     const label = translateConfig(widgetConfig['widget-label']);
     // If no label, render as paragraph text
     if (!label || label.trim() === '') {