@openg2p/registry-widgets 0.1.3 → 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 +60 -178
  8. package/dist/index.esm.js.map +1 -1
  9. package/dist/index.js +60 -178
  10. package/dist/index.js.map +1 -1
  11. package/package.json +1 -1
package/dist/components/SectionBuilder/JSONEditorPanel.d.ts CHANGED
@@ -4,7 +4,6 @@ interface JSONEditorPanelProps {
4
4
  section: SectionConfig;
5
5
  onChange: (section: SectionConfig) => void;
6
6
  onReset?: () => void;
7
- onSelectNode?: (nodeId: string, nodeType: 'section' | 'panel' | 'widget') => void;
8
7
  context?: 'section' | 'panel' | 'widget';
9
8
  }
10
9
  /**
package/dist/components/SectionBuilder/JSONEditorPanel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"JSONEditorPanel.d.ts","sourceRoot":"","sources":["../../../src/components/SectionBuilder/JSONEditorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAIjF,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAgD5C,UAAU,oBAAoB;IAC5B,OAAO,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,KAAK,IAAI,CAAC;IAClF,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1C;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAiyB1D,CAAC"}
1
+ {"version":3,"file":"JSONEditorPanel.d.ts","sourceRoot":"","sources":["../../../src/components/SectionBuilder/JSONEditorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAIjF,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAgD5C,UAAU,oBAAoB;IAC5B,OAAO,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1C;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAisB1D,CAAC"}
package/dist/components/SectionBuilder/PropertyEditor.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PropertyEditor.d.ts","sourceRoot":"","sources":["../../../src/components/SectionBuilder/PropertyEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,gBAAgB,EAAiB,MAAM,aAAa,CAAC;AAC1F,OAAO,EAAE,QAAQ,EAAgB,MAAM,eAAe,CAAC;AAGvD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC,aAAa,GAAG,WAAW,GAAG,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrG,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACvC;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6uBxD,CAAC"}
1
+ {"version":3,"file":"PropertyEditor.d.ts","sourceRoot":"","sources":["../../../src/components/SectionBuilder/PropertyEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,gBAAgB,EAAiB,MAAM,aAAa,CAAC;AAC1F,OAAO,EAAE,QAAQ,EAAgB,MAAM,eAAe,CAAC;AAGvD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC,aAAa,GAAG,WAAW,GAAG,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrG,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACvC;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqxBxD,CAAC"}
package/dist/components/SectionBuilder/SectionBuilder.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SectionBuilder.d.ts","sourceRoot":"","sources":["../../../src/components/SectionBuilder/SectionBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,aAAa,EAAiC,MAAM,aAAa,CAAC;AAK3E,MAAM,WAAW,mBAAmB;IAClC,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6YxD,CAAC"}
1
+ {"version":3,"file":"SectionBuilder.d.ts","sourceRoot":"","sources":["../../../src/components/SectionBuilder/SectionBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,aAAa,EAAiC,MAAM,aAAa,CAAC;AAK3E,MAAM,WAAW,mBAAmB;IAClC,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+TxD,CAAC"}
package/dist/components/SectionBuilder/VisualBuilderPanel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"VisualBuilderPanel.d.ts","sourceRoot":"","sources":["../../../src/components/SectionBuilder/VisualBuilderPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAiC,MAAM,aAAa,CAAC;AAC3E,OAAO,EAAe,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGtD,UAAU,uBAAuB;IAC/B,OAAO,EAAE,aAAa,CAAC;IACvB,YAAY,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC9B,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAClD,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,KAAK,IAAI,CAAC;IACnF,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,eAAe,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAiVhE,CAAC"}
1
+ {"version":3,"file":"VisualBuilderPanel.d.ts","sourceRoot":"","sources":["../../../src/components/SectionBuilder/VisualBuilderPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAiC,MAAM,aAAa,CAAC;AAC3E,OAAO,EAAe,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGtD,UAAU,uBAAuB;IAC/B,OAAO,EAAE,aAAa,CAAC;IACvB,YAAY,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC9B,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAClD,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,KAAK,IAAI,CAAC;IACnF,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,eAAe,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAsVhE,CAAC"}
package/dist/index.d.ts CHANGED
@@ -569,7 +569,6 @@ interface JSONEditorPanelProps {
569
569
  section: SectionConfig;
570
570
  onChange: (section: SectionConfig) => void;
571
571
  onReset?: () => void;
572
- onSelectNode?: (nodeId: string, nodeType: 'section' | 'panel' | 'widget') => void;
573
572
  context?: 'section' | 'panel' | 'widget';
574
573
  }
575
574
  /**
package/dist/index.esm.js CHANGED
@@ -3810,7 +3810,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
3810
3810
  align-items: center;
3811
3811
  gap: 0.5rem;
3812
3812
  }
3813
- ` }), 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: {
3813
+ ` }), 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: {
3814
3814
  gridColumn: `span ${columnSpan}`,
3815
3815
  width: '100%',
3816
3816
  borderRadius: '10px',
@@ -4116,7 +4116,7 @@ if (typeof document !== 'undefined') {
4116
4116
  /**
4117
4117
  * JSON Editor Panel - Left side of Section Builder
4118
4118
  */
