@cyprnet/node-red-contrib-uibuilder-formgen 0.5.36 → 0.5.38

package/CHANGELOG.md

@@ -80,6 +80,15 @@ All notable changes to this package will be documented in this file.
 
 - Checkbox defaults: Vue 2 portals now normalize checkbox <code>defaultValue</code> (accepts <code>true</code>/<code>false</code>, <code>1</code>/<code>0</code>, and common strings). Fixes cases where a checkbox appears checked but <code>showIf</code> dependent fields do not render until toggled.
 
+## 0.5.37
+
+- Portal UX: added a live Theme selector (Auto/Light/Dark) in the portal header. Selection applies immediately and is persisted in <code>localStorage</code> (<code>portalsmith:theme</code>) for both Vue 2 and Vue 3 portals (including legacy uib2).
+
+## 0.5.38
+
+- Schema Builder: sections can be marked collapsible (and optionally collapsed by default) for the generated portal.
+- Portal UX: generated portals can now collapse/expand sections when <code>section.collapsible</code> is enabled.
+
 ## 0.5.21
 
 - Legacy uibuilder 2.x: fixed vendor library paths (<code>../vendor/...</code>) in the uib2 portal template and uib2 Schema Builder so uibuilder comms work and <code>lookup:get</code> messages emit correctly.

package/docs/user-guide.html

@@ -608,6 +608,30 @@ return msg;</pre>
             <li><code>actions[]</code> (optional)</li>
           </ul>
 
+          <h3>Section properties</h3>
+          <p>Each section supports:</p>
+          <ul>
+            <li><code>id</code> (required)</li>
+            <li><code>title</code> (required)</li>
+            <li><code>description</code> (optional)</li>
+            <li><code>fields</code> (required array)</li>
+            <li><code>collapsible</code> (optional boolean): if true, the generated portal shows a Show/Hide toggle for that section</li>
+            <li><code>collapsedByDefault</code> (optional boolean): if true (and <code>collapsible</code> is true), the section starts collapsed</li>
+          </ul>
+          <pre>{
+  "id": "advanced",
+  "title": "Advanced Settings",
+  "description": "Optional settings most users can ignore",
+  "collapsible": true,
+  "collapsedByDefault": true,
+  "fields": [
+    { "id": "notes", "type": "textarea", "label": "Notes" }
+  ]
+}</pre>
+          <div class="note">
+            <strong>Schema Builder:</strong> Edit a section → enable <strong>Collapsible (generated portal)</strong> and optionally <strong>Start collapsed by default</strong>.
+          </div>
+
           <h3>Supported field types</h3>
           <table>
             <thead><tr><th>Type</th><th>Description</th></tr></thead>

package/examples/formgen-builder/src/index.html

@@ -189,8 +189,18 @@
             <div>
               <strong>{{section.title || 'Untitled Section'}}</strong>
               <small class="text-muted ml-2">({{section.fields.length}} fields)</small>
+              <b-badge v-if="section.collapsible" variant="info" class="ml-2">Collapsible</b-badge>
             </div>
             <div>
+              <b-button
+                variant="outline-secondary"
+                size="sm"
+                class="mr-2"
+                @click="toggleBuilderSectionCollapse(section.id)"
+                :title="isBuilderSectionCollapsed(section.id) ? 'Expand section' : 'Collapse section'"
+              >
+                <span aria-hidden="true">{{ isBuilderSectionCollapsed(section.id) ? '▸' : '▾' }}</span>
+              </b-button>
               <b-button variant="outline-primary" size="sm" @click="editSection(sectionIdx)" class="mr-2">
                 <i class="fa fa-edit"></i> Edit
               </b-button>
@@ -202,7 +212,7 @@
               </b-button>
             </div>
           </div>
-          <div class="section-body">
+          <div class="section-body" v-show="!isBuilderSectionCollapsed(section.id)">
             <p v-if="section.description" class="text-muted mb-3">{{section.description}}</p>
             
             <div v-if="section.fields.length === 0" class="empty-state">
@@ -328,6 +338,19 @@
           rows="2"
         />
       </b-form-group>
