@cyprnet/node-red-contrib-uibuilder-formgen 0.5.1 → 0.5.3

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this package will be documented in this file.
 
+## 0.5.3
+
+- FormGen node: added **Logo height/width** options (defaults to **252h x 1100w**) with per-message override support.
+
+## 0.5.2
+
+- Schema Builder: added **Generate Schema (Plain JSON)** to auto-create a PortalSmith schema from a plain JSON config object and load it into the builder for editing.
+
 ## 0.4.0
 
 - Added **offline-first licensing framework** (Free vs Licensed).

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

@@ -239,6 +239,9 @@
         <b-button variant="info" @click="loadSchema" class="mr-2">
           <i class="fa fa-folder-open"></i> Load Schema
         </b-button>
+        <b-button variant="warning" @click="openPlainJsonGenerator" class="mr-2">
+          <i class="fa fa-bolt"></i> Generate Schema (Plain JSON)
+        </b-button>
         <b-button variant="success" @click="importJSON" class="mr-2">
           <i class="fa fa-file-import"></i> Import JSON
         </b-button>
@@ -709,6 +712,66 @@ email{{currentField.keyvalueDelimiter || '='}}john@example.com</code></pre>
         </small>
       </b-form-group>
     </b-modal>
+
+    <!-- Plain JSON -> Schema Generator Modal -->
+    <b-modal
+      id="plain-json-modal"
+      title="Generate Schema from Plain JSON"
+      size="lg"
+      @ok="processPlainJsonGenerate"
+      @cancel="cancelPlainJsonGenerate"
+      ok-title="Generate"
+      cancel-title="Cancel"
+    >
+      <b-alert variant="info" show class="mb-3">
+        Paste a <strong>plain JSON object</strong> (like a config file). The builder will infer field types and create sections automatically.
+        You can edit everything after generation.
+      </b-alert>
+
+      <b-form-row>
+        <b-col md="6">
+          <b-form-group label="Form ID" label-for="plain-form-id">
+            <b-form-input
+              id="plain-form-id"
+              v-model="plainGenFormId"
+              placeholder="my_form_id"
+            />
+            <small class="form-text text-muted">Alphanumeric, underscores, hyphens only. If blank, we will derive one.</small>
+          </b-form-group>
+        </b-col>
+        <b-col md="6">
+          <b-form-group label="Form Title" label-for="plain-title">
+            <b-form-input
+              id="plain-title"
+              v-model="plainGenTitle"
+              placeholder="My Form Title"
+            />
+            <small class="form-text text-muted">If blank, we will derive a title.</small>
+          </b-form-group>
+        </b-col>
+      </b-form-row>
+
+      <b-form-group label="Description (optional)" label-for="plain-desc">
+        <b-form-textarea
+          id="plain-desc"
+          v-model="plainGenDescription"
+          rows="2"
+          placeholder="Optional description"
+        />
+      </b-form-group>
+
+      <b-form-group label="Plain JSON" label-for="plain-json">
+        <b-form-textarea
+          id="plain-json"
+          v-model="plainJsonData"
+          rows="14"
+          placeholder='{\n  "username": "incadmin",\n  "password": "incadmin",\n  "per_page": 1000\n}'
+        />
+        <small class="form-text text-muted">
+          Must be valid JSON. Top-level must be an object (not an array).
+        </small>
+      </b-form-group>
+    </b-modal>
     
     <!-- Save Schema Modal -->
     <b-modal 

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

@@ -104,6 +104,12 @@
         // CSV/JSON import
         csvData: '',
         jsonData: '',
+
+        // Plain JSON -> Schema generator
+        plainJsonData: '',
+        plainGenFormId: '',
+        plainGenTitle: '',
+        plainGenDescription: '',
         
         // Save/Load
         saveName: '',
