@openg2p/registry-widgets 0.1.2 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/SectionBuilder/JSONEditorPanel.d.ts +0 -1
  2. package/dist/components/SectionBuilder/JSONEditorPanel.d.ts.map +1 -1
  3. package/dist/components/SectionBuilder/PropertyEditor.d.ts.map +1 -1
  4. package/dist/components/SectionBuilder/SectionBuilder.d.ts.map +1 -1
  5. package/dist/components/SectionBuilder/VisualBuilderPanel.d.ts.map +1 -1
  6. package/dist/index.d.ts +0 -1
  7. package/dist/index.esm.js +63 -181
  8. package/dist/index.esm.js.map +1 -1
  9. package/dist/index.js +63 -181
  10. package/dist/index.js.map +1 -1
  11. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -3478,7 +3478,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
3478
3478
  }), hasSupportingDocuments && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("hr", { className: "my-4 w-full", style: { height: '1px', backgroundColor: '#F2BA1A', border: 'none' } }), jsxRuntimeExports.jsxs("div", { className: "supporting-documents-container", children: [jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => setIsDocumentsExpanded(!isDocumentsExpanded), className: "supporting-documents-title-button w-full flex items-center text-left", children: [jsxRuntimeExports.jsx("span", { className: "font-semibold", style: { fontFamily: 'Roboto, sans-serif', fontSize: '16px' }, children: translate('common.supportedDocuments') || 'Supported Documents' }), jsxRuntimeExports.jsx("svg", { className: `w-5 h-5 text-[#ED7C22] transition-transform ml-2 ${isDocumentsExpanded ? 'rotate-180' : ''}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), isDocumentsExpanded && (jsxRuntimeExports.jsx("div", { className: "supporting-documents-grid mt-4", children: supportingDocuments.map((doc, index) => {
3479
3479
  const docConfig = createDocumentWidgetConfig(doc, sectionId, index);
3480
3480
  return (jsxRuntimeExports.jsx("div", { className: "supporting-document-item", children: jsxRuntimeExports.jsx(FileInputWidget, { config: docConfig }) }, `${sectionId}-doc-${index}`));
3481
- }) }))] })] })), jsxRuntimeExports.jsx("hr", { className: "w-full", style: { height: '1px', backgroundColor: '#F2BA1A', border: 'none', marginTop: hasSupportingDocuments ? '20px' : 0, marginBottom: '20px' } }), jsxRuntimeExports.jsx("div", { className: "edit-controls-container", style: { marginBottom: '20px' }, children: jsxRuntimeExports.jsxs("div", { className: "edit-controls-buttons", children: [jsxRuntimeExports.jsx("button", { onClick: handleCancel, className: "bg-white hover:bg-gray-50 text-gray-900 text-sm font-medium px-6 py-2 transition-colors border border-gray-300", style: { fontFamily: 'Roboto, sans-serif', borderRadius: '15px' }, children: translate('common.cancel') || 'Cancel' }), jsxRuntimeExports.jsx("button", { onClick: handleSave, className: "bg-gray-900 hover:bg-gray-800 text-white text-sm font-medium px-6 py-2 transition-colors", style: { fontFamily: 'Roboto, sans-serif', borderRadius: '15px' }, children: translate('common.save') || 'Save' })] }) })] })] })] }), document.body);
3481
+ }) }))] })] })), jsxRuntimeExports.jsx("hr", { className: "w-full", style: { height: '1px', backgroundColor: '#F2BA1A', border: 'none', marginTop: hasSupportingDocuments ? '20px' : 0, marginBottom: '20px' } }), jsxRuntimeExports.jsx("div", { className: "edit-controls-container", style: { marginBottom: '20px' }, children: jsxRuntimeExports.jsxs("div", { className: "edit-controls-buttons", children: [jsxRuntimeExports.jsx("button", { onClick: handleCancel, className: "bg-white hover:bg-gray-50 text-gray-900 text-sm font-medium px-6 py-2 transition-colors border border-gray-300", style: { fontFamily: 'Roboto, sans-serif', borderRadius: '10px' }, children: translate('common.cancel') || 'Cancel' }), jsxRuntimeExports.jsx("button", { onClick: handleSave, className: "bg-gray-900 hover:bg-gray-800 text-white text-sm font-medium px-6 py-2 transition-colors", style: { fontFamily: 'Roboto, sans-serif', borderRadius: '10px' }, children: translate('common.save') || 'Save' })] }) })] })] })] }), document.body);
3482
3482
  };
3483
3483
  const collectWidgets = (panels) => {
3484
3484
  let widgets = [];
@@ -3714,7 +3714,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
3714
3714
  border-style: dashed;
3715
3715
  border-width: 1px;
3716
3716
  background-color: #F3E6BC;
3717
- border-radius: 30px;
3717
+ border-radius: 10px;
3718
3718
  z-index: 10;
3719
3719
  position: absolute;
3720
3720
  }
@@ -3811,10 +3811,10 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
3811
3811
  align-items: center;
3812
3812
  gap: 0.5rem;
3813
3813
  }
3814
- ` }), 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: {
3814
+ ` }), 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, style: {
3815
3815
  gridColumn: `span ${columnSpan}`,
3816
3816
  width: '100%',
3817
- borderRadius: '30px',
3817
+ borderRadius: '10px',
3818
3818
  backgroundColor: '#FFFFFF',
3819
3819
  ...(isEditMode && sectionHeight ? {
3820
3820
  height: `${sectionHeight}px`,
@@ -4117,7 +4117,7 @@ if (typeof document !== 'undefined') {
4117
4117
  /**
4118
4118
  * JSON Editor Panel - Left side of Section Builder
4119
4119
  */
4120
- const JSONEditorPanel = ({ section, onChange, onReset, onSelectNode, context = 'section', }) => {
4120
+ const JSONEditorPanel = ({ section, onChange, onReset, context = 'section', }) => {
4121
4121
  const [jsonData, setJsonData] = React.useState(section);
4122
4122
  const [validationErrors, setValidationErrors] = React.useState([]);
4123
4123
  const [rawJsonView, setRawJsonView] = React.useState(false);
@@ -4189,96 +4189,6 @@ const JSONEditorPanel = ({ section, onChange, onReset, onSelectNode, context = '
4189
4189
  window.addEventListener('keydown', handleEscape);
4190
4190
  return () => window.removeEventListener('keydown', handleEscape);
4191
4191
  }, [showPreview]);
4192
- // Handle clicks in JSON editor to select corresponding node in visual builder
4193
- React.useEffect(() => {
4194
- if (!onSelectNode || rawJsonView)
4195
- return; // Only work in tree view, not raw JSON view
4196
- const handleJsonEditorClick = (e) => {
4197
- const mouseEvent = e;
4198
- const target = mouseEvent.target;
4199
- // Find the key text element (json-edit-react uses .jer-key-text class)
4200
- const keyElement = target.closest('.jer-key-text') ||
4201
- target.querySelector('.jer-key-text') ||
4202
- (target.classList.contains('jer-key-text') ? target : null);
4203
- if (!keyElement)
4204
- return;
4205
- const keyText = keyElement.textContent?.trim();
4206
- if (!keyText)
4207
- return;
4208
- // Remove colon if present
4209
- const keyName = keyText.replace(':', '').trim();
4210
- // Map key names to node types and find the corresponding node
4211
- let nodeId = null;
4212
- let nodeType = null;
4213
- if (keyName === 'section-id') {
4214
- // Find the section-id value
4215
- const keyRow = keyElement.closest('.jer-collection-header-row, .jer-value-row');
4216
- if (keyRow) {
4217
- const valueElement = keyRow.querySelector('.jer-value-text, .jer-string-value');
4218
- if (valueElement) {
4219
- nodeId = valueElement.textContent?.replace(/^"|"$/g, '').trim() || section['section-id'];
4220
- nodeType = 'section';
4221
- }
4222
- }
4223
- }
4224
- else if (keyName === 'panel-id') {
4225
- // Find the panel-id value in the current panel object
4226
- const panelContainer = keyElement.closest('.jer-collection-component');
4227
- if (panelContainer) {
4228
- const valueElement = panelContainer.querySelector('.jer-value-text, .jer-string-value');
4229
- if (valueElement) {
4230
- // Try to find panel-id value in this panel
4231
- const allKeys = panelContainer.querySelectorAll('.jer-key-text');
4232
- for (const key of Array.from(allKeys)) {
4233
- if (key.textContent?.includes('panel-id')) {
4234
- const keyRow = key.closest('.jer-collection-header-row, .jer-value-row');
4235
- if (keyRow) {
4236
- const valElement = keyRow.querySelector('.jer-value-text, .jer-string-value');
4237
- if (valElement) {
4238
- nodeId = valElement.textContent?.replace(/^"|"$/g, '').trim() || null;
4239
- nodeType = 'panel';
4240
- break;
4241
- }
4242
- }
4243
- }
4244
- }
4245
- }
4246
- }
4247
- }
4248
- else if (keyName === 'widget-id') {
4249
- // Find the widget-id value in the current widget object
4250
- const widgetContainer = keyElement.closest('.jer-collection-component');
4251
- if (widgetContainer) {
4252
- const allKeys = widgetContainer.querySelectorAll('.jer-key-text');
4253
- for (const key of Array.from(allKeys)) {
4254
- if (key.textContent?.includes('widget-id')) {
4255
- const keyRow = key.closest('.jer-collection-header-row, .jer-value-row');
4256
- if (keyRow) {
4257
- const valElement = keyRow.querySelector('.jer-value-text, .jer-string-value');
4258
- if (valElement) {
4259
- nodeId = valElement.textContent?.replace(/^"|"$/g, '').trim() || null;
4260
- nodeType = 'widget';
4261
- break;
4262
- }
4263
- }
4264
- }
4265
- }
4266
- }
4267
- }
4268
- // If we found a node, select it in the visual builder
4269
- if (nodeId && nodeType) {
4270
- onSelectNode(nodeId, nodeType);
4271
- }
4272
- };
4273
- // Add click listener to the JSON editor container
4274
- const editorContainer = document.querySelector('.json-editor-scroll-container');
4275
- if (editorContainer) {
4276
- editorContainer.addEventListener('click', handleJsonEditorClick);
4277
- return () => {
4278
- editorContainer.removeEventListener('click', handleJsonEditorClick);
4279
- };
4280
- }
4281
- }, [onSelectNode, rawJsonView, section]);
4282
4192
  // Make section editable for preview - remove readonly flags from widgets
4283
4193
  const makeSectionEditable = React.useCallback((section) => {
4284
4194
  const processWidget = (widget) => {
@@ -4523,7 +4433,7 @@ const JSONEditorPanel = ({ section, onChange, onReset, onSelectNode, context = '
4523
4433
  minHeight: 0,
4524
4434
  borderRight: '0px',
4525
4435
  }, children: [jsxRuntimeExports.jsxs("div", { style: {
4526
- padding: '15px 20px',
4436
+ padding: '16px 20px',
4527
4437
  background: '#ffffff',
4528
4438
  display: 'flex',
4529
4439
  justifyContent: 'space-between',
@@ -4545,8 +4455,8 @@ const JSONEditorPanel = ({ section, onChange, onReset, onSelectNode, context = '
4545
4455
  }, children: [jsxRuntimeExports.jsxs("button", { onClick: handleReset, style: {
4546
4456
  padding: '6px 12px',
4547
4457
  border: '1px solid #ddd',
4548
- borderRadius: '4px',
4549
- background: 'white',
4458
+ borderRadius: '10px',
4459
+ background: '#f3f3f3',
4550
4460
  color: '#666',
4551
4461
  cursor: 'pointer',
4552
4462
  display: 'flex',
@@ -4564,8 +4474,8 @@ const JSONEditorPanel = ({ section, onChange, onReset, onSelectNode, context = '
4564
4474
  }, 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: {
4565
4475
  padding: '6px 12px',
4566
4476
  border: '1px solid #ddd',
4567
- borderRadius: '4px',
4568
- background: 'white',
4477
+ borderRadius: '10px',
4478
+ background: '#f3f3f3',
4569
4479
  color: '#666',
4570
4480
  cursor: 'pointer',
4571
4481
  display: 'flex',
@@ -4921,18 +4831,24 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
4921
4831
  border: '1px solid #ccc',
4922
4832
  borderRadius: '4px',
4923
4833
  fontSize: '12px',
4834
+ background: 'white',
4835
+ color: '#333',
4924
4836
  } })] }), 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: {
4925
4837
  width: '100%',
4926
4838
  padding: '8px 12px',
4927
4839
  border: '1px solid #ccc',
4928
4840
  borderRadius: '4px',
4929
4841
  fontSize: '12px',
4842
+ background: 'white',
4843
+ color: '#333',
4930
4844
  } })] }), 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: {
4931
4845
  width: '100%',
4932
4846
  padding: '8px 12px',
4933
4847
  border: '1px solid #ccc',
4934
4848
  borderRadius: '4px',
4935
4849
  fontSize: '12px',
4850
+ background: 'white',
4851
+ color: '#333',
4936
4852
  } })] })] }));
4937
4853
  };
4938
4854
  const renderPanelProperties = () => {
@@ -4943,6 +4859,8 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
4943
4859
  border: '1px solid #ccc',
4944
4860
  borderRadius: '4px',
4945
4861
  fontSize: '12px',
4862
+ background: 'white',
4863
+ color: '#333',
4946
4864
  } })] }), 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: {
4947
4865
  width: '100%',
4948
4866
  padding: '8px 12px',
@@ -4956,6 +4874,8 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
4956
4874
  border: '1px solid #ccc',
4957
4875
  borderRadius: '4px',
4958
4876
  fontSize: '12px',
4877
+ background: 'white',
4878
+ color: '#333',
4959
4879
  } })] })] }));
4960
4880
  };
4961
4881
  const renderWidgetProperties = () => {
@@ -4989,24 +4909,32 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
4989
4909
  border: '1px solid #ccc',
4990
4910
  borderRadius: '4px',
4991
4911
  fontSize: '12px',
4912
+ background: 'white',
4913
+ color: '#333',
4992
4914
  } })] }), 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: {
4993
4915
  width: '100%',
4994
4916
  padding: '8px 12px',
4995
4917
  border: '1px solid #ccc',
4996
4918
  borderRadius: '4px',
4997
4919
  fontSize: '12px',
4920
+ background: 'white',
4921
+ color: '#333',
4998
4922
  }, 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: {
4999
4923
  width: '100%',
5000
4924
  padding: '8px 12px',
5001
4925
  border: '1px solid #ccc',
5002
4926
  borderRadius: '4px',
5003
4927
  fontSize: '12px',
4928
+ background: 'white',
4929
+ color: '#333',
5004
4930
  }, 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: {
5005
4931
  width: '100%',
5006
4932
  padding: '8px 12px',
5007
4933
  border: '1px solid #ccc',
5008
4934
  borderRadius: '4px',
5009
4935
  fontSize: '12px',
4936
+ background: 'white',
4937
+ color: '#333',
5010
4938
  }, 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) => {
5011
4939
  ensureNestedObject('widget-data-source');
5012
4940
  handleNestedChange('widget-data-source', 'type', e.target.value);
@@ -5033,6 +4961,8 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
5033
4961
  fontSize: '11px',
5034
4962
  fontFamily: 'monospace',
5035
4963
  minHeight: '80px',
4964
+ background: 'white',
4965
+ color: '#333',
5036
4966
  }, placeholder: '[{"value": "opt1", "label": "Option 1"}]' })] })), widget['widget-data-source']?.type === 'api' && (() => {
5037
4967
  const apiSource = widget['widget-data-source'];
5038
4968
  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 +4971,24 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
5041
4971
  border: '1px solid #ccc',
5042
4972
  borderRadius: '4px',
5043
4973
  fontSize: '11px',
4974
+ background: 'white',
4975
+ color: '#333',
5044
4976
  }, 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: {
5045
4977
  flex: 1,
5046
4978
  padding: '6px 8px',
5047
4979
  border: '1px solid #ccc',
5048
4980
  borderRadius: '4px',
5049
4981
  fontSize: '11px',
4982
+ background: 'white',
4983
+ color: '#333',
5050
4984
  }, placeholder: "value key" }), jsxRuntimeExports.jsx("input", { type: "text", value: apiSource.labelKey || '', onChange: (e) => handleNestedChange('widget-data-source', 'labelKey', e.target.value), style: {
5051
4985
  flex: 1,
5052
4986
  padding: '6px 8px',
5053
4987
  border: '1px solid #ccc',
5054
4988
  borderRadius: '4px',
5055
4989
  fontSize: '11px',
4990
+ background: 'white',
4991
+ color: '#333',
5056
4992
  }, placeholder: "label key" })] })] })] }));
5057
4993
  })()] })), 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) => {
5058
4994
  try {
@@ -5070,30 +5006,40 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
5070
5006
  fontSize: '11px',
5071
5007
  fontFamily: 'monospace',
5072
5008
  minHeight: '100px',
5009
+ background: 'white',
5010
+ color: '#333',
5073
5011
  }, 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: {
5074
5012
  width: '100%',
5075
5013
  padding: '6px 8px',
5076
5014
  border: '1px solid #ccc',
5077
5015
  borderRadius: '4px',
5078
5016
  fontSize: '11px',
5017
+ background: 'white',
5018
+ color: '#333',
5079
5019
  } })] }), 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: {
5080
5020
  width: '100%',
5081
5021
  padding: '6px 8px',
5082
5022
  border: '1px solid #ccc',
5083
5023
  borderRadius: '4px',
5084
5024
  fontSize: '11px',
5025
+ background: 'white',
5026
+ color: '#333',
5085
5027
  } })] })] })] })), ['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: {
5086
5028
  width: '100%',
5087
5029
  padding: '6px 8px',
5088
5030
  border: '1px solid #ccc',
5089
5031
  borderRadius: '4px',
5090
5032
  fontSize: '11px',
5033
+ background: 'white',
5034
+ color: '#333',
5091
5035
  } })] }), 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: {
5092
5036
  width: '100%',
5093
5037
  padding: '6px 8px',
5094
5038
  border: '1px solid #ccc',
5095
5039
  borderRadius: '4px',
5096
5040
  fontSize: '11px',
5041
+ background: 'white',
5042
+ color: '#333',
5097
5043
  } })] })] }), 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) => {
5098
5044
  if (!widget['widget-data-validation']) {
5099
5045
  handleChange('widget-data-validation', { required: e.target.checked });
@@ -5113,6 +5059,8 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
5113
5059
  border: '1px solid #ccc',
5114
5060
  borderRadius: '4px',
5115
5061
  fontSize: '11px',
5062
+ background: 'white',
5063
+ color: '#333',
5116
5064
  } })] }), 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) => {
5117
5065
  const validation = widget['widget-data-validation'] || {};
5118
5066
  handleChange('widget-data-validation', {
@@ -5125,6 +5073,8 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
5125
5073
  border: '1px solid #ccc',
5126
5074
  borderRadius: '4px',
5127
5075
  fontSize: '11px',
5076
+ background: 'white',
5077
+ color: '#333',
5128
5078
  } })] })] }))] })] }));
5129
5079
  };
5130
5080
  const getHeaderColor = () => {
@@ -5154,7 +5104,7 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
5154
5104
  flex: 1,
5155
5105
  padding: '10px',
5156
5106
  border: 'none',
5157
- borderRadius: '4px',
5107
+ borderRadius: '10px',
5158
5108
  background: '#f44336',
5159
5109
  color: 'white',
5160
5110
  fontWeight: 600,
@@ -5164,7 +5114,7 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
5164
5114
  flex: 1,
5165
5115
  padding: '10px',
5166
5116
  border: 'none',
5167
- borderRadius: '4px',
5117
+ borderRadius: '10px',
5168
5118
  background: '#ff9800',
5169
5119
  color: 'white',
5170
5120
  fontWeight: 600,
@@ -5323,17 +5273,18 @@ const VisualBuilderPanel = ({ section, selectedNode, onSelectNode, onSectionChan
5323
5273
  height: '100%',
5324
5274
  width: '100%',
5325
5275
  minHeight: 0,
5276
+ paddingBottom: '10px',
5277
+ borderRight: '0px',
5326
5278
  }, children: [jsxRuntimeExports.jsxs("div", { style: {
5327
- padding: '15px 20px',
5279
+ padding: '20px 20px 20px 20px',
5328
5280
  background: '#ffffff',
5329
- borderBottom: '1px solid #ddd',
5330
5281
  display: 'flex',
5331
5282
  justifyContent: 'space-between',
5332
5283
  alignItems: 'center',
5333
- }, 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: {
5284
+ }, 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: {
5334
5285
  padding: '8px 16px',
5335
5286
  border: 'none',
5336
- borderRadius: '4px',
5287
+ borderRadius: '10px',
5337
5288
  background: '#2196f3',
5338
5289
  color: 'white',
5339
5290
  fontWeight: 600,
@@ -5343,7 +5294,7 @@ const VisualBuilderPanel = ({ section, selectedNode, onSelectNode, onSectionChan
5343
5294
  }, children: "+ Add Panel" }), jsxRuntimeExports.jsx("button", { onClick: handleAddWidget, style: {
5344
5295
  padding: '8px 16px',
5345
5296
  border: 'none',
5346
- borderRadius: '4px',
5297
+ borderRadius: '10px',
5347
5298
  background: '#4caf50',
5348
5299
  color: 'white',
5349
5300
  fontWeight: 600,
@@ -5353,8 +5304,8 @@ const VisualBuilderPanel = ({ section, selectedNode, onSelectNode, onSectionChan
5353
5304
  }, children: "+ Add Widget" }), onSave && (jsxRuntimeExports.jsx("button", { onClick: handleSave, style: {
5354
5305
  padding: '8px 16px',
5355
5306
  border: 'none',
5356
- borderRadius: '4px',
5357
- background: '#ff9800',
5307
+ borderRadius: '10px',
5308
+ background: '#000000',
5358
5309
  color: 'white',
5359
5310
  fontWeight: 600,
5360
5311
  cursor: 'pointer',
@@ -5376,6 +5327,8 @@ const VisualBuilderPanel = ({ section, selectedNode, onSelectNode, onSectionChan
5376
5327
  flex: 1,
5377
5328
  display: 'flex',
5378
5329
  overflow: 'hidden',
5330
+ border: '1px solid #ddd',
5331
+ borderRadius: '10px',
5379
5332
  minHeight: 0, // Important for flex children to respect overflow
5380
5333
  }, children: [jsxRuntimeExports.jsx("div", { style: {
5381
5334
  width: '45%',
@@ -5435,77 +5388,6 @@ const SectionBuilder = ({ initialSection, onChange, onSave, }) => {
5435
5388
  onChange(original);
5436
5389
  }
5437
5390
  }, [onChange]);
5438
- // Handle node selection from JSON editor
5439
- const handleSelectNodeFromJson = React.useCallback((nodeId, nodeType) => {
5440
- // Find the corresponding node in the section structure
5441
- const findNode = () => {
5442
- if (nodeType === 'section') {
5443
- return {
5444
- type: 'section',
5445
- id: section['section-id'],
5446
- label: `Section: ${section['section-id']}`,
5447
- data: section,
5448
- };
5449
- }
5450
- // Recursively search for panel or widget
5451
- const searchInPanels = (panels, parent) => {
5452
- for (const panel of panels) {
5453
- if (nodeType === 'panel' && panel['panel-id'] === nodeId) {
5454
- return {
5455
- type: 'panel',
5456
- id: panel['panel-id'],
5457
- label: `Panel: ${panel['panel-id']}`,
5458
- data: panel,
5459
- parent: parent,
5460
- };
5461
- }
5462
- // Check nested panels
5463
- if (panel.panels) {
5464
- const panelNode = {
5465
- type: 'panel',
5466
- id: panel['panel-id'],
5467
- label: `Panel: ${panel['panel-id']}`,
5468
- data: panel,
5469
- parent: parent,
5470
- };
5471
- const found = searchInPanels(panel.panels, panelNode);
5472
- if (found)
5473
- return found;
5474
- }
5475
- // Check widgets
5476
- if (panel.widgets) {
5477
- const panelNode = {
5478
- type: 'panel',
5479
- id: panel['panel-id'],
5480
- label: `Panel: ${panel['panel-id']}`,
5481
- data: panel,
5482
- parent: parent,
5483
- };
5484
- for (const widget of panel.widgets) {
5485
- if (nodeType === 'widget' && widget['widget-id'] === nodeId) {
5486
- return {
5487
- type: 'widget',
5488
- id: widget['widget-id'],
5489
- label: `Widget: ${widget['widget-id']} (${widget.widget})`,
5490
- data: widget,
5491
- parent: panelNode,
5492
- };
5493
- }
5494
- }
5495
- }
5496
- }
5497
- return null;
5498
- };
5499
- if (section.panels) {
5500
- return searchInPanels(section.panels);
5501
- }
5502
- return null;
5503
- };
5504
- const node = findNode();
5505
- if (node) {
5506
- setSelectedNode(node);
5507
- }
5508
- }, [section]);
5509
5391
  const handleAddPanel = React.useCallback((parentId, parentType) => {
5510
5392
  const updatedSection = JSON.parse(JSON.stringify(section));
5511
5393
  const newPanel = {
@@ -5685,7 +5567,7 @@ const SectionBuilder = ({ initialSection, onChange, onSave, }) => {
5685
5567
  padding: '10px 10px 10px 10px',
5686
5568
  flexDirection: 'column',
5687
5569
  borderRight: '0px',
5688
- }, children: jsxRuntimeExports.jsx(JSONEditorPanel, { section: section, onChange: handleSectionChange, onReset: handleReset, onSelectNode: handleSelectNodeFromJson }) }), jsxRuntimeExports.jsx("div", { style: {
5570
+ }, children: jsxRuntimeExports.jsx(JSONEditorPanel, { section: section, onChange: handleSectionChange, onReset: handleReset }) }), jsxRuntimeExports.jsx("div", { style: {
5689
5571
  width: '50%',
5690
5572
  height: '100%',
5691
5573
  minHeight: 0,