+
+      <b-form-group label="Collapsible (generated portal)" label-for="section-collapsible">
+        <b-form-checkbox id="section-collapsible" v-model="currentSection.collapsible">
+          Allow end users to collapse/expand this section in the generated portal
+        </b-form-checkbox>
+        <b-form-checkbox
+          class="mt-2"
+          v-model="currentSection.collapsedByDefault"
+          :disabled="!currentSection.collapsible"
+        >
+          Start collapsed by default
+        </b-form-checkbox>
+      </b-form-group>
     </b-modal>
     
     <!-- Field Editor Modal -->

package/examples/formgen-builder/src/index.js

@@ -86,8 +86,13 @@
         currentSection: {
           id: '',
           title: '',
-          description: ''
+          description: '',
+          collapsible: false,
+          collapsedByDefault: false
         },
+
+        // Builder-only UI state: collapse section cards while editing (not stored in schema)
+        builderCollapsedSections: {},
         
         // Field editor
         editingField: null,
@@ -791,7 +796,9 @@
           this.currentSection = {
             id: '',
             title: '',
-            description: ''
+            description: '',
+            collapsible: false,
+            collapsedByDefault: false
           };
           this.$bvModal.show('section-modal');
         },
@@ -799,6 +806,9 @@
         editSection(sectionIdx) {
           this.editingSection = sectionIdx;
           this.currentSection = JSON.parse(JSON.stringify(this.schema.sections[sectionIdx]));
+          // Defaults for older schemas
+          if (this.currentSection.collapsible === undefined) this.$set(this.currentSection, 'collapsible', false);
+          if (this.currentSection.collapsedByDefault === undefined) this.$set(this.currentSection, 'collapsedByDefault', false);
           this.$bvModal.show('section-modal');
         },
         
@@ -826,6 +836,8 @@
               id: this.currentSection.id,
               title: this.currentSection.title,
               description: this.currentSection.description || '',
+              collapsible: !!this.currentSection.collapsible,
+              collapsedByDefault: !!this.currentSection.collapsedByDefault,
               fields: []
             });
           } else {
@@ -835,6 +847,8 @@
               id: this.currentSection.id,
               title: this.currentSection.title,
               description: this.currentSection.description || '',
+              collapsible: !!this.currentSection.collapsible,
+              collapsedByDefault: !!this.currentSection.collapsedByDefault,
               fields: this.schema.sections[this.editingSection].fields
             };
             