4119
- const JSONEditorPanel = ({ section, onChange, onReset, onSelectNode, context = 'section', }) => {
4119
+ const JSONEditorPanel = ({ section, onChange, onReset, context = 'section', }) => {
4120
4120
  const [jsonData, setJsonData] = useState(section);
4121
4121
  const [validationErrors, setValidationErrors] = useState([]);
4122
4122
  const [rawJsonView, setRawJsonView] = useState(false);
@@ -4188,96 +4188,6 @@ const JSONEditorPanel = ({ section, onChange, onReset, onSelectNode, context = '
4188
4188
  window.addEventListener('keydown', handleEscape);
4189
4189
  return () => window.removeEventListener('keydown', handleEscape);
4190
4190
  }, [showPreview]);
4191
- // Handle clicks in JSON editor to select corresponding node in visual builder
4192
- useEffect(() => {
4193
- if (!onSelectNode || rawJsonView)
4194
- return; // Only work in tree view, not raw JSON view
4195
- const handleJsonEditorClick = (e) => {
4196
- const mouseEvent = e;
4197
- const target = mouseEvent.target;
4198
- // Find the key text element (json-edit-react uses .jer-key-text class)
4199
- const keyElement = target.closest('.jer-key-text') ||
4200
- target.querySelector('.jer-key-text') ||
4201
- (target.classList.contains('jer-key-text') ? target : null);
4202
- if (!keyElement)
4203
- return;
4204
- const keyText = keyElement.textContent?.trim();
4205
- if (!keyText)
4206
- return;
4207
- // Remove colon if present
4208
- const keyName = keyText.replace(':', '').trim();
4209
- // Map key names to node types and find the corresponding node
4210
- let nodeId = null;
4211
- let nodeType = null;
4212
- if (keyName === 'section-id') {
4213
- // Find the section-id value
4214
- const keyRow = keyElement.closest('.jer-collection-header-row, .jer-value-row');
4215
- if (keyRow) {
4216
- const valueElement = keyRow.querySelector('.jer-value-text, .jer-string-value');
4217
- if (valueElement) {
4218
- nodeId = valueElement.textContent?.replace(/^"|"$/g, '').trim() || section['section-id'];
4219
- nodeType = 'section';
4220
- }
4221
- }
4222
- }
4223
- else if (keyName === 'panel-id') {
4224
- // Find the panel-id value in the current panel object
4225
- const panelContainer = keyElement.closest('.jer-collection-component');
4226
- if (panelContainer) {
4227
- const valueElement = panelContainer.querySelector('.jer-value-text, .jer-string-value');
4228
- if (valueElement) {
4229
- // Try to find panel-id value in this panel
4230
- const allKeys = panelContainer.querySelectorAll('.jer-key-text');
4231
- for (const key of Array.from(allKeys)) {
4232
- if (key.textContent?.includes('panel-id')) {
4233
- const keyRow = key.closest('.jer-collection-header-row, .jer-value-row');
4234
- if (keyRow) {
4235
- const valElement = keyRow.querySelector('.jer-value-text, .jer-string-value');
4236
- if (valElement) {
4237
- nodeId = valElement.textContent?.replace(/^"|"$/g, '').trim() || null;
4238
- nodeType = 'panel';
4239
- break;
4240
- }
4241
- }
4242
- }
4243
- }
4244
- }
4245
- }
4246
- }
4247
- else if (keyName === 'widget-id') {
4248
- // Find the widget-id value in the current widget object
4249
- const widgetContainer = keyElement.closest('.jer-collection-component');
4250
- if (widgetContainer) {
4251
- const allKeys = widgetContainer.querySelectorAll('.jer-key-text');
4252
- for (const key of Array.from(allKeys)) {
4253
- if (key.textContent?.includes('widget-id')) {
4254
- const keyRow = key.closest('.jer-collection-header-row, .jer-value-row');
4255
- if (keyRow) {
4256
- const valElement = keyRow.querySelector('.jer-value-text, .jer-string-value');
4257
- if (valElement) {
4258
- nodeId = valElement.textContent?.replace(/^"|"$/g, '').trim() || null;
4259
- nodeType = 'widget';
4260
- break;
4261
- }
4262
- }
4263
- }
4264
- }
4265
- }
4266
- }
4267
- // If we found a node, select it in the visual builder
4268
- if (nodeId && nodeType) {
4269
- onSelectNode(nodeId, nodeType);
4270
- }
4271
- };
4272
- // Add click listener to the JSON editor container
4273
- const editorContainer = document.querySelector('.json-editor-scroll-container');
4274
- if (editorContainer) {
4275
- editorContainer.addEventListener('click', handleJsonEditorClick);
4276
- return () => {
4277
- editorContainer.removeEventListener('click', handleJsonEditorClick);
4278
- };
4279
- }
4280
- }, [onSelectNode, rawJsonView, section]);
4281
4191
  // Make section editable for preview - remove readonly flags from widgets
4282
4192
  const makeSectionEditable = useCallback((section) => {
4283
4193
  const processWidget = (widget) => {
@@ -4522,7 +4432,7 @@ const JSONEditorPanel = ({ section, onChange, onReset, onSelectNode, context = '
4522
4432
  minHeight: 0,
4523
4433
  borderRight: '0px',
4524
4434
  }, children: [jsxRuntimeExports.jsxs("div", { style: {
4525
- padding: '15px 20px',
4435
+ padding: '16px 20px',
4526
4436
  background: '#ffffff',
4527
4437
  display: 'flex',
4528
4438
  justifyContent: 'space-between',
@@ -4544,8 +4454,8 @@ const JSONEditorPanel = ({ section, onChange, onReset, onSelectNode, context = '
4544
4454
  }, children: [jsxRuntimeExports.jsxs("button", { onClick: handleReset, style: {
4545
4455
  padding: '6px 12px',
4546
4456
  border: '1px solid #ddd',
4547
- borderRadius: '4px',
4548
- background: 'white',
4457
+ borderRadius: '10px',
4458
+ background: '#f3f3f3',
4549
4459
  color: '#666',
4550
4460
  cursor: 'pointer',
4551
4461
  display: 'flex',
@@ -4563,8 +4473,8 @@ const JSONEditorPanel = ({ section, onChange, onReset, onSelectNode, context = '
4563
4473
  }, 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: {
4564
4474
  padding: '6px 12px',
4565
4475
  border: '1px solid #ddd',
4566
- borderRadius: '4px',
4567
- background: 'white',
4476
+ borderRadius: '10px',
4477
+ background: '#f3f3f3',
4568
4478
  color: '#666',
4569
4479
  cursor: 'pointer',
4570
4480
  display: 'flex',
@@ -4920,18 +4830,24 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
4920
4830
  border: '1px solid #ccc',
4921
4831
  borderRadius: '4px',
4922
4832
  fontSize: '12px',
4833
+ background: 'white',
4834
+ color: '#333',
4923
4835
  } })] }), 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: {
4924
4836
  width: '100%',
4925
4837
  padding: '8px 12px',
4926
4838
  border: '1px solid #ccc',
4927
4839
  borderRadius: '4px',
4928
4840
  fontSize: '12px',
4841
+ background: 'white',
4842
+ color: '#333',
4929
4843
  } })] }), 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: {
4930
4844
  width: '100%',
4931
4845
  padding: '8px 12px',
4932
4846
  border: '1px solid #ccc',
4933
4847
  borderRadius: '4px',
4934
4848
  fontSize: '12px',
4849
+ background: 'white',
4850
+ color: '#333',
4935
4851
  } })] })] }));
