@nyaruka/temba-components 0.131.1 → 0.131.3

package/out-tsc/src/flow/NodeEditor.js

@@ -3,10 +3,13 @@ import { html, css } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { NODE_CONFIG, ACTION_CONFIG } from './config';
+import { ACTION_GROUP_METADATA, SPLIT_GROUP_METADATA } from './types';
 import { CustomEventType } from '../interfaces';
 import { generateUUID } from '../utils';
 import { FieldRenderer } from '../form/FieldRenderer';
 import { renderMarkdownInline } from '../markdown';
+import { fromStore, zustand } from '../store/AppState';
+import { getStore } from '../store/Store';
 export class NodeEditor extends RapidElement {
     constructor() {
         super(...arguments);
@@ -16,6 +19,7 @@ export class NodeEditor extends RapidElement {
         this.errors = {};
         this.groupCollapseState = {};
         this.groupHoverState = {};
+        this.revealedOptionalFields = new Set();
     }
     static get styles() {
         return css `
@@ -25,7 +29,6 @@ export class NodeEditor extends RapidElement {
         flex-direction: column;
         gap: 15px;
         min-width: 400px;
-        padding-bottom: 40px;
 
         --color-bubble-bg: rgba(var(--primary-rgb), 0.7);
         --color-bubble-border: rgba(0, 0, 0, 0.2);
@@ -88,6 +91,28 @@ export class NodeEditor extends RapidElement {
         align-items: center;
       }
 
+      .form-row-wrapper {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .form-row-label {
+        margin-bottom: 5px;
+        margin-left: 4px;
+        display: block;
+        font-weight: 400;
+        font-size: var(--label-size);
+        letter-spacing: 0.05em;
+        line-height: normal;
+        color: var(--color-label, #777);
+      }
+
+      .form-row-help {
+        font-size: 12px;
+        color: #666;
+        margin-top: 6px;
+      }
+
       .form-group {
         border: 1px solid #e0e0e0;
         border-radius: 6px;
@@ -276,6 +301,69 @@ export class NodeEditor extends RapidElement {
       .gutter-fields temba-select {
         min-width: 120px;
       }
+
+      .optional-field-link {
+        margin: 10px 0;
+      }
+
+      .optional-field-link a {
+        color: var(--color-link-primary, #0066cc);
+        text-decoration: none;
+        font-size: 13px;
+        cursor: pointer;
+      }
+
+      .optional-field-link a:hover {
+        text-decoration: underline;
+      }
+
+      .original-value {
+        background: #fff8dc;
+        padding: 10px;
+        border-radius: 4px;
+        font-size: 13px;
+        color: #666;
+      }
+
+      .original-value-content {
+        color: #333;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+
+      .category-localization-table {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+      }
+
+      .category-localization-row {
+        display: grid;
+        grid-template-columns: 40% 60%;
+      }
+
+      .category-localization-row:last-child {
+        border-bottom: none;
+      }
+
+      .original-name {
+        padding: 10px 20px;
+        background: #fff8dc;
+        display: flex;
+        align-items: center;
+        border-radius: var(--curvature);
+      }
+
+      .localized-name {
+        padding: 10px;
+        display: flex;
+        align-items: center;
+      }
+
+      .localized-name temba-textinput {
+        width: 100%;
+      }
     `;
     }
     connectedCallback() {
@@ -307,11 +395,20 @@ export class NodeEditor extends RapidElement {
         this.isOpen = true;
     }
     initializeFormData() {
+        var _a, _b, _c, _d, _e;
         const nodeConfig = this.getNodeConfig();
         if ((!nodeConfig || nodeConfig.type === 'execute_actions') && this.action) {
             // Action editing mode - use action config
             const actionConfig = ACTION_CONFIG[this.action.type];
-            if (actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.toFormData) {
+            // Check if we're in localization mode
+            if (this.isTranslating &&
+                (actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.localizable) &&
+                actionConfig.toLocalizationFormData) {
+                // Get localized values for this action
+                const localization = ((_c = (_b = (_a = this.flowDefinition) === null || _a === void 0 ? void 0 : _a.localization) === null || _b === void 0 ? void 0 : _b[this.languageCode]) === null || _c === void 0 ? void 0 : _c[this.action.uuid]) || {};
+                this.formData = actionConfig.toLocalizationFormData(this.action, localization);
+            }
+            else if (actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.toFormData) {
                 this.formData = actionConfig.toFormData(this.action);
             }
             else {
@@ -325,8 +422,16 @@ export class NodeEditor extends RapidElement {
         else if (this.node) {
             // Node editing mode - use node config
             const nodeConfig = this.getNodeConfig();
-            if (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.toFormData) {
-                this.formData = nodeConfig.toFormData(this.node);
+            // Check if we're in localization mode for a node with localizable categories
+            if (this.isTranslating &&
+                (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.localizable) === 'categories' &&
+                nodeConfig.toLocalizationFormData) {
+                // Get localized values for this node's categories
+                const localization = ((_e = (_d = this.flowDefinition) === null || _d === void 0 ? void 0 : _d.localization) === null || _e === void 0 ? void 0 : _e[this.languageCode]) || {};
+                this.formData = nodeConfig.toLocalizationFormData(this.node, localization);
+            }
+            else if (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.toFormData) {
+                this.formData = nodeConfig.toFormData(this.node, this.nodeUI);
             }
             else {
                 this.formData = { ...this.node };
@@ -433,8 +538,12 @@ export class NodeEditor extends RapidElement {
         return this.nodeUI.type ? NODE_CONFIG[this.nodeUI.type] : null;
     }
     getHeaderColor() {
+        var _a, _b;
         const config = this.getConfig();
-        return (config === null || config === void 0 ? void 0 : config.color) || '#666666';
+        return (config === null || config === void 0 ? void 0 : config.group)
+            ? ((_a = ACTION_GROUP_METADATA[config.group]) === null || _a === void 0 ? void 0 : _a.color) ||
+                ((_b = SPLIT_GROUP_METADATA[config.group]) === null || _b === void 0 ? void 0 : _b.color)
+            : '#aaaaaa';
     }
     handleDialogButtonClick(event) {
         const button = event.detail.button;
@@ -446,24 +555,77 @@ export class NodeEditor extends RapidElement {
         }
     }
     handleSave() {
-        // Validate the form
-        const validation = this.validateForm();
-        if (!validation.valid) {
-            this.errors = validation.errors;
-            // Expand any groups that contain validation errors
-            this.expandGroupsWithErrors(validation.errors);
-            return;
-        }
-        // Process form data to convert key-value arrays to Records before saving
+        var _a, _b, _c, _d;
+        // Process form data first
         const processedFormData = this.processFormDataForSave();
+        // Skip validation if we're in localization mode
+        // (localization only deals with translating text, not changing structure)
+        if (!this.isTranslating) {
+            // Validate the form
+            const validation = this.validateForm();
+            if (!validation.valid) {
+                this.errors = validation.errors;
+                // Expand any groups that contain validation errors
+                this.expandGroupsWithErrors(validation.errors);
+                return;
+            }
+        }
+        // Check if we're in localization mode
+        if (this.isTranslating) {
+            // Handle action localization
+            if (this.action) {
+                const actionConfig = ACTION_CONFIG[this.action.type];
+                if ((actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.localizable) &&
+                    actionConfig.fromLocalizationFormData) {
+                    // Save to localization structure
+                    const localizationData = actionConfig.fromLocalizationFormData(processedFormData, this.action);
+                    // Update the flow definition's localization
+                    this.updateLocalization(this.languageCode, this.action.uuid, localizationData);
+                    // Close the dialog
+                    this.fireCustomEvent(CustomEventType.NodeEditCancelled, {});
+                    return;
+                }
+            }
+            // Handle node localization (for router categories)
+            if (this.node) {
+                const nodeConfig = this.getNodeConfig();
+                if ((nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.localizable) === 'categories' &&
+                    nodeConfig.fromLocalizationFormData) {
+                    // Get localization data for all categories
+                    const localizationData = nodeConfig.fromLocalizationFormData(processedFormData, this.node);
+                    const languageLocalization = ((_b = (_a = this.flowDefinition) === null || _a === void 0 ? void 0 : _a.localization) === null || _b === void 0 ? void 0 : _b[this.languageCode]) || {};
+                    const categories = ((_d = (_c = this.node) === null || _c === void 0 ? void 0 : _c.router) === null || _d === void 0 ? void 0 : _d.categories) || [];
+                    categories.forEach((category) => {
+                        const categoryUuid = category.uuid;
+                        const nextLocalization = localizationData[categoryUuid];
+                        if (nextLocalization) {
+                            this.updateLocalization(this.languageCode, categoryUuid, nextLocalization);
+                        }
+                        else if (languageLocalization[categoryUuid]) {
+                            // Remove existing localization when the translation was cleared
+                            this.updateLocalization(this.languageCode, categoryUuid, {});
+                        }
+                    });
+                    // Close the dialog
+                    this.fireCustomEvent(CustomEventType.NodeEditCancelled, {});
+                    return;
+                }
+            }
+        }
         // Determine whether to use node or action saving based on context
         // If we have a node with a router, always use node saving (even if action is set)
         // because router configuration is handled at the node level
         if (this.node && this.node.router) {
             // Node editing mode with router - use formDataToNode
             const updatedNode = this.formDataToNode(processedFormData);
+            // Generate UI config if the node config provides a toUIConfig function
+            const nodeConfig = this.getNodeConfig();
+            const uiConfig = (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.toUIConfig)
+                ? nodeConfig.toUIConfig(processedFormData)
+                : undefined;
             this.fireCustomEvent(CustomEventType.NodeSaved, {
-                node: updatedNode
+                node: updatedNode,
+                uiConfig
             });
         }
         else if (this.action) {
@@ -476,11 +638,23 @@ export class NodeEditor extends RapidElement {
         else if (this.node) {
             // Node editing mode without router
             const updatedNode = this.formDataToNode(processedFormData);
+            // Generate UI config if the node config provides a toUIConfig function
+            const nodeConfig = this.getNodeConfig();
+            const uiConfig = (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.toUIConfig)
+                ? nodeConfig.toUIConfig(processedFormData)
+                : undefined;
             this.fireCustomEvent(CustomEventType.NodeSaved, {
-                node: updatedNode
+                node: updatedNode,
+                uiConfig
             });
         }
     }
+    updateLocalization(languageCode, actionUuid, localizationData) {
+        // Use the store method to properly update localization with immer
+        zustand
+            .getState()
+            .updateLocalization(languageCode, actionUuid, localizationData);
+    }
     processFormDataForSave() {
         const processed = { ...this.formData };
         // Convert key-value arrays to Records
@@ -532,8 +706,9 @@ export class NodeEditor extends RapidElement {
                                 'There was an error creating' + ' "' + selected.name + '"';
                         }
                     }
-                    // Check required fields
-                    if (fieldConfig.required &&
+                    // Check required fields (skip in localization mode since all fields are optional)
+                    if (!this.isTranslating &&
+                        fieldConfig.required &&
                         (!value || (Array.isArray(value) && value.length === 0))) {
                         errors[fieldName] = `${fieldConfig.label || fieldName} is required.`;
                     }
@@ -642,8 +817,14 @@ export class NodeEditor extends RapidElement {
         if (!this.node)
             throw new Error('No node to update');
         let updatedNode = { ...this.node };
+        // Check if node config has fromFormData - if so, it handles the entire transformation
+        const nodeConfig = this.getNodeConfig();
+        const nodeHasFromFormData = (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.fromFormData) !== undefined;
         // Handle actions using action config transformations if available
-        if (this.node.actions && this.node.actions.length > 0) {
+        // Skip this if the node has its own fromFormData (which handles actions itself)
+        if (!nodeHasFromFormData &&
+            this.node.actions &&
+            this.node.actions.length > 0) {
             updatedNode.actions = this.node.actions.map((action) => {
                 // If we're editing a specific action, only transform that one
                 if (this.action && action.uuid === this.action.uuid) {
@@ -664,53 +845,83 @@ export class NodeEditor extends RapidElement {
             });
         }
         // Handle router configuration using node config
-        if (this.node.router) {
-            const nodeConfig = this.getNodeConfig();
-            if (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.fromFormData) {
-                // Use node-specific form data transformation
-                updatedNode = nodeConfig.fromFormData(formData, updatedNode);
+        if (nodeHasFromFormData) {
+            // Use node-specific form data transformation
+            // When a node has fromFormData, it's responsible for creating the entire
+            // node structure including actions and router (regardless of whether router exists yet)
+            updatedNode = nodeConfig.fromFormData(formData, updatedNode);
+        }
+        else if (this.node.router) {
+            // Default router handling when no nodeConfig.fromFormData
+            updatedNode.router = { ...this.node.router };
+            // Apply form data to router fields if they exist
+            if (formData.result_name !== undefined) {
+                updatedNode.router.result_name = formData.result_name;
             }
-            else {
-                // Default router handling
-                updatedNode.router = { ...this.node.router };
-                // Apply form data to router fields if they exist
-                if (formData.result_name !== undefined) {
-                    updatedNode.router.result_name = formData.result_name;
-                }
-                // Handle preconfigured rules from node config
-                if ((_a = nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.router) === null || _a === void 0 ? void 0 : _a.rules) {
-                    // Build a complete new set of categories and exits based on node config
-                    const existingCategories = updatedNode.router.categories || [];
-                    const existingExits = updatedNode.exits || [];
-                    const newCategories = [];
-                    const newExits = [];
-                    // Group rules by category name to handle multiple rules pointing to the same category
-                    const categoryNameToRules = new Map();
-                    nodeConfig.router.rules.forEach((rule) => {
-                        if (!categoryNameToRules.has(rule.categoryName)) {
-                            categoryNameToRules.set(rule.categoryName, []);
+            // Handle preconfigured rules from node config
+            if ((_a = nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.router) === null || _a === void 0 ? void 0 : _a.rules) {
+                // Build a complete new set of categories and exits based on node config
+                const existingCategories = updatedNode.router.categories || [];
+                const existingExits = updatedNode.exits || [];
+                const newCategories = [];
+                const newExits = [];
+                // Group rules by category name to handle multiple rules pointing to the same category
+                const categoryNameToRules = new Map();
+                nodeConfig.router.rules.forEach((rule) => {
+                    if (!categoryNameToRules.has(rule.categoryName)) {
+                        categoryNameToRules.set(rule.categoryName, []);
+                    }
+                    categoryNameToRules.get(rule.categoryName).push(rule);
+                });
+                // Create categories for all unique category names
+                categoryNameToRules.forEach((rules, categoryName) => {
+                    // Check if category already exists to preserve its UUID and exit_uuid
+                    const existingCategory = existingCategories.find((cat) => cat.name === categoryName);
+                    if (existingCategory) {
+                        // Preserve existing category and its associated exit
+                        newCategories.push(existingCategory);
+                        const associatedExit = existingExits.find((exit) => exit.uuid === existingCategory.exit_uuid);
+                        if (associatedExit) {
+                            newExits.push(associatedExit);
                         }
-                        categoryNameToRules.get(rule.categoryName).push(rule);
-                    });
-                    // Create categories for all unique category names
-                    categoryNameToRules.forEach((rules, categoryName) => {
-                        // Check if category already exists to preserve its UUID and exit_uuid
-                        const existingCategory = existingCategories.find((cat) => cat.name === categoryName);
-                        if (existingCategory) {
-                            // Preserve existing category and its associated exit
-                            newCategories.push(existingCategory);
-                            const associatedExit = existingExits.find((exit) => exit.uuid === existingCategory.exit_uuid);
+                    }
+                    else {
+                        // Create new category and exit
+                        const categoryUuid = generateUUID();
+                        const exitUuid = generateUUID();
+                        newCategories.push({
+                            uuid: categoryUuid,
+                            name: categoryName,
+                            exit_uuid: exitUuid
+                        });
+                        newExits.push({
+                            uuid: exitUuid,
+                            destination_uuid: null
+                        });
+                    }
+                });
+                // Add default category if specified
+                if (nodeConfig.router.defaultCategory) {
+                    // Check if default category already exists in our new list
+                    const existingDefault = newCategories.find((cat) => cat.name === nodeConfig.router.defaultCategory);
+                    if (!existingDefault) {
+                        // Check if it exists in the original categories
+                        const originalDefault = existingCategories.find((cat) => cat.name === nodeConfig.router.defaultCategory);
+                        if (originalDefault) {
+                            // Preserve existing default category and its exit
+                            newCategories.push(originalDefault);
+                            const associatedExit = existingExits.find((exit) => exit.uuid === originalDefault.exit_uuid);
                             if (associatedExit) {
                                 newExits.push(associatedExit);
                             }
                         }
                         else {
-                            // Create new category and exit
+                            // Create new default category and exit
                             const categoryUuid = generateUUID();
                             const exitUuid = generateUUID();
                             newCategories.push({
                                 uuid: categoryUuid,
-                                name: categoryName,
+                                name: nodeConfig.router.defaultCategory,
                                 exit_uuid: exitUuid
                             });
                             newExits.push({
@@ -718,42 +929,11 @@ export class NodeEditor extends RapidElement {
                                 destination_uuid: null
                             });
                         }
-                    });
-                    // Add default category if specified
-                    if (nodeConfig.router.defaultCategory) {
-                        // Check if default category already exists in our new list
-                        const existingDefault = newCategories.find((cat) => cat.name === nodeConfig.router.defaultCategory);
-                        if (!existingDefault) {
-                            // Check if it exists in the original categories
-                            const originalDefault = existingCategories.find((cat) => cat.name === nodeConfig.router.defaultCategory);
-                            if (originalDefault) {
-                                // Preserve existing default category and its exit
-                                newCategories.push(originalDefault);
-                                const associatedExit = existingExits.find((exit) => exit.uuid === originalDefault.exit_uuid);
-                                if (associatedExit) {
-                                    newExits.push(associatedExit);
-                                }
-                            }
-                            else {
-                                // Create new default category and exit
-                                const categoryUuid = generateUUID();
-                                const exitUuid = generateUUID();
-                                newCategories.push({
-                                    uuid: categoryUuid,
-                                    name: nodeConfig.router.defaultCategory,
-                                    exit_uuid: exitUuid
-                                });
-                                newExits.push({
-                                    uuid: exitUuid,
-                                    destination_uuid: null
-                                });
-                            }
-                        }
                     }
-                    // Replace the entire categories and exits lists with our complete new sets
-                    updatedNode.router.categories = newCategories;
-                    updatedNode.exits = newExits;
                 }
+                // Replace the entire categories and exits lists with our complete new sets
+                updatedNode.router.categories = newCategories;
+                updatedNode.exits = newExits;
             }
         }
         else {
@@ -862,36 +1042,144 @@ export class NodeEditor extends RapidElement {
             }
         });
     }
-    renderNewField(fieldName, config, value) {
+    /**
+     * Helper method to check if a field is visible based on its conditions
+     */
+    isFieldVisible(fieldName, config) {
         var _a;
-        // Check visibility condition
         if ((_a = config.conditions) === null || _a === void 0 ? void 0 : _a.visible) {
             try {
-                const isVisible = config.conditions.visible(this.formData);
-                if (!isVisible) {
-                    return html ``;
-                }
+                return config.conditions.visible(this.formData);
             }
             catch (error) {
                 console.error(`Error checking visibility for ${fieldName}:`, error);
                 // If there's an error, show the field by default
+                return true;
             }
         }
+        return true;
+    }
+    renderNewField(fieldName, config, value) {
+        // Check visibility condition
+        if (!this.isFieldVisible(fieldName, config)) {
+            return html ``;
+        }
         const errors = this.errors[fieldName] ? [this.errors[fieldName]] : [];
         // Build container style with maxWidth if specified
         const containerStyle = config.maxWidth
             ? `max-width: ${config.maxWidth};`
             : '';
+        // Render original value if in localization mode and action has the field
+        const originalValueDisplay = this.isTranslating && this.action && fieldName in this.action
+            ? this.renderOriginalValue(fieldName, this.action[fieldName])
+            : html ``;
         const fieldContent = this.renderFieldContent(fieldName, config, value, errors);
+        const content = html ` ${originalValueDisplay} ${fieldContent} `;
         // Wrap in container with style if maxWidth is specified
         if (containerStyle) {
-            return html `<div style="${containerStyle}">${fieldContent}</div>`;
+            return html `<div style="${containerStyle}">${content}</div>`;
+        }
+        return content;
+    }
+    renderOptionalField(fieldName, config, value) {
+        // If the field has a value or has been revealed, show it
+        const hasValue = value && value.toString().trim() !== '';
+        const isRevealed = this.revealedOptionalFields.has(fieldName);
+        if (hasValue || isRevealed) {
+            // Render the field normally
+            return this.renderNewField(fieldName, config, value);
+        }
+        // Show the "Save as..." link
+        return html `
+      <div class="optional-field-link">
+        <a
+          href="#"
+          @click="${(e) => {
+            e.preventDefault();
+            this.revealOptionalField(fieldName);
+        }}"
+        >
+          ${config.optionalLink}
+        </a>
+      </div>
+    `;
+    }
+    revealOptionalField(fieldName) {
+        this.revealedOptionalFields = new Set([
+            ...this.revealedOptionalFields,
+            fieldName
+        ]);
+    }
+    renderCategoryLocalizationTable() {
+        const categories = this.formData.categories || {};
+        const categoryEntries = Object.entries(categories);
+        if (categoryEntries.length === 0) {
+            return html `<div>No categories to localize</div>`;
+        }
+        const languageName = getStore().getLanguageName(this.languageCode);
+        return html `
+      <div class="category-localization-table">
+        ${categoryEntries.map(([categoryUuid, categoryData]) => html `
+            <div class="category-localization-row">
+              <div class="original-name">${categoryData.originalName}</div>
+              <div class="localized-name">
+                <temba-textinput
+                  name="${categoryUuid}"
+                  placeholder="${languageName} Translation"
+                  value="${categoryData.localizedName || ''}"
+                  @change=${(e) => this.handleCategoryLocalizationChange(categoryUuid, e.target.value)}
+                ></temba-textinput>
+              </div>
+            </div>
+          `)}
+      </div>
+    `;
+    }
+    handleCategoryLocalizationChange(categoryUuid, value) {
+        // Update formData with new localized value
+        if (!this.formData.categories) {
+            this.formData.categories = {};
         }
-        return fieldContent;
+        if (!this.formData.categories[categoryUuid]) {
+            this.formData.categories[categoryUuid] = {};
+        }
+        this.formData.categories[categoryUuid].localizedName = value;
+        // Trigger a re-render
+        this.requestUpdate();
+    }
+    renderOriginalValue(fieldName, originalValue) {
+        // Format the original value for display
+        let displayValue = '';
+        if (Array.isArray(originalValue)) {
+            if (originalValue.length === 0) {
+                return html ``; // Don't show anything for empty arrays
+            }
+            // For arrays, join with commas
+            displayValue = originalValue.join(', ');
+        }
+        else if (typeof originalValue === 'string') {
+            displayValue = originalValue;
+        }
+        else if (originalValue) {
+            displayValue = String(originalValue);
+        }
+        // Don't show if empty
+        if (!displayValue || displayValue.trim() === '') {
+            return html ``;
+        }
+        return html `
+      <div class="original-value">
+        <div class="original-value-content">${displayValue}</div>
+      </div>
+    `;
     }
     renderFieldContent(fieldName, config, value, errors) {
+        // In localization mode, make all fields optional (not required)
+        const fieldConfig = this.isTranslating
+            ? { ...config, required: false }
+            : config;
         // Use FieldRenderer for consistent field rendering
-        return FieldRenderer.renderField(fieldName, config, value, {
+        return FieldRenderer.renderField(fieldName, fieldConfig, value, {
             errors,
             onChange: (e) => {
                 // Handle different change event types
@@ -977,7 +1265,12 @@ export class NodeEditor extends RapidElement {
             case 'field':
                 if (config.form[item.field] && !renderedFields.has(item.field)) {
                     renderedFields.add(item.field);
-                    return this.renderNewField(item.field, config.form[item.field], this.formData[item.field]);
+                    const fieldConfig = config.form[item.field];
+                    // Handle optional link fields
+                    if (fieldConfig.optionalLink) {
+                        return this.renderOptionalField(item.field, fieldConfig, this.formData[item.field]);
+                    }
+                    return this.renderNewField(item.field, fieldConfig, this.formData[item.field]);
                 }
                 return html ``;
             case 'row':
@@ -989,24 +1282,68 @@ export class NodeEditor extends RapidElement {
         }
     }
     renderRow(rowConfig, config, renderedFields) {
-        const { items, gap = '1rem' } = rowConfig;
+        const { items, gap = '1rem', label, helpText } = rowConfig;
         // Collect all fields from this row for width calculations
         const fieldsInRow = this.collectFieldsFromItems(items);
         const validFields = fieldsInRow.filter((fieldName) => { var _a; return (_a = config.form) === null || _a === void 0 ? void 0 : _a[fieldName]; });
-        if (validFields.length === 0) {
+        // Filter for visible fields only to handle conditional visibility
+        const visibleFields = validFields.filter((fieldName) => {
+            const fieldConfig = config.form[fieldName];
+            return this.isFieldVisible(fieldName, fieldConfig);
+        });
+        if (visibleFields.length === 0) {
             return html ``;
         }
-        // Calculate grid template columns based on field maxWidth constraints
-        const columns = validFields.map((fieldName) => {
+        // Build a map of field flex styles
+        // Fields with maxWidth get flex: 0 0 {maxWidth} (fixed)
+        // Fields without maxWidth get flex: 1 1 0 (grow to fill space)
+        const fieldFlexStyles = new Map();
+        visibleFields.forEach((fieldName) => {
             const fieldConfig = config.form[fieldName];
-            return fieldConfig.maxWidth || '1fr';
+            if (fieldConfig.maxWidth) {
+                // Fixed width field: no grow, no shrink, basis = maxWidth
+                fieldFlexStyles.set(fieldName, `flex: 0 0 ${fieldConfig.maxWidth};`);
+            }
+            else {
+                // Flexible field: grow to fill remaining space
+                fieldFlexStyles.set(fieldName, `flex: 1 1 0;`);
+            }
         });
+        const rowContent = html `
+      <div class="form-row" style="display: flex; gap: ${gap};">
+        ${items.map((item) => {
+            // Get the field name from the item
+            const fieldName = typeof item === 'string'
+                ? item
+                : item.type === 'field'
+                    ? item.field
+                    : null;
+            // Get flex style for this field if it's a visible field
+            const flexStyle = fieldName && fieldFlexStyles.has(fieldName)
+                ? fieldFlexStyles.get(fieldName)
+                : '';
+            const itemContent = this.renderLayoutItem(item, config, renderedFields);
+            // Wrap in a div with flex style if we have a flex style
+            return flexStyle
+                ? html `<div style="${flexStyle}">${itemContent}</div>`
+                : itemContent;
+        })}
+      </div>
+    `;
+        // If no label or helpText, return just the row content
+        if (!label && !helpText) {
+            return rowContent;
+        }
+        // Otherwise, wrap with label on top, content, then helpText below (matching field pattern)
         return html `
-      <div
-        class="form-row"
-        style="display: grid; grid-template-columns: ${columns.join(' ')}; gap: ${gap};"
-      >
-        ${items.map((item) => this.renderLayoutItem(item, config, renderedFields))}
+      <div class="form-row-wrapper">
+        ${label ? html `<label class="form-row-label">${label}</label>` : ''}
+        ${rowContent}
+        ${helpText
+            ? html `<div class="form-row-help">
+              ${renderMarkdownInline(helpText)}
+            </div>`
+            : ''}
       </div>
     `;
     }
@@ -1186,6 +1523,12 @@ export class NodeEditor extends RapidElement {
         if (!config) {
             return html ` <div>No configuration available</div> `;
         }
+        // Special rendering for category localization
+        if (this.isTranslating &&
+            config.localizable === 'categories' &&
+            this.formData.categories) {
+            return this.renderCategoryLocalizationTable();
+        }
         // Use the new fields configuration system
         if (config.form) {
             // If layout is specified, use it
@@ -1230,6 +1573,10 @@ export class NodeEditor extends RapidElement {
         if (!(config === null || config === void 0 ? void 0 : config.gutter) || config.gutter.length === 0) {
             return html ``;
         }
+        // Don't show gutter when localizing categories
+        if (this.isTranslating && config.localizable === 'categories') {
+            return html ``;
+        }
         // Use the same layout rendering system for gutter fields
         const renderedFields = new Set();
         return html `
@@ -1299,17 +1646,25 @@ export class NodeEditor extends RapidElement {
         if (!this.isOpen) {
             return html ``;
         }
-        const headerColor = this.getHeaderColor();
+        const headerColor = this.isTranslating ? '#505050' : this.getHeaderColor();
+        const headerTextColor = this.isTranslating ? '#fff' : '#fff';
         const config = this.getConfig();
         const dialogSize = (config === null || config === void 0 ? void 0 : config.dialogSize) || 'medium'; // Default to 'large' if not specified
+        const languageName = this.isTranslating
+            ? getStore().getLanguageName(this.languageCode)
+            : '';
+        let header = (config === null || config === void 0 ? void 0 : config.name) || 'Edit';
+        if (this.isTranslating) {
+            header = languageName ? `${languageName} - ${header}` : header;
+        }
         return html `
       <temba-dialog
-        header="${(config === null || config === void 0 ? void 0 : config.name) || 'Edit'}"
+        header="${header}"
         .open="${this.isOpen}"
         @temba-button-clicked=${this.handleDialogButtonClick}
         primaryButtonName="Save"
         cancelButtonName="Cancel"
-        style="--header-bg: ${headerColor}"
+        style="--header-bg: ${headerColor}; --header-text: ${headerTextColor};"
         size="${dialogSize}"
       >
         <div class="node-editor-form">
@@ -1351,4 +1706,16 @@ __decorate([
 __decorate([
     state()
 ], NodeEditor.prototype, "groupHoverState", void 0);
+__decorate([
+    state()
+], NodeEditor.prototype, "revealedOptionalFields", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.languageCode)
+], NodeEditor.prototype, "languageCode", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.isTranslating)
+], NodeEditor.prototype, "isTranslating", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.flowDefinition)
+], NodeEditor.prototype, "flowDefinition", void 0);
 //# sourceMappingURL=NodeEditor.js.map