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

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

@@ -88,47 +88,47 @@ 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)
  */
-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');
+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)
  */
-function validatePropertySelection(selection, limetypes, limetype, guiModeEnabled = true) {
+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 !== Zt.AND &&
         filter.op !== Zt.OR &&
@@ -282,12 +282,12 @@ function validateGroupExpression(filter, activeLimetype, limetypes, guiModeEnabl
     }
     // Recursively validate children
     if (filter.op === Zt.NOT) {
-        validateFilterPlaceholders(filter.exp, activeLimetype, limetypes, guiModeEnabled);
+        validateFilterPlaceholders(filter.exp, activeLimetype, limetypes, visualModeEnabled);
     }
     else if (filter.op === Zt.AND || filter.op === Zt.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
  */
-function isLimeQuerySupported(limeQuery, limetypes, activeLimetype, guiModeEnabled = true) {
+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 @@ function isLimeQuerySupported(limeQuery, limetypes, activeLimetype, guiModeEnabl
         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,32 +523,32 @@ function isLimeQuerySupported(limeQuery, limetypes, activeLimetype, guiModeEnabl
  * @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
  */
-function validateResponseFormatOnly(responseFormat, limetypes, limetype, guiModeEnabled = true) {
+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/components/limebb-lime-query-builder.js

@@ -12,7 +12,7 @@ import { d as defineCustomElement$4 } from './lime-query-value-input.js';
 import { d as defineCustomElement$3 } from './limetype-field.js';
 import { d as defineCustomElement$2 } from './property-selector.js';
 
-const limeQueryBuilderCss = "*,*:before,*:after{box-sizing:border-box}:host(limebb-lime-query-builder){--header-background-color:rgb(var(--contrast-400));--limebb-lime-query-builder-background-color:rgb(var(--contrast-100));--limebb-lime-query-builder-border-radius:0.75rem;--limebb-lime-query-builder-gui-mode-padding:1rem;--limebb-lime-query-builder-group-color:rgb(var(--color-sky-lighter));box-sizing:border-box;width:calc(100% - 1.5rem);margin:0.75rem auto;display:flex;flex-direction:column;border-radius:var(--limebb-lime-query-builder-border-radius);background-color:var(--limebb-lime-query-builder-background-color);box-shadow:var(--shadow-inflated-16)}.gui-mode{display:flex;flex-direction:column;gap:1rem;padding:var(--limebb-lime-query-builder-gui-mode-padding);border:1px solid var(--header-background-color);border-radius:0 0 var(--limebb-lime-query-builder-border-radius) var(--limebb-lime-query-builder-border-radius)}.code-mode{--code-editor-max-height:70vh;display:flex;flex-direction:column;gap:1rem}.code-mode .validation-errors{padding:0.75rem 1rem;color:rgb(var(--color-red-default));background-color:rgb(var(--color-red-lighter));border-left:0.25rem solid rgb(var(--color-red-default));border-radius:0.25rem;font-size:0.875rem}.code-mode .validation-errors strong{display:block;margin-bottom:0.5rem;font-weight:600}.code-mode .validation-errors ul{margin:0;padding-left:1.5rem}.code-mode .validation-errors li{margin:0.25rem 0}.code-mode .gui-limitations{padding:0.75rem 1rem;color:rgb(var(--color-blue-dark));background-color:rgb(var(--color-blue-lighter));border-left:0.25rem solid rgb(var(--color-blue-default));border-radius:0.25rem;font-size:0.875rem}.code-mode .gui-limitations strong{display:block;margin-bottom:0.5rem;font-weight:600}.code-mode .gui-limitations ul{margin:0;padding-left:1.5rem}.code-mode .gui-limitations li{margin:0.25rem 0}section.filter,section.query-options{display:flex;flex-direction:column;gap:1rem}section h4{margin:0;font-size:1.125rem;font-weight:600;color:rgb(var(--contrast-1000))}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)}.query-options-controls{display:flex;flex-direction:column;gap:1rem}";
+const limeQueryBuilderCss = "*,*:before,*:after{box-sizing:border-box}:host(limebb-lime-query-builder){--header-background-color:rgb(var(--contrast-400));--limebb-lime-query-builder-background-color:rgb(var(--contrast-100));--limebb-lime-query-builder-border-radius:0.75rem;--limebb-lime-query-builder-visual-mode-padding:1rem;--limebb-lime-query-builder-group-color:rgb(var(--color-sky-lighter));box-sizing:border-box;width:calc(100% - 1.5rem);margin:0.75rem auto;display:flex;flex-direction:column;border-radius:var(--limebb-lime-query-builder-border-radius);background-color:var(--limebb-lime-query-builder-background-color);box-shadow:var(--shadow-inflated-16)}.visual-mode{display:flex;flex-direction:column;gap:1rem;padding:var(--limebb-lime-query-builder-visual-mode-padding);border:1px solid var(--header-background-color);border-radius:0 0 var(--limebb-lime-query-builder-border-radius) var(--limebb-lime-query-builder-border-radius)}.code-mode{--code-editor-max-height:70vh;display:flex;flex-direction:column;gap:1rem}.code-mode .validation-errors{padding:0.75rem 1rem;color:rgb(var(--color-red-default));background-color:rgb(var(--color-red-lighter));border-left:0.25rem solid rgb(var(--color-red-default));border-radius:0.25rem;font-size:0.875rem}.code-mode .validation-errors strong{display:block;margin-bottom:0.5rem;font-weight:600}.code-mode .validation-errors ul{margin:0;padding-left:1.5rem}.code-mode .validation-errors li{margin:0.25rem 0}.code-mode .visual-mode-limitations{padding:0.75rem 1rem;color:rgb(var(--color-blue-dark));background-color:rgb(var(--color-blue-lighter));border-left:0.25rem solid rgb(var(--color-blue-default));border-radius:0.25rem;font-size:0.875rem}.code-mode .visual-mode-limitations strong{display:block;margin-bottom:0.5rem;font-weight:600}.code-mode .visual-mode-limitations ul{margin:0;padding-left:1.5rem}.code-mode .visual-mode-limitations li{margin:0.25rem 0}section.filter,section.query-options{display:flex;flex-direction:column;gap:1rem}section h4{margin:0;font-size:1.125rem;font-weight:600;color:rgb(var(--contrast-1000))}limel-header.is-narrow{--header-top-right-left-border-radius:0;width:calc(100% + var(--limebb-lime-query-builder-visual-mode-padding) * 2);margin-left:calc(var(--limebb-lime-query-builder-visual-mode-padding) * -1)}.query-options-controls{display:flex;flex-direction:column;gap:1rem}";
 const LimebbLimeQueryBuilderStyle0 = limeQueryBuilderCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -31,7 +31,7 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
         this.__registerHost();
         this.__attachShadow();
         this.change = createEvent(this, "change", 7);
-        this.mode = 'gui';
+        this.mode = 'visual';
         this.codeValue = '';
         this.limetype = '';
         this.handleLimetypeChange = (event) => {
@@ -70,11 +70,11 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
         this.handleChange = (event) => {
             event.stopPropagation();
             const mode = event.detail.id;
-            if (mode === 'gui') {
+            if (mode === 'visual') {
                 try {
                     const parsed = JSON.parse(this.codeValue);
-                    const support = this.checkGuiSupport();
-                    if (!support.guiSupported) {
+                    const support = this.checkVisualModeSupport();
+                    if (!support.visualModeSupported) {
                         return;
                     }
                     this.limetype = parsed.limetype || '';
@@ -82,7 +82,7 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
                     this.internalResponseFormat = parsed.responseFormat;
                     this.limit = parsed.limit;
                     this.orderBy = parsed.orderBy;
-                    this.mode = 'gui';
+                    this.mode = 'visual';
                     this.change.emit(parsed);
                 }
                 catch (_a) {
@@ -111,19 +111,19 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
     getButtons() {
         return [
             {
-                id: 'gui',
+                id: 'visual',
                 title: 'Visual',
             },
             { id: 'code', title: 'Code' },
         ];
     }
-    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);
     }
     componentWillLoad() {
-        // Force code mode if GUI is disabled
-        if (!this.guiModeEnabled) {
+        // Force code mode if visual mode is disabled
+        if (!this.visualModeEnabled) {
             this.mode = 'code';
             // Initialize code value from prop
             this.updateCodeValue();
@@ -138,24 +138,24 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
         }
         // Initialize code value from prop
         this.updateCodeValue();
-        // Check if GUI mode is supported
-        const support = this.checkGuiSupport();
-        if (!support.guiSupported) {
+        // Check if visual mode is supported
+        const support = this.checkVisualModeSupport();
+        if (!support.visualModeSupported) {
             this.mode = 'code';
         }
     }
     render() {
-        return (h(Host, { key: '02e7367fbc718a8625c8d49d5e546acca0986ce2' }, this.renderHeader(), this.renderContent()));
+        return (h(Host, { key: '4f1481f575b1afdd63a3115761a52a62699d7f84' }, this.renderHeader(), this.renderContent()));
     }
     renderContent() {
-        const guiSupported = this.checkGuiSupport();
-        const showCodeMode = !this.guiModeEnabled || this.mode === 'code';
+        const visualModeSupported = this.checkVisualModeSupport();
+        const showCodeMode = !this.visualModeEnabled || this.mode === 'code';
         return showCodeMode
-            ? this.renderCodeMode(guiSupported)
-            : this.renderGuiMode();
+            ? this.renderCodeMode(visualModeSupported)
+            : this.renderVisualMode();
     }
     emitChange() {
-        // Only emit in GUI mode
+        // Only emit in visual mode
         if (this.mode === 'code') {
             return;
         }
@@ -191,14 +191,14 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
         }
         return limeQuery;
     }
-    checkGuiSupport() {
+    checkVisualModeSupport() {
         if (!this.limetypes) {
             // Can't validate yet, assume all is good
             return {
                 valid: true,
-                guiSupported: true,
+                visualModeSupported: true,
                 validationErrors: [],
-                guiLimitations: [],
+                visualModeLimitations: [],
             };
         }
         // When in code mode, validate the parsed code value instead of current state
@@ -210,20 +210,20 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
             catch (_a) {
                 return {
                     valid: false,
-                    guiSupported: false,
+                    visualModeSupported: false,
                     validationErrors: ['Invalid JSON'],
-                    guiLimitations: [],
+                    visualModeLimitations: [],
                 };
             }
         }
         else {
-            // Build query from current GUI state
+            // Build query from current visual state
             if (!this.limetype) {
                 return {
                     valid: true,
-                    guiSupported: true,
+                    visualModeSupported: true,
                     validationErrors: [],
-                    guiLimitations: [],
+                    visualModeLimitations: [],
                 };
             }
             const responseFormat = this
@@ -241,23 +241,24 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
                 queryToCheck.limit = this.limit;
             }
         }
-        return isLimeQuerySupported(queryToCheck, this.limetypes, this.activeLimetype, this.guiModeEnabled);
+        return isLimeQuerySupported(queryToCheck, this.limetypes, this.activeLimetype, this.visualModeEnabled);
     }
     renderModeSwitch(support) {
-        const guiDisabled = !support.guiSupported;
+        const visualDisabled = !support.visualModeSupported;
         const buttons = this.getButtons().map((button) => (Object.assign(Object.assign({}, button), { selected: button.id === this.mode })));
-        return (h("limel-button-group", { slot: "actions", onChange: this.handleChange, value: buttons, disabled: guiDisabled }));
+        return (h("limel-button-group", { slot: "actions", onChange: this.handleChange, value: buttons, disabled: visualDisabled }));
     }
-    renderCodeEditor(guiSupported) {
+    renderCodeEditor(visualModeSupported) {
         return [
             h("limel-code-editor", { value: this.codeValue, language: "json", lineNumbers: true, fold: true, lint: true, onChange: this.handleCodeChange }),
             /* Show validation errors (invalid Lime Query) */
-            !guiSupported.valid && guiSupported.validationErrors.length > 0 && (h("div", { class: "validation-errors" }, h("strong", null, "Invalid Lime Query:"), h("ul", null, guiSupported.validationErrors.map((error) => (h("li", null, error)))))),
-            /* Show GUI limitations (only when GUI mode is enabled and Lime Query is valid) */
-            this.guiModeEnabled &&
-                guiSupported.valid &&
-                !guiSupported.guiSupported &&
-                guiSupported.guiLimitations.length > 0 && (h("div", { class: "gui-limitations" }, h("strong", null, "Cannot switch to GUI mode:"), h("ul", null, guiSupported.guiLimitations.map((limitation) => (h("li", null, limitation)))))),
+            !visualModeSupported.valid &&
+                visualModeSupported.validationErrors.length > 0 && (h("div", { class: "validation-errors" }, h("strong", null, "Invalid Lime Query:"), h("ul", null, visualModeSupported.validationErrors.map((error) => (h("li", null, error)))))),
+            /* Show visual mode limitations (only when visual mode is enabled and Lime Query is valid) */
+            this.visualModeEnabled &&
+                visualModeSupported.valid &&
+                !visualModeSupported.visualModeSupported &&
+                visualModeSupported.visualModeLimitations.length > 0 && (h("div", { class: "visual-mode-limitations" }, h("strong", null, "Cannot switch to visual mode:"), h("ul", null, visualModeSupported.visualModeLimitations.map((limitation) => (h("li", null, limitation)))))),
         ];
     }
     renderLimetypeSection() {
@@ -282,15 +283,15 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
         }
         return (h("section", { class: "query-options" }, h("limel-header", { class: "is-narrow", heading: "Query Options", icon: "ask_question" }), h("div", { class: "query-options-controls" }, h("limel-input-field", { label: "Limit", type: "number", value: ((_a = this.limit) === null || _a === void 0 ? void 0 : _a.toString()) || '', placeholder: "No limit", helperText: "Maximum number of results", onChange: this.handleLimitChange }), h("limebb-lime-query-order-by-editor", { platform: this.platform, context: this.context, limetype: this.limetype, value: this.orderBy, onChange: this.handleOrderByChange }))));
     }
-    renderGuiMode() {
-        return (h("div", { class: "gui-mode" }, this.renderLimetypeSection(), this.renderResponseFormatSection(), this.renderFilterSection(), this.renderQueryOptionsSection()));
+    renderVisualMode() {
+        return (h("div", { class: "visual-mode" }, this.renderLimetypeSection(), this.renderResponseFormatSection(), this.renderFilterSection(), this.renderQueryOptionsSection()));
     }
     renderHeader() {
-        const guiSupported = this.checkGuiSupport();
-        return (h("limel-header", { heading: this.label }, this.renderModeControls(guiSupported)));
+        const visualModeSupported = this.checkVisualModeSupport();
+        return (h("limel-header", { heading: this.label }, this.renderModeControls(visualModeSupported)));
     }
     renderModeControls(support) {
-        if (!this.guiModeEnabled) {
+        if (!this.visualModeEnabled) {
             return;
         }
         return this.renderModeSwitch(support);