intelligent-system-design-language 0.3.21 → 0.3.23

package/out/cli/components/vue/vue-active-effect-sheet-generator.js

@@ -49,38 +49,38 @@ export function generateActiveEffectVueSheet(entry, id, destination) {
         }
         return Array.from(damageTypes).sort();
     }
-    const fileNode = expandToNode `
-    ${generateVueComponentScript(entry, id, destination)}
-    ${generateVueComponentTemplate(id)}
+    const fileNode = expandToNode `
+    ${generateVueComponentScript(entry, id, destination)}
+    ${generateVueComponentTemplate(id)}
     `.appendNewLineIfNotEmpty();
     fs.writeFileSync(generatedFilePath, toString(fileNode));
     function generateVueComponentScript(entry, id, destination) {
-        return expandToNode `
-        <script setup>
-        import { ref, inject, onMounted, computed } from 'vue';
-        
-        const document = inject('rawDocument');
-        const props = defineProps(['context']);
-        console.log("Vue AE context", props.context);
-        
-        // Colors
-        const primaryColor = ref('#1565c0');
-        const secondaryColor = ref('#4db6ac');
-        const tertiaryColor = ref('#ffb74d');
-
-        const drawer = ref(false);
-        const page = ref('details');
-        const tab = ref('description');
-        
-        // Available fields for each document type
-        const availableFields = ref({});
-        const selectedFields = ref({});
-        
-        // Create field name mapping for each document
-        const createFieldMapping = () => {
-            const mapping = {};
-            const damageTypes = [${collectDamageTypes(entry).map(type => `'${type}'`).join(', ')}];
-            
+        return expandToNode `
+        <script setup>
+        import { ref, inject, onMounted, computed } from 'vue';
+        
+        const document = inject('rawDocument');
+        const props = defineProps(['context']);
+        console.log("Vue AE context", props.context);
+        
+        // Colors
+        const primaryColor = ref('#1565c0');
+        const secondaryColor = ref('#4db6ac');
+        const tertiaryColor = ref('#ffb74d');
+
+        const drawer = ref(false);
+        const page = ref('details');
+        const tab = ref('description');
+        
+        // Available fields for each document type
+        const availableFields = ref({});
+        const selectedFields = ref({});
+        
+        // Create field name mapping for each document
+        const createFieldMapping = () => {
+            const mapping = {};
+            const damageTypes = [${collectDamageTypes(entry).map(type => `'${type}'`).join(', ')}];
+            
             ${joinToNode(documents, document => {
             const fields = getAllOfType(document.body, isProperty, false).filter(property => !isInitiativeProperty(property) &&
                 !isStatusProperty(property) &&
@@ -89,10 +89,10 @@ export function generateActiveEffectVueSheet(entry, id, destination) {
                 !isDocumentFields(property) &&
                 !isHtmlExp(property) &&
                 property.modifier !== "locked");
-            return expandToNode `
-                    mapping['${document.name}'] = {
-                        ${joinToNode(fields, field => `'${field.name.toLowerCase()}': '${field.name}'`, { separator: ',\n                        ' })}${fields.length > 0 ? ',' : ''}
-                        // Auto-generated damage type fields
+            return expandToNode `
+                    mapping['${document.name}'] = {
+                        ${joinToNode(fields, field => `'${field.name.toLowerCase()}': '${field.name}'`, { separator: ',\n                        ' })}${fields.length > 0 ? ',' : ''}
+                        // Auto-generated damage type fields
                         ${collectDamageTypes(entry).map((damageType) => {
                 const safeTypeName = damageType.toLowerCase().replace(/[^a-z0-9]/g, '');
                 return [
@@ -100,221 +100,221 @@ export function generateActiveEffectVueSheet(entry, id, destination) {
                     `'${safeTypeName}damageresistanceflat': '${damageType} Damage Resistance (Flat)'`,
                     `'${safeTypeName}damageresistancepercent': '${damageType} Damage Resistance (%)'`
                 ].join(',\n                        ');
-            }).join(',\n                        ')}
-                    };
+            }).join(',\n                        ')}
+                    };
                 `;
-        }, { appendNewLineIfNotEmpty: true })}
-            return mapping;
-        };
-        
-        // Helper method to get change value from the changes array
-        const getChangeValue = (key) => {
-            const change = props.context?.document?.changes?.find(x => x.key === key);
-            return change?.value || '';
-        };
-        
-        // Helper method to get numeric change value from the changes array
-        const getChangeNumberValue = (key) => {
-            const change = props.context?.document?.changes?.find(x => x.key === key);
-            if (!change?.value) return 0;
-            const num = Number(change.value);
-            return isNaN(num) ? 0 : num;
-        };
-        
-        // Helper method to get change type from the changes array
-        const getChangeMode = (key) => {
-            const change = props.context?.document?.changes?.find(x => x.key === key);
-            return change?.type || 'add';
-        };
-        
-        // Initialize selectedFields from existing changes
-        const initializeSelectedFields = () => {
-            if (!props.context?.document?.changes) return;
-            
-            const fieldMapping = createFieldMapping();
-            
-            console.log(fieldMapping, props.context.document.changes);
-            for (const change of props.context.document.changes) {
-                // Parse the key to extract document name and field name
-                // Format: "hero.system.availableskilllevels" or "hero.system.resourcefield.value"
-                const parts = change.key.split('.');
-                if (parts.length >= 3) {
-                    const documentName = parts[0];
-                    const fieldNameLower = parts[2];
-                    
-                    // Convert document name to proper case (e.g., "hero" -> "Hero")
-                    const docName = documentName.charAt(0).toUpperCase() + documentName.slice(1);
-                    
-                    // Look up the proper field name from our mapping
-                    const properFieldName = fieldMapping[docName]?.[fieldNameLower];
-                    console.log(properFieldName);
-                    
-                    if (properFieldName) {
-                        if (!selectedFields.value[docName]) {
-                            selectedFields.value[docName] = [];
-                        }
-                        
-                        if (!selectedFields.value[docName].includes(properFieldName)) {
-                            selectedFields.value[docName].push(properFieldName);
-                        }
-                    }
-                }
-            }
-        };
-        
-        // Generate a summary of current changes
-        const changesSummary = computed(() => {
-            if (!props.context?.document?.changes || props.context.document.changes.length === 0) {
-                return 'No changes configured';
-            }
-            
-            const changes = props.context.document.changes.filter(change => {
-                // Skip zero values for numbers
-                const numValue = Number(change.value);
-                return !((!isNaN(numValue) && numValue === 0) || change.value === '' || change.value === null);
-            });
-            
-            if (changes.length === 0) {
-                return 'No changes configured';
-            }
-            
-            // Group changes by document type
-            const groupedChanges = {};
-            changes.forEach(change => {
-                const parts = change.key.split('.');
-                if (parts.length >= 3) {
-                    const documentName = parts[0].charAt(0).toUpperCase() + parts[0].slice(1); // Capitalize
-                    const fieldPath = parts.slice(2).join('.');
-                    
-                    if (!groupedChanges[documentName]) {
-                        groupedChanges[documentName] = [];
-                    }
-                    
-                    console.log(change.key, fieldPath, parts);
-                    
-                    // Convert field names to human readable
-                    let step1 = fieldPath.replaceAll('.', ' ');
-                    let step2 = step1.replace(/([a-z])([A-Z])/g, '$1 $2');
-                    let step3 = step2.replace(/\b\w/g, l => l.toUpperCase());
-                    //console.log("Debug steps:", fieldPath, "->", step1, "->", step2, "->", step3);
-                    
-                    const humanFieldName = step3;
-                    
-                    // Format the mode symbol
-                    const modeSymbol = change.type === 'multiply' ? ' × ' :
-                                     change.type === 'add' ? ' + ' :
-                                     change.type === 'downgrade' ? ' ↓ ' :
-                                     change.type === 'upgrade' ? ' ↑ ' :
-                                     change.type === 'custom' ? ' (Once) + ' : ' ';
-                    
-                    //console.log("Human Field Name:", humanFieldName, "Mode Symbol:", modeSymbol);
-                    groupedChanges[documentName].push(humanFieldName + modeSymbol + change.value);
-                }
-            });
-            
-            // Format as "Document: change1, change2"
-            const documentSummaries = Object.entries(groupedChanges).map(([docName, changes]) => {
-                return docName + ': ' + changes.join(', ');
-            });
-            
-            return documentSummaries.join(' | ');
-        });
-        
-        // Initialize on component mount
-        onMounted(() => {
-            initializeSelectedFields();
-        });
-        </script>
+        }, { appendNewLineIfNotEmpty: true })}
+            return mapping;
+        };
+        
+        // Helper method to get change value from the changes array
+        const getChangeValue = (key) => {
+            const change = props.context?.document?.changes?.find(x => x.key === key);
+            return change?.value || '';
+        };
+        
+        // Helper method to get numeric change value from the changes array
+        const getChangeNumberValue = (key) => {
+            const change = props.context?.document?.changes?.find(x => x.key === key);
+            if (!change?.value) return 0;
+            const num = Number(change.value);
+            return isNaN(num) ? 0 : num;
+        };
+        
+        // Helper method to get change type from the changes array
+        const getChangeMode = (key) => {
+            const change = props.context?.document?.changes?.find(x => x.key === key);
+            return change?.type || 'add';
+        };
+        
+        // Initialize selectedFields from existing changes
+        const initializeSelectedFields = () => {
+            if (!props.context?.document?.changes) return;
+            
+            const fieldMapping = createFieldMapping();
+            
+            console.log(fieldMapping, props.context.document.changes);
+            for (const change of props.context.document.changes) {
+                // Parse the key to extract document name and field name
+                // Format: "hero.system.availableskilllevels" or "hero.system.resourcefield.value"
+                const parts = change.key.split('.');
+                if (parts.length >= 3) {
+                    const documentName = parts[0];
+                    const fieldNameLower = parts[2];
+                    
+                    // Convert document name to proper case (e.g., "hero" -> "Hero")
+                    const docName = documentName.charAt(0).toUpperCase() + documentName.slice(1);
+                    
+                    // Look up the proper field name from our mapping
+                    const properFieldName = fieldMapping[docName]?.[fieldNameLower];
+                    console.log(properFieldName);
+                    
+                    if (properFieldName) {
+                        if (!selectedFields.value[docName]) {
+                            selectedFields.value[docName] = [];
+                        }
+                        
+                        if (!selectedFields.value[docName].includes(properFieldName)) {
+                            selectedFields.value[docName].push(properFieldName);
+                        }
+                    }
+                }
+            }
+        };
+        
+        // Generate a summary of current changes
+        const changesSummary = computed(() => {
+            if (!props.context?.document?.changes || props.context.document.changes.length === 0) {
+                return 'No changes configured';
+            }
+            
+            const changes = props.context.document.changes.filter(change => {
+                // Skip zero values for numbers
+                const numValue = Number(change.value);
+                return !((!isNaN(numValue) && numValue === 0) || change.value === '' || change.value === null);
+            });
+            
+            if (changes.length === 0) {
+                return 'No changes configured';
+            }
+            
+            // Group changes by document type
+            const groupedChanges = {};
+            changes.forEach(change => {
+                const parts = change.key.split('.');
+                if (parts.length >= 3) {
+                    const documentName = parts[0].charAt(0).toUpperCase() + parts[0].slice(1); // Capitalize
+                    const fieldPath = parts.slice(2).join('.');
+                    
+                    if (!groupedChanges[documentName]) {
+                        groupedChanges[documentName] = [];
+                    }
+                    
+                    console.log(change.key, fieldPath, parts);
+                    
+                    // Convert field names to human readable
+                    let step1 = fieldPath.replaceAll('.', ' ');
+                    let step2 = step1.replace(/([a-z])([A-Z])/g, '$1 $2');
+                    let step3 = step2.replace(/\b\w/g, l => l.toUpperCase());
+                    //console.log("Debug steps:", fieldPath, "->", step1, "->", step2, "->", step3);
+                    
+                    const humanFieldName = step3;
+                    
+                    // Format the mode symbol
+                    const modeSymbol = change.type === 'multiply' ? ' × ' :
+                                     change.type === 'add' ? ' + ' :
+                                     change.type === 'downgrade' ? ' ↓ ' :
+                                     change.type === 'upgrade' ? ' ↑ ' :
+                                     change.type === 'custom' ? ' (Once) + ' : ' ';
+                    
+                    //console.log("Human Field Name:", humanFieldName, "Mode Symbol:", modeSymbol);
+                    groupedChanges[documentName].push(humanFieldName + modeSymbol + change.value);
+                }
+            });
+            
+            // Format as "Document: change1, change2"
+            const documentSummaries = Object.entries(groupedChanges).map(([docName, changes]) => {
+                return docName + ': ' + changes.join(', ');
+            });
+            
+            return documentSummaries.join(' | ');
+        });
+        
+        // Initialize on component mount
+        onMounted(() => {
+            initializeSelectedFields();
+        });
+        </script>
     `;
     }
     function generateVueComponentTemplate(id) {
-        return expandToNode `
-        <template>
-            <v-app>
-                <!-- App Bar -->
-                <v-app-bar :color="primaryColor" density="comfortable">
-                    <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
-                    <v-text-field name="name" v-model="context.document.name" variant="outlined" class="document-name" density="compact"></v-text-field>
-                </v-app-bar>
-                
-                <!-- Navigation Drawer -->
-                <v-navigation-drawer v-model="drawer" temporary style="background-color: #dddddd">
-                    <v-img :src="context.document.img" style="background-color: lightgray" data-edit='img' data-action='onEditImage'>
-                        <template #error>
-                            <v-img src="/systems/${id}/img/missing-character.png" data-edit='img' data-action='onEditImage'></v-img>
-                        </template>
-                    </v-img>
-                    <v-tabs v-model="page" direction="vertical">
-                        <v-tab value="details" prepend-icon="fa-solid fa-book">Details</v-tab>
-<!--                        <v-tab value="duration" prepend-icon="fa-solid fa-clock">Duration</v-tab>-->
-                        ${joinToNode(documents, generateNavListItem, { appendNewLineIfNotEmpty: true })}
-                    </v-tabs>
-                </v-navigation-drawer>
-                
-                <!-- Main Content -->
-                <v-main class="d-flex">
-                    <v-container class="topography" fluid>
-                        <v-tabs-window v-model="page">
-                            <v-tabs-window-item value="details" data-tab="details">
-                                <v-col cols="12" style="padding: 0">
-                                    <v-switch
-                                        :model-value="!context.document.disabled"
-                                        @update:model-value="context.document.disabled = !$event"
-                                        name="enabled"
-                                        :color="primaryColor"
-                                        label="Enabled">
-                                    </v-switch>
-                                    <v-switch
-                                        v-if="context.isItemEffect"
-                                        :model-value="context.document.transfer"
-                                        name="transfer"
-                                        :color="secondaryColor"
-                                        label="Active on parent Actor">
-                                    </v-switch>
-                                    <v-text-field
-                                        v-if="context.originLink"
-                                        :model-value="context.originLink"
-                                        label="Origin"
-                                        :disabled="true"
-                                    >
-                                    </v-text-field>
-                                    <v-card class="mt-3 mb-3" variant="outlined">
-                                        <v-card-title class="text-body-2">
-                                            <v-icon icon="fa-solid fa-magic" class="mr-2"></v-icon>
-                                            Current Changes
-                                        </v-card-title>
-                                        <v-card-text class="pt-2">
-                                            <div class="text-body-2 text-medium-emphasis">
-                                                {{ changesSummary }}
-                                            </div>
-                                        </v-card-text>
-                                    </v-card>
-                                    <i-prosemirror
-                                        label="Description"
-                                        icon="fa-solid fa-file-lines"
-                                        :field="context.editors['description']"
-                                        class="mt-2"
-                                        >
-                                    </i-prosemirror>
-                                </v-col>
-                            </v-tabs-window-item>
-                            <v-tabs-window-item value="duration" data-tab="duration">
-                                <v-col cols="12" style="padding: 0">
-                                    <v-label>Duration Settings</v-label>
-                                    <!-- Add duration content here -->
-                                </v-col>
-                            </v-tabs-window-item>
-                            ${joinToNode(documents, generateDocumentPage, { appendNewLineIfNotEmpty: true })}
-                        </v-tabs-window>
-                    </v-container>
-                </v-main>
-            </v-app>
-        </template>
+        return expandToNode `
+        <template>
+            <v-app>
+                <!-- App Bar -->
+                <v-app-bar :color="primaryColor" density="comfortable">
+                    <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
+                    <v-text-field name="name" v-model="context.document.name" variant="outlined" class="document-name" density="compact"></v-text-field>
+                </v-app-bar>
+                
+                <!-- Navigation Drawer -->
+                <v-navigation-drawer v-model="drawer" temporary style="background-color: #dddddd">
+                    <v-img :src="context.document.img" style="background-color: lightgray" data-edit='img' data-action='onEditImage'>
+                        <template #error>
+                            <v-img src="/systems/${id}/img/missing-character.png" data-edit='img' data-action='onEditImage'></v-img>
+                        </template>
+                    </v-img>
+                    <v-tabs v-model="page" direction="vertical">
+                        <v-tab value="details" prepend-icon="fa-solid fa-book">Details</v-tab>
+<!--                        <v-tab value="duration" prepend-icon="fa-solid fa-clock">Duration</v-tab>-->
+                        ${joinToNode(documents, generateNavListItem, { appendNewLineIfNotEmpty: true })}
+                    </v-tabs>
+                </v-navigation-drawer>
+                
+                <!-- Main Content -->
+                <v-main class="d-flex">
+                    <v-container class="topography" fluid>
+                        <v-tabs-window v-model="page">
+                            <v-tabs-window-item value="details" data-tab="details">
+                                <v-col cols="12" style="padding: 0">
+                                    <v-switch
+                                        :model-value="!context.document.disabled"
+                                        @update:model-value="context.document.disabled = !$event"
+                                        name="enabled"
+                                        :color="primaryColor"
+                                        label="Enabled">
+                                    </v-switch>
+                                    <v-switch
+                                        v-if="context.isItemEffect"
+                                        :model-value="context.document.transfer"
+                                        name="transfer"
+                                        :color="secondaryColor"
+                                        label="Active on parent Actor">
+                                    </v-switch>
+                                    <v-text-field
+                                        v-if="context.originLink"
+                                        :model-value="context.originLink"
+                                        label="Origin"
+                                        :disabled="true"
+                                    >
+                                    </v-text-field>
+                                    <v-card class="mt-3 mb-3" variant="outlined">
+                                        <v-card-title class="text-body-2">
+                                            <v-icon icon="fa-solid fa-magic" class="mr-2"></v-icon>
+                                            Current Changes
+                                        </v-card-title>
+                                        <v-card-text class="pt-2">
+                                            <div class="text-body-2 text-medium-emphasis">
+                                                {{ changesSummary }}
+                                            </div>
+                                        </v-card-text>
+                                    </v-card>
+                                    <i-prosemirror
+                                        label="Description"
+                                        icon="fa-solid fa-file-lines"
+                                        :field="context.editors['description']"
+                                        class="mt-2"
+                                        >
+                                    </i-prosemirror>
+                                </v-col>
+                            </v-tabs-window-item>
+                            <v-tabs-window-item value="duration" data-tab="duration">
+                                <v-col cols="12" style="padding: 0">
+                                    <v-label>Duration Settings</v-label>
+                                    <!-- Add duration content here -->
+                                </v-col>
+                            </v-tabs-window-item>
+                            ${joinToNode(documents, generateDocumentPage, { appendNewLineIfNotEmpty: true })}
+                        </v-tabs-window>
+                    </v-container>
+                </v-main>
+            </v-app>
+        </template>
         `;
     }
     function generateNavListItem(document) {
-        return expandToNode `
-            <v-tab value="${document.name}" prepend-icon="fa-solid fa-pen-to-square">${document.name} Changes</v-tab>
+        return expandToNode `
+            <v-tab value="${document.name}" prepend-icon="fa-solid fa-pen-to-square">${document.name} Changes</v-tab>
         `;
     }
     function generateDocumentPage(document) {
@@ -333,44 +333,44 @@ export function generateActiveEffectVueSheet(entry, id, destination) {
                 `{title: '${damageType} Damage Resistance (%)', value: '${damageType} Damage Resistance (%)'}`
             ];
         }).flat().join(', ');
-        return expandToNode `
-            <v-tabs-window-item value="${document.name}" data-tab="${document.name}">
-                 <v-col cols="12" style="padding: 0">
-                    <v-card class="mb-4">
-                        <v-card-title>Available Fields</v-card-title>
-                        <v-card-text>
-                            <v-autocomplete
-                                label="Add Field to Change"
-                                :items="[${joinToNode(fields, (property) => `{title: '${property.name}', value: '${property.name}'}`, { separator: ', ' })}${fields.length > 0 && damageTypeFields ? ', ' : ''}${damageTypeFields}]"
-                                item-title="title"
-                                item-value="value"
-                                v-model="selectedFields['${document.name}']"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact"
-                                multiple
-                                chips
-                                closable-chips>
-                                <template #chip="{ props, item }">
-                                    <v-chip v-bind="props" :text="item.title" closable></v-chip>
-                                </template>
-                            </v-autocomplete>
-                        </v-card-text>
-                    </v-card>
-                    
-                    <div v-for="fieldName in selectedFields['${document.name}'] || []" :key="fieldName">
-                        ${joinToNode(fields, (property) => generateConditionalField(document, property), { appendNewLineIfNotEmpty: true })}
-                        ${generateDamageTypeConditionalFields(document, damageTypes)}
-                    </div>
-                </v-col>
-            </v-tabs-window-item>
+        return expandToNode `
+            <v-tabs-window-item value="${document.name}" data-tab="${document.name}">
+                 <v-col cols="12" style="padding: 0">
+                    <v-card class="mb-4">
+                        <v-card-title>Available Fields</v-card-title>
+                        <v-card-text>
+                            <v-autocomplete
+                                label="Add Field to Change"
+                                :items="[${joinToNode(fields, (property) => `{title: '${property.name}', value: '${property.name}'}`, { separator: ', ' })}${fields.length > 0 && damageTypeFields ? ', ' : ''}${damageTypeFields}]"
+                                item-title="title"
+                                item-value="value"
+                                v-model="selectedFields['${document.name}']"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact"
+                                multiple
+                                chips
+                                closable-chips>
+                                <template #chip="{ props, item }">
+                                    <v-chip v-bind="props" :text="item.title" closable></v-chip>
+                                </template>
+                            </v-autocomplete>
+                        </v-card-text>
+                    </v-card>
+                    
+                    <div v-for="fieldName in selectedFields['${document.name}'] || []" :key="fieldName">
+                        ${joinToNode(fields, (property) => generateConditionalField(document, property), { appendNewLineIfNotEmpty: true })}
+                        ${generateDamageTypeConditionalFields(document, damageTypes)}
+                    </div>
+                </v-col>
+            </v-tabs-window-item>
         `;
     }
     function generateConditionalField(document, property) {
-        return expandToNode `
-            <div v-if="fieldName === '${property.name}'">
-                ${generateField(document, property)}
-            </div>
+        return expandToNode `
+            <div v-if="fieldName === '${property.name}'">
+                ${generateField(document, property)}
+            </div>
         `;
     }
     function generateDamageTypeConditionalFields(document, damageTypes) {
@@ -379,137 +379,137 @@ export function generateActiveEffectVueSheet(entry, id, destination) {
         }
         return joinToNode(damageTypes, damageType => {
             const safeTypeName = damageType.toLowerCase().replace(/[^a-z0-9]/g, '');
-            return expandToNode `
-                <!-- ${damageType} Bonus Damage -->
-                <div v-if="fieldName === '${damageType} Bonus Damage'">
-                    <v-card class="mb-4">
-                        <v-card-title>
-                            ${damageType} Bonus Damage
-                            <v-btn 
-                                icon="fa-solid fa-xmark" 
-                                size="small" 
-                                variant="text" 
-                                @click="selectedFields['${document.name}'] = selectedFields['${document.name}'].filter(f => f !== '${damageType} Bonus Damage')"
-                                style="float: right;">
-                            </v-btn>
-                        </v-card-title>
-                        <v-card-text>
-                            <v-row>
-                                <v-select
-                                    name="${document.name.toLowerCase()}.system.${safeTypeName}bonusdamage-type"
-                                    :model-value="getChangeMode('${document.name.toLowerCase()}.system.${safeTypeName}bonusdamage')"
-                                    label="Mode"
-                                    :color="primaryColor"
-                                    :items="context.basicNumberModes"
-                                    item-title="label"
-                                    item-value="value"
-                                    variant="outlined"
-                                    density="compact">
-                                </v-select>
-                                <v-number-input
-                                    name="${document.name.toLowerCase()}.system.${safeTypeName}bonusdamage"
-                                    :model-value="getChangeNumberValue('${document.name.toLowerCase()}.system.${safeTypeName}bonusdamage')"
-                                    label="Bonus Damage"
-                                    :color="primaryColor"
-                                    variant="outlined"
-                                    density="compact">
-                                </v-number-input>
-                            </v-row>
-                        </v-card-text>
-                    </v-card>
-                </div>
-
-                <!-- ${damageType} Damage Resistance (Flat) -->
-                <div v-if="fieldName === '${damageType} Damage Resistance (Flat)'">
-                    <v-card class="mb-4">
-                        <v-card-title>
-                            ${damageType} Damage Resistance (Flat)
-                            <v-btn 
-                                icon="fa-solid fa-xmark" 
-                                size="small" 
-                                variant="text" 
-                                @click="selectedFields['${document.name}'] = selectedFields['${document.name}'].filter(f => f !== '${damageType} Damage Resistance (Flat)')"
-                                style="float: right;">
-                            </v-btn>
-                        </v-card-title>
-                        <v-card-text>
-                            <v-row>
-                                <v-select
-                                    name="${document.name.toLowerCase()}.system.${safeTypeName}damageresistanceflat-type"
-                                    :model-value="getChangeMode('${document.name.toLowerCase()}.system.${safeTypeName}damageresistanceflat')"
-                                    label="Mode"
-                                    :color="primaryColor"
-                                    :items="context.basicNumberModes"
-                                    item-title="label"
-                                    item-value="value"
-                                    variant="outlined"
-                                    density="compact">
-                                </v-select>
-                                <v-number-input
-                                    name="${document.name.toLowerCase()}.system.${safeTypeName}damageresistanceflat"
-                                    :model-value="getChangeNumberValue('${document.name.toLowerCase()}.system.${safeTypeName}damageresistanceflat')"
-                                    label="Flat Resistance"
-                                    :color="primaryColor"
-                                    variant="outlined"
-                                    density="compact">
-                                </v-number-input>
-                            </v-row>
-                        </v-card-text>
-                    </v-card>
-                </div>
-
-                <!-- ${damageType} Damage Resistance (%) -->
-                <div v-if="fieldName === '${damageType} Damage Resistance (%)'">
-                    <v-card class="mb-4">
-                        <v-card-title>
-                            ${damageType} Damage Resistance (%)
-                            <v-btn 
-                                icon="fa-solid fa-xmark" 
-                                size="small" 
-                                variant="text" 
-                                @click="selectedFields['${document.name}'] = selectedFields['${document.name}'].filter(f => f !== '${damageType} Damage Resistance (%)')"
-                                style="float: right;">
-                            </v-btn>
-                        </v-card-title>
-                        <v-card-text>
-                            <v-row>
-                                <v-select
-                                    name="${document.name.toLowerCase()}.system.${safeTypeName}damageresistancepercent-type"
-                                    :model-value="getChangeMode('${document.name.toLowerCase()}.system.${safeTypeName}damageresistancepercent')"
-                                    label="Mode"
-                                    :color="primaryColor"
-                                    :items="context.basicNumberModes"
-                                    item-title="label"
-                                    item-value="value"tec
-                                    variant="outlined"
-                                    density="compact">
-                                </v-select>
-                                <v-number-input
-                                    name="${document.name.toLowerCase()}.system.${safeTypeName}damageresistancepercent"
-                                    :model-value="getChangeNumberValue('${document.name.toLowerCase()}.system.${safeTypeName}damageresistancepercent')"
-                                    label="Percent Resistance (0-100)"
-                                    :min="0"
-                                    :max="100"
-                                    :color="primaryColor"
-                                    variant="outlined"
-                                    density="compact">
-                                </v-number-input>
-                            </v-row>
-                        </v-card-text>
-                    </v-card>
-                </div>
+            return expandToNode `
+                <!-- ${damageType} Bonus Damage -->
+                <div v-if="fieldName === '${damageType} Bonus Damage'">
+                    <v-card class="mb-4">
+                        <v-card-title>
+                            ${damageType} Bonus Damage
+                            <v-btn 
+                                icon="fa-solid fa-xmark" 
+                                size="small" 
+                                variant="text" 
+                                @click="selectedFields['${document.name}'] = selectedFields['${document.name}'].filter(f => f !== '${damageType} Bonus Damage')"
+                                style="float: right;">
+                            </v-btn>
+                        </v-card-title>
+                        <v-card-text>
+                            <v-row>
+                                <v-select
+                                    name="${document.name.toLowerCase()}.system.${safeTypeName}bonusdamage-type"
+                                    :model-value="getChangeMode('${document.name.toLowerCase()}.system.${safeTypeName}bonusdamage')"
+                                    label="Mode"
+                                    :color="primaryColor"
+                                    :items="context.basicNumberModes"
+                                    item-title="label"
+                                    item-value="value"
+                                    variant="outlined"
+                                    density="compact">
+                                </v-select>
+                                <v-number-input
+                                    name="${document.name.toLowerCase()}.system.${safeTypeName}bonusdamage"
+                                    :model-value="getChangeNumberValue('${document.name.toLowerCase()}.system.${safeTypeName}bonusdamage')"
+                                    label="Bonus Damage"
+                                    :color="primaryColor"
+                                    variant="outlined"
+                                    density="compact">
+                                </v-number-input>
+                            </v-row>
+                        </v-card-text>
+                    </v-card>
+                </div>
+
+                <!-- ${damageType} Damage Resistance (Flat) -->
+                <div v-if="fieldName === '${damageType} Damage Resistance (Flat)'">
+                    <v-card class="mb-4">
+                        <v-card-title>
+                            ${damageType} Damage Resistance (Flat)
+                            <v-btn 
+                                icon="fa-solid fa-xmark" 
+                                size="small" 
+                                variant="text" 
+                                @click="selectedFields['${document.name}'] = selectedFields['${document.name}'].filter(f => f !== '${damageType} Damage Resistance (Flat)')"
+                                style="float: right;">
+                            </v-btn>
+                        </v-card-title>
+                        <v-card-text>
+                            <v-row>
+                                <v-select
+                                    name="${document.name.toLowerCase()}.system.${safeTypeName}damageresistanceflat-type"
+                                    :model-value="getChangeMode('${document.name.toLowerCase()}.system.${safeTypeName}damageresistanceflat')"
+                                    label="Mode"
+                                    :color="primaryColor"
+                                    :items="context.basicNumberModes"
+                                    item-title="label"
+                                    item-value="value"
+                                    variant="outlined"
+                                    density="compact">
+                                </v-select>
+                                <v-number-input
+                                    name="${document.name.toLowerCase()}.system.${safeTypeName}damageresistanceflat"
+                                    :model-value="getChangeNumberValue('${document.name.toLowerCase()}.system.${safeTypeName}damageresistanceflat')"
+                                    label="Flat Resistance"
+                                    :color="primaryColor"
+                                    variant="outlined"
+                                    density="compact">
+                                </v-number-input>
+                            </v-row>
+                        </v-card-text>
+                    </v-card>
+                </div>
+
+                <!-- ${damageType} Damage Resistance (%) -->
+                <div v-if="fieldName === '${damageType} Damage Resistance (%)'">
+                    <v-card class="mb-4">
+                        <v-card-title>
+                            ${damageType} Damage Resistance (%)
+                            <v-btn 
+                                icon="fa-solid fa-xmark" 
+                                size="small" 
+                                variant="text" 
+                                @click="selectedFields['${document.name}'] = selectedFields['${document.name}'].filter(f => f !== '${damageType} Damage Resistance (%)')"
+                                style="float: right;">
+                            </v-btn>
+                        </v-card-title>
+                        <v-card-text>
+                            <v-row>
+                                <v-select
+                                    name="${document.name.toLowerCase()}.system.${safeTypeName}damageresistancepercent-type"
+                                    :model-value="getChangeMode('${document.name.toLowerCase()}.system.${safeTypeName}damageresistancepercent')"
+                                    label="Mode"
+                                    :color="primaryColor"
+                                    :items="context.basicNumberModes"
+                                    item-title="label"
+                                    item-value="value"tec
+                                    variant="outlined"
+                                    density="compact">
+                                </v-select>
+                                <v-number-input
+                                    name="${document.name.toLowerCase()}.system.${safeTypeName}damageresistancepercent"
+                                    :model-value="getChangeNumberValue('${document.name.toLowerCase()}.system.${safeTypeName}damageresistancepercent')"
+                                    label="Percent Resistance (0-100)"
+                                    :min="0"
+                                    :max="100"
+                                    :color="primaryColor"
+                                    variant="outlined"
+                                    density="compact">
+                                </v-number-input>
+                            </v-row>
+                        </v-card-text>
+                    </v-card>
+                </div>
             `;
         }, { appendNewLineIfNotEmpty: true });
     }
     function generateRemoveButton(document, property) {
-        return expandToNode `
-            <v-btn 
-                icon="fa-solid fa-xmark" 
-                size="small" 
-                variant="text" 
-                @click="selectedFields['${document.name}'] = selectedFields['${document.name}'].filter(f => f !== '${property.name}')"
-                style="float: right;">
-            </v-btn>
+        return expandToNode `
+            <v-btn 
+                icon="fa-solid fa-xmark" 
+                size="small" 
+                variant="text" 
+                @click="selectedFields['${document.name}'] = selectedFields['${document.name}'].filter(f => f !== '${property.name}')"
+                style="float: right;">
+            </v-btn>
         `;
     }
     function generateField(document, property) {
@@ -518,498 +518,498 @@ export function generateActiveEffectVueSheet(entry, id, destination) {
         if (property.modifier == "locked")
             return;
         if (isNumberExp(property)) {
-            return expandToNode `
-                <v-card class="mb-4">
-                    <v-card-title>
-                        ${property.name}
-                        ${generateRemoveButton(document, property)}
-                    </v-card-title>
-                    <v-card-text>
-                        <v-row>
-                            <v-select
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
-                                :model-value="getChangeMode('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}')"
-                                label="Mode"
-                                :color="primaryColor"
-                                :items="context.numberModes"
-                                item-title="label"
-                                item-value="value"
-                                variant="outlined"
-                                density="compact">
-                            </v-select>
-                            <v-number-input
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}"
-                                :model-value="getChangeNumberValue('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}')"
-                                label="Value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-number-input>
-                        </v-row>
-                    </v-card-text>
-                </v-card>
+            return expandToNode `
+                <v-card class="mb-4">
+                    <v-card-title>
+                        ${property.name}
+                        ${generateRemoveButton(document, property)}
+                    </v-card-title>
+                    <v-card-text>
+                        <v-row>
+                            <v-select
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
+                                :model-value="getChangeMode('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}')"
+                                label="Mode"
+                                :color="primaryColor"
+                                :items="context.numberModes"
+                                item-title="label"
+                                item-value="value"
+                                variant="outlined"
+                                density="compact">
+                            </v-select>
+                            <v-number-input
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}"
+                                :model-value="getChangeNumberValue('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}')"
+                                label="Value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-number-input>
+                        </v-row>
+                    </v-card-text>
+                </v-card>
             `;
         }
         if (isAttributeExp(property)) {
-            return expandToNode `
-                <v-card class="mb-4">
-                    <v-card-title>
-                        ${property.name}
-                        ${generateRemoveButton(document, property)}
-                    </v-card-title>
-                    <v-card-text>
-                        <v-row>
-                            <v-select
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.value-mode"
-                                :model-value="getChangeMode('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.value')"
-                                label="Mode"
-                                :items="context.numberModes"
-                                item-title="label"
-                                item-value="value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-select>
-                            <v-number-input
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.value"
-                                :model-value="getChangeNumberValue('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.value')"
-                                label="Value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-number-input>
-                        </v-row>
-                    </v-card-text>
-                </v-card>
+            return expandToNode `
+                <v-card class="mb-4">
+                    <v-card-title>
+                        ${property.name}
+                        ${generateRemoveButton(document, property)}
+                    </v-card-title>
+                    <v-card-text>
+                        <v-row>
+                            <v-select
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.value-mode"
+                                :model-value="getChangeMode('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.value')"
+                                label="Mode"
+                                :items="context.numberModes"
+                                item-title="label"
+                                item-value="value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-select>
+                            <v-number-input
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.value"
+                                :model-value="getChangeNumberValue('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.value')"
+                                label="Value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-number-input>
+                        </v-row>
+                    </v-card-text>
+                </v-card>
             `;
         }
         if (isResourceExp(property)) {
             // Resource has both a current and max that can be changed
-            return expandToNode `
-                <v-card class="mb-4">
-                    <v-card-title>
-                        ${property.name}
-                        ${generateRemoveButton(document, property)}
-                    </v-card-title>
-                    <v-card-text>
-                         <v-label>Resource Current</v-label>
-                        <v-row>
-                            <v-select
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.value-mode"
-                                :model-value="getChangeMode('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.value')"
-                                label="Mode"
-                                :items="context.numberModes"
-                                item-title="label"
-                                item-value="value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-select>
-                            <v-number-input
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.value"
-                                :model-value="getChangeNumberValue('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.value')"
-                                label="Current Value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-number-input>
-                        </v-row>
-                        <v-label class="mt-2">Resource Max</v-label>
-                        <v-row>
-                            <v-select
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.max-mode"
-                                :model-value="getChangeMode('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.max')"
-                                label="Mode"
-                                :items="context.numberModes"
-                                item-title="label"
-                                item-value="value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-select>
-                            <v-number-input
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.max"
-                                :model-value="getChangeNumberValue('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.max')"
-                                label="Max Value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-number-input>
-                        </v-row>
-                    </v-card-text>
-                </v-card>
+            return expandToNode `
+                <v-card class="mb-4">
+                    <v-card-title>
+                        ${property.name}
+                        ${generateRemoveButton(document, property)}
+                    </v-card-title>
+                    <v-card-text>
+                         <v-label>Resource Current</v-label>
+                        <v-row>
+                            <v-select
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.value-mode"
+                                :model-value="getChangeMode('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.value')"
+                                label="Mode"
+                                :items="context.numberModes"
+                                item-title="label"
+                                item-value="value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-select>
+                            <v-number-input
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.value"
+                                :model-value="getChangeNumberValue('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.value')"
+                                label="Current Value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-number-input>
+                        </v-row>
+                        <v-label class="mt-2">Resource Max</v-label>
+                        <v-row>
+                            <v-select
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.max-mode"
+                                :model-value="getChangeMode('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.max')"
+                                label="Mode"
+                                :items="context.numberModes"
+                                item-title="label"
+                                item-value="value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-select>
+                            <v-number-input
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.max"
+                                :model-value="getChangeNumberValue('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.max')"
+                                label="Max Value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-number-input>
+                        </v-row>
+                    </v-card-text>
+                </v-card>
             `;
         }
         if (isStringExp(property)) {
-            return expandToNode `
-                <v-card class="mb-4">
-                    <v-card-title>
-                        ${property.name}
-                        ${generateRemoveButton(document, property)}
-                    </v-card-title>
-                    <v-card-text>
-                        <v-row>
-                            <v-select
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
-                                :model-value="getChangeMode('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}')"
-                                label="Mode"
-                                :items="context.stringModes"
-                                item-title="label"
-                                item-value="value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-select>
-                            <v-text-field
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}"
-                                :model-value="getChangeValue('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}')"
-                                label="Text Value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-text-field>
-                        </v-row>
-                    </v-card-text>
-                </v-card>
+            return expandToNode `
+                <v-card class="mb-4">
+                    <v-card-title>
+                        ${property.name}
+                        ${generateRemoveButton(document, property)}
+                    </v-card-title>
+                    <v-card-text>
+                        <v-row>
+                            <v-select
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
+                                :model-value="getChangeMode('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}')"
+                                label="Mode"
+                                :items="context.stringModes"
+                                item-title="label"
+                                item-value="value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-select>
+                            <v-text-field
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}"
+                                :model-value="getChangeValue('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}')"
+                                label="Text Value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-text-field>
+                        </v-row>
+                    </v-card-text>
+                </v-card>
             `;
         }
         if (isBooleanExp(property)) {
-            return expandToNode `
-                <v-card class="mb-4">
-                    <v-card-title>
-                        ${property.name}
-                        ${generateRemoveButton(document, property)}
-                    </v-card-title>
-                    <v-card-text>
-                        <v-row>
-                            <v-select
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
-                                :model-value="getChangeMode('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}')"
-                                label="Mode"
-                                :items="context.booleanModes"
-                                item-title="label"
-                                item-value="value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-select>
-                            <v-switch
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}"
-                                :model-value="getChangeValue('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}')"
-                                label="Boolean Value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-switch>
-                        </v-row>
-                    </v-card-text>
-                </v-card>
+            return expandToNode `
+                <v-card class="mb-4">
+                    <v-card-title>
+                        ${property.name}
+                        ${generateRemoveButton(document, property)}
+                    </v-card-title>
+                    <v-card-text>
+                        <v-row>
+                            <v-select
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
+                                :model-value="getChangeMode('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}')"
+                                label="Mode"
+                                :items="context.booleanModes"
+                                item-title="label"
+                                item-value="value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-select>
+                            <v-switch
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}"
+                                :model-value="getChangeValue('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}')"
+                                label="Boolean Value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-switch>
+                        </v-row>
+                    </v-card-text>
+                </v-card>
             `;
         }
         if (isStringChoiceField(property)) {
-            return expandToNode `
-                <v-card class="mb-4">
-                    <v-card-title>
-                        ${property.name}
-                        ${generateRemoveButton(document, property)}
-                    </v-card-title>
-                    <v-card-text>
-                        <v-row>
-                            <v-select
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
-                                label="Mode"
-                                :items="context.choiceModes"
-                                item-title="label"
-                                item-value="value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-select>
-                            <v-select
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}"
-                                label="Choice Value"
-                                :items="[]"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-select>
-                        </v-row>
-                    </v-card-text>
-                </v-card>
+            return expandToNode `
+                <v-card class="mb-4">
+                    <v-card-title>
+                        ${property.name}
+                        ${generateRemoveButton(document, property)}
+                    </v-card-title>
+                    <v-card-text>
+                        <v-row>
+                            <v-select
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
+                                label="Mode"
+                                :items="context.choiceModes"
+                                item-title="label"
+                                item-value="value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-select>
+                            <v-select
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}"
+                                label="Choice Value"
+                                :items="[]"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-select>
+                        </v-row>
+                    </v-card-text>
+                </v-card>
             `;
         }
         if (isTrackerExp(property)) {
-            return expandToNode `
-                <v-card class="mb-4">
-                    <v-card-title>
-                        ${property.name}
-                        ${generateRemoveButton(document, property)}
-                    </v-card-title>
-                    <v-card-text>
-                        <v-label class="">Tracker Value</v-label>
-                        <v-row>
-                            <v-select
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
-                                label="Mode"
-                                :items="context.numberModes"
-                                item-title="label"
-                                item-value="value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-select>
-                            <v-number-input
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.value"
-                                :model-value="getChangeNumberValue('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.value')"
-                                label="Current Value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-number-input>
-                        </v-row>
-                        <v-label class="mt-2">Tracker Max</v-label>
-                        <v-row>
-                            <v-select
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.max-mode"
-                                :model-value="getChangeMode('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.max')"
-                                label="Mode"
-                                :items="context.numberModes"
-                                item-title="label"
-                                item-value="value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-select>
-                            <v-number-input
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.max"
-                                :model-value="getChangeNumberValue('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.max')"
-                                label="Max Value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-number-input>
-                        </v-row>
-                    </v-card-text>
-                </v-card>
+            return expandToNode `
+                <v-card class="mb-4">
+                    <v-card-title>
+                        ${property.name}
+                        ${generateRemoveButton(document, property)}
+                    </v-card-title>
+                    <v-card-text>
+                        <v-label class="">Tracker Value</v-label>
+                        <v-row>
+                            <v-select
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
+                                label="Mode"
+                                :items="context.numberModes"
+                                item-title="label"
+                                item-value="value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-select>
+                            <v-number-input
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.value"
+                                :model-value="getChangeNumberValue('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.value')"
+                                label="Current Value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-number-input>
+                        </v-row>
+                        <v-label class="mt-2">Tracker Max</v-label>
+                        <v-row>
+                            <v-select
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.max-mode"
+                                :model-value="getChangeMode('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.max')"
+                                label="Mode"
+                                :items="context.numberModes"
+                                item-title="label"
+                                item-value="value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-select>
+                            <v-number-input
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.max"
+                                :model-value="getChangeNumberValue('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.max')"
+                                label="Max Value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-number-input>
+                        </v-row>
+                    </v-card-text>
+                </v-card>
             `;
         }
         if (isDateExp(property)) {
-            return expandToNode `
-                <v-card class="mb-4">
-                    <v-card-title>
-                        ${property.name}
-                        ${generateRemoveButton(document, property)}
-                    </v-card-title>
-                    <v-card-text>
-                        <v-row>
-                            <v-select
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
-                                label="Mode"
-                                :items="context.dateModes"
-                                item-title="label"
-                                item-value="value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-select>
-                            <v-text-field
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}"
-                                label="Date Value"
-                                type="date"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-text-field>
-                        </v-row>
-                    </v-card-text>
-                </v-card>
+            return expandToNode `
+                <v-card class="mb-4">
+                    <v-card-title>
+                        ${property.name}
+                        ${generateRemoveButton(document, property)}
+                    </v-card-title>
+                    <v-card-text>
+                        <v-row>
+                            <v-select
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
+                                label="Mode"
+                                :items="context.dateModes"
+                                item-title="label"
+                                item-value="value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-select>
+                            <v-text-field
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}"
+                                label="Date Value"
+                                type="date"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-text-field>
+                        </v-row>
+                    </v-card-text>
+                </v-card>
             `;
         }
         if (isTimeExp(property)) {
-            return expandToNode `
-                <v-card class="mb-4">
-                    <v-card-title>
-                        ${property.name}
-                        ${generateRemoveButton(document, property)}
-                    </v-card-title>
-                    <v-card-text>
-                        <v-row>
-                            <v-select
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
-                                label="Mode"
-                                :items="context.timeModes"
-                                item-title="label"
-                                item-value="value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-select>
-                            <v-text-field
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}"
-                                label="Time Value"
-                                type="time"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-text-field>
-                        </v-row>
-                    </v-card-text>
-                </v-card>
+            return expandToNode `
+                <v-card class="mb-4">
+                    <v-card-title>
+                        ${property.name}
+                        ${generateRemoveButton(document, property)}
+                    </v-card-title>
+                    <v-card-text>
+                        <v-row>
+                            <v-select
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
+                                label="Mode"
+                                :items="context.timeModes"
+                                item-title="label"
+                                item-value="value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-select>
+                            <v-text-field
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}"
+                                label="Time Value"
+                                type="time"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-text-field>
+                        </v-row>
+                    </v-card-text>
+                </v-card>
             `;
         }
         if (isDateTimeExp(property)) {
-            return expandToNode `
-                <v-card class="mb-4">
-                    <v-card-title>
-                        ${property.name}
-                        ${generateRemoveButton(document, property)}
-                    </v-card-title>
-                    <v-card-text>
-                        <v-row>
-                            <v-select
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
-                                label="Mode"
-                                :items="context.dateTimeModes"
-                                item-title="label"
-                                item-value="value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-select>
-                            <v-text-field
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}"
-                                label="DateTime Value"
-                                type="datetime-local"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-text-field>
-                        </v-row>
-                    </v-card-text>
-                </v-card>
+            return expandToNode `
+                <v-card class="mb-4">
+                    <v-card-title>
+                        ${property.name}
+                        ${generateRemoveButton(document, property)}
+                    </v-card-title>
+                    <v-card-text>
+                        <v-row>
+                            <v-select
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
+                                label="Mode"
+                                :items="context.dateTimeModes"
+                                item-title="label"
+                                item-value="value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-select>
+                            <v-text-field
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}"
+                                label="DateTime Value"
+                                type="datetime-local"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-text-field>
+                        </v-row>
+                    </v-card-text>
+                </v-card>
             `;
         }
         if (isDieField(property)) {
-            return expandToNode `
-                <v-card class="mb-4">
-                    <v-card-title>
-                        ${property.name}
-                        ${generateRemoveButton(document, property)}
-                    </v-card-title>
-                    <v-card-text>
-                        <v-row>
-                            <v-select
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
-                                label="Mode"
-                                :items="context.dieModes"
-                                item-title="label"
-                                item-value="value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-select>
-                            <v-select
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}"
-                                label="Die Type"
-                                :items="context.dieTypes"
-                                item-title="label"
-                                item-value="value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-select>
-                        </v-row>
-                    </v-card-text>
-                </v-card>
+            return expandToNode `
+                <v-card class="mb-4">
+                    <v-card-title>
+                        ${property.name}
+                        ${generateRemoveButton(document, property)}
+                    </v-card-title>
+                    <v-card-text>
+                        <v-row>
+                            <v-select
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
+                                label="Mode"
+                                :items="context.dieModes"
+                                item-title="label"
+                                item-value="value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-select>
+                            <v-select
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}"
+                                label="Die Type"
+                                :items="context.dieTypes"
+                                item-title="label"
+                                item-value="value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-select>
+                        </v-row>
+                    </v-card-text>
+                </v-card>
             `;
         }
         if (isDiceField(property)) {
-            return expandToNode `
-                <v-card class="mb-4">
-                    <v-card-title>
-                        ${property.name}
-                        ${generateRemoveButton(document, property)}
-                    </v-card-title>
-                    <v-card-text>
-                        <v-row>
-                            <v-select
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
-                                :model-value="getChangeMode('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}')"
-                                label="Mode"
-                                :items="context.diceModes"
-                                item-title="label"
-                                item-value="value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-select>
-                            <v-number-input
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.number"
-                                :model-value="getChangeNumberValue('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.number')"
-                                label="Number of Dice"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-number-input>
-                            <v-select
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.die"
-                                :model-value="getChangeValue('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.die')"
-                                label="Die Type"
-                                :items="context.dieTypes"
-                                item-title="label"
-                                item-value="value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-select>
-                        </v-row>
-                    </v-card-text>
-                </v-card>
+            return expandToNode `
+                <v-card class="mb-4">
+                    <v-card-title>
+                        ${property.name}
+                        ${generateRemoveButton(document, property)}
+                    </v-card-title>
+                    <v-card-text>
+                        <v-row>
+                            <v-select
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
+                                :model-value="getChangeMode('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}')"
+                                label="Mode"
+                                :items="context.diceModes"
+                                item-title="label"
+                                item-value="value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-select>
+                            <v-number-input
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.number"
+                                :model-value="getChangeNumberValue('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.number')"
+                                label="Number of Dice"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-number-input>
+                            <v-select
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.die"
+                                :model-value="getChangeValue('${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.die')"
+                                label="Die Type"
+                                :items="context.dieTypes"
+                                item-title="label"
+                                item-value="value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-select>
+                        </v-row>
+                    </v-card-text>
+                </v-card>
             `;
         }
         if (isMeasuredTemplateField(property)) {
-            return expandToNode `
-                <v-card class="mb-4">
-                    <v-card-title>
-                        ${property.name}
-                        ${generateRemoveButton(document, property)}
-                    </v-card-title>
-                    <v-card-text>
-                        <v-row>
-                            <v-select
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
-                                label="Mode"
-                                :items="context.templateModes"
-                                item-title="label"
-                                item-value="value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-select>
-                            <v-text-field
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.distance"
-                                label="Distance"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-text-field>
-                            <v-select
-                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.type"
-                                label="Template Type"
-                                :items="context.templateTypes"
-                                item-title="label"
-                                item-value="value"
-                                :color="primaryColor"
-                                variant="outlined"
-                                density="compact">
-                            </v-select>
-                        </v-row>
-                    </v-card-text>
-                </v-card>
+            return expandToNode `
+                <v-card class="mb-4">
+                    <v-card-title>
+                        ${property.name}
+                        ${generateRemoveButton(document, property)}
+                    </v-card-title>
+                    <v-card-text>
+                        <v-row>
+                            <v-select
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}-type"
+                                label="Mode"
+                                :items="context.templateModes"
+                                item-title="label"
+                                item-value="value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-select>
+                            <v-text-field
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.distance"
+                                label="Distance"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-text-field>
+                            <v-select
+                                name="${document.name.toLowerCase()}.system.${property.name.toLowerCase()}.type"
+                                label="Template Type"
+                                :items="context.templateTypes"
+                                item-title="label"
+                                item-value="value"
+                                :color="primaryColor"
+                                variant="outlined"
+                                density="compact">
+                            </v-select>
+                        </v-row>
+                    </v-card-text>
+                </v-card>
             `;
         }
-        return expandToNode `
-            <v-alert text="Unknown Property ${property.name} (${property.$type})" type="warning" density="compact" class="ga-2 ma-1" variant="outlined"></v-alert>
+        return expandToNode `
+            <v-alert text="Unknown Property ${property.name} (${property.$type})" type="warning" density="compact" class="ga-2 ma-1" variant="outlined"></v-alert>
         `;
     }
 }