4936
4852
  };
4937
4853
  const renderPanelProperties = () => {
@@ -4942,6 +4858,8 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
4942
4858
  border: '1px solid #ccc',
4943
4859
  borderRadius: '4px',
4944
4860
  fontSize: '12px',
4861
+ background: 'white',
4862
+ color: '#333',
4945
4863
  } })] }), 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: {
4946
4864
  width: '100%',
4947
4865
  padding: '8px 12px',
@@ -4955,6 +4873,8 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
4955
4873
  border: '1px solid #ccc',
4956
4874
  borderRadius: '4px',
4957
4875
  fontSize: '12px',
4876
+ background: 'white',
4877
+ color: '#333',
4958
4878
  } })] })] }));
4959
4879
  };
4960
4880
  const renderWidgetProperties = () => {
@@ -4988,24 +4908,32 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
4988
4908
  border: '1px solid #ccc',
4989
4909
  borderRadius: '4px',
4990
4910
  fontSize: '12px',
4911
+ background: 'white',
4912
+ color: '#333',
4991
4913
  } })] }), 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: {
4992
4914
  width: '100%',
4993
4915
  padding: '8px 12px',
4994
4916
  border: '1px solid #ccc',
4995
4917
  borderRadius: '4px',
4996
4918
  fontSize: '12px',
4919
+ background: 'white',
4920
+ color: '#333',
4997
4921
  }, 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: {
4998
4922
  width: '100%',
4999
4923
  padding: '8px 12px',
5000
4924
  border: '1px solid #ccc',
5001
4925
  borderRadius: '4px',
5002
4926
  fontSize: '12px',
4927
+ background: 'white',
4928
+ color: '#333',
5003
4929
  }, 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: {
5004
4930
  width: '100%',
5005
4931
  padding: '8px 12px',
5006
4932
  border: '1px solid #ccc',
5007
4933
  borderRadius: '4px',
5008
4934
  fontSize: '12px',
4935
+ background: 'white',
4936
+ color: '#333',
5009
4937
  }, 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) => {
5010
4938
  ensureNestedObject('widget-data-source');
5011
4939
  handleNestedChange('widget-data-source', 'type', e.target.value);
@@ -5032,6 +4960,8 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
5032
4960
  fontSize: '11px',
5033
4961
  fontFamily: 'monospace',
5034
4962
  minHeight: '80px',
4963
+ background: 'white',
4964
+ color: '#333',
5035
4965
  }, placeholder: '[{"value": "opt1", "label": "Option 1"}]' })] })), widget['widget-data-source']?.type === 'api' && (() => {
5036
4966
  const apiSource = widget['widget-data-source'];
5037
4967
  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: {
@@ -5040,18 +4970,24 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
5040
4970
  border: '1px solid #ccc',
5041
4971
  borderRadius: '4px',
5042
4972
  fontSize: '11px',
4973
+ background: 'white',
4974
+ color: '#333',
5043
4975
  }, 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: {
5044
4976
  flex: 1,
5045
4977
  padding: '6px 8px',
5046
4978
  border: '1px solid #ccc',
5047
4979
  borderRadius: '4px',
5048
4980
  fontSize: '11px',
4981
+ background: 'white',
4982
+ color: '#333',
5049
4983
  }, placeholder: "value key" }), jsxRuntimeExports.jsx("input", { type: "text", value: apiSource.labelKey || '', onChange: (e) => handleNestedChange('widget-data-source', 'labelKey', e.target.value), style: {
5050
4984
  flex: 1,
5051
4985
  padding: '6px 8px',
5052
4986
  border: '1px solid #ccc',
5053
4987
  borderRadius: '4px',
5054
4988
  fontSize: '11px',
4989
+ background: 'white',
4990
+ color: '#333',
5055
4991
  }, placeholder: "label key" })] })] })] }));