@@ -178,6 +184,308 @@
       },
       
       methods: {
+        // ---------- Plain JSON -> Schema generator ----------
+        openPlainJsonGenerator() {
+          // Pre-fill from current schema (if any)
+          this.plainGenFormId = this.schema.formId || '';
+          this.plainGenTitle = this.schema.title || '';
+          this.plainGenDescription = this.schema.description || '';
+          this.plainJsonData = '';
+          this.$bvModal.show('plain-json-modal');
+        },
+
+        cancelPlainJsonGenerate() {
+          this.plainJsonData = '';
+        },
+
+        processPlainJsonGenerate() {
+          try {
+            const raw = (this.plainJsonData || '').trim();
+            if (!raw) {
+              this.showAlertMessage('Please paste a plain JSON object to generate a schema', 'warning');
+              return;
+            }
+
+            const obj = JSON.parse(raw);
+            if (!obj || typeof obj !== 'object' || Array.isArray(obj)) {
+              this.showAlertMessage('Plain JSON must be a top-level object (e.g. { "key": "value" })', 'warning');
+              return;
+            }
+
+            const generated = this.generateSchemaFromPlainJson(obj, {
+              formId: this.plainGenFormId,
+              title: this.plainGenTitle,
+              description: this.plainGenDescription
+            });
+
+            this.applySchemaObject(generated);
+            this.$bvModal.hide('plain-json-modal');
+
+            const sectionCount = (generated.sections || []).length;
+            const fieldCount = (generated.sections || []).reduce((sum, s) => sum + ((s.fields || []).length), 0);
+            this.showAlertMessage(`Generated schema: ${fieldCount} field(s) in ${sectionCount} section(s)`, 'success');
+          } catch (error) {
+            console.error('Plain JSON generate error:', error);
+            this.showAlertMessage('Generation failed: ' + (error && error.message ? error.message : String(error)), 'danger');
+          }
+        },
+
+        applySchemaObject(loadedSchema) {
+          // Deep copy and ensure required properties exist
+          const s = JSON.parse(JSON.stringify(loadedSchema || {}));
+          if (!s.schemaVersion) s.schemaVersion = '1.0';
+          if (!s.sections) s.sections = [];
+          if (!s.actions) s.actions = [];
+
+          this.$set(this, 'schema', {
+            schemaVersion: s.schemaVersion,
+            formId: s.formId || '',
+            title: s.title || '',
+            description: s.description || '',
+            sections: s.sections || [],
+            actions: s.actions || []
+          });
+          this.$forceUpdate();
+        },
+
+        generateSchemaFromPlainJson(obj, meta) {
+          const safeId = (s) => {
+            const base = String(s || '')
+              .trim()
+              .replace(/\s+/g, '_')
+              .replace(/[^a-zA-Z0-9._-]/g, '_');
+            const cleaned = base.replace(/_+/g, '_').replace(/^_+|_+$/g, '');
+            if (!cleaned) return 'field';
+            if (/^[0-9]/.test(cleaned)) return 'f_' + cleaned;
+            return cleaned;
+          };
+
+          const titleFromKey = (key) => {
+            const s = String(key || '')
+              .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+              .replace(/[_-]+/g, ' ')
+              .trim();
+            if (!s) return 'Field';
+            return s.charAt(0).toUpperCase() + s.slice(1);
+          };
+
+          const isPlainObject = (v) => !!v && typeof v === 'object' && !Array.isArray(v);
+
+          const isString = (v) => typeof v === 'string' || v instanceof String;
+
+          const classifySection = (key, value) => {
+            const k = String(key || '').toLowerCase();
+
+            // Specific patterns (matches the style we used manually for azSync-like payloads)
+            if (k === 'username' || k === 'password' || k.includes('apikey') || k.includes('api_key') || k.includes('token') || k.includes('secret')) {
+              return { id: 'auth', title: 'Authentication' };
+            }
+            if (k === 'flowname' || k.startsWith('job_') || k.includes('purge') || k.includes('log')) {
+              return { id: 'job', title: 'Job Settings' };
+            }
+            if (k.startsWith('az_') || k === 'type' || k === 'per_page' || k.includes('subscription') || k.startsWith('device_') || k === 'dnsdomain') {
+              return { id: 'azure', title: 'Azure Settings' };
+            }
+            if (k.startsWith('sync') || k.startsWith('process_') || k.startsWith('delete_') || k === 'async_op' || k === 'create_rr') {
+              return { id: 'sync', title: 'Sync Behavior' };
+            }
+            if (k.startsWith('throttle') || k.endsWith('_delay') || k.includes('backoff')) {
+              return { id: 'throttle', title: 'Throttle & Timing' };
+            }
+            if (k.startsWith('udf') || k.startsWith('tags_') || k.includes('template')) {
+              return { id: 'udf', title: 'UDF / Templates' };
+            }
+            if (k === 'op_filters' || k.startsWith('op_filters')) {
+              return { id: 'filters', title: 'Operation Filters' };
+            }
+
+            // Fallback
+            return { id: 'general', title: 'General' };
+          };
+
+          const schema = {
+            schemaVersion: '1.0',
+            formId: safeId(meta && meta.formId ? meta.formId : (obj.flowName || obj.formId || 'generated_form')),
+            title: (meta && meta.title ? meta.title : (obj.flowName ? `${titleFromKey(obj.flowName)} Configuration` : 'Generated Configuration')),
+            description: (meta && meta.description) || '',
+            sections: [],
+            actions: []
+          };
+
+          const sectionsById = {};
+          const ensureSection = (sec) => {
+            if (!sectionsById[sec.id]) {
+              sectionsById[sec.id] = { id: sec.id, title: sec.title, description: '', fields: [] };
+            }
+            return sectionsById[sec.id];
+          };
+
+          const pushField = (section, field) => {
+            if (!field || !field.id || !field.type) return;
+            // Avoid duplicate ids in a section by suffixing
+            const existing = new Set((section.fields || []).map(f => f.id));
+            let fid = field.id;
+            let n = 2;
+            while (existing.has(fid)) {
+              fid = `${field.id}_${n++}`;
+            }
+            field.id = fid;
+            section.fields.push(field);
+          };
+
+          const inferPrimitiveField = (key, value, labelOverride) => {
+            const k = String(key || '');
+            const lower = k.toLowerCase();
+            const label = labelOverride || titleFromKey(k);
+
+            if (typeof value === 'boolean') {
+              return {
+                id: safeId(k),
+                label,
+                type: 'checkbox',
+                required: false,
+                defaultValue: value
+              };
+            }
+
+            if (typeof value === 'number' && Number.isFinite(value)) {
+              const isInt = Number.isInteger(value);
+              const field = {
+                id: safeId(k),
+                label,
+                type: 'number',
+                required: false,
+                defaultValue: value,
+                step: isInt ? 1 : 0.01
+              };
+              if (value >= 0) field.min = 0;
+              return field;
+            }
+
+            // Strings and everything else -> text
+            const field = {
+              id: safeId(k),
+              label,
+              type: 'text',
+              required: false,
+              defaultValue: value === null || value === undefined ? '' : String(value)
+            };
+
+            if (lower.includes('password')) field.inputType = 'password';
+            else if (lower.includes('email')) { field.inputType = 'email'; field.validate = 'email'; }
+            else if (lower.includes('phone') || lower.includes('tel')) { field.inputType = 'tel'; field.validate = 'phone'; }
+            else if (lower.includes('url')) field.inputType = 'url';
+
+            // Note: keep "true"/"false" strings as strings (we only convert actual booleans)
+            if (isString(value) && (String(value) === 'true' || String(value) === 'false')) {
+              field.help = 'This value was a string in the source JSON.';
+            }
+            return field;
+          };
+
+          const inferArrayField = (key, arr, labelOverride, helpPrefix) => {
+            const label = labelOverride || titleFromKey(key);
+            const isPrim = Array.isArray(arr) && arr.every(v => v === null || ['string', 'number', 'boolean'].includes(typeof v));
+            const field = {
+              id: safeId(key),
+              label,
+              type: 'textarea',
+              required: false,
+              placeholder: 'One per line',
+              rows: 4
+            };
+            if (helpPrefix) field.help = helpPrefix;
+            if (isPrim) {
+              field.defaultValue = arr.map(v => (v === null || v === undefined) ? '' : String(v)).filter(s => s !== '').join('\n');
+            } else {
+              field.defaultValue = JSON.stringify(arr, null, 2);
+              field.help = (field.help ? field.help + ' ' : '') + 'Array contains objects; generated as JSON text.';
+            }
+            return field;
+          };
+
+          const inferObjectFieldOrFields = (key, valueObj) => {
+            // Special-case op_filters style: object of arrays -> separate list fields
+            if (String(key).toLowerCase() === 'op_filters' && isPlainObject(valueObj)) {
+              const fields = [];
+              Object.keys(valueObj).forEach((subKey) => {
+                const v = valueObj[subKey];
+                const fullId = `${key}_${subKey}`;
+                if (Array.isArray(v)) {
+                  fields.push(inferArrayField(fullId, v, `${titleFromKey(subKey)} Filter (list)`, undefined));
+                } else {
+                  fields.push(inferPrimitiveField(fullId, v, `${titleFromKey(subKey)} Filter`));
+                }
+              });
+              return fields;
+            }
+
+            // Object of string values -> keyvalue pairs
+            const keys = Object.keys(valueObj || {});
+            const allStringValues = keys.length > 0 && keys.every(k => typeof valueObj[k] === 'string' || valueObj[k] instanceof String);
+            if (allStringValues) {
+              return [{
+                id: safeId(key),
+                label: titleFromKey(key),
+                type: 'keyvalue',
+                required: false,
+                keyvalueMode: 'pairs',
+                pairs: keys.map(k => ({ key: String(k), value: String(valueObj[k]) }))
+              }];
+            }
+
+            // Fallback: flatten one level into individual fields
+            const fields = [];
+            keys.forEach((subKey) => {
+              const v = valueObj[subKey];
+              const fullKey = `${key}_${subKey}`;
+              if (Array.isArray(v)) fields.push(inferArrayField(fullKey, v, titleFromKey(subKey), `From ${key}.${subKey}.`));
+              else if (isPlainObject(v)) fields.push(inferPrimitiveField(fullKey, JSON.stringify(v), titleFromKey(subKey)));
+              else fields.push(inferPrimitiveField(fullKey, v, titleFromKey(subKey)));
+            });
+            if (fields.length === 0) {
+              // Empty object -> represent as textarea JSON
+              return [inferPrimitiveField(key, JSON.stringify(valueObj || {}), titleFromKey(key))];
+            }
+            return fields;
+          };
+
+          // Process top-level keys in stable order
+          Object.keys(obj).sort().forEach((key) => {
+            const value = obj[key];
+            const secInfo = classifySection(key, value);
+            const section = ensureSection(secInfo);
+
+            if (Array.isArray(value)) {
+              pushField(section, inferArrayField(key, value));
+              return;
+            }
+
+            if (isPlainObject(value)) {
+              const fields = inferObjectFieldOrFields(key, value);
+              fields.forEach(f => pushField(section, f));
+              return;
+            }
+
+            pushField(section, inferPrimitiveField(key, value));
+          });
+
+          // Finalize sections: keep a preferred order when present
+          const preferredOrder = ['auth', 'job', 'azure', 'sync', 'throttle', 'udf', 'filters', 'general'];
+          const allSections = Object.values(sectionsById).filter(s => s.fields && s.fields.length > 0);
+          allSections.sort((a, b) => {
+            const ia = preferredOrder.indexOf(a.id);
+            const ib = preferredOrder.indexOf(b.id);
+            if (ia === -1 && ib === -1) return a.id.localeCompare(b.id);
+            if (ia === -1) return 1;
+            if (ib === -1) return -1;
+            return ia - ib;
+          });
+          schema.sections = allSections;
+
+          return schema;
+        },
+
         isSchemaEmpty() {
           const s = this.schema || {};
           return (
@@ -1190,12 +1498,10 @@
             }
             
             // Replace current schema
-            this.schema = imported;
+            this.applySchemaObject(imported);
             
             // Ensure actions array exists
-            if (!this.schema.actions) {
-              this.schema.actions = [];
-            }
+            // (applySchemaObject already ensures actions exists)
             
             this.$bvModal.hide('json-modal');
             this.showAlertMessage('Schema imported successfully', 'success');

package/nodes/uibuilder-formgen-v3.html

@@ -12,6 +12,8 @@
       themeMode: { value: "auto" },
       logoPath: { value: "" },
       logoAlt: { value: "Logo" },
+      logoHeight: { value: 252 },
+      logoWidth: { value: 1100 },
       licenseConfig: { value: "", type: "portalsmith-license", required: false },
       submitMode: { value: "uibuilder" },
       submitUrl: { value: "" },
@@ -127,6 +129,16 @@
   <input type="text" id="node-input-logoAlt" placeholder="Logo" />
 </div>
 
+<div class="form-row">
+  <label for="node-input-logoHeight"><i class="fa fa-arrows-v"></i> Logo height (px)</label>
+  <input type="number" id="node-input-logoHeight" min="1" placeholder="252" />
+</div>
+
+<div class="form-row">
+  <label for="node-input-logoWidth"><i class="fa fa-arrows-h"></i> Logo width (px)</label>
+  <input type="number" id="node-input-logoWidth" min="1" placeholder="1100" />
+</div>
+
 <hr/>
 <div class="form-row">
   <strong>Licensing (offline-first)</strong>

package/nodes/uibuilder-formgen-v3.js

@@ -14,6 +14,17 @@ module.exports = function(RED) {
   const https = require("https");
   const licensing = require("../lib/licensing");
 
+  const DEFAULT_LOGO_MAX_HEIGHT_PX = 252;
+  const DEFAULT_LOGO_MAX_WIDTH_PX = 1100;
+
+  function toPositiveIntOrDefault(value, defaultValue) {
+    const n = Number(value);
+    if (!Number.isFinite(n)) return defaultValue;
+    const i = Math.round(n);
+    if (i <= 0) return defaultValue;
+    return i;
+  }
+
   // Register admin endpoints once (used by the editor UI to show license status)
   let _adminRegistered = false;
   function registerAdminEndpoints() {
@@ -358,6 +369,14 @@ module.exports = function(RED) {
         const logoRequested = isNonEmptyString(msg.options?.logoPath ?? config.logoPath ?? "");
         let logoPathRaw = msg.options?.logoPath ?? config.logoPath ?? "";
         const logoAltRaw = msg.options?.logoAlt ?? config.logoAlt ?? "Logo";
+        const logoMaxHeightPx = toPositiveIntOrDefault(
+          msg.options?.logoHeight ?? config.logoHeight ?? DEFAULT_LOGO_MAX_HEIGHT_PX,
+          DEFAULT_LOGO_MAX_HEIGHT_PX
+        );
+        const logoMaxWidthPx = toPositiveIntOrDefault(
+          msg.options?.logoWidth ?? config.logoWidth ?? DEFAULT_LOGO_MAX_WIDTH_PX,
+          DEFAULT_LOGO_MAX_WIDTH_PX
+        );
         if (isNonEmptyString(logoPathRaw) && licensePublic.brandingLocked) {
           node.warn("PortalSmith FormGen: custom logo is disabled in Free mode (watermarked). Using default branding.");
           licensePublic.brandingAttempted = Boolean(logoRequested);
@@ -403,6 +422,8 @@ module.exports = function(RED) {
           themeMode: themeMode,
           logoUrl: logoUrl,
           logoAlt: logoAlt,
+          logoMaxHeightPx: logoMaxHeightPx,
+          logoMaxWidthPx: logoMaxWidthPx,
           licensed: licensePublic.licensed
         };
 
@@ -434,7 +455,7 @@ module.exports = function(RED) {
         await fs.writeJson(targetSchema, schema, { spaces: 2 });
 
         const runtimeData = {
-          generatorVersion: "0.5.0",
+          generatorVersion: "0.5.3",
           generatorNode: "uibuilder-formgen-v3",
           timestamp: new Date().toISOString(),
           instanceName: instanceName,
@@ -443,6 +464,8 @@ module.exports = function(RED) {
           themeMode: themeMode,
           logoUrl: logoUrl || "",
           logoAlt: logoAlt || "",
+          logoMaxHeightPx: logoMaxHeightPx,
+          logoMaxWidthPx: logoMaxWidthPx,
           submitMode: submitMode,
           submitUrl: submitUrl,
           license: licensePublic,

package/nodes/uibuilder-formgen.html

@@ -12,6 +12,8 @@
       themeMode: { value: "auto" },
       logoPath: { value: "" },
       logoAlt: { value: "Logo" },
+      logoHeight: { value: 252 },
+      logoWidth: { value: 1100 },
       licenseConfig: { value: "", type: "portalsmith-license", required: false },
       submitMode: { value: "uibuilder" },
       submitUrl: { value: "" },
@@ -139,6 +141,16 @@
   <input type="text" id="node-input-logoAlt" placeholder="Logo" />
 </div>
 
+<div class="form-row">
+  <label for="node-input-logoHeight"><i class="fa fa-arrows-v"></i> Logo height (px)</label>
+  <input type="number" id="node-input-logoHeight" min="1" placeholder="252" />
+</div>
+
+<div class="form-row">
+  <label for="node-input-logoWidth"><i class="fa fa-arrows-h"></i> Logo width (px)</label>
+  <input type="number" id="node-input-logoWidth" min="1" placeholder="1100" />
+</div>
+
 <hr/>
 <div class="form-row">
   <strong>Licensing (offline-first)</strong>

package/nodes/uibuilder-formgen.js

@@ -14,6 +14,17 @@ module.exports = function(RED) {
   const https = require("https");
   const licensing = require("../lib/licensing");
 
+  const DEFAULT_LOGO_MAX_HEIGHT_PX = 252;
+  const DEFAULT_LOGO_MAX_WIDTH_PX = 1100;
+
+  function toPositiveIntOrDefault(value, defaultValue) {
+    const n = Number(value);
+    if (!Number.isFinite(n)) return defaultValue;
+    const i = Math.round(n);
+    if (i <= 0) return defaultValue;
+    return i;
+  }
+
   // Register admin endpoints once (used by the editor UI to show license status)
   let _adminRegistered = false;
   function registerAdminEndpoints() {
@@ -362,6 +373,14 @@ module.exports = function(RED) {
         const logoRequested = isNonEmptyString(msg.options?.logoPath ?? config.logoPath ?? "");
         let logoPathRaw = msg.options?.logoPath ?? config.logoPath ?? "";
         const logoAltRaw = msg.options?.logoAlt ?? config.logoAlt ?? "Logo";
+        const logoMaxHeightPx = toPositiveIntOrDefault(
+          msg.options?.logoHeight ?? config.logoHeight ?? DEFAULT_LOGO_MAX_HEIGHT_PX,
+          DEFAULT_LOGO_MAX_HEIGHT_PX
+        );
+        const logoMaxWidthPx = toPositiveIntOrDefault(
+          msg.options?.logoWidth ?? config.logoWidth ?? DEFAULT_LOGO_MAX_WIDTH_PX,
+          DEFAULT_LOGO_MAX_WIDTH_PX
+        );
         if (isNonEmptyString(logoPathRaw) && licensePublic.brandingLocked) {
           node.warn("PortalSmith FormGen: custom logo is disabled in Free mode (watermarked). Using default branding.");
           licensePublic.brandingAttempted = Boolean(logoRequested);
@@ -425,6 +444,8 @@ module.exports = function(RED) {
           themeMode: themeMode,
           logoUrl: logoUrl,
           logoAlt: logoAlt,
+          logoMaxHeightPx: logoMaxHeightPx,
+          logoMaxWidthPx: logoMaxWidthPx,
           licensed: licensePublic.licensed
         };
 
@@ -463,7 +484,7 @@ module.exports = function(RED) {
 
         // Write runtime metadata
         const runtimeData = {
-          generatorVersion: "0.5.0",
+          generatorVersion: "0.5.3",
           timestamp: new Date().toISOString(),
           instanceName: instanceName,
           storageMode: storageMode,
@@ -471,6 +492,8 @@ module.exports = function(RED) {
           themeMode: themeMode,
           logoUrl: logoUrl || "",
           logoAlt: logoAlt || "",
+          logoMaxHeightPx: logoMaxHeightPx,
+          logoMaxWidthPx: logoMaxWidthPx,
           submitMode: submitMode,
           submitUrl: submitUrl,
           license: licensePublic,

package/package.json

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

package/templates/index.html.mustache

@@ -137,6 +137,13 @@
       height: auto;
       object-fit: contain;
     }
+    .ps-custom-logo {
+      max-height: var(--ps-logo-max-height, 252px);
+      max-width: var(--ps-logo-max-width, 1100px);
+      width: auto;
+      height: auto;
+      object-fit: contain;
+    }
     .ps-watermark {
       position: fixed;
       right: 14px;
@@ -186,10 +193,10 @@
 <body>
   <div id="app">
     <div class="container form-container">
-      <div class="ps-header">
+      <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-logo" src="[[logoUrl]]" alt="[[logoAlt]]">
+        <img class="ps-custom-logo" src="[[logoUrl]]" alt="[[logoAlt]]">
         [[/logoUrl]]
         [[^logoUrl]]
         [[^licensed]]

package/templates/index.v3.html.mustache

@@ -120,6 +120,13 @@
       height: auto;
       object-fit: contain;
     }
+    .ps-custom-logo {
+      max-height: var(--ps-logo-max-height, 252px);
+      max-width: var(--ps-logo-max-width, 1100px);
+      width: auto;
+      height: auto;
+      object-fit: contain;
+    }
     .ps-watermark {
       position: fixed;
       right: 14px;
@@ -169,10 +176,10 @@
 <body>
   <div id="app">
     <div class="container form-container">
-      <div class="ps-header">
+      <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-logo" src="[[logoUrl]]" alt="[[logoAlt]]">
+        <img class="ps-custom-logo" src="[[logoUrl]]" alt="[[logoAlt]]">
         [[/logoUrl]]
         [[^logoUrl]]
         [[^licensed]]