@@ -850,7 +864,19 @@
         
         cancelEditSection() {
           this.editingSection = null;
-          this.currentSection = { id: '', title: '', description: '' };
+          this.currentSection = { id: '', title: '', description: '', collapsible: false, collapsedByDefault: false };
+        },
+
+        toggleBuilderSectionCollapse(sectionId) {
+          const id = String(sectionId || '').trim();
+          if (!id) return;
+          const cur = !!this.builderCollapsedSections[id];
+          this.$set(this.builderCollapsedSections, id, !cur);
+        },
+
+        isBuilderSectionCollapsed(sectionId) {
+          const id = String(sectionId || '').trim();
+          return !!this.builderCollapsedSections[id];
         },
         
         deleteSection(sectionIdx) {

package/examples/formgen-builder-uib2/src/index.html

@@ -188,8 +188,18 @@
             <div>
               <strong>{{section.title || 'Untitled Section'}}</strong>
               <small class="text-muted ml-2">({{section.fields.length}} fields)</small>
+              <b-badge v-if="section.collapsible" variant="info" class="ml-2">Collapsible</b-badge>
             </div>
             <div>
+              <b-button
+                variant="outline-secondary"
+                size="sm"
+                class="mr-2"
+                @click="toggleBuilderSectionCollapse(section.id)"
+                :title="isBuilderSectionCollapsed(section.id) ? 'Expand section' : 'Collapse section'"
+              >
+                <span aria-hidden="true">{{ isBuilderSectionCollapsed(section.id) ? '▸' : '▾' }}</span>
+              </b-button>
               <b-button variant="outline-primary" size="sm" @click="editSection(sectionIdx)" class="mr-2">
                 <i class="fa fa-edit"></i> Edit
               </b-button>
@@ -201,7 +211,7 @@
               </b-button>
             </div>
           </div>
-          <div class="section-body">
+          <div class="section-body" v-show="!isBuilderSectionCollapsed(section.id)">
             <p v-if="section.description" class="text-muted mb-3">{{section.description}}</p>
             
             <div v-if="section.fields.length === 0" class="empty-state">
@@ -327,6 +337,19 @@
           rows="2"
         />
       </b-form-group>
+
+      <b-form-group label="Collapsible (generated portal)" label-for="section-collapsible">
+        <b-form-checkbox id="section-collapsible" v-model="currentSection.collapsible">
+          Allow end users to collapse/expand this section in the generated portal
+        </b-form-checkbox>
+        <b-form-checkbox
+          class="mt-2"
+          v-model="currentSection.collapsedByDefault"
+          :disabled="!currentSection.collapsible"
+        >
+          Start collapsed by default
+        </b-form-checkbox>
+      </b-form-group>
     </b-modal>
     
     <!-- Field Editor Modal -->

package/examples/formgen-builder-uib2/src/index.js

@@ -86,8 +86,13 @@
         currentSection: {
           id: '',
           title: '',
-          description: ''
+          description: '',
+          collapsible: false,
+          collapsedByDefault: false
         },
+
+        // Builder-only UI state: collapse section cards while editing (not stored in schema)
+        builderCollapsedSections: {},
         
         // Field editor
         editingField: null,
@@ -791,7 +796,9 @@
           this.currentSection = {
             id: '',
             title: '',
-            description: ''
+            description: '',
+            collapsible: false,
+            collapsedByDefault: false
           };
           this.$bvModal.show('section-modal');
         },
@@ -799,6 +806,9 @@
         editSection(sectionIdx) {
           this.editingSection = sectionIdx;
           this.currentSection = JSON.parse(JSON.stringify(this.schema.sections[sectionIdx]));
+          // Defaults for older schemas
+          if (this.currentSection.collapsible === undefined) this.$set(this.currentSection, 'collapsible', false);
+          if (this.currentSection.collapsedByDefault === undefined) this.$set(this.currentSection, 'collapsedByDefault', false);
           this.$bvModal.show('section-modal');
         },
         
@@ -826,6 +836,8 @@
               id: this.currentSection.id,
               title: this.currentSection.title,
               description: this.currentSection.description || '',
+              collapsible: !!this.currentSection.collapsible,
+              collapsedByDefault: !!this.currentSection.collapsedByDefault,
               fields: []
             });
           } else {
@@ -835,6 +847,8 @@
               id: this.currentSection.id,
               title: this.currentSection.title,
               description: this.currentSection.description || '',
+              collapsible: !!this.currentSection.collapsible,
+              collapsedByDefault: !!this.currentSection.collapsedByDefault,
               fields: this.schema.sections[this.editingSection].fields
             };
             
@@ -850,7 +864,19 @@
         
         cancelEditSection() {
           this.editingSection = null;
-          this.currentSection = { id: '', title: '', description: '' };
+          this.currentSection = { id: '', title: '', description: '', collapsible: false, collapsedByDefault: false };
+        },
+
+        toggleBuilderSectionCollapse(sectionId) {
+          const id = String(sectionId || '').trim();
+          if (!id) return;
+          const cur = !!this.builderCollapsedSections[id];
+          this.$set(this.builderCollapsedSections, id, !cur);
+        },
+
+        isBuilderSectionCollapsed(sectionId) {
+          const id = String(sectionId || '').trim();
+          return !!this.builderCollapsedSections[id];
         },
         
         deleteSection(sectionIdx) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyprnet/node-red-contrib-uibuilder-formgen",
-  "version": "0.5.36",
+  "version": "0.5.38",
   "description": "PortalSmith: Generate schema-driven uibuilder form portals from JSON",
   "keywords": [
     "node-red",

package/templates/index.html.mustache

@@ -148,6 +148,22 @@
       gap: 1rem;
       margin-bottom: 0.5rem;
     }