5056
4992
  })()] })), 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) => {
5057
4993
  try {
@@ -5069,30 +5005,40 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
5069
5005
  fontSize: '11px',
5070
5006
  fontFamily: 'monospace',
5071
5007
  minHeight: '100px',
5008
+ background: 'white',
5009
+ color: '#333',
5072
5010
  }, 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: {
5073
5011
  width: '100%',
5074
5012
  padding: '6px 8px',
5075
5013
  border: '1px solid #ccc',
5076
5014
  borderRadius: '4px',
5077
5015
  fontSize: '11px',
5016
+ background: 'white',
5017
+ color: '#333',
5078
5018
  } })] }), 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: {
5079
5019
  width: '100%',
5080
5020
  padding: '6px 8px',
5081
5021
  border: '1px solid #ccc',
5082
5022
  borderRadius: '4px',
5083
5023
  fontSize: '11px',
5024
+ background: 'white',
5025
+ color: '#333',
5084
5026
  } })] })] })] })), ['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: {
5085
5027
  width: '100%',
5086
5028
  padding: '6px 8px',
5087
5029
  border: '1px solid #ccc',
5088
5030
  borderRadius: '4px',
5089
5031
  fontSize: '11px',
5032
+ background: 'white',
5033
+ color: '#333',
5090
5034
  } })] }), 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: {
5091
5035
  width: '100%',
5092
5036
  padding: '6px 8px',
5093
5037
  border: '1px solid #ccc',
5094
5038
  borderRadius: '4px',
5095
5039
  fontSize: '11px',
5040
+ background: 'white',
5041
+ color: '#333',
5096
5042
  } })] })] }), 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) => {
5097
5043
  if (!widget['widget-data-validation']) {
5098
5044
  handleChange('widget-data-validation', { required: e.target.checked });
@@ -5112,6 +5058,8 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
5112
5058
  border: '1px solid #ccc',
5113
5059
  borderRadius: '4px',
5114
5060
  fontSize: '11px',
5061
+ background: 'white',
5062
+ color: '#333',
5115
5063
  } })] }), 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) => {
5116
5064
  const validation = widget['widget-data-validation'] || {};
5117
5065
  handleChange('widget-data-validation', {
@@ -5124,6 +5072,8 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
5124
5072
  border: '1px solid #ccc',
5125
5073
  borderRadius: '4px',
5126
5074
  fontSize: '11px',
5075
+ background: 'white',
5076
+ color: '#333',
5127
5077
  } })] })] }))] })] }));
