feat(logic): finalize Advanced panels + Logic Groups, non-destructive save, renderer autoload, VE polish

Builder (field panel)
- Mount Advanced (JSON) first, then VE to ensure preload/save works.
- Move Add rule next to Save to JSON; late-bind fields/choices.
- Null-safe preload/save of logic JSON.

Logic Groups
- Modal “Add group” wired reliably.
- No rebuild on save (stop calling setData) → prevents panel disappearing.
- Patch getData('json') to inject hidden __logicGroups at export time only.
- Keep UI tweaks; backdrop alpha fixed.

Renderer
- On setup(), auto-load groups from hidden __logicGroups before target discovery.
- Improved watcher set and first-run evaluation.
- No breaking schema/UI changes. Existing forms remain compatible.

Signed-off-by: Jaimon Orlé <jaimon.orle@orleindustries.com>

Author: jaimonorle

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+✅ Field-level conditional logic (Visual + Advanced JSON) fully functional.
+✅ Logic Groups authoring modal; persisted via hidden __logicGroups; autoloaded by renderer.
+✅ Stable builder UX (no stage rebuild on save).
+🧩 Minor UI polish (clean headers, spacing, modal overlay).
 
 ## 0.2.2 — Public demos & polish
 

demo/composed.html

@@ -27,7 +27,7 @@ <h1>Composed Demo</h1>
         window.__FB_LOGIC_DEBUG__ = true;
 
         // IMPORTANT: Make sure the radio values match the rule ("yes"/"no"), or update the rule accordingly.
-        const formData = [{ "type": "radio-group", "required": false, "label": "Do you have a vehicle?", "inline": false, "name": "hasVehicle", "access": false, "other": false, "logicApplyTo": "self", "values": [{ "label": "Yes", "value": "yes", "selected": false }, { "label": "No", "value": "no", "selected": true }] }, { "type": "text", "required": false, "label": "Vehicle Make", "className": "form-control", "name": "vehicleMake", "access": false, "subtype": "text", "logic": "{\n  \"groups\": [\n    {\n      \"mode\": \"any\",\n      \"rules\": [\n        {\n          \"field\": \"hasVehicle\",\n          \"op\": \"equals\",\n          \"value\": \"yes\"\n        }\n      ],\n      \"actions\": [\n        \"show\",\n        \"require\"\n      ]\n    }\n  ]\n}", "logicApplyTo": "container" }, { "type": "text", "required": false, "label": "Vehicle Model", "className": "form-control", "name": "vehicleModel", "access": false, "subtype": "text", "logic": "{\n  \"groups\": [\n    {\n      \"mode\": \"any\",\n      \"rules\": [\n        {\n          \"field\": \"hasVehicle\",\n          \"op\": \"equals\",\n          \"value\": \"yes\"\n        }\n      ],\n      \"actions\": [\n        \"show\",\n        \"require\"\n      ]\n    }\n  ]\n}", "logicApplyTo": "container" }];
+        const formData = [{ "type": "radio-group", "required": false, "label": "Radio Group", "inline": false, "name": "radio-group-1762553349633-0", "access": false, "other": false, "logicApplyTo": "self", "values": [{ "label": "Option 1", "value": "option-1", "selected": false }, { "label": "Option 2", "value": "option-2", "selected": false }, { "label": "Option 3", "value": "option-3", "selected": false }] }, { "type": "text", "required": false, "label": "Text Field", "className": "form-control", "name": "text-1762553351518-0", "access": false, "subtype": "text", "logic": "{\n  \"groups\": [\n    {\n      \"mode\": \"any\",\n      \"rules\": [\n        {\n          \"field\": \"radio-group-1762553349633-0\",\n          \"op\": \"equals\",\n          \"value\": \"option-1\"\n        }\n      ],\n      \"actions\": [\n        \"show\",\n        \"require\",\n        \"enable\"\n      ]\n    }\n  ]\n}", "logicApplyTo": "self" }, { "type": "select", "required": false, "label": "Select", "className": "form-control", "name": "select-1762553352518-0", "access": false, "multiple": false, "logicApplyTo": "self", "values": [{ "label": "Option 1", "value": "option-1", "selected": true }, { "label": "Option 2", "value": "option-2", "selected": false }, { "label": "Option 3", "value": "option-3", "selected": false }] }, { "type": "textarea", "required": false, "label": "Text Area", "className": "form-control", "name": "textarea-1762553353324-0", "access": false, "subtype": "textarea", "logicApplyTo": "group", "logicGroup": "asdf" }, { "type": "hidden", "name": "__logicGroups", "value": "{\"asdf\":{\"mode\":\"any\",\"rules\":[{\"field\":\"select-1762553352518-0\",\"op\":\"equals\",\"value\":\"option-3\"}],\"actions\":[\"show\",\"require\",\"enable\"]}}", "label": " ", "access": false, "className": "d-none" }];
 
         const $root = window.jQuery('#render');
         $root.formRender({ formData });      // 1) render

dist/formbuilder-conditional-logic.es.js

@@ -1,9 +1,8 @@
 /**
- * Builder-side plugin helpers for formBuilder.
- * Adds:
- *  - typeUserAttrs for logic JSON, applyTo, logicGroup
- *  - onOpenFieldEdit panel that groups these controls
- *  - Visual Rules Editor (optional) that populates the logic JSON without typing
+ * Builder plugin for formBuilder: adds Conditional Logic panel and Groups modal.
+ * Exports:
+ *  - withConditionalLogic(opts) → formBuilder options extension
+ *  - attachLogicGroupsManager(toolbarEl, hooks)
  */
 type UserAttrs = Record<string, any>;
 export interface FieldMeta {
@@ -25,13 +24,12 @@ export interface BuilderInitOptions {
     }> | null;
     enableVisualEditor?: boolean;
 }
+/** Build the options object to pass into $('.build-wrap').formBuilder(...) */
 export declare function withConditionalLogic(opts?: BuilderInitOptions): {
     typeUserAttrs: Record<string, UserAttrs>;
     onOpenFieldEdit: (editPanel: HTMLElement) => void;
 };
-/**
- * Form-level groups JSON manager (as before)
- */
+/** Minimal Groups GUI living in a modal attached to a toolbar element */
 export declare function attachLogicGroupsManager(targetContainer: HTMLElement, initialOrOpts?: string | {
     initialJson?: string;
     getAvailableFields?: () => FieldMeta[];

dist/formbuilder-conditional-logic.es.js.map

@@ -10,9 +10,6 @@ declare global {
         };
     }
 }
-export declare function setup(formEl: HTMLElement | Element, _formData?: any, options?: SetupOptions): {
-    refresh: () => void;
-    destroy: () => void;
-};
+export declare function setup(formEl: HTMLElement | Element, _formData?: any, options?: SetupOptions): void;
 export declare function refresh(formEl: HTMLElement | Element): void;
 export declare function evaluateField(formEl: HTMLElement | Element, _name: string): void;