+    .ps-header-right {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 0.75rem;
+      flex-wrap: wrap;
+    }
+    .ps-theme-label {
+      font-size: 12px;
+      color: var(--ps-muted);
+      margin: 0;
+    }
+    .ps-theme-select {
+      width: auto;
+      min-width: 120px;
+    }
     .ps-logo {
       max-height: 48px;
       max-width: 220px;
@@ -210,6 +226,15 @@
       margin-bottom: 1.5rem;
       margin-top: 2rem;
     }
+    .ps-section-head {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      gap: 0.75rem;
+    }
+    .ps-section-toggle {
+      white-space: nowrap;
+    }
     .section-header:first-child {
       margin-top: 0;
     }
@@ -229,18 +254,29 @@
     <div class="container form-container">
       <div class="ps-header" style="--ps-logo-max-height: [[logoMaxHeightPx]]px; --ps-logo-max-width: [[logoMaxWidthPx]]px;">
         <h1 class="mb-0">[[title]]</h1>
-        [[#logoUrl]]
-        <img class="ps-custom-logo" src="[[logoUrl]]" alt="[[logoAlt]]">
-        [[/logoUrl]]
-        [[^logoUrl]]
-        [[^licensed]]
-        <svg class="ps-logo" viewBox="0 0 420 96" role="img" aria-label="PortalSmith">
-          <rect x="0" y="0" width="420" height="96" rx="14" fill="var(--ps-surface)" stroke="var(--ps-border)"/>
-          <text x="24" y="58" font-size="34" font-family="Arial, Helvetica, sans-serif" fill="var(--ps-text)">PortalSmith</text>
-          <text x="24" y="78" font-size="14" font-family="Arial, Helvetica, sans-serif" fill="var(--ps-muted)">FormGen</text>
-        </svg>
-        [[/licensed]]
-        [[/logoUrl]]
+        <div class="ps-header-right">
+          <div>
+            <div class="ps-theme-label">Theme</div>
+            <select class="custom-select custom-select-sm ps-theme-select" v-model="themeMode" @change="setTheme(themeMode)">
+              <option value="auto">Auto</option>
+              <option value="light">Light</option>
+              <option value="dark">Dark</option>
+            </select>
+          </div>
+
+          [[#logoUrl]]
+          <img class="ps-custom-logo" src="[[logoUrl]]" alt="[[logoAlt]]">
+          [[/logoUrl]]
+          [[^logoUrl]]
+          [[^licensed]]
+          <svg class="ps-logo" viewBox="0 0 420 96" role="img" aria-label="PortalSmith">
+            <rect x="0" y="0" width="420" height="96" rx="14" fill="var(--ps-surface)" stroke="var(--ps-border)"/>
+            <text x="24" y="58" font-size="34" font-family="Arial, Helvetica, sans-serif" fill="var(--ps-text)">PortalSmith</text>
+            <text x="24" y="78" font-size="14" font-family="Arial, Helvetica, sans-serif" fill="var(--ps-muted)">FormGen</text>
+          </svg>
+          [[/licensed]]
+          [[/logoUrl]]
+        </div>
       </div>
       <p v-if="description" class="text-muted mb-4">[[description]]</p>
       
@@ -430,8 +466,22 @@
           <form @submit.prevent="handleSubmit">
           <!-- Dynamic Sections -->
           <div v-for="section in schema.sections" :key="section.id" class="form-section">
-            <h3 v-if="section.title" class="section-header">{{section.title}}</h3>
+            <div class="ps-section-head section-header" v-if="section.title || section.collapsible">
+              <h3 v-if="section.title" class="mb-0">{{section.title}}</h3>
+              <button
+                v-if="section.collapsible"
+                type="button"
+                class="btn btn-sm btn-outline-secondary ps-section-toggle"
+                @click="toggleSection(section.id)"
+                :aria-expanded="(!isSectionCollapsed(section.id)).toString()"
+                :aria-controls="'ps-sec-' + section.id"
+              >
+                {{ isSectionCollapsed(section.id) ? 'Show' : 'Hide' }}
+              </button>
+            </div>
             <p v-if="section.description" class="text-muted mb-3">{{section.description}}</p>
+
+            <div :id="'ps-sec-' + section.id" v-show="!section.collapsible || !isSectionCollapsed(section.id)">
             
             <!-- Dynamic Fields -->
             <div v-for="field in visibleFieldsBySection[section.id]" :key="field.id" class="form-group">
@@ -593,6 +643,7 @@
                 {{field.help}}
               </small>
             </div>
+            </div>
           </div>
           
           <!-- Action Buttons -->

package/templates/index.js.mustache

@@ -495,18 +495,31 @@
       .replace(/'/g, ''');
   }
 
-  function applyTheme() {
+  function normalizeThemeMode(mode, fallback) {
+    const m = String(mode || '').trim().toLowerCase();
+    if (m === 'light' || m === 'dark' || m === 'auto') return m;
+    const fb = String(fallback || '').trim().toLowerCase();
+    return (fb === 'light' || fb === 'dark' || fb === 'auto') ? fb : 'auto';
+  }
+
+  function getThemeMode() {
     try {
-      // Optional override via localStorage (lets you tweak without regenerating)
       const stored = localStorage.getItem('portalsmith:theme');
-      const desired = (stored && stored.trim()) ? stored.trim().toLowerCase() : (CONFIG.themeMode || 'auto');
+      if (stored && stored.trim()) return normalizeThemeMode(stored, CONFIG.themeMode);
+    } catch (e) { /* ignore */ }
+    return normalizeThemeMode(CONFIG.themeMode, 'auto');
+  }
 
-      if (desired === 'light' || desired === 'dark' || desired === 'auto') {
-        document.documentElement.setAttribute('data-theme', desired);
-      }
-    } catch (e) {
-      // ignore (storage blocked, etc.)
-    }
+  function applyTheme(mode) {
+    const desired = normalizeThemeMode(mode, getThemeMode());
+    document.documentElement.setAttribute('data-theme', desired);
+    return desired;
+  }
+
+  function setThemeMode(mode) {
+    const desired = normalizeThemeMode(mode, getThemeMode());
+    try { localStorage.setItem('portalsmith:theme', desired); } catch (e) { /* ignore */ }
+    return applyTheme(desired);
   }
   
   // Vue app instance
@@ -778,7 +791,20 @@
         resultSortKey: '',
         resultSortDir: 'asc',
         copyBlockActions: schema.actions ? schema.actions.filter(a => a.type === 'copyBlock') : [],
-        exportFormats: CONFIG.exportFormats
+        exportFormats: CONFIG.exportFormats,
+        themeMode: getThemeMode(),
+
+        // Section collapse state (keyed by section.id)
+        collapsedSections: (function initCollapsed() {
+          const m = {};
+          try {
+            (schema.sections || []).forEach(s => {
+              if (!s || !s.id) return;
+              if (s.collapsible) m[s.id] = !!s.collapsedByDefault;
+            });
+          } catch (e) { /* ignore */ }
+          return m;
+        })(),
       },
       computed: {
         description() {
@@ -965,6 +991,19 @@
         }
       },
       methods: {
+        toggleSection(sectionId) {
+          const id = String(sectionId || '').trim();
+          if (!id) return;
+          const cur = !!this.collapsedSections[id];
+          this.$set(this.collapsedSections, id, !cur);
+        },
+        isSectionCollapsed(sectionId) {
+          const id = String(sectionId || '').trim();
+          return !!this.collapsedSections[id];
+        },
+        setTheme(mode) {
+          this.themeMode = setThemeMode(mode);
+        },
         toggleResultSort(key) {
           const k = String(key || '').trim();
           if (!k) return;

package/templates/index.uib2.html.mustache

@@ -146,6 +146,22 @@
       gap: 1rem;
       margin-bottom: 0.5rem;
     }
+    .ps-header-right {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 0.75rem;
+      flex-wrap: wrap;
+    }
+    .ps-theme-label {
+      font-size: 12px;
+      color: var(--ps-muted);
+      margin: 0;
+    }
+    .ps-theme-select {
+      width: auto;
+      min-width: 120px;
+    }
     .ps-logo {
       max-height: 48px;
       max-width: 220px;
@@ -208,6 +224,15 @@
       margin-bottom: 1.5rem;
       margin-top: 2rem;
     }
+    .ps-section-head {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      gap: 0.75rem;
+    }
+    .ps-section-toggle {
+      white-space: nowrap;
+    }
     .section-header:first-child {
       margin-top: 0;
     }
@@ -227,18 +252,29 @@
     <div class="container form-container">
       <div class="ps-header" style="--ps-logo-max-height: [[logoMaxHeightPx]]px; --ps-logo-max-width: [[logoMaxWidthPx]]px;">
         <h1 class="mb-0">[[title]]</h1>
-        [[#logoUrl]]
-        <img class="ps-custom-logo" src="[[logoUrl]]" alt="[[logoAlt]]">
-        [[/logoUrl]]
-        [[^logoUrl]]
-        [[^licensed]]
-        <svg class="ps-logo" viewBox="0 0 420 96" role="img" aria-label="PortalSmith">
-          <rect x="0" y="0" width="420" height="96" rx="14" fill="var(--ps-surface)" stroke="var(--ps-border)"/>
-          <text x="24" y="58" font-size="34" font-family="Arial, Helvetica, sans-serif" fill="var(--ps-text)">PortalSmith</text>
-          <text x="24" y="78" font-size="14" font-family="Arial, Helvetica, sans-serif" fill="var(--ps-muted)">FormGen</text>
-        </svg>
-        [[/licensed]]
-        [[/logoUrl]]
+        <div class="ps-header-right">
+          <div>
+            <div class="ps-theme-label">Theme</div>
+            <select class="custom-select custom-select-sm ps-theme-select" v-model="themeMode" @change="setTheme(themeMode)">
+              <option value="auto">Auto</option>
+              <option value="light">Light</option>
+              <option value="dark">Dark</option>
+            </select>
+          </div>
+
+          [[#logoUrl]]
+          <img class="ps-custom-logo" src="[[logoUrl]]" alt="[[logoAlt]]">
+          [[/logoUrl]]
+          [[^logoUrl]]
+          [[^licensed]]
+          <svg class="ps-logo" viewBox="0 0 420 96" role="img" aria-label="PortalSmith">
+            <rect x="0" y="0" width="420" height="96" rx="14" fill="var(--ps-surface)" stroke="var(--ps-border)"/>
+            <text x="24" y="58" font-size="34" font-family="Arial, Helvetica, sans-serif" fill="var(--ps-text)">PortalSmith</text>
+            <text x="24" y="78" font-size="14" font-family="Arial, Helvetica, sans-serif" fill="var(--ps-muted)">FormGen</text>
+          </svg>
+          [[/licensed]]
+          [[/logoUrl]]
+        </div>
       </div>
       <p v-if="description" class="text-muted mb-4">[[description]]</p>
       
@@ -428,8 +464,22 @@
           <form @submit.prevent="handleSubmit">
           <!-- Dynamic Sections -->
           <div v-for="section in schema.sections" :key="section.id" class="form-section">
-            <h3 v-if="section.title" class="section-header">{{section.title}}</h3>
+            <div class="ps-section-head section-header" v-if="section.title || section.collapsible">
+              <h3 v-if="section.title" class="mb-0">{{section.title}}</h3>
+              <button
+                v-if="section.collapsible"
+                type="button"
+                class="btn btn-sm btn-outline-secondary ps-section-toggle"
+                @click="toggleSection(section.id)"
+                :aria-expanded="(!isSectionCollapsed(section.id)).toString()"
+                :aria-controls="'ps-sec-' + section.id"
+              >
+                {{ isSectionCollapsed(section.id) ? 'Show' : 'Hide' }}
+              </button>
+            </div>
             <p v-if="section.description" class="text-muted mb-3">{{section.description}}</p>
+
+            <div :id="'ps-sec-' + section.id" v-show="!section.collapsible || !isSectionCollapsed(section.id)">
             
             <!-- Dynamic Fields -->
             <div v-for="field in visibleFieldsBySection[section.id]" :key="field.id" class="form-group">
@@ -591,6 +641,7 @@
                 {{field.help}}
               </small>
             </div>
+            </div>
           </div>
           
           <!-- Action Buttons -->

package/templates/index.v3.html.mustache

@@ -131,6 +131,22 @@
       gap: 1rem;
       margin-bottom: 0.5rem;
     }
+    .ps-header-right {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 0.75rem;
+      flex-wrap: wrap;
+    }
+    .ps-theme-label {
+      font-size: 12px;
+      color: var(--ps-muted);
+      margin: 0;
+    }
+    .ps-theme-select {
+      width: auto;
+      min-width: 120px;
+    }
     .ps-logo {
       max-height: 48px;
       max-width: 220px;
@@ -193,6 +209,15 @@
       margin-bottom: 1.5rem;
       margin-top: 2rem;
     }
+    .ps-section-head {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      gap: 0.75rem;
+    }
+    .ps-section-toggle {
+      white-space: nowrap;
+    }
     .section-header:first-child {
       margin-top: 0;
     }
@@ -212,18 +237,29 @@
     <div class="container form-container">
       <div class="ps-header" style="--ps-logo-max-height: [[logoMaxHeightPx]]px; --ps-logo-max-width: [[logoMaxWidthPx]]px;">
         <h1 class="mb-0">[[title]]</h1>
-        [[#logoUrl]]
-        <img class="ps-custom-logo" src="[[logoUrl]]" alt="[[logoAlt]]">
-        [[/logoUrl]]
-        [[^logoUrl]]
-        [[^licensed]]
-        <svg class="ps-logo" viewBox="0 0 420 96" role="img" aria-label="PortalSmith">
-          <rect x="0" y="0" width="420" height="96" rx="14" fill="var(--ps-surface)" stroke="var(--ps-border)"/>
-          <text x="24" y="58" font-size="34" font-family="Arial, Helvetica, sans-serif" fill="var(--ps-text)">PortalSmith</text>
-          <text x="24" y="78" font-size="14" font-family="Arial, Helvetica, sans-serif" fill="var(--ps-muted)">FormGen</text>
-        </svg>
-        [[/licensed]]
-        [[/logoUrl]]
+        <div class="ps-header-right">
+          <div>
+            <div class="ps-theme-label">Theme</div>
+            <select class="form-select form-select-sm ps-theme-select" v-model="themeMode" @change="setTheme(themeMode)">
+              <option value="auto">Auto</option>
+              <option value="light">Light</option>
+              <option value="dark">Dark</option>
+            </select>
+          </div>
+
+          [[#logoUrl]]
+          <img class="ps-custom-logo" src="[[logoUrl]]" alt="[[logoAlt]]">
+          [[/logoUrl]]
+          [[^logoUrl]]
+          [[^licensed]]
+          <svg class="ps-logo" viewBox="0 0 420 96" role="img" aria-label="PortalSmith">
+            <rect x="0" y="0" width="420" height="96" rx="14" fill="var(--ps-surface)" stroke="var(--ps-border)"/>
+            <text x="24" y="58" font-size="34" font-family="Arial, Helvetica, sans-serif" fill="var(--ps-text)">PortalSmith</text>
+            <text x="24" y="78" font-size="14" font-family="Arial, Helvetica, sans-serif" fill="var(--ps-muted)">FormGen</text>
+          </svg>
+          [[/licensed]]
+          [[/logoUrl]]
+        </div>
       </div>
       <p v-if="description" class="text-muted mb-4">[[description]]</p>
       
@@ -383,10 +419,24 @@
             
             <!-- Sections -->
             <div v-for="section in schema.sections" :key="section.id" class="mb-4">
-              <div class="section-header">
-                <h2 class="h4 mb-1">{{section.title}}</h2>
-                <p v-if="section.description" class="text-muted mb-0">{{section.description}}</p>
+              <div class="section-header ps-section-head">
+                <div>
+                  <h2 class="h4 mb-1">{{section.title}}</h2>
+                  <p v-if="section.description" class="text-muted mb-0">{{section.description}}</p>
+                </div>
+                <button
+                  v-if="section.collapsible"
+                  type="button"
+                  class="btn btn-sm btn-outline-secondary ps-section-toggle"
+                  @click="toggleSection(section.id)"
+                  :aria-expanded="(!isSectionCollapsed(section.id)).toString()"
+                  :aria-controls="'ps-sec-' + section.id"
+                >
+                  {{ isSectionCollapsed(section.id) ? 'Show' : 'Hide' }}
+                </button>
               </div>
+
+              <div :id="'ps-sec-' + section.id" v-show="!section.collapsible || !isSectionCollapsed(section.id)">
               
               <!-- Fields -->
               <div v-for="field in visibleFieldsBySection[section.id]" :key="field.id" class="mb-3">
@@ -552,6 +602,7 @@
                   {{fieldErrors[field.id]}}
                 </div>
               </div>
+              </div>
             </div>
             
             <!-- Actions -->

package/templates/index.v3.js.mustache

@@ -352,9 +352,31 @@
     });
   }
 
-  function applyTheme() {
-    const m = String(CONFIG.themeMode || 'auto').toLowerCase();
-    document.documentElement.setAttribute('data-theme', m);
+  function normalizeThemeMode(mode, fallback) {
+    const m = String(mode || '').trim().toLowerCase();
+    if (m === 'light' || m === 'dark' || m === 'auto') return m;
+    const fb = String(fallback || '').trim().toLowerCase();
+    return (fb === 'light' || fb === 'dark' || fb === 'auto') ? fb : 'auto';
+  }
+
+  function getThemeMode() {
+    try {
+      const stored = localStorage.getItem('portalsmith:theme');
+      if (stored && stored.trim()) return normalizeThemeMode(stored, CONFIG.themeMode);
+    } catch (e) { /* ignore */ }
+    return normalizeThemeMode(CONFIG.themeMode, 'auto');
+  }
+
+  function applyTheme(mode) {
+    const desired = normalizeThemeMode(mode, getThemeMode());
+    document.documentElement.setAttribute('data-theme', desired);
+    return desired;
+  }
+
+  function setThemeMode(mode) {
+    const desired = normalizeThemeMode(mode, getThemeMode());
+    try { localStorage.setItem('portalsmith:theme', desired); } catch (e) { /* ignore */ }
+    return applyTheme(desired);
   }
 
   function tryParseHeadersJson(s) {
@@ -516,7 +538,20 @@
           resultSortKey: '',
           resultSortDir: 'asc',
           copyBlockActions: schema.actions ? schema.actions.filter(a => a.type === 'copyBlock') : [],
-          exportFormats: CONFIG.exportFormats
+          exportFormats: CONFIG.exportFormats,
+          themeMode: getThemeMode(),
+
+          // Section collapse state (keyed by section.id)
+          collapsedSections: (function initCollapsed() {
+            const m = {};
+            try {
+              (schema.sections || []).forEach(s => {
+                if (!s || !s.id) return;
+                if (s.collapsible) m[s.id] = !!s.collapsedByDefault;
+              });
+            } catch (e) { /* ignore */ }
+            return m;
+          })(),
         };
       },
       computed: {
@@ -657,6 +692,19 @@
         }
       },
       methods: {
+        setTheme(mode) {
+          this.themeMode = setThemeMode(mode);
+        },
+        toggleSection(sectionId) {
+          const id = String(sectionId || '').trim();
+          if (!id) return;
+          const cur = !!this.collapsedSections[id];
+          this.collapsedSections[id] = !cur;
+        },
+        isSectionCollapsed(sectionId) {
+          const id = String(sectionId || '').trim();
+          return !!this.collapsedSections[id];
+        },
         toggleResultSort(key) {
           const k = String(key || '').trim();
           if (!k) return;