5128
5078
  };
5129
5079
  const getHeaderColor = () => {
@@ -5153,7 +5103,7 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
5153
5103
  flex: 1,
5154
5104
  padding: '10px',
5155
5105
  border: 'none',
5156
- borderRadius: '4px',
5106
+ borderRadius: '10px',
5157
5107
  background: '#f44336',
5158
5108
  color: 'white',
5159
5109
  fontWeight: 600,
@@ -5163,7 +5113,7 @@ const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
5163
5113
  flex: 1,
5164
5114
  padding: '10px',
5165
5115
  border: 'none',
5166
- borderRadius: '4px',
5116
+ borderRadius: '10px',
5167
5117
  background: '#ff9800',
5168
5118
  color: 'white',
5169
5119
  fontWeight: 600,
@@ -5322,17 +5272,18 @@ const VisualBuilderPanel = ({ section, selectedNode, onSelectNode, onSectionChan
5322
5272
  height: '100%',
5323
5273
  width: '100%',
5324
5274
  minHeight: 0,
5275
+ paddingBottom: '10px',
5276
+ borderRight: '0px',
5325
5277
  }, children: [jsxRuntimeExports.jsxs("div", { style: {
5326
- padding: '15px 20px',
5278
+ padding: '20px 20px 20px 20px',
5327
5279
  background: '#ffffff',
5328
- borderBottom: '1px solid #ddd',
5329
5280
  display: 'flex',
5330
5281
  justifyContent: 'space-between',
5331
5282
  alignItems: 'center',
5332
- }, 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: {
5283
+ }, 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: {
5333
5284
  padding: '8px 16px',
5334
5285
  border: 'none',
5335
- borderRadius: '4px',
5286
+ borderRadius: '10px',
5336
5287
  background: '#2196f3',
5337
5288
  color: 'white',
5338
5289
  fontWeight: 600,
@@ -5342,7 +5293,7 @@ const VisualBuilderPanel = ({ section, selectedNode, onSelectNode, onSectionChan
5342
5293
  }, children: "+ Add Panel" }), jsxRuntimeExports.jsx("button", { onClick: handleAddWidget, style: {
5343
5294
  padding: '8px 16px',
5344
5295
  border: 'none',
5345
- borderRadius: '4px',
5296
+ borderRadius: '10px',
5346
5297
  background: '#4caf50',
5347
5298
  color: 'white',
5348
5299
  fontWeight: 600,
@@ -5352,8 +5303,8 @@ const VisualBuilderPanel = ({ section, selectedNode, onSelectNode, onSectionChan
5352
5303
  }, children: "+ Add Widget" }), onSave && (jsxRuntimeExports.jsx("button", { onClick: handleSave, style: {
5353
5304
  padding: '8px 16px',
5354
5305
  border: 'none',
5355
- borderRadius: '4px',
5356
- background: '#ff9800',
5306
+ borderRadius: '10px',
5307
+ background: '#000000',
5357
5308
  color: 'white',
5358
5309
  fontWeight: 600,
5359
5310
  cursor: 'pointer',
@@ -5375,6 +5326,8 @@ const VisualBuilderPanel = ({ section, selectedNode, onSelectNode, onSectionChan
5375
5326
  flex: 1,
5376
5327
  display: 'flex',
5377
5328
  overflow: 'hidden',
5329
+ border: '1px solid #ddd',
5330
+ borderRadius: '10px',
5378
5331
  minHeight: 0, // Important for flex children to respect overflow
5379
5332
  }, children: [jsxRuntimeExports.jsx("div", { style: {
5380
5333
  width: '45%',
@@ -5434,77 +5387,6 @@ const SectionBuilder = ({ initialSection, onChange, onSave, }) => {
5434
5387
  onChange(original);
5435
5388
  }
5436
5389
  }, [onChange]);
5437
- // Handle node selection from JSON editor
5438
- const handleSelectNodeFromJson = useCallback((nodeId, nodeType) => {
5439
- // Find the corresponding node in the section structure
5440
- const findNode = () => {
5441
- if (nodeType === 'section') {
5442
- return {
5443
- type: 'section',
5444
- id: section['section-id'],
5445
- label: `Section: ${section['section-id']}`,
5446
- data: section,
5447
- };
5448
- }
5449
- // Recursively search for panel or widget
5450
- const searchInPanels = (panels, parent) => {
5451
- for (const panel of panels) {
5452
- if (nodeType === 'panel' && panel['panel-id'] === nodeId) {
5453
- return {
5454
- type: 'panel',
5455
- id: panel['panel-id'],
5456
- label: `Panel: ${panel['panel-id']}`,
5457
- data: panel,
5458
- parent: parent,
5459
- };
5460
- }
5461
- // Check nested panels
5462
- if (panel.panels) {
5463
- const panelNode = {
5464
- type: 'panel',
5465
- id: panel['panel-id'],
5466
- label: `Panel: ${panel['panel-id']}`,
5467
- data: panel,
5468
- parent: parent,
5469
- };
5470
- const found = searchInPanels(panel.panels, panelNode);
5471
- if (found)
5472
- return found;
5473
- }
5474
- // Check widgets
5475
- if (panel.widgets) {
5476
- const panelNode = {
5477
- type: 'panel',
5478
- id: panel['panel-id'],
5479
- label: `Panel: ${panel['panel-id']}`,
5480
- data: panel,
5481
- parent: parent,
5482
- };
5483
- for (const widget of panel.widgets) {
5484
- if (nodeType === 'widget' && widget['widget-id'] === nodeId) {
5485
- return {
5486
- type: 'widget',
5487
- id: widget['widget-id'],
5488
- label: `Widget: ${widget['widget-id']} (${widget.widget})`,
5489
- data: widget,
5490
- parent: panelNode,
5491
- };
5492
- }
5493
- }
5494
- }
5495
- }
5496
- return null;
5497
- };
5498
- if (section.panels) {
5499
- return searchInPanels(section.panels);
5500
- }
5501
- return null;
5502
- };
5503
- const node = findNode();
5504
- if (node) {
5505
- setSelectedNode(node);
5506
- }
5507
- }, [section]);
5508
5390
  const handleAddPanel = useCallback((parentId, parentType) => {
5509
5391
  const updatedSection = JSON.parse(JSON.stringify(section));
5510
5392
  const newPanel = {
@@ -5684,7 +5566,7 @@ const SectionBuilder = ({ initialSection, onChange, onSave, }) => {
5684
5566
  padding: '10px 10px 10px 10px',
5685
5567
  flexDirection: 'column',
5686
5568
  borderRight: '0px',
5687
- }, children: jsxRuntimeExports.jsx(JSONEditorPanel, { section: section, onChange: handleSectionChange, onReset: handleReset, onSelectNode: handleSelectNodeFromJson }) }), jsxRuntimeExports.jsx("div", { style: {
5569
+ }, children: jsxRuntimeExports.jsx(JSONEditorPanel, { section: section, onChange: handleSectionChange, onReset: handleReset }) }), jsxRuntimeExports.jsx("div", { style: {
5688
5570
  width: '50%',
5689
5571
  height: '100%',
5690
5572
  minHeight: 0,