@limetech/lime-crm-building-blocks 1.104.0 → 1.104.1

package/dist/collection/components/lime-query-builder/lime-query-response-format-builder.js

@@ -16,16 +16,16 @@ import { validateResponseFormatOnly, } from "./lime-query-validation";
  * Response Format Builder
  *
  * A focused component for editing Lime Query ResponseFormat in isolation.
- * Supports both GUI and code modes for maximum flexibility.
+ * Supports both visual and code modes for maximum flexibility.
  *
  * Use this component when you need to configure which properties to return
  * from a query, but don't need filter, limit, or other query parameters.
  *
  * **Features**:
- * - **GUI Mode**: Visual property selector with relation navigation
+ * - **Visual Mode**: Visual property selector with relation navigation
  * - **Code Mode**: JSON editor for ResponseFormat structure
  * - **Validation**: Ensures JSON is valid ResponseFormat (rejects other fields)
- * - **Mode Toggle**: Switch between GUI and code modes seamlessly
+ * - **Mode Toggle**: Switch between visual and code modes seamlessly
  * - **Feature Flag**: Respects `useLimeQueryBuilderGuiMode` setting
  *
  * @example
@@ -53,34 +53,34 @@ export class LimeQueryResponseFormatBuilder {
          * Optional helper text for the builder
          */
         this.helperText = '';
-        this.mode = 'gui';
+        this.mode = 'visual';
         this.codeValue = '';
         this.handleModeChange = (event) => {
             event.stopPropagation();
             const mode = event.detail.id;
-            if (mode === 'gui') {
-                this.switchToGui();
+            if (mode === 'visual') {
+                this.switchToVisualMode();
             }
             else if (mode === 'code') {
                 this.switchToCode();
             }
         };
         /**
-         * Switch from code mode to GUI mode
+         * Switch from code mode to visual mode
          */
-        this.switchToGui = () => {
+        this.switchToVisualMode = () => {
             // Validate JSON before switching
             try {
                 const parsed = parseResponseFormat(this.codeValue);
-                // Check if it's supported in GUI
-                const support = validateResponseFormatOnly(parsed, this.limetypes, this.limetype, this.guiModeEnabled);
-                if (!support.guiSupported) {
-                    // Don't switch if GUI can't render this response format
+                // Check if it's supported in visual mode
+                const support = validateResponseFormatOnly(parsed, this.limetypes, this.limetype, this.visualModeEnabled);
+                if (!support.visualModeSupported) {
+                    // Don't switch if visual mode can't render this response format
                     return;
                 }
                 // Update internal state from parsed value
                 this.internalValue = parsed;
-                this.mode = 'gui';
+                this.mode = 'visual';
                 this.change.emit(parsed);
             }
             catch (_a) {
@@ -88,7 +88,7 @@ export class LimeQueryResponseFormatBuilder {
             }
         };
         /**
-         * Switch from GUI mode to code mode
+         * Switch from visual mode to code mode
          */
         this.switchToCode = () => {
             this.updateCodeValue();
@@ -109,14 +109,14 @@ export class LimeQueryResponseFormatBuilder {
             }
             catch (_a) {
                 // Invalid JSON - don't emit change
-                // Validation errors will be shown by checkGuiSupport()
+                // Validation errors will be shown by checkVisualModeSupport()
             }
         };
         /**
-         * Handle GUI mode changes
+         * Handle visual mode changes
          * @param event
          */
-        this.handleGuiChange = (event) => {
+        this.handleVisualModeChange = (event) => {
             event.stopPropagation();
             this.internalValue = event.detail;
             this.updateCodeValue();
@@ -124,9 +124,9 @@ export class LimeQueryResponseFormatBuilder {
         };
     }
     /**
-     * Check if GUI mode is enabled via feature flag
+     * Check if visual mode is enabled via feature flag
      */
-    get guiModeEnabled() {
+    get visualModeEnabled() {
         var _a, _b, _c;
         return ((_c = (_b = (_a = this.platform) === null || _a === void 0 ? void 0 : _a.isFeatureEnabled) === null || _b === void 0 ? void 0 : _b.call(_a, 'useLimeQueryBuilderGuiMode')) !== null && _c !== void 0 ? _c : false);
     }
@@ -135,32 +135,32 @@ export class LimeQueryResponseFormatBuilder {
         this.internalValue = this.value || getDefaultResponseFormat();
         // Update code value from internal value
         this.updateCodeValue();
-        // Force code mode if GUI is disabled
-        if (!this.guiModeEnabled) {
+        // Force code mode if visual mode is disabled
+        if (!this.visualModeEnabled) {
             this.mode = 'code';
             return;
         }
-        // Check if GUI mode is supported for current value
-        const support = this.checkGuiSupport();
-        if (!support.guiSupported) {
+        // Check if visual mode is supported for current value
+        const support = this.checkVisualModeSupport();
+        if (!support.visualModeSupported) {
             this.mode = 'code';
         }
     }
     componentWillUpdate() {
         // Sync internal value when prop changes externally
-        if (this.value && this.mode === 'gui') {
+        if (this.value && this.mode === 'visual') {
             this.internalValue = this.value;
         }
     }
     render() {
-        const guiSupported = this.checkGuiSupport();
-        return (h("div", { key: '6bc723110dcd545534e93db64a0d6a14963b6bda', class: "response-format-builder" }, this.label && h("h1", { key: '405d373ccb5056af3c0e6201ef5ebf819a3b8154', class: "builder-label" }, this.label), this.helperText && (h("p", { key: '5fb07f0fcd9e57b7c358957afc13485156bd041f', class: "builder-helper-text" }, this.helperText)), this.guiModeEnabled && (h("div", { key: 'd2241f702cfe9e75077542d4d21acb038be0a348', class: "mode-controls" }, this.renderModeSwitch(guiSupported))), !this.guiModeEnabled || this.mode === 'code' ? (h("div", { class: "code-mode" }, this.renderCodeEditor(guiSupported))) : (h("div", { class: "gui-mode" }, this.renderGuiMode()))));
+        const visualModeSupported = this.checkVisualModeSupport();
+        return (h("div", { key: '7ae23c1366da49b591c0914f49f25c179e4d6712', class: "response-format-builder" }, this.label && h("h1", { key: '0cd528a69dd1b05769c678151f0827de15d167a8', class: "builder-label" }, this.label), this.helperText && (h("p", { key: 'b636ca0d32b244d051e74ed538cbd11438f29cd1', class: "builder-helper-text" }, this.helperText)), this.visualModeEnabled && (h("div", { key: 'dc7248cb27d99aa654b0f1659938c3f2933d89e0', class: "mode-controls" }, this.renderModeSwitch(visualModeSupported))), !this.visualModeEnabled || this.mode === 'code' ? (h("div", { class: "code-mode" }, this.renderCodeEditor(visualModeSupported))) : (h("div", { class: "visual-mode" }, this.renderVisualMode()))));
     }
     renderModeSwitch(support) {
-        const guiDisabled = !support.guiSupported;
+        const visualDisabled = !support.visualModeSupported;
         const buttons = [
             {
-                id: 'gui',
+                id: 'visual',
                 title: 'Visual',
             },
             {
@@ -168,27 +168,27 @@ export class LimeQueryResponseFormatBuilder {
                 title: 'Code',
             },
         ].map((button) => (Object.assign(Object.assign({}, button), { selected: button.id === this.mode })));
-        return (h("limel-button-group", { value: buttons, disabled: guiDisabled, onChange: this.handleModeChange }));
+        return (h("limel-button-group", { value: buttons, disabled: visualDisabled, onChange: this.handleModeChange }));
     }
     renderCodeEditor(support) {
-        return (h("div", { class: "code-editor-container" }, h("limel-code-editor", { value: this.codeValue, language: "json", lineNumbers: true, fold: true, lint: true, onChange: this.handleCodeChange }), !support.valid && support.validationErrors.length > 0 && (h("div", { class: "validation-errors" }, h("strong", null, "Invalid Response Format:"), h("ul", null, support.validationErrors.map((error) => (h("li", null, error)))))), this.guiModeEnabled &&
+        return (h("div", { class: "code-editor-container" }, h("limel-code-editor", { value: this.codeValue, language: "json", lineNumbers: true, fold: true, lint: true, onChange: this.handleCodeChange }), !support.valid && support.validationErrors.length > 0 && (h("div", { class: "validation-errors" }, h("strong", null, "Invalid Response Format:"), h("ul", null, support.validationErrors.map((error) => (h("li", null, error)))))), this.visualModeEnabled &&
             support.valid &&
-            !support.guiSupported &&
-            support.guiLimitations.length > 0 && (h("div", { class: "gui-limitations" }, h("strong", null, "Cannot switch to GUI mode:"), h("ul", null, support.guiLimitations.map((limitation) => (h("li", null, limitation))))))));
+            !support.visualModeSupported &&
+            support.visualModeLimitations.length > 0 && (h("div", { class: "visual-mode-limitations" }, h("strong", null, "Cannot switch to visual mode:"), h("ul", null, support.visualModeLimitations.map((limitation) => (h("li", null, limitation))))))));
     }
-    renderGuiMode() {
-        return (h("limebb-lime-query-response-format-editor", { platform: this.platform, context: this.context, limetype: this.limetype, value: this.internalValue, onChange: this.handleGuiChange }));
+    renderVisualMode() {
+        return (h("limebb-lime-query-response-format-editor", { platform: this.platform, context: this.context, limetype: this.limetype, value: this.internalValue, onChange: this.handleVisualModeChange }));
     }
     /**
-     * Check if current value can be rendered in GUI mode
+     * Check if current value can be rendered in visual mode
      */
-    checkGuiSupport() {
+    checkVisualModeSupport() {
         if (!this.limetypes) {
             return {
                 valid: false,
-                guiSupported: false,
+                visualModeSupported: false,
                 validationErrors: ['Limetypes not loaded'],
-                guiLimitations: [],
+                visualModeLimitations: [],
             };
         }
         // Try to parse code value if in code mode
@@ -200,16 +200,16 @@ export class LimeQueryResponseFormatBuilder {
             catch (error) {
                 return {
                     valid: false,
-                    guiSupported: false,
+                    visualModeSupported: false,
                     validationErrors: [error.message],
-                    guiLimitations: [],
+                    visualModeLimitations: [],
                 };
             }
         }
         else {
             valueToCheck = this.internalValue;
         }
-        return validateResponseFormatOnly(valueToCheck, this.limetypes, this.limetype, this.guiModeEnabled);
+        return validateResponseFormatOnly(valueToCheck, this.limetypes, this.limetype, this.visualModeEnabled);
     }
     /**
      * Update code value from internal state

package/dist/collection/components/lime-query-builder/lime-query-validation.js

@@ -88,47 +88,47 @@ export function validatePlaceholder(value, activeLimetype, limetypes) {
 /**
  * Validate a response format against limetype schemas
  * Throws errors for invalid property references
- * Returns GUI limitations for features not yet supported in GUI
+ * Returns visual mode limitations for features not yet supported in visual mode
  * @param responseFormat
  * @param limetypes Record of all available limetypes
  * @param limetype The root limetype for this query
- * @param guiModeEnabled Whether GUI mode is enabled
- * @returns GUI limitations found (if any)
+ * @param visualModeEnabled Whether visual mode is enabled
+ * @returns Visual mode limitations found (if any)
  */
-export function validateResponseFormat(responseFormat, limetypes, limetype, guiModeEnabled = true) {
-    const guiLimitations = [];
-    // Check for GUI-unsupported features
-    if (guiModeEnabled && responseFormat.aggregates) {
-        guiLimitations.push('responseFormat.aggregates is not yet supported in GUI mode');
+export function validateResponseFormat(responseFormat, limetypes, limetype, visualModeEnabled = true) {
+    const visualModeLimitations = [];
+    // Check for visual-mode-unsupported features
+    if (visualModeEnabled && responseFormat.aggregates) {
+        visualModeLimitations.push('responseFormat.aggregates is not yet supported in visual mode');
     }
     // Validate object properties (throws on invalid properties)
     if (responseFormat.object) {
-        const objectLimitations = validatePropertySelection(responseFormat.object, limetypes, limetype, guiModeEnabled);
-        guiLimitations.push(...objectLimitations);
+        const objectLimitations = validatePropertySelection(responseFormat.object, limetypes, limetype, visualModeEnabled);
+        visualModeLimitations.push(...objectLimitations);
     }
-    return guiLimitations;
+    return visualModeLimitations;
 }
 /**
  * Extract non-metadata keys from a property value object
  * Filters out _alias and all # properties (which are treated as comments)
  * @param propValue Property value object
  * @param propName Property name (for error messages)
- * @param guiModeEnabled Whether GUI mode is enabled (affects validation)
- * @returns Object with non-metadata keys and any GUI limitations found
+ * @param visualModeEnabled Whether visual mode is enabled (affects validation)
+ * @returns Object with non-metadata keys and any visual mode limitations found
  */
-function extractNonMetadataKeys(propValue, propName, guiModeEnabled = true) {
+function extractNonMetadataKeys(propValue, propName, visualModeEnabled = true) {
     const keys = Object.keys(propValue);
-    const guiLimitations = [];
-    // Check for # properties other than #description (GUI limitation)
-    if (guiModeEnabled) {
+    const visualModeLimitations = [];
+    // Check for # properties other than #description (visual mode limitation)
+    if (visualModeEnabled) {
         const unsupportedHashProps = keys.filter((k) => k.startsWith('#') && k !== '#description');
         if (unsupportedHashProps.length > 0) {
-            guiLimitations.push(`Property '${propName}' contains # properties not supported in GUI: ${unsupportedHashProps.join(', ')}`);
+            visualModeLimitations.push(`Property '${propName}' contains # properties not supported in visual mode: ${unsupportedHashProps.join(', ')}`);
         }
     }
     // Filter out _alias and all # properties (they are metadata/comments)
     const nonMetadataKeys = keys.filter((k) => k !== '_alias' && !k.startsWith('#'));
-    return { keys: nonMetadataKeys, guiLimitations };
+    return { keys: nonMetadataKeys, visualModeLimitations };
 }
 /**
  * Validate a relation property value
@@ -136,10 +136,10 @@ function extractNonMetadataKeys(propValue, propName, guiModeEnabled = true) {
  * @param propValue Property value
  * @param limetypes Record of all available limetypes
  * @param property
- * @param guiModeEnabled Whether GUI mode is enabled (affects validation)
- * @returns GUI limitations found (if any)
+ * @param visualModeEnabled Whether visual mode is enabled (affects validation)
+ * @returns Visual mode limitations found (if any)
  */
-function validateRelationProperty(propName, propValue, limetypes, property, guiModeEnabled = true) {
+function validateRelationProperty(propName, propValue, limetypes, property, visualModeEnabled = true) {
     // null is valid - just return the relation ID
     if (propValue === null) {
         return [];
@@ -148,10 +148,10 @@ function validateRelationProperty(propName, propValue, limetypes, property, guiM
         throw new TypeError(`Relation property '${propName}' must be null or an object`);
     }
     const propValueObj = propValue;
-    const { keys: otherKeys, guiLimitations } = extractNonMetadataKeys(propValueObj, propName, guiModeEnabled);
+    const { keys: otherKeys, visualModeLimitations } = extractNonMetadataKeys(propValueObj, propName, visualModeEnabled);
     // If it's just {} or { _alias: "...", "#...": "..." }, that's valid
     if (otherKeys.length === 0) {
-        return guiLimitations;
+        return visualModeLimitations;
     }
     // Otherwise, validate nested properties
     const relatedLimetype = property.relation.getLimetype();
@@ -163,27 +163,27 @@ function validateRelationProperty(propName, propValue, limetypes, property, guiM
     for (const key of otherKeys) {
         cleanSelection[key] = propValueObj[key];
     }
-    const nestedLimitations = validatePropertySelection(cleanSelection, limetypes, relatedLimetype.name, guiModeEnabled);
-    return [...guiLimitations, ...nestedLimitations];
+    const nestedLimitations = validatePropertySelection(cleanSelection, limetypes, relatedLimetype.name, visualModeEnabled);
+    return [...visualModeLimitations, ...nestedLimitations];
 }
 /**
  * Validate a non-relation property value
  * @param propName Property name
  * @param propValue Property value
- * @param guiModeEnabled Whether GUI mode is enabled (affects validation)
- * @returns GUI limitations found (if any)
+ * @param visualModeEnabled Whether visual mode is enabled (affects validation)
+ * @returns Visual mode limitations found (if any)
  */
-function validateNonRelationProperty(propName, propValue, guiModeEnabled = true) {
+function validateNonRelationProperty(propName, propValue, visualModeEnabled = true) {
     // null is valid
     if (propValue === null) {
         return [];
     }
     // Allow empty object {} or object with only metadata (_alias, #...)
     if (typeof propValue === 'object') {
-        const { keys: nonMetadataKeys, guiLimitations } = extractNonMetadataKeys(propValue, propName, guiModeEnabled);
+        const { keys: nonMetadataKeys, visualModeLimitations } = extractNonMetadataKeys(propValue, propName, visualModeEnabled);
         if (nonMetadataKeys.length === 0) {
             // {} or { _alias: "...", "#...": "..." } is valid
-            return guiLimitations;
+            return visualModeLimitations;
         }
         throw new Error(`Non-relation property '${propName}' cannot have nested properties other than _alias or # properties (got: ${nonMetadataKeys.join(', ')})`);
     }
@@ -196,14 +196,14 @@ function validateNonRelationProperty(propName, propValue, guiModeEnabled = true)
  * @param normalizedProperties Normalized properties of the limetype
  * @param limetypes Record of all available limetypes
  * @param limetype Current limetype name
- * @param guiModeEnabled Whether GUI mode is enabled (affects validation)
- * @returns GUI limitations found (if any)
+ * @param visualModeEnabled Whether visual mode is enabled (affects validation)
+ * @returns Visual mode limitations found (if any)
  */
-function validateSinglePropertyEntry(propName, propValue, normalizedProperties, limetypes, limetype, guiModeEnabled = true) {
-    // Allow empty string (editing state in GUI)
+function validateSinglePropertyEntry(propName, propValue, normalizedProperties, limetypes, limetype, visualModeEnabled = true) {
+    // Allow empty string (editing state in visual mode)
     if (propName === '') {
-        // Only validate empty property name in GUI mode
-        if (guiModeEnabled && propValue !== null) {
+        // Only validate empty property name in visual mode
+        if (visualModeEnabled && propValue !== null) {
             throw new Error('Empty property name must have null value');
         }
         return [];
@@ -215,10 +215,10 @@ function validateSinglePropertyEntry(propName, propValue, normalizedProperties,
     }
     // Validate value based on property type
     if (property.relation) {
-        return validateRelationProperty(propName, propValue, limetypes, property, guiModeEnabled);
+        return validateRelationProperty(propName, propValue, limetypes, property, visualModeEnabled);
     }
     else {
-        return validateNonRelationProperty(propName, propValue, guiModeEnabled);
+        return validateNonRelationProperty(propName, propValue, visualModeEnabled);
     }
 }
 /**
@@ -227,26 +227,26 @@ function validateSinglePropertyEntry(propName, propValue, normalizedProperties,
  * @param selection
  * @param limetypes Record of all available limetypes
  * @param limetype The limetype for this level of the selection
- * @param guiModeEnabled Whether GUI mode is enabled (affects validation)
- * @returns GUI limitations found (if any)
+ * @param visualModeEnabled Whether visual mode is enabled (affects validation)
+ * @returns Visual mode limitations found (if any)
  */
-export function validatePropertySelection(selection, limetypes, limetype, guiModeEnabled = true) {
+export function validatePropertySelection(selection, limetypes, limetype, visualModeEnabled = true) {
     const limetypeObj = limetypes[limetype];
     if (!limetypeObj) {
         throw new Error(`Unknown limetype: ${limetype}`);
     }
     const normalizedProperties = getNormalizedProperties(limetypeObj);
-    const allGuiLimitations = [];
+    const allVisualModeLimitations = [];
     for (const [propName, propValue] of Object.entries(selection)) {
         // Skip # properties (comments/metadata that backend accepts via unknown=INCLUDE)
         // Note: _alias only appears inside property value objects, not at this level
         if (propName.startsWith('#')) {
             continue;
         }
-        const limitations = validateSinglePropertyEntry(propName, propValue, normalizedProperties, limetypes, limetype, guiModeEnabled);
-        allGuiLimitations.push(...limitations);
+        const limitations = validateSinglePropertyEntry(propName, propValue, normalizedProperties, limetypes, limetype, visualModeEnabled);
+        allVisualModeLimitations.push(...limitations);
     }
-    return allGuiLimitations;
+    return allVisualModeLimitations;
 }
 /**
  * Validate a comparison expression (has 'key' property)
@@ -271,9 +271,9 @@ function validateComparisonExpression(filter, activeLimetype, limetypes) {
  * @param filter
  * @param activeLimetype
  * @param limetypes
- * @param guiModeEnabled
+ * @param visualModeEnabled
  */
-function validateGroupExpression(filter, activeLimetype, limetypes, guiModeEnabled) {
+function validateGroupExpression(filter, activeLimetype, limetypes, visualModeEnabled) {
     // Validate operator
     if (filter.op !== Operator.AND &&
         filter.op !== Operator.OR &&
@@ -282,12 +282,12 @@ function validateGroupExpression(filter, activeLimetype, limetypes, guiModeEnabl
     }
     // Recursively validate children
     if (filter.op === Operator.NOT) {
-        validateFilterPlaceholders(filter.exp, activeLimetype, limetypes, guiModeEnabled);
+        validateFilterPlaceholders(filter.exp, activeLimetype, limetypes, visualModeEnabled);
     }
     else if (filter.op === Operator.AND || filter.op === Operator.OR) {
         const expressions = filter.exp;
         for (const expr of expressions) {
-            validateFilterPlaceholders(expr, activeLimetype, limetypes, guiModeEnabled);
+            validateFilterPlaceholders(expr, activeLimetype, limetypes, visualModeEnabled);
         }
     }
 }
@@ -296,9 +296,9 @@ function validateGroupExpression(filter, activeLimetype, limetypes, guiModeEnabl
  * @param filter Filter expression to validate
  * @param activeLimetype The limetype of the active object
  * @param limetypes Record of all available limetypes
- * @param guiModeEnabled Whether GUI mode is enabled (affects validation)
+ * @param visualModeEnabled Whether visual mode is enabled (affects validation)
  */
-function validateFilterPlaceholders(filter, activeLimetype, limetypes, guiModeEnabled = true) {
+function validateFilterPlaceholders(filter, activeLimetype, limetypes, visualModeEnabled = true) {
     if (!filter) {
         return;
     }
@@ -307,7 +307,7 @@ function validateFilterPlaceholders(filter, activeLimetype, limetypes, guiModeEn
         return;
     }
     if ('exp' in filter) {
-        validateGroupExpression(filter, activeLimetype, limetypes, guiModeEnabled);
+        validateGroupExpression(filter, activeLimetype, limetypes, visualModeEnabled);
     }
 }
 /**
@@ -315,13 +315,13 @@ function validateFilterPlaceholders(filter, activeLimetype, limetypes, guiModeEn
  * @param filter The filter expression or group to validate
  * @param activeLimetype Optional active object limetype for placeholder validation
  * @param limetypes Record of all available limetypes
- * @param guiModeEnabled Whether GUI mode is enabled
+ * @param visualModeEnabled Whether visual mode is enabled
  * @returns Array of validation error messages
  */
-function validateLimeQueryFilterInternal(filter, activeLimetype, limetypes, guiModeEnabled) {
+function validateLimeQueryFilterInternal(filter, activeLimetype, limetypes, visualModeEnabled) {
     const errors = [];
     try {
-        validateFilterPlaceholders(filter, activeLimetype, limetypes, guiModeEnabled);
+        validateFilterPlaceholders(filter, activeLimetype, limetypes, visualModeEnabled);
     }
     catch (error) {
         errors.push(`Invalid filter: ${error.message}`);
@@ -440,14 +440,14 @@ function validateOrderByPropertyPath(propertyPath, limetypes, limetype, index) {
  * @param responseFormat The response format to validate
  * @param limetypes Record of all available limetypes
  * @param limetype The limetype for this Lime Query
- * @param guiModeEnabled Whether GUI mode is enabled
- * @returns Object with validation errors and GUI limitations
+ * @param visualModeEnabled Whether visual mode is enabled
+ * @returns Object with validation errors and visual mode limitations
  */
-function validateLimeQueryResponseFormatInternal(responseFormat, limetypes, limetype, guiModeEnabled) {
+function validateLimeQueryResponseFormatInternal(responseFormat, limetypes, limetype, visualModeEnabled) {
     const errors = [];
     const limitations = [];
     try {
-        const formatLimitations = validateResponseFormat(responseFormat, limetypes, limetype, guiModeEnabled);
+        const formatLimitations = validateResponseFormat(responseFormat, limetypes, limetype, visualModeEnabled);
         limitations.push(...formatLimitations);
     }
     catch (error) {
@@ -457,25 +457,25 @@ function validateLimeQueryResponseFormatInternal(responseFormat, limetypes, lime
 }
 /**
  * Validate a Lime Query
- * Returns validation result with separate arrays for validity errors and GUI limitations
+ * Returns validation result with separate arrays for validity errors and visual mode limitations
  * @param limeQuery The Lime Query to validate
  * @param limetypes Record of all available limetypes
  * @param activeLimetype Optional active object limetype for placeholder validation
- * @param guiModeEnabled Whether GUI mode is enabled (affects validation)
+ * @param visualModeEnabled Whether visual mode is enabled (affects validation)
  * @returns LimeQueryValidationResult with validity status and any errors/limitations
  */
-export function isLimeQuerySupported(limeQuery, limetypes, activeLimetype, guiModeEnabled = true) {
+export function isLimeQuerySupported(limeQuery, limetypes, activeLimetype, visualModeEnabled = true) {
     // Handle empty/undefined Lime Query
     if (!limeQuery) {
         return {
             valid: true,
-            guiSupported: true,
+            visualModeSupported: true,
             validationErrors: [],
-            guiLimitations: [],
+            visualModeLimitations: [],
         };
     }
     const validationErrors = [];
-    const guiLimitations = [];
+    const visualModeLimitations = [];
     // Validate limetype exists
     if (limeQuery.limetype && !limetypes[limeQuery.limetype]) {
         validationErrors.push(`Unknown limetype: ${limeQuery.limetype}`);
@@ -489,26 +489,26 @@ export function isLimeQuerySupported(limeQuery, limetypes, activeLimetype, guiMo
         const orderByErrors = validateOrderBy(limeQuery.orderBy, limetypes, limeQuery.limetype);
         validationErrors.push(...orderByErrors);
     }
-    // Check for GUI-unsupported top-level properties
-    if (guiModeEnabled && limeQuery.offset !== undefined) {
-        guiLimitations.push('offset is not yet supported in GUI mode');
+    // Check for visual-mode-unsupported top-level properties
+    if (visualModeEnabled && limeQuery.offset !== undefined) {
+        visualModeLimitations.push('offset is not yet supported in visual mode');
     }
     // Validate filter
     if (limeQuery.filter) {
-        const filterErrors = validateLimeQueryFilterInternal(limeQuery.filter, activeLimetype, limetypes, guiModeEnabled);
+        const filterErrors = validateLimeQueryFilterInternal(limeQuery.filter, activeLimetype, limetypes, visualModeEnabled);
         validationErrors.push(...filterErrors);
     }
     // Validate responseFormat
     if (limeQuery.responseFormat) {
-        const { errors, limitations } = validateLimeQueryResponseFormatInternal(limeQuery.responseFormat, limetypes, limeQuery.limetype, guiModeEnabled);
+        const { errors, limitations } = validateLimeQueryResponseFormatInternal(limeQuery.responseFormat, limetypes, limeQuery.limetype, visualModeEnabled);
         validationErrors.push(...errors);
-        guiLimitations.push(...limitations);
+        visualModeLimitations.push(...limitations);
     }
     return {
         valid: validationErrors.length === 0,
-        guiSupported: guiLimitations.length === 0,
+        visualModeSupported: visualModeLimitations.length === 0,
         validationErrors,
-        guiLimitations,
+        visualModeLimitations,
     };
 }
 // ============================================================================
@@ -523,31 +523,31 @@ export function isLimeQuerySupported(limeQuery, limetypes, activeLimetype, guiMo
  * @param responseFormat - The response format to validate
  * @param limetypes - Record of all available limetypes
  * @param limetype - The limetype context for validation
- * @param guiModeEnabled - Whether GUI mode is enabled (affects validation)
- * @returns Validation result with errors and GUI limitations
+ * @param visualModeEnabled - Whether visual mode is enabled (affects validation)
+ * @returns Validation result with errors and visual mode limitations
  */
-export function validateResponseFormatOnly(responseFormat, limetypes, limetype, guiModeEnabled = true) {
+export function validateResponseFormatOnly(responseFormat, limetypes, limetype, visualModeEnabled = true) {
     const validationErrors = [];
-    const guiLimitations = [];
+    const visualModeLimitations = [];
     // Validate limetype exists
     if (!limetypes[limetype]) {
         validationErrors.push(`Unknown limetype: ${limetype}`);
         // Can't proceed with property validation if limetype is unknown
         return {
             valid: false,
-            guiSupported: false,
+            visualModeSupported: false,
             validationErrors,
-            guiLimitations,
+            visualModeLimitations,
         };
     }
     // Use internal validation logic
-    const { errors, limitations } = validateLimeQueryResponseFormatInternal(responseFormat, limetypes, limetype, guiModeEnabled);
+    const { errors, limitations } = validateLimeQueryResponseFormatInternal(responseFormat, limetypes, limetype, visualModeEnabled);
     validationErrors.push(...errors);
-    guiLimitations.push(...limitations);
+    visualModeLimitations.push(...limitations);
     return {
         valid: validationErrors.length === 0,
-        guiSupported: guiLimitations.length === 0,
+        visualModeSupported: visualModeLimitations.length === 0,
         validationErrors,
-        guiLimitations,
+        visualModeLimitations,
     };
 }

package/dist/collection/components/lime-query-builder/order-by/order-by-editor.css

@@ -57,8 +57,8 @@
 
 limel-header.is-narrow {
   --header-top-right-left-border-radius: 0;
-  width: calc(100% + var(--limebb-lime-query-builder-gui-mode-padding) * 2);
-  margin-left: calc(var(--limebb-lime-query-builder-gui-mode-padding) * -1);
+  width: calc(100% + var(--limebb-lime-query-builder-visual-mode-padding) * 2);
+  margin-left: calc(var(--limebb-lime-query-builder-visual-mode-padding) * -1);
 }
 
 .empty-state {

package/dist/collection/components/lime-query-builder/response-format/response-format-helpers.js

@@ -32,7 +32,7 @@ export function parseResponseFormat(json) {
             `Only 'object' and 'aggregates' are allowed.`);
     }
     // Must have at least one of object or aggregates
-    // Note: Empty objects {} are valid (starting point for GUI mode)
+    // Note: Empty objects {} are valid (starting point for visual mode)
     const hasProperties = keys.length > 0;
     if (hasProperties && !parsed.object && !parsed.aggregates) {
         throw new Error('Response format must contain at least one of: object, aggregates');
@@ -84,7 +84,7 @@ export function isValidResponseFormatStructure(json) {
         };
     }
     // Must have at least one of object or aggregates
-    // Note: Empty objects {} are valid (starting point for GUI mode)
+    // Note: Empty objects {} are valid (starting point for visual mode)
     const hasProperties = keys.length > 0;
     if (hasProperties && !json.object && !json.aggregates) {
         return {