intelligent-system-design-language 0.3.22 → 0.3.24

package/out/cli/components/vue/vue-sheet-application-generator.js

@@ -19,9 +19,9 @@ export function generateDocumentVueComponent(entry, id, document, destination) {
     if (!fs.existsSync(generatedFileDir)) {
         fs.mkdirSync(generatedFileDir, { recursive: true });
     }
-    const fileNode = expandToNode `
-    ${generateVueComponentScript(entry, id, document, destination)}
-    ${generateVueComponentTemplate(entry, id, document)}
+    const fileNode = expandToNode `
+    ${generateVueComponentScript(entry, id, document, destination)}
+    ${generateVueComponentTemplate(entry, id, document)}
     `.appendNewLineIfNotEmpty();
     fs.writeFileSync(generatedFilePath, toString(fileNode));
 }
@@ -43,22 +43,22 @@ function generateVueComponentScript(entry, id, document, destination) {
         const page = AstUtils.getContainerOfType(table, isPage);
         const pageName = page ? page.name : document.name;
         generateVuetifyDatatableComponent(entry, id, document, pageName, table, destination);
-        return expandToNode `
-        import ${document.name}${pageName}${table.name}VuetifyDatatable from './components/datatables/${document.name.toLowerCase()}${pageName}${table.name}VuetifyDatatable.vue';
+        return expandToNode `
+        import ${document.name}${pageName}${table.name}VuetifyDatatable from './components/datatables/${document.name.toLowerCase()}${pageName}${table.name}VuetifyDatatable.vue';
         `;
     }
     function importEffectsDataTable() {
         generateEffectsVuetifyDatatableComponent(id, document, destination);
-        return expandToNode `
-        import ${document.name}EffectsVuetifyDatatable from './components/datatables/${document.name.toLowerCase()}EffectsVuetifyDatatable.vue';
+        return expandToNode `
+        import ${document.name}EffectsVuetifyDatatable from './components/datatables/${document.name.toLowerCase()}EffectsVuetifyDatatable.vue';
         `;
     }
     function importPinnedDataTable(pinnedField) {
         generatePinnedVuetifyDatatableComponent(id, document, pinnedField, destination, entry);
         const page = AstUtils.getContainerOfType(pinnedField, isPage);
         const pageName = page ? page.name : document.name;
-        return expandToNode `
-        import ${document.name}${pageName}${pinnedField.name}VuetifyDatatable from './components/datatables/${document.name.toLowerCase()}${pageName}${pinnedField.name}VuetifyDatatable.vue';
+        return expandToNode `
+        import ${document.name}${pageName}${pinnedField.name}VuetifyDatatable from './components/datatables/${document.name.toLowerCase()}${pageName}${pinnedField.name}VuetifyDatatable.vue';
         `;
     }
     function generateEffectsVuetifyDatatableComponent(id, document, destination) {
@@ -68,292 +68,292 @@ function generateVueComponentScript(entry, id, document, destination) {
         if (!fs.existsSync(generatedFileDir)) {
             fs.mkdirSync(generatedFileDir, { recursive: true });
         }
-        const fileNode = expandToNode `
-        <script setup>
-            import { ref, computed, inject, onMounted } from "vue";
-
-            const props = defineProps({
-                context: Object,
-                primaryColor: String,
-                secondaryColor: String,
-                tertiaryColor: String
-            });
-            
-            const document = inject('rawDocument');
-            const search = ref('');
-            const loading = ref(false);
-            
-            const data = ref([]);
-
-            function updateEffects() {
-                data.value = Array.from(document.allApplicableEffects());
-            }
-    
-            updateEffects();
-    
-            Hooks.on("createActiveEffect", updateEffects);
-            Hooks.on("updateActiveEffect", updateEffects);
-            Hooks.on("deleteActiveEffect", updateEffects);
-            
-            const headers = [
-                { 
-                    title: game.i18n.localize("Image"), 
-                    key: 'img', 
-                    sortable: false,
-                    width: '50px',
-                    maxWidth: '50px'
-                },
-                { 
-                    title: game.i18n.localize("Name"), 
-                    key: 'name', 
-                    sortable: true,
-                    minWidth: '120px'
-                },
-                { 
-                    title: game.i18n.localize("Source"), 
-                    key: 'source', 
-                    sortable: true,
-                    minWidth: '120px'
-                },
-                { 
-                    title: game.i18n.localize("Duration"), 
-                    key: 'duration', 
-                    sortable: true,
-                    minWidth: '100px'
-                },
-                { 
-                    title: game.i18n.localize("Actions"), 
-                    key: 'actions', 
-                    sortable: false,
-                    width: '150px',
-                    align: 'center'
-                }
-            ];
-
-            const editItem = (item) => {
-                const foundryItem = document.effects.get(item._id);
-                foundryItem.sheet.render(true);
-            };
-
-            const toggleEffect = async (item) => {
-                const update = {
-                    _id: item._id,
-                    disabled: !item.disabled
-                };
-                item.disabled = !item.disabled;
-                document.updateEmbeddedDocuments("ActiveEffect", [update]);
-            };
-
-            const deleteEffect = async (item) => {
-                const shouldDelete = await Dialog.confirm({
-                    title: "Delete Confirmation",
-                    content: \`<p>Are you sure you would like to delete the "\${item.name}" Effect?</p>\`,
-                    defaultYes: false
-                });
-                if (shouldDelete) {
-                    await document.deleteEmbeddedDocuments("ActiveEffect", [item.id]);
-                    // Don't call updateEffects() here as the Hooks will handle it
-                };
-            };
-
-            const addNewEffect = async () => {
-                loading.value = true;
-                try {
-                    const effects = await ActiveEffect.createDocuments([{
-                        name: "New Effect",
-                        icon: "icons/svg/aura.svg"
-                    }], {parent: document});
-                    
-                    if (effects && effects[0]) {
-                        effects[0].sheet.render(true);
-                        updateEffects();
-                    }
-                } catch (error) {
-                    console.error("Error creating effect:", error);
-                    ui.notifications.error("Failed to create new effect");
-                } finally {
-                    loading.value = false;
-                }
-            };
-            
-            const formatDuration = (effect) => {
-                if (!effect.duration) return "Permanent";
-                if (effect.duration.type === "none") return "Permanent";
-                if (effect.duration.type === "turns") {
-                    return \`\${effect.duration.remaining} turns\`;
-                }
-                if (effect.duration.type === "seconds") {
-                    return \`\${effect.duration.remaining} seconds\`;
-                }
-                return "Temporary";
-            };
-        </script>
-
-        <template>
-            <v-card flat class="isdl-datatable">
-                <v-card-title class="d-flex align-center pe-1" style="height: 40px;">
-                    <v-icon icon="fa-solid fa-sparkles" size="small" />
-                    &nbsp; {{ game.i18n.localize("Effects") }}
-                    <v-spacer></v-spacer>
-                    <v-text-field
-                            v-model="search"
-                            density="compact"
-                            label="Search"
-                            prepend-inner-icon="fa-solid fa-magnify"
-                            variant="outlined"
-                            flat
-                            hide-details
-                            single-line
-                            clearable
-                            style="margin: 0; margin-right: 8px;"
-                    ></v-text-field>
-                    <v-btn
-                        :color="primaryColor || 'primary'"
-                        prepend-icon="fa-solid fa-plus"
-                        rounded="0"
-                        size="small"
-                        :loading="loading"
-                        @click="addNewEffect"
-                        style="max-width: 80px; height: 38px;"
-                    >
-                        {{ game.i18n.localize("Add") }}
-                    </v-btn>
-                </v-card-title>
-                <v-divider></v-divider>
-                
-                <v-data-table
-                    v-model:search="search"
-                    :headers="headers"
-                    :items="data"
-                    :search="search"
-                    hover
-                    density="compact"
-                    hide-default-footer
-                    style="background: none;"
-                    class="custom-datatable"
-                >
-                    <!-- Image slot -->
-                    <template v-slot:item.img="{ item }">
-                        <v-avatar size="40" rounded="0">
-                            <v-img :src="item.img ?? item.icon" :alt="item.name" cover></v-img>
-                        </v-avatar>
-                    </template>
-
-                    <!-- Name slot -->
-                    <template v-slot:item.name="{ item }">
-                        <div class="d-flex align-center">
-                            <div class="font-weight-medium text-truncate" style="min-width: 120px; max-width: 200px;">{{ item.name }}</div>
-                        </div>
-                    </template>
-
-                    <!-- Source slot -->
-                    <template v-slot:item.source="{ item }">
-                        <v-chip
-                            label
-                            size="x-small"
-                            variant="elevated"
-                            class="text-caption text-truncate" 
-                            style="max-width: 150px;"
-                             :data-tooltip="item.flags?.['${id}']?.source || 'Unknown'">
-                            {{ item.flags?.['${id}']?.source || 'Unknown' }}
-                        </v-chip>
-                    </template>
-
-                    <!-- Duration slot -->
-                    <template v-slot:item.duration="{ item }">
-                        <v-chip 
-                            label
-                            size="x-small"
-                            variant="elevated"
-                            class="text-caption"
-                            :color="item.duration?.type === 'none' ? 'primary' : 'secondary'"
-                        >
-                            {{ formatDuration(item) }}
-                        </v-chip>
-                    </template>
-
-                    <!-- Actions slot -->
-                    <template v-slot:item.actions="{ item }">
-                        <div class="d-flex align-center justify-center ga-1">
-                            <v-tooltip :text="item.disabled ? 'Enable' : 'Disable'">
-                                <template v-slot:activator="{ props }">
-                                    <v-btn
-                                        v-bind="props"
-                                        :icon="item.disabled ? 'fa-solid fa-pause' : 'fa-solid fa-play'"
-                                        size="x-small"
-                                        variant="text"
-                                        :color="item.disabled ? 'warning' : 'success'"
-                                        @click="toggleEffect(item)"
-                                    ></v-btn>
-                                </template>
-                            </v-tooltip>
-                            <v-tooltip text="Edit">
-                                <template v-slot:activator="{ props }">
-                                    <v-btn
-                                        v-bind="props"
-                                        icon="fa-solid fa-edit"
-                                        size="x-small"
-                                        variant="text"
-                                        @click="editItem(item)"
-                                    ></v-btn>
-                                </template>
-                            </v-tooltip>
-                            <v-tooltip text="Delete">
-                                <template v-slot:activator="{ props }">
-                                    <v-btn
-                                        v-bind="props"
-                                        icon="fa-solid fa-trash"
-                                        size="x-small"
-                                        variant="text"
-                                        color="error"
-                                        @click="deleteEffect(item)"
-                                    ></v-btn>
-                                </template>
-                            </v-tooltip>
-                        </div>
-                    </template>
-
-                    <!-- No data slot -->
-                    <template v-slot:no-data>
-                        <div class="text-center pa-4">
-                            <v-icon size="48" color="grey-lighten-1">fa-solid fa-magic</v-icon>
-                            <div class="text-h6 mt-2">No effects found</div>
-                            <div class="text-body-2 text-medium-emphasis">
-                                Add your first effect to get started
-                            </div>
-                        </div>
-                    </template>
-                </v-data-table>
-            </v-card>
-        </template>
+        const fileNode = expandToNode `
+        <script setup>
+            import { ref, computed, inject, onMounted } from "vue";
+
+            const props = defineProps({
+                context: Object,
+                primaryColor: String,
+                secondaryColor: String,
+                tertiaryColor: String
+            });
+            
+            const document = inject('rawDocument');
+            const search = ref('');
+            const loading = ref(false);
+            
+            const data = ref([]);
+
+            function updateEffects() {
+                data.value = Array.from(document.allApplicableEffects());
+            }
+    
+            updateEffects();
+    
+            Hooks.on("createActiveEffect", updateEffects);
+            Hooks.on("updateActiveEffect", updateEffects);
+            Hooks.on("deleteActiveEffect", updateEffects);
+            
+            const headers = [
+                { 
+                    title: game.i18n.localize("Image"), 
+                    key: 'img', 
+                    sortable: false,
+                    width: '50px',
+                    maxWidth: '50px'
+                },
+                { 
+                    title: game.i18n.localize("Name"), 
+                    key: 'name', 
+                    sortable: true,
+                    minWidth: '120px'
+                },
+                { 
+                    title: game.i18n.localize("Source"), 
+                    key: 'source', 
+                    sortable: true,
+                    minWidth: '120px'
+                },
+                { 
+                    title: game.i18n.localize("Duration"), 
+                    key: 'duration', 
+                    sortable: true,
+                    minWidth: '100px'
+                },
+                { 
+                    title: game.i18n.localize("Actions"), 
+                    key: 'actions', 
+                    sortable: false,
+                    width: '150px',
+                    align: 'center'
+                }
+            ];
+
+            const editItem = (item) => {
+                const foundryItem = document.effects.get(item._id);
+                foundryItem.sheet.render(true);
+            };
+
+            const toggleEffect = async (item) => {
+                const update = {
+                    _id: item._id,
+                    disabled: !item.disabled
+                };
+                item.disabled = !item.disabled;
+                document.updateEmbeddedDocuments("ActiveEffect", [update]);
+            };
+
+            const deleteEffect = async (item) => {
+                const shouldDelete = await Dialog.confirm({
+                    title: "Delete Confirmation",
+                    content: \`<p>Are you sure you would like to delete the "\${item.name}" Effect?</p>\`,
+                    defaultYes: false
+                });
+                if (shouldDelete) {
+                    await document.deleteEmbeddedDocuments("ActiveEffect", [item.id]);
+                    // Don't call updateEffects() here as the Hooks will handle it
+                };
+            };
+
+            const addNewEffect = async () => {
+                loading.value = true;
+                try {
+                    const effects = await ActiveEffect.createDocuments([{
+                        name: "New Effect",
+                        icon: "icons/svg/aura.svg"
+                    }], {parent: document});
+                    
+                    if (effects && effects[0]) {
+                        effects[0].sheet.render(true);
+                        updateEffects();
+                    }
+                } catch (error) {
+                    console.error("Error creating effect:", error);
+                    ui.notifications.error("Failed to create new effect");
+                } finally {
+                    loading.value = false;
+                }
+            };
+            
+            const formatDuration = (effect) => {
+                if (!effect.duration) return "Permanent";
+                if (effect.duration.type === "none") return "Permanent";
+                if (effect.duration.type === "turns") {
+                    return \`\${effect.duration.remaining} turns\`;
+                }
+                if (effect.duration.type === "seconds") {
+                    return \`\${effect.duration.remaining} seconds\`;
+                }
+                return "Temporary";
+            };
+        </script>
+
+        <template>
+            <v-card flat class="isdl-datatable">
+                <v-card-title class="d-flex align-center pe-1" style="height: 40px;">
+                    <v-icon icon="fa-solid fa-sparkles" size="small" />
+                    &nbsp; {{ game.i18n.localize("Effects") }}
+                    <v-spacer></v-spacer>
+                    <v-text-field
+                            v-model="search"
+                            density="compact"
+                            label="Search"
+                            prepend-inner-icon="fa-solid fa-magnify"
+                            variant="outlined"
+                            flat
+                            hide-details
+                            single-line
+                            clearable
+                            style="margin: 0; margin-right: 8px;"
+                    ></v-text-field>
+                    <v-btn
+                        :color="primaryColor || 'primary'"
+                        prepend-icon="fa-solid fa-plus"
+                        rounded="0"
+                        size="small"
+                        :loading="loading"
+                        @click="addNewEffect"
+                        style="max-width: 80px; height: 38px;"
+                    >
+                        {{ game.i18n.localize("Add") }}
+                    </v-btn>
+                </v-card-title>
+                <v-divider></v-divider>
+                
+                <v-data-table
+                    v-model:search="search"
+                    :headers="headers"
+                    :items="data"
+                    :search="search"
+                    hover
+                    density="compact"
+                    hide-default-footer
+                    style="background: none;"
+                    class="custom-datatable"
+                >
+                    <!-- Image slot -->
+                    <template v-slot:item.img="{ item }">
+                        <v-avatar size="40" rounded="0">
+                            <v-img :src="item.img ?? item.icon" :alt="item.name" cover></v-img>
+                        </v-avatar>
+                    </template>
+
+                    <!-- Name slot -->
+                    <template v-slot:item.name="{ item }">
+                        <div class="d-flex align-center">
+                            <div class="font-weight-medium text-truncate" style="min-width: 120px; max-width: 200px;">{{ item.name }}</div>
+                        </div>
+                    </template>
+
+                    <!-- Source slot -->
+                    <template v-slot:item.source="{ item }">
+                        <v-chip
+                            label
+                            size="x-small"
+                            variant="elevated"
+                            class="text-caption text-truncate" 
+                            style="max-width: 150px;"
+                             :data-tooltip="item.flags?.['${id}']?.source || 'Unknown'">
+                            {{ item.flags?.['${id}']?.source || 'Unknown' }}
+                        </v-chip>
+                    </template>
+
+                    <!-- Duration slot -->
+                    <template v-slot:item.duration="{ item }">
+                        <v-chip 
+                            label
+                            size="x-small"
+                            variant="elevated"
+                            class="text-caption"
+                            :color="item.duration?.type === 'none' ? 'primary' : 'secondary'"
+                        >
+                            {{ formatDuration(item) }}
+                        </v-chip>
+                    </template>
+
+                    <!-- Actions slot -->
+                    <template v-slot:item.actions="{ item }">
+                        <div class="d-flex align-center justify-center ga-1">
+                            <v-tooltip :text="item.disabled ? 'Enable' : 'Disable'">
+                                <template v-slot:activator="{ props }">
+                                    <v-btn
+                                        v-bind="props"
+                                        :icon="item.disabled ? 'fa-solid fa-pause' : 'fa-solid fa-play'"
+                                        size="x-small"
+                                        variant="text"
+                                        :color="item.disabled ? 'warning' : 'success'"
+                                        @click="toggleEffect(item)"
+                                    ></v-btn>
+                                </template>
+                            </v-tooltip>
+                            <v-tooltip text="Edit">
+                                <template v-slot:activator="{ props }">
+                                    <v-btn
+                                        v-bind="props"
+                                        icon="fa-solid fa-edit"
+                                        size="x-small"
+                                        variant="text"
+                                        @click="editItem(item)"
+                                    ></v-btn>
+                                </template>
+                            </v-tooltip>
+                            <v-tooltip text="Delete">
+                                <template v-slot:activator="{ props }">
+                                    <v-btn
+                                        v-bind="props"
+                                        icon="fa-solid fa-trash"
+                                        size="x-small"
+                                        variant="text"
+                                        color="error"
+                                        @click="deleteEffect(item)"
+                                    ></v-btn>
+                                </template>
+                            </v-tooltip>
+                        </div>
+                    </template>
+
+                    <!-- No data slot -->
+                    <template v-slot:no-data>
+                        <div class="text-center pa-4">
+                            <v-icon size="48" color="grey-lighten-1">fa-solid fa-magic</v-icon>
+                            <div class="text-h6 mt-2">No effects found</div>
+                            <div class="text-body-2 text-medium-emphasis">
+                                Add your first effect to get started
+                            </div>
+                        </div>
+                    </template>
+                </v-data-table>
+            </v-card>
+        </template>
         `;
         fs.writeFileSync(generatedFilePath, toString(fileNode));
     }
     function importPageOfPinnedDataTable(page) {
         const pinned = getAllOfType(page.body, isPinnedField, true);
-        return expandToNode `
-        ${joinToNode(pinned, pinnedField => importPinnedDataTable(pinnedField), { appendNewLineIfNotEmpty: true })}
+        return expandToNode `
+        ${joinToNode(pinned, pinnedField => importPinnedDataTable(pinnedField), { appendNewLineIfNotEmpty: true })}
         `;
     }
     function importActionComponent(action) {
         generateActionComponent(entry, id, document, action, destination);
         const componentName = `${document.name.toLowerCase()}${action.name}Action`;
-        return expandToNode `
-        import ${componentName} from './components/actions/${componentName}.vue';
+        return expandToNode `
+        import ${componentName} from './components/actions/${componentName}.vue';
         `;
     }
     function importDocumentChoiceComponent(documentChoice) {
         generateDocumentChoiceComponent(entry, id, document, documentChoice, destination);
         const componentName = `${document.name.toLowerCase()}${documentChoice.name}DocumentChoice`;
-        return expandToNode `
-        import ${componentName} from './components/document-choices/${componentName}.vue';
+        return expandToNode `
+        import ${componentName} from './components/document-choices/${componentName}.vue';
         `;
     }
     function importDocumentChoicesComponent(documentChoices) {
         generateDocumentChoicesComponent(entry, id, document, documentChoices, destination);
         const componentName = `${document.name.toLowerCase()}${documentChoices.name}DocumentChoices`;
-        return expandToNode `
-        import ${componentName} from './components/document-choices/${componentName}.vue';
+        return expandToNode `
+        import ${componentName} from './components/document-choices/${componentName}.vue';
         `;
     }
     function paperDollSlots(element) {
@@ -368,17 +368,17 @@ function generateVueComponentScript(entry, id, document, destination) {
                 top: (_c = property.top) !== null && _c !== void 0 ? _c : "0px",
             });
         }
-        return expandToNode `
-        const ${element.name.toLowerCase()}Slots = [
-            ${joinToNode(slots, slot => expandToNode `
-            {
-                name: '${slot.name}',
-                systemPath: '${slot.systemPath}',
-                type: '${slot.type}',
-                left: '${slot.left}',
-                top: '${slot.top}'
-            }`, { separator: ',', appendNewLineIfNotEmpty: true })}
-        ];
+        return expandToNode `
+        const ${element.name.toLowerCase()}Slots = [
+            ${joinToNode(slots, slot => expandToNode `
+            {
+                name: '${slot.name}',
+                systemPath: '${slot.systemPath}',
+                type: '${slot.type}',
+                left: '${slot.left}',
+                top: '${slot.top}'
+            }`, { separator: ',', appendNewLineIfNotEmpty: true })}
+        ];
         `;
     }
     const properties = getAllOfType(document.body, isProperty, false);
@@ -404,101 +404,101 @@ function generateVueComponentScript(entry, id, document, destination) {
             });
             // If there's only a modifier and no visibility param, return the modifier
             if (element.modifier != undefined && !visibilityParam) {
-                return expandToNode `
-                '${element.name.toLowerCase()}': computed(() => {
-                    return '${element.modifier}';
-                })
+                return expandToNode `
+                '${element.name.toLowerCase()}': computed(() => {
+                    return '${element.modifier}';
+                })
                 `;
             }
             if (visibilityParam) {
                 if (isMethodBlock(visibilityParam.visibility)) {
                     // If the visibility is a method block, we need to return a function that returns the visibility
-                    return expandToNode `
-                    '${element.name.toLowerCase()}': computed(() => {
-                        let editMode = editModeRef.value;
-                        let combatant = currentCombatant.value; // This will kick the recalc when changed
-                        let update = {};
-                        let embeddedUpdate = {};
-                        let parentUpdate = {};
-                        let parentEmbeddedUpdate = {};
-                        let targetUpdate = {};
-                        let targetEmbeddedUpdate = {};
-                        let selfDeleted = false;
-                        let rerender = false;
-                        const context = {
-                            object: document,
-                            target: game.user.getTargetOrNothing()
-                        };
-                        // If this is an item, attach the parent
-                        if (document.documentName === "Item" && document.parent) {
-                            context.actor = document.parent;
-                        }
-                        else {
-                            context.actor = document;
-                        }
-                        const visibility = (system) => {
-                            ${translateBodyExpressionToJavascript(entry, id, visibilityParam.visibility.body, false, element)}
-                        };
-                        const returnedVisibility = visibility(props.context.system);
-                        console.log("Returned visibility for ${element.name}: " + returnedVisibility);
-
-                        return returnedVisibility ?? "${(_a = element.modifier) !== null && _a !== void 0 ? _a : 'default'}";
-                    })
+                    return expandToNode `
+                    '${element.name.toLowerCase()}': computed(() => {
+                        let editMode = editModeRef.value;
+                        let combatant = currentCombatant.value; // This will kick the recalc when changed
+                        let update = {};
+                        let embeddedUpdate = {};
+                        let parentUpdate = {};
+                        let parentEmbeddedUpdate = {};
+                        let targetUpdate = {};
+                        let targetEmbeddedUpdate = {};
+                        let selfDeleted = false;
+                        let rerender = false;
+                        const context = {
+                            object: document,
+                            target: game.user.getTargetOrNothing()
+                        };
+                        // If this is an item, attach the parent
+                        if (document.documentName === "Item" && document.parent) {
+                            context.actor = document.parent;
+                        }
+                        else {
+                            context.actor = document;
+                        }
+                        const visibility = (system) => {
+                            ${translateBodyExpressionToJavascript(entry, id, visibilityParam.visibility.body, false, element)}
+                        };
+                        const returnedVisibility = visibility(props.context.system);
+                        console.log("Returned visibility for ${element.name}: " + returnedVisibility);
+
+                        return returnedVisibility ?? "${(_a = element.modifier) !== null && _a !== void 0 ? _a : 'default'}";
+                    })
                     `;
                 }
                 // VisibilityValue is an AST node; emit its literal value (e.g. "gmOnly"),
                 // not the stringified node ("[object Object]").
-                return expandToNode `
-                '${element.name.toLowerCase()}': computed(() => {
-                    return '${visibilityParam.visibility.visibility}';
-                })
+                return expandToNode `
+                '${element.name.toLowerCase()}': computed(() => {
+                    return '${visibilityParam.visibility.visibility}';
+                })
                 `;
             }
         }
-        return expandToNode `
-        '${element.name.toLowerCase()}': computed(() => {
-            return 'default';
-        })
+        return expandToNode `
+        '${element.name.toLowerCase()}': computed(() => {
+            return 'default';
+        })
         `;
     }
     const attributes = getAllOfType(document.body, isAttributeExp, false);
     function generateAttributeRollMethod(attribute) {
         const rollParam = attribute.params.find(isAttributeRollParam);
         if (rollParam) {
-            return expandToNode `
-            const on${toMachineIdentifier(attribute.name)}AttributeRoll = async () => {
-                const context = {
-                    object: document
-                };
-                const roll = ${translateExpression(entry, id, rollParam.roll, false, attribute)};
-                // Create the chat message
-                const ${attribute.name}Description = context.object.description ?? context.object.system.description;
-                const ${attribute.name}Context = { 
-                    cssClass: "${id} ${toMachineIdentifier(attribute.name)}",
-                    document: context.object,
-                    description: ${attribute.name}Description,
-                    hasDescription: ${attribute.name}Description!= "",
-                    parts: [
-                        {
-                            label: "${humanize(attribute.name)} Attribute Roll",
-                            value: roll,
-                            isRoll: true,
-                            wide: true, 
-                            tooltip: await roll.getTooltip()
-                        }
-                    ],
-                    tags: []
-                };
-                const ${attribute.name}Content = await renderTemplate("systems/${id}/system/templates/chat/standard-card.hbs", ${attribute.name}Context);
-                await ChatMessage.create({
-                    user: game.user._id,
-                    speaker: ChatMessage.getSpeaker(),
-                    content: ${attribute.name}Content,
-                    flavor: "",
-                    ...(${attribute.name}Context.parts.find(x => x.isRoll) ? {} : { style: CONST.CHAT_MESSAGE_STYLES.IC }),
-                    rolls: Array.from(${attribute.name}Context.parts.filter(x => x.isRoll).map(x => x.value)),
-                });
-            };
+            return expandToNode `
+            const on${toMachineIdentifier(attribute.name)}AttributeRoll = async () => {
+                const context = {
+                    object: document
+                };
+                const roll = ${translateExpression(entry, id, rollParam.roll, false, attribute)};
+                // Create the chat message
+                const ${attribute.name}Description = context.object.description ?? context.object.system.description;
+                const ${attribute.name}Context = { 
+                    cssClass: "${id} ${toMachineIdentifier(attribute.name)}",
+                    document: context.object,
+                    description: ${attribute.name}Description,
+                    hasDescription: ${attribute.name}Description!= "",
+                    parts: [
+                        {
+                            label: "${humanize(attribute.name)} Attribute Roll",
+                            value: roll,
+                            isRoll: true,
+                            wide: true, 
+                            tooltip: await roll.getTooltip()
+                        }
+                    ],
+                    tags: []
+                };
+                const ${attribute.name}Content = await renderTemplate("systems/${id}/system/templates/chat/standard-card.hbs", ${attribute.name}Context);
+                await ChatMessage.create({
+                    user: game.user._id,
+                    speaker: ChatMessage.getSpeaker(),
+                    content: ${attribute.name}Content,
+                    flavor: "",
+                    ...(${attribute.name}Context.parts.find(x => x.isRoll) ? {} : { style: CONST.CHAT_MESSAGE_STYLES.IC }),
+                    rolls: Array.from(${attribute.name}Context.parts.filter(x => x.isRoll).map(x => x.value)),
+                });
+            };
             `;
         }
         return expandToNode ``;
@@ -508,235 +508,235 @@ function generateVueComponentScript(entry, id, document, destination) {
     function generateAttributeFunctionMethod(attribute) {
         const functionParam = attribute.params.find(isAttributeFunctionParam);
         if (functionParam) {
-            return expandToNode `
-            const on${attribute.name}AttributeFunction = async (event) => {
-                await document.sheet._on${attribute.name}AttributeFunction(event);
-            };
+            return expandToNode `
+            const on${attribute.name}AttributeFunction = async (event) => {
+                await document.sheet._on${attribute.name}AttributeFunction(event);
+            };
             `;
         }
         return expandToNode ``;
     }
-    return expandToNode `
-    <script setup>
-        import { ref, watch, inject, computed, watchEffect } from "vue";
-        ${joinToNode(allTables, table => importDataTable2(table), { appendNewLineIfNotEmpty: true })}
-        ${joinToNode(pages, importPageOfPinnedDataTable, { appendNewLineIfNotEmpty: true })}
-        ${joinToNode(actions, importActionComponent, { appendNewLineIfNotEmpty: true })}
-        ${joinToNode(documentChoices, importDocumentChoiceComponent, { appendNewLineIfNotEmpty: true })}
-        ${joinToNode(documentChoicesPlural, importDocumentChoicesComponent, { appendNewLineIfNotEmpty: true })}
-        ${importEffectsDataTable()}
-        ${joinToNode(firstPagePinned, (pinned) => importPinnedDataTable(pinned), { appendNewLineIfNotEmpty: true })}
-        import ${entry.config.name}Roll from "../../../../rolls/roll.mjs";
-
-        const document = inject('rawDocument');
-        const props = defineProps(['context']);
-
-        // Colors
-        let storedColors = game.settings.get('${id}', 'documentColorThemes');
-        const primaryColor = ref(storedColors[document.uuid]?.primary ?? '#1565c0');
-        const secondaryColor = ref(storedColors[document.uuid]?.secondary ?? '#4db6ac');
-        const tertiaryColor = ref(storedColors[document.uuid]?.tertiary ?? '#ffb74d');
-
-        const setupColors = () => {
-            const colors = {
-                primary: primaryColor.value,
-                secondary: secondaryColor.value,
-                tertiary: tertiaryColor.value
-            };
-            game.settings.set('${id}', 'documentColorThemes', { ...storedColors, [document.uuid]: colors });
-        };
-        const resetColors = () => {
-            primaryColor.value = '#1565c0';
-            secondaryColor.value = '#4db6ac';
-            tertiaryColor.value = '#ffb74d';
-            setupColors();
-        };
-
-        watch(primaryColor, () => {
-            setupColors();
-        });
-        watch(secondaryColor, () => {
-            setupColors();
-        });
-        watch(tertiaryColor, () => {
-            setupColors();
-        });
-
-        // Pages and Tabs
-        const lastStates = game.settings.get('${id}', 'documentLastState');
-        const lastState = lastStates[document.uuid] ?? {
-            page: '${document.name.toLowerCase()}',
-            tab: 'description'
-        };
-
-        const drawer = ref(false);
-        const page = ref(lastState.page);
-        const tab = ref(lastState.tab);
-        const pageDefaultTabs = {
-            '${document.name.toLowerCase()}': 'description'
-        };
-
-        const updateLastState = () => {
-            const lastStates = game.settings.get('${id}', 'documentLastState');
-            lastStates[document.uuid] = { page: page.value, tab: tab.value };
-            game.settings.set('${id}', 'documentLastState', lastStates);
-        };
-
-        // When the page changes, reset the tab to the first tab on that page
-        watch(page, () => {
-            tab.value = pageDefaultTabs[page.value.toLowerCase()];
-            document.sheet.dragDrop.forEach((d) => d.bind(document.sheet.element));
-            // Dismiss the drawer when the page changes
-            drawer.value = false;
-            updateLastState();
-        });
-
-        watch(tab, () => {
-            try {
-                if (document.sheet?.element) {
-                    document.sheet.dragDrop.forEach((d) => d.bind(document.sheet.element));
-                }
-            }
-            catch {}
-            updateLastState();
-        });
-
-        const pageBackgrounds = {
-            '${document.name.toLowerCase()}': 'topography',
-            ${joinToNode(pages, getPageBackground, { separator: ',', appendNewLineIfNotEmpty: true })}
-        };
-
-        const pageBackground = computed(() => {
-            if (editModeRef.value) {
-                return 'edit-mode';
-            }
-            if (props.context.system.dead) {
-                return 'dead';
-            }
-            return pageBackgrounds[page.value];
-        });
-
-        // Edit Mode
-        const editModeRef = ref(document.getFlag('${id}', 'edit-mode') ?? true);
-        const hovered = ref(false);
-
-        const toggleEditMode = () => {
-            editModeRef.value = !editModeRef.value;
-            document.setFlag('${id}', 'edit-mode', editModeRef.value);
-        };
-
-        function spawnDatatableWindow(e, pageName, tabName) {
-            if (event.button === 1) {
-                event.preventDefault();
-                event.stopPropagation();
-                const tableName = \`${isActor(document) ? 'actor' : 'item'}${document.name}\${pageName}\${tabName}\`;
-                const systemName = "system." + tabName.toLowerCase();
-                const sheet = new game.system.datatableApp(document, tableName, systemName, tabName);
-                sheet.render(true);
-            }
-        }
-
-        // Effects
-        const effects = ref([]);
-
-        function updateEffects() {
-            effects.value = Array.from(document.allApplicableEffects());
-        }
-
-        updateEffects();
-
-        Hooks.on("createActiveEffect", updateEffects);
-        Hooks.on("updateActiveEffect", updateEffects);
-        Hooks.on("deleteActiveEffect", updateEffects);
-        
-        // Combat
-        const currentCombatant = ref(game.combat?.combatant);
-        Hooks.on("combatTurnChange", () => {
-            currentCombatant.value = game.combat?.combatant;
-        });
-
-        // Paper Doll Slots
-        ${joinToNode(paperDoll, paperDollSlots, { appendNewLineIfNotEmpty: true })}
-
-        // Visibility states
-        const visibilityStates = {
-            ${joinToNode(properties, generateVisibilityState, { separator: ',', appendNewLineIfNotEmpty: true })},
-            ${joinToNode(actions, generateVisibilityState, { separator: ',', appendNewLineIfNotEmpty: true })}
-        };
-
-        // Computed fields mapping
-        const computedFields = {
-            ${joinToNode(properties, prop => expandToNode `'${prop.name.toLowerCase()}': ${isComputedField(prop)}`, { separator: ',', appendNewLineIfNotEmpty: true })},
-            ${joinToNode(actions, action => expandToNode `'${action.name.toLowerCase()}': ${isComputedField(action)}`, { separator: ',', appendNewLineIfNotEmpty: true })}
-        };
-
-
-        const isHidden = (type) => {
-            const visibility = visibilityStates[type].value;
-            if (visibility === "hidden") {
-                return true;
-            }
-            if (visibility === "gmOnly") {
-                return !game.user.isGM;
-            }
-            if (visibility === "secret") {
-                const isGm = game.user.isGM;
-                const isOwner = document.getUserLevel(game.user) === CONST.DOCUMENT_OWNERSHIP_LEVELS.OWNER;
-                return !isGm && !isOwner;
-            }
-            if (visibility === "edit") {
-                return !editModeRef.value;
-            }
-            if (visibility === "play") {
-                return editModeRef.value;
-            }
-
-            // Default to visible
-            return false;
-        };
-
-        const isDisabled = (type) => {
-            // Computed fields are always disabled
-            if (computedFields[type]) {
-                //console.log(type + " is computed and disabled");
-                return true;
-            }
-            
-            const visibility = visibilityStates[type].value;
-            const disabledStates = ["readonly", "locked"];
-            if (disabledStates.includes(visibility)) {
-                //console.log(type + " is readonly / locked and disabled");
-                return true;
-            }
-            if (visibility === "gmEdit") {
-                const isGm = game.user.isGM;
-                const isEditMode = editModeRef.value;
-                return !isGm && !isEditMode;
-            }
-
-            if (visibility === "unlocked") {
-                //console.log(type + " is unlocked and enabled");
-                return false;
-            }
-            
-            // Default to enabled while in editMode
-            return !editModeRef.value;
-        };
-
-        const getLabel = (label, icon) => {
-            const localized = game.i18n.localize(label);
-            if (icon) {
-                return \`<i class="\${icon}"></i> \${localized}\`;
-            }
-            return localized;
-        };
-        
-        // Attribute roll methods
-        ${joinToNode(attributes, generateAttributeRollMethod, { appendNewLineIfNotEmpty: true })}
-        ${joinToNode(attributes, generateAttributeFunctionMethod, { appendNewLineIfNotEmpty: true })}
-    </script>
-    <style>
-    </style>
+    return expandToNode `
+    <script setup>
+        import { ref, watch, inject, computed, watchEffect } from "vue";
+        ${joinToNode(allTables, table => importDataTable2(table), { appendNewLineIfNotEmpty: true })}
+        ${joinToNode(pages, importPageOfPinnedDataTable, { appendNewLineIfNotEmpty: true })}
+        ${joinToNode(actions, importActionComponent, { appendNewLineIfNotEmpty: true })}
+        ${joinToNode(documentChoices, importDocumentChoiceComponent, { appendNewLineIfNotEmpty: true })}
+        ${joinToNode(documentChoicesPlural, importDocumentChoicesComponent, { appendNewLineIfNotEmpty: true })}
+        ${importEffectsDataTable()}
+        ${joinToNode(firstPagePinned, (pinned) => importPinnedDataTable(pinned), { appendNewLineIfNotEmpty: true })}
+        import ${entry.config.name}Roll from "../../../../rolls/roll.mjs";
+
+        const document = inject('rawDocument');
+        const props = defineProps(['context']);
+
+        // Colors
+        let storedColors = game.settings.get('${id}', 'documentColorThemes');
+        const primaryColor = ref(storedColors[document.uuid]?.primary ?? '#1565c0');
+        const secondaryColor = ref(storedColors[document.uuid]?.secondary ?? '#4db6ac');
+        const tertiaryColor = ref(storedColors[document.uuid]?.tertiary ?? '#ffb74d');
+
+        const setupColors = () => {
+            const colors = {
+                primary: primaryColor.value,
+                secondary: secondaryColor.value,
+                tertiary: tertiaryColor.value
+            };
+            game.settings.set('${id}', 'documentColorThemes', { ...storedColors, [document.uuid]: colors });
+        };
+        const resetColors = () => {
+            primaryColor.value = '#1565c0';
+            secondaryColor.value = '#4db6ac';
+            tertiaryColor.value = '#ffb74d';
+            setupColors();
+        };
+
+        watch(primaryColor, () => {
+            setupColors();
+        });
+        watch(secondaryColor, () => {
+            setupColors();
+        });
+        watch(tertiaryColor, () => {
+            setupColors();
+        });
+
+        // Pages and Tabs
+        const lastStates = game.settings.get('${id}', 'documentLastState');
+        const lastState = lastStates[document.uuid] ?? {
+            page: '${document.name.toLowerCase()}',
+            tab: 'description'
+        };
+
+        const drawer = ref(false);
+        const page = ref(lastState.page);
+        const tab = ref(lastState.tab);
+        const pageDefaultTabs = {
+            '${document.name.toLowerCase()}': 'description'
+        };
+
+        const updateLastState = () => {
+            const lastStates = game.settings.get('${id}', 'documentLastState');
+            lastStates[document.uuid] = { page: page.value, tab: tab.value };
+            game.settings.set('${id}', 'documentLastState', lastStates);
+        };
+
+        // When the page changes, reset the tab to the first tab on that page
+        watch(page, () => {
+            tab.value = pageDefaultTabs[page.value.toLowerCase()];
+            document.sheet.dragDrop.forEach((d) => d.bind(document.sheet.element));
+            // Dismiss the drawer when the page changes
+            drawer.value = false;
+            updateLastState();
+        });
+
+        watch(tab, () => {
+            try {
+                if (document.sheet?.element) {
+                    document.sheet.dragDrop.forEach((d) => d.bind(document.sheet.element));
+                }
+            }
+            catch {}
+            updateLastState();
+        });
+
+        const pageBackgrounds = {
+            '${document.name.toLowerCase()}': 'topography',
+            ${joinToNode(pages, getPageBackground, { separator: ',', appendNewLineIfNotEmpty: true })}
+        };
+
+        const pageBackground = computed(() => {
+            if (editModeRef.value) {
+                return 'edit-mode';
+            }
+            if (props.context.system.dead) {
+                return 'dead';
+            }
+            return pageBackgrounds[page.value];
+        });
+
+        // Edit Mode
+        const editModeRef = ref(document.getFlag('${id}', 'edit-mode') ?? true);
+        const hovered = ref(false);
+
+        const toggleEditMode = () => {
+            editModeRef.value = !editModeRef.value;
+            document.setFlag('${id}', 'edit-mode', editModeRef.value);
+        };
+
+        function spawnDatatableWindow(e, pageName, tabName) {
+            if (event.button === 1) {
+                event.preventDefault();
+                event.stopPropagation();
+                const tableName = \`${isActor(document) ? 'actor' : 'item'}${document.name}\${pageName}\${tabName}\`;
+                const systemName = "system." + tabName.toLowerCase();
+                const sheet = new game.system.datatableApp(document, tableName, systemName, tabName);
+                sheet.render(true);
+            }
+        }
+
+        // Effects
+        const effects = ref([]);
+
+        function updateEffects() {
+            effects.value = Array.from(document.allApplicableEffects());
+        }
+
+        updateEffects();
+
+        Hooks.on("createActiveEffect", updateEffects);
+        Hooks.on("updateActiveEffect", updateEffects);
+        Hooks.on("deleteActiveEffect", updateEffects);
+        
+        // Combat
+        const currentCombatant = ref(game.combat?.combatant);
+        Hooks.on("combatTurnChange", () => {
+            currentCombatant.value = game.combat?.combatant;
+        });
+
+        // Paper Doll Slots
+        ${joinToNode(paperDoll, paperDollSlots, { appendNewLineIfNotEmpty: true })}
+
+        // Visibility states
+        const visibilityStates = {
+            ${joinToNode(properties, generateVisibilityState, { separator: ',', appendNewLineIfNotEmpty: true })},
+            ${joinToNode(actions, generateVisibilityState, { separator: ',', appendNewLineIfNotEmpty: true })}
+        };
+
+        // Computed fields mapping
+        const computedFields = {
+            ${joinToNode(properties, prop => expandToNode `'${prop.name.toLowerCase()}': ${isComputedField(prop)}`, { separator: ',', appendNewLineIfNotEmpty: true })},
+            ${joinToNode(actions, action => expandToNode `'${action.name.toLowerCase()}': ${isComputedField(action)}`, { separator: ',', appendNewLineIfNotEmpty: true })}
+        };
+
+
+        const isHidden = (type) => {
+            const visibility = visibilityStates[type].value;
+            if (visibility === "hidden") {
+                return true;
+            }
+            if (visibility === "gmOnly") {
+                return !game.user.isGM;
+            }
+            if (visibility === "secret") {
+                const isGm = game.user.isGM;
+                const isOwner = document.getUserLevel(game.user) === CONST.DOCUMENT_OWNERSHIP_LEVELS.OWNER;
+                return !isGm && !isOwner;
+            }
+            if (visibility === "edit") {
+                return !editModeRef.value;
+            }
+            if (visibility === "play") {
+                return editModeRef.value;
+            }
+
+            // Default to visible
+            return false;
+        };
+
+        const isDisabled = (type) => {
+            // Computed fields are always disabled
+            if (computedFields[type]) {
+                //console.log(type + " is computed and disabled");
+                return true;
+            }
+            
+            const visibility = visibilityStates[type].value;
+            const disabledStates = ["readonly", "locked"];
+            if (disabledStates.includes(visibility)) {
+                //console.log(type + " is readonly / locked and disabled");
+                return true;
+            }
+            if (visibility === "gmEdit") {
+                const isGm = game.user.isGM;
+                const isEditMode = editModeRef.value;
+                return !isGm && !isEditMode;
+            }
+
+            if (visibility === "unlocked") {
+                //console.log(type + " is unlocked and enabled");
+                return false;
+            }
+            
+            // Default to enabled while in editMode
+            return !editModeRef.value;
+        };
+
+        const getLabel = (label, icon) => {
+            const localized = game.i18n.localize(label);
+            if (icon) {
+                return \`<i class="\${icon}"></i> \${localized}\`;
+            }
+            return localized;
+        };
+        
+        // Attribute roll methods
+        ${joinToNode(attributes, generateAttributeRollMethod, { appendNewLineIfNotEmpty: true })}
+        ${joinToNode(attributes, generateAttributeFunctionMethod, { appendNewLineIfNotEmpty: true })}
+    </script>
+    <style>
+    </style>
     `;
 }
 function generateVueComponentTemplate(entry, id, document) {
@@ -744,138 +744,138 @@ function generateVueComponentTemplate(entry, id, document) {
     const firstPageTables = document.body.filter(isTableField); // We explicitly only want top-level tables
     const firstPagePinned = document.body.filter(isPinnedField); // We explicitly only want top-level pinned fields
     const firstPageInventories = document.body.filter(isInventoryField); // We explicitly only want top-level inventories
-    return expandToNode `
-    <template>
-        <v-app>
-            <!-- App Bar -->
-            <v-app-bar :color="editModeRef ? 'amber-accent-3' : primaryColor" density="comfortable">
-                <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
-                <v-app-bar-title v-if="!editModeRef">{{ context.document.name }}</v-app-bar-title>
-                <v-text-field name="name" v-model="context.document.name" variant="outlined" class="document-name" v-if="editModeRef" density="compact"></v-text-field>
-                <v-alert :text="game.i18n.localize('EditModeWarning')" type="warning" density="compact" class="ga-2 ma-1" color="amber-accent-3" v-if="editModeRef"></v-alert>
-                <template v-slot:append>
-                    <v-btn
-                        :icon="hovered ? (editModeRef ? 'fa-solid fa-dice-d20' : 'fa-solid fa-pen-to-square') : (editModeRef ? 'fa-solid fa-pen-to-square' : 'fa-solid fa-dice-d20')"
-                        @click="toggleEditMode"
-                        @mouseover="hovered = true"
-                        @mouseleave="hovered = false"
-                        :data-tooltip="editModeRef ? 'Swap to Play mode' : 'Swap to Edit mode'"
-                    ></v-btn>
-                </template>
-            </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="${document.name.toLowerCase()}" prepend-icon="fa-solid fa-circle-user">${document.name}</v-tab>
-                    ${joinToNode(pages, generateNavListItem, { appendNewLineIfNotEmpty: true })}
-                </v-tabs>
-                <template v-slot:append>
-                    <div class="pa-2">
-                        <v-btn block @click="setupColors" :color="secondaryColor" prepend-icon="fa-solid fa-palette">
-                        Setup Colors
-
-                        <v-dialog activator="parent" max-width="1000">
-                        <template v-slot:default="{ isActive }">
-                        <v-card
-                            title="Setup Colors"
-                        >
-                            <v-card-text>
-                                <div class="d-flex flex-row">
-                                    <div class="d-flex flex-column">
-                                        <v-label>Primary Color</v-label>
-                                        <v-color-picker hide-inputs hide-sliders hide-canvas show-swatches v-model="primaryColor" swatches-max-height="500px"></v-color-picker>
-                                    </div>
-                                    <v-spacer></v-spacer>
-                                    <div class="d-flex flex-column">
-                                        <v-label>Secondary Color</v-label>
-                                        <v-color-picker hide-inputs hide-sliders hide-canvas show-swatches v-model="secondaryColor" swatches-max-height="500px"></v-color-picker>
-                                    </div>
-                                    <v-spacer></v-spacer>
-                                    <div class="d-flex flex-column">
-                                        <v-label>Tertiary Color</v-label>
-                                        <v-color-picker hide-inputs hide-sliders hide-canvas show-swatches v-model="tertiaryColor" swatches-max-height="500px"></v-color-picker>
-                                    </div>
-                                </div>
-                                <h3>Preview</h3>
-                                <div class="d-flex flex-row"style="overflow-x: scroll; padding-left: 0.5rem; padding-right: 0.5rem;">
-                                    <div
-                                        v-for="i in 10"
-                                        :key="i"
-                                        :style="{
-                                            flex: 1,
-                                            minWidth: '5px',
-                                            flexShrink: 0,
-                                            height: '30px',
-                                            backgroundColor: i <= 4 ? primaryColor : (i <= 6 ? tertiaryColor : 'transparent'),
-                                            border: i <= value ? 'none' : '2px solid ' + secondaryColor,
-                                            transform: 'skewX(-20deg)',
-                                            borderRadius: '2px'
-                                        }"
-                                    />
-                                </div>
-                            </v-card-text>
-                            <v-card-actions>
-                                <v-btn
-                                    variant="tonal"
-                                    prepend-icon="fa-solid fa-sync"
-                                    text="Reset"
-                                    :color="secondaryColor"
-                                    @click="resetColors"
-                                ></v-btn>
-                            </v-card-actions>
-                        </v-card>
-                        </template>
-                    </v-dialog>
-                        </v-btn>
-                    </div>
-                </template>
-            </v-navigation-drawer>
-
-            <!-- Main Content -->
-            <v-main class="d-flex">
-                <v-container :key="editModeRef" :class="pageBackground" fluid>
-                    <v-tabs-window v-model="page">
-                        <v-tabs-window-item value="${document.name.toLowerCase()}" data-tab="${document.name.toLowerCase()}">
-                            <v-row dense>
-                                ${joinToNode(document.body, element => generateElement(element, true), { appendNewLineIfNotEmpty: true })}
-                            </v-row>
-                            <v-divider class="mt-4 mb-2"></v-divider>
-                            <v-tabs v-model="tab" grow always-center>
-                                    <v-tab value="description" prepend-icon="fa-solid fa-book">Description</v-tab>
-                                    ${joinToNode(firstPageTables, table => generateSubTab(table), { appendNewLineIfNotEmpty: true })}
-                                    ${joinToNode(firstPagePinned, (pinned) => generatePinnedTab(pinned), { appendNewLineIfNotEmpty: true })}
-                                    ${joinToNode(firstPageInventories, inventory => generateSubTab(inventory), { appendNewLineIfNotEmpty: true })}
-                                    <v-tab value="effects" prepend-icon="fa-solid fa-sparkles" @mousedown="spawnDatatableWindow($event, '${document.name}', 'effects')">Effects</v-tab>
-                            </v-tabs>
-                            <v-tabs-window v-model="tab" class="tabs-window">
-                                <v-tabs-window-item value="description" data-tab="description" class="tabs-container">
-                                    <i-prosemirror :field="context.editors['system.description']" :disabled="!editModeRef"></i-prosemirror>
-                                </v-tabs-window-item>
-                                ${joinToNode(firstPageTables, table => generateVuetifyDatatable(document.name, table), { appendNewLineIfNotEmpty: true })}
-                                ${joinToNode(firstPagePinned, (pinned) => generatePinnedTabWindow(pinned), { appendNewLineIfNotEmpty: true })}
-                                ${joinToNode(firstPageInventories, inventory => generateInventoryTabWindow(document.name, inventory), { appendNewLineIfNotEmpty: true })}
-                                <v-tabs-window-item value="effects" data-tab="effects" class="tabs-container">
-                                    <${document.name}EffectsVuetifyDatatable 
-                                        :context="context"
-                                        :primaryColor="primaryColor"
-                                        :secondaryColor="secondaryColor"
-                                        :tertiaryColor="tertiaryColor"
-                                    />
-                                </v-tabs-window-item>
-                            </v-tabs-window>
-                        </v-tabs-window-item>
-                    ${joinToNode(pages, generatePageBody, { appendNewLineIfNotEmpty: true })}
-                    </v-tabs-window>
-                </v-container>
-            </v-main>
-        </v-app>
-    </template>
+    return expandToNode `
+    <template>
+        <v-app>
+            <!-- App Bar -->
+            <v-app-bar :color="editModeRef ? 'amber-accent-3' : primaryColor" density="comfortable">
+                <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
+                <v-app-bar-title v-if="!editModeRef">{{ context.document.name }}</v-app-bar-title>
+                <v-text-field name="name" v-model="context.document.name" variant="outlined" class="document-name" v-if="editModeRef" density="compact"></v-text-field>
+                <v-alert :text="game.i18n.localize('EditModeWarning')" type="warning" density="compact" class="ga-2 ma-1" color="amber-accent-3" v-if="editModeRef"></v-alert>
+                <template v-slot:append>
+                    <v-btn
+                        :icon="hovered ? (editModeRef ? 'fa-solid fa-dice-d20' : 'fa-solid fa-pen-to-square') : (editModeRef ? 'fa-solid fa-pen-to-square' : 'fa-solid fa-dice-d20')"
+                        @click="toggleEditMode"
+                        @mouseover="hovered = true"
+                        @mouseleave="hovered = false"
+                        :data-tooltip="editModeRef ? 'Swap to Play mode' : 'Swap to Edit mode'"
+                    ></v-btn>
+                </template>
+            </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="${document.name.toLowerCase()}" prepend-icon="fa-solid fa-circle-user">${document.name}</v-tab>
+                    ${joinToNode(pages, generateNavListItem, { appendNewLineIfNotEmpty: true })}
+                </v-tabs>
+                <template v-slot:append>
+                    <div class="pa-2">
+                        <v-btn block @click="setupColors" :color="secondaryColor" prepend-icon="fa-solid fa-palette">
+                        Setup Colors
+
+                        <v-dialog activator="parent" max-width="1000">
+                        <template v-slot:default="{ isActive }">
+                        <v-card
+                            title="Setup Colors"
+                        >
+                            <v-card-text>
+                                <div class="d-flex flex-row">
+                                    <div class="d-flex flex-column">
+                                        <v-label>Primary Color</v-label>
+                                        <v-color-picker hide-inputs hide-sliders hide-canvas show-swatches v-model="primaryColor" swatches-max-height="500px"></v-color-picker>
+                                    </div>
+                                    <v-spacer></v-spacer>
+                                    <div class="d-flex flex-column">
+                                        <v-label>Secondary Color</v-label>
+                                        <v-color-picker hide-inputs hide-sliders hide-canvas show-swatches v-model="secondaryColor" swatches-max-height="500px"></v-color-picker>
+                                    </div>
+                                    <v-spacer></v-spacer>
+                                    <div class="d-flex flex-column">
+                                        <v-label>Tertiary Color</v-label>
+                                        <v-color-picker hide-inputs hide-sliders hide-canvas show-swatches v-model="tertiaryColor" swatches-max-height="500px"></v-color-picker>
+                                    </div>
+                                </div>
+                                <h3>Preview</h3>
+                                <div class="d-flex flex-row"style="overflow-x: scroll; padding-left: 0.5rem; padding-right: 0.5rem;">
+                                    <div
+                                        v-for="i in 10"
+                                        :key="i"
+                                        :style="{
+                                            flex: 1,
+                                            minWidth: '5px',
+                                            flexShrink: 0,
+                                            height: '30px',
+                                            backgroundColor: i <= 4 ? primaryColor : (i <= 6 ? tertiaryColor : 'transparent'),
+                                            border: i <= value ? 'none' : '2px solid ' + secondaryColor,
+                                            transform: 'skewX(-20deg)',
+                                            borderRadius: '2px'
+                                        }"
+                                    />
+                                </div>
+                            </v-card-text>
+                            <v-card-actions>
+                                <v-btn
+                                    variant="tonal"
+                                    prepend-icon="fa-solid fa-sync"
+                                    text="Reset"
+                                    :color="secondaryColor"
+                                    @click="resetColors"
+                                ></v-btn>
+                            </v-card-actions>
+                        </v-card>
+                        </template>
+                    </v-dialog>
+                        </v-btn>
+                    </div>
+                </template>
+            </v-navigation-drawer>
+
+            <!-- Main Content -->
+            <v-main class="d-flex">
+                <v-container :key="editModeRef" :class="pageBackground" fluid>
+                    <v-tabs-window v-model="page">
+                        <v-tabs-window-item value="${document.name.toLowerCase()}" data-tab="${document.name.toLowerCase()}">
+                            <v-row dense>
+                                ${joinToNode(document.body, element => generateElement(element, true), { appendNewLineIfNotEmpty: true })}
+                            </v-row>
+                            <v-divider class="mt-4 mb-2"></v-divider>
+                            <v-tabs v-model="tab" grow always-center>
+                                    <v-tab value="description" prepend-icon="fa-solid fa-book">Description</v-tab>
+                                    ${joinToNode(firstPageTables, table => generateSubTab(table), { appendNewLineIfNotEmpty: true })}
+                                    ${joinToNode(firstPagePinned, (pinned) => generatePinnedTab(pinned), { appendNewLineIfNotEmpty: true })}
+                                    ${joinToNode(firstPageInventories, inventory => generateSubTab(inventory), { appendNewLineIfNotEmpty: true })}
+                                    <v-tab value="effects" prepend-icon="fa-solid fa-sparkles" @mousedown="spawnDatatableWindow($event, '${document.name}', 'effects')">Effects</v-tab>
+                            </v-tabs>
+                            <v-tabs-window v-model="tab" class="tabs-window">
+                                <v-tabs-window-item value="description" data-tab="description" class="tabs-container">
+                                    <i-prosemirror :field="context.editors['system.description']" :disabled="!editModeRef"></i-prosemirror>
+                                </v-tabs-window-item>
+                                ${joinToNode(firstPageTables, table => generateVuetifyDatatable(document.name, table), { appendNewLineIfNotEmpty: true })}
+                                ${joinToNode(firstPagePinned, (pinned) => generatePinnedTabWindow(pinned), { appendNewLineIfNotEmpty: true })}
+                                ${joinToNode(firstPageInventories, inventory => generateInventoryTabWindow(document.name, inventory), { appendNewLineIfNotEmpty: true })}
+                                <v-tabs-window-item value="effects" data-tab="effects" class="tabs-container">
+                                    <${document.name}EffectsVuetifyDatatable 
+                                        :context="context"
+                                        :primaryColor="primaryColor"
+                                        :secondaryColor="secondaryColor"
+                                        :tertiaryColor="tertiaryColor"
+                                    />
+                                </v-tabs-window-item>
+                            </v-tabs-window>
+                        </v-tabs-window-item>
+                    ${joinToNode(pages, generatePageBody, { appendNewLineIfNotEmpty: true })}
+                    </v-tabs-window>
+                </v-container>
+            </v-main>
+        </v-app>
+    </template>
     `;
     function generateSubTab(tab) {
         var _a, _b;
@@ -887,48 +887,48 @@ function generateVueComponentTemplate(entry, id, document) {
         // Check for label parameter
         const labelParam = params.find((p) => isLabelParam(p));
         const label = (_b = labelParam === null || labelParam === void 0 ? void 0 : labelParam.value) !== null && _b !== void 0 ? _b : `${document.name}.${tab.name}`;
-        return expandToNode `
-            <v-tab v-if="!isHidden('${tab.name.toLowerCase()}')" value="${tab.name.toLowerCase()}" prepend-icon="${icon}" @mousedown="spawnDatatableWindow($event, '${pageName}', '${tab.name}')">{{ game.i18n.localize('${label}') }}</v-tab>
+        return expandToNode `
+            <v-tab v-if="!isHidden('${tab.name.toLowerCase()}')" value="${tab.name.toLowerCase()}" prepend-icon="${icon}" @mousedown="spawnDatatableWindow($event, '${pageName}', '${tab.name}')">{{ game.i18n.localize('${label}') }}</v-tab>
         `;
     }
     function generateNavListItem(page) {
         var _a, _b;
         const pageIconParam = (_a = page.params) === null || _a === void 0 ? void 0 : _a.find(p => isIconParam(p));
         const icon = (_b = pageIconParam === null || pageIconParam === void 0 ? void 0 : pageIconParam.value) !== null && _b !== void 0 ? _b : "fa-solid fa-page";
-        return expandToNode `
-            <v-tab value="${page.name.toLowerCase()}" prepend-icon="${icon}">{{ game.i18n.localize('${page.name}') }}</v-tab>
+        return expandToNode `
+            <v-tab value="${page.name.toLowerCase()}" prepend-icon="${icon}">{{ game.i18n.localize('${page.name}') }}</v-tab>
         `;
     }
     function generatePageBody(page) {
         const tables = page.body.filter(isTableField); // We explictly only want top-level tables
         const pinned = page.body.filter(isPinnedField); // We explictly only want top-level pinned fields
         const inventories = page.body.filter(isInventoryField); // We explictly only want top-level inventories
-        return expandToNode `
-        <v-tabs-window-item value="${page.name.toLowerCase()}" data-tab="${page.name.toLowerCase()}">
-            <v-row dense>
-                ${joinToNode(page.body, element => generateElement(element, true), { appendNewLineIfNotEmpty: true })}
-            </v-row>
-            <v-divider class="mt-4 mb-2"></v-divider>
-            <v-tabs v-model="tab" grow always-center>
-                ${joinToNode(tables, table => generateSubTab(table), { appendNewLineIfNotEmpty: true })}
-                ${joinToNode(pinned, pinnedField => generatePinnedTab(pinnedField), { appendNewLineIfNotEmpty: true })}
-                ${joinToNode(inventories, inventory => generateSubTab(inventory), { appendNewLineIfNotEmpty: true })}
-            </v-tabs>
-            <v-tabs-window v-model="tab" class="tabs-window">
-                ${joinToNode(tables, table => generateVuetifyDatatable(page.name, table), { appendNewLineIfNotEmpty: true })}
-                ${joinToNode(pinned, pinnedField => generatePinnedTabWindow(pinnedField), { appendNewLineIfNotEmpty: true })}
-                ${joinToNode(inventories, inventory => generateInventoryTabWindow(page.name, inventory), { appendNewLineIfNotEmpty: true })}
-            </v-tabs-window>
-        </v-tabs-window-item>
+        return expandToNode `
+        <v-tabs-window-item value="${page.name.toLowerCase()}" data-tab="${page.name.toLowerCase()}">
+            <v-row dense>
+                ${joinToNode(page.body, element => generateElement(element, true), { appendNewLineIfNotEmpty: true })}
+            </v-row>
+            <v-divider class="mt-4 mb-2"></v-divider>
+            <v-tabs v-model="tab" grow always-center>
+                ${joinToNode(tables, table => generateSubTab(table), { appendNewLineIfNotEmpty: true })}
+                ${joinToNode(pinned, pinnedField => generatePinnedTab(pinnedField), { appendNewLineIfNotEmpty: true })}
+                ${joinToNode(inventories, inventory => generateSubTab(inventory), { appendNewLineIfNotEmpty: true })}
+            </v-tabs>
+            <v-tabs-window v-model="tab" class="tabs-window">
+                ${joinToNode(tables, table => generateVuetifyDatatable(page.name, table), { appendNewLineIfNotEmpty: true })}
+                ${joinToNode(pinned, pinnedField => generatePinnedTabWindow(pinnedField), { appendNewLineIfNotEmpty: true })}
+                ${joinToNode(inventories, inventory => generateInventoryTabWindow(page.name, inventory), { appendNewLineIfNotEmpty: true })}
+            </v-tabs-window>
+        </v-tabs-window-item>
         `;
     }
     function generateVuetifyDatatable(pageName, element) {
         const systemPath = getSystemPath(element, [], undefined, false);
         let componentName = `${document.name}${pageName}${element.name}VuetifyDatatable`;
-        return expandToNode `
-        <v-tabs-window-item v-if="!isHidden('${element.name.toLowerCase()}')" value="${element.name.toLowerCase()}" data-tab="${element.name.toLowerCase()}" data-type="table" class="tabs-container">
-            <${componentName} systemPath="${systemPath}" :context="context" :primaryColor="primaryColor" :secondaryColor="secondaryColor" :tertiaryColor="tertiaryColor"></${componentName}>
-        </v-tabs-window-item>
+        return expandToNode `
+        <v-tabs-window-item v-if="!isHidden('${element.name.toLowerCase()}')" value="${element.name.toLowerCase()}" data-tab="${element.name.toLowerCase()}" data-type="table" class="tabs-container">
+            <${componentName} systemPath="${systemPath}" :context="context" :primaryColor="primaryColor" :secondaryColor="secondaryColor" :tertiaryColor="tertiaryColor"></${componentName}>
+        </v-tabs-window-item>
         `.appendNewLine();
     }
     function generateInventoryTabWindow(pageName, element) {
@@ -1014,35 +1014,35 @@ function generateVueComponentTemplate(entry, id, document) {
             const whereNode = translateExpression(entry, id, whereParam.value);
             whereExpression = whereNode ? toString(whereNode) : undefined;
         }
-        return expandToNode `
-        <v-tabs-window-item v-if="!isHidden('${element.name.toLowerCase()}')" value="${element.name.toLowerCase()}" data-tab="${element.name.toLowerCase()}" data-type="inventory" class="tabs-container">
-            <i-inventory
-                label="${label}"
-                systemPath="${systemPath}"
-                :context="context"
-                :editMode="editModeRef"
-                ${icon ? `icon="${icon}"` : ''}
-                ${slots ? `:maxSlots="${slots}"` : ''}
-                ${rows ? `:rows="${rows}"` : ''}
-                :slotSize="${slotSize}"
-                documentType="${documentType}"
-                ${whereExpression ? `whereExpression="${whereExpression}"` : ''}
-                ${globalAllowed ? ':globalAllowed="true"' : ''}
-                ${quantityField ? `quantityField="${quantityField}"` : ''}
-                ${moneyField ? `moneyField="${moneyField}"` : ''}
-                ${moneyFieldLabel ? `moneyFieldLabel="${moneyFieldLabel}"` : ''}
-                ${moneyFieldIcon ? `moneyFieldIcon="${moneyFieldIcon}"` : ''}
-                ${sumProperties.length > 0 ? `:sumProperties='${JSON.stringify(sumProperties)}'` : ''}
-                ${sumMax ? `:sumMax="${sumMax}"` : ''}
-                ${sortProperty ? `sortProperty="${sortProperty}"` : ''}
-                sortOrder="${sortOrder}"
-                emptySlots="${emptySlots}"
-                summary="${summary}"
-                :primaryColor="primaryColor"
-                :secondaryColor="secondaryColor"
-                :tertiaryColor="tertiaryColor"
-            />
-        </v-tabs-window-item>
+        return expandToNode `
+        <v-tabs-window-item v-if="!isHidden('${element.name.toLowerCase()}')" value="${element.name.toLowerCase()}" data-tab="${element.name.toLowerCase()}" data-type="inventory" class="tabs-container">
+            <i-inventory
+                label="${label}"
+                systemPath="${systemPath}"
+                :context="context"
+                :editMode="editModeRef"
+                ${icon ? `icon="${icon}"` : ''}
+                ${slots ? `:maxSlots="${slots}"` : ''}
+                ${rows ? `:rows="${rows}"` : ''}
+                :slotSize="${slotSize}"
+                documentType="${documentType}"
+                ${whereExpression ? `whereExpression="${whereExpression}"` : ''}
+                ${globalAllowed ? ':globalAllowed="true"' : ''}
+                ${quantityField ? `quantityField="${quantityField}"` : ''}
+                ${moneyField ? `moneyField="${moneyField}"` : ''}
+                ${moneyFieldLabel ? `moneyFieldLabel="${moneyFieldLabel}"` : ''}
+                ${moneyFieldIcon ? `moneyFieldIcon="${moneyFieldIcon}"` : ''}
+                ${sumProperties.length > 0 ? `:sumProperties='${JSON.stringify(sumProperties)}'` : ''}
+                ${sumMax ? `:sumMax="${sumMax}"` : ''}
+                ${sortProperty ? `sortProperty="${sortProperty}"` : ''}
+                sortOrder="${sortOrder}"
+                emptySlots="${emptySlots}"
+                summary="${summary}"
+                :primaryColor="primaryColor"
+                :secondaryColor="secondaryColor"
+                :tertiaryColor="tertiaryColor"
+            />
+        </v-tabs-window-item>
         `.appendNewLine();
     }
     function generatePinnedTab(element) {
@@ -1051,54 +1051,54 @@ function generateVueComponentTemplate(entry, id, document) {
         const labelParam = element.params.find(p => isLabelParam(p));
         const icon = (_a = iconParam === null || iconParam === void 0 ? void 0 : iconParam.value) !== null && _a !== void 0 ? _a : "fa-solid fa-thumbtack";
         const label = (_b = labelParam === null || labelParam === void 0 ? void 0 : labelParam.value) !== null && _b !== void 0 ? _b : `${document.name}.${element.name}`;
-        return expandToNode `
-        <v-tab v-if="!isHidden('${element.name.toLowerCase()}')" value="${element.name.toLowerCase()}" prepend-icon="${icon}" @mousedown="spawnDatatableWindow($event, '${document.name}', '${element.name}')">{{ game.i18n.localize("${label}") }}</v-tab>
+        return expandToNode `
+        <v-tab v-if="!isHidden('${element.name.toLowerCase()}')" value="${element.name.toLowerCase()}" prepend-icon="${icon}" @mousedown="spawnDatatableWindow($event, '${document.name}', '${element.name}')">{{ game.i18n.localize("${label}") }}</v-tab>
         `.appendNewLine();
     }
     function generatePinnedTabWindow(element) {
         const page = AstUtils.getContainerOfType(element, isPage);
         const pageName = page ? page.name : document.name;
         let componentName = `${document.name}${pageName}${element.name}VuetifyDatatable`;
-        return expandToNode `
-        <v-tabs-window-item v-if="!isHidden('${element.name.toLowerCase()}')" value="${element.name.toLowerCase()}" data-tab="${element.name.toLowerCase()}" data-type="pinned" class="tabs-container">
-            <${componentName} 
-                :context="context"
-                :primaryColor="primaryColor"
-                :secondaryColor="secondaryColor"
-                :tertiaryColor="tertiaryColor"
-            />
-        </v-tabs-window-item>
+        return expandToNode `
+        <v-tabs-window-item v-if="!isHidden('${element.name.toLowerCase()}')" value="${element.name.toLowerCase()}" data-tab="${element.name.toLowerCase()}" data-type="pinned" class="tabs-container">
+            <${componentName} 
+                :context="context"
+                :primaryColor="primaryColor"
+                :secondaryColor="secondaryColor"
+                :tertiaryColor="tertiaryColor"
+            />
+        </v-tabs-window-item>
         `.appendNewLine();
     }
     function generateElement(element, isTopLevel = false) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
         if (isSection(element)) {
-            return expandToNode `
-            <v-col class="section">
-                <v-card variant="outlined" elevation="4">
-                    <v-card-title>{{ game.i18n.localize('${document.name}.${element.name}') }}</v-card-title>
-
-                    <v-card-text>
-                        <v-row dense>
-                            ${joinToNode(element.body, element => generateElement(element), { appendNewLineIfNotEmpty: true })}
-                        </v-row>
-                   </v-card-text>
-                </v-card>
-            </v-col>
+            return expandToNode `
+            <v-col class="section">
+                <v-card variant="outlined" elevation="4">
+                    <v-card-title>{{ game.i18n.localize('${document.name}.${element.name}') }}</v-card-title>
+
+                    <v-card-text>
+                        <v-row dense>
+                            ${joinToNode(element.body, element => generateElement(element), { appendNewLineIfNotEmpty: true })}
+                        </v-row>
+                   </v-card-text>
+                </v-card>
+            </v-col>
             `;
         }
         if (isRow(element)) {
-            return expandToNode `
-            <v-row dense>
-                ${joinToNode(element.body, element => generateElement(element), { appendNewLineIfNotEmpty: true })}
-            </v-row>
+            return expandToNode `
+            <v-row dense>
+                ${joinToNode(element.body, element => generateElement(element), { appendNewLineIfNotEmpty: true })}
+            </v-row>
             `;
         }
         if (isColumn(element)) {
-            return expandToNode `
-            <v-col>
-                ${joinToNode(element.body, element => generateElement(element), { appendNewLineIfNotEmpty: true })}
-            </v-col>
+            return expandToNode `
+            <v-col>
+                ${joinToNode(element.body, element => generateElement(element), { appendNewLineIfNotEmpty: true })}
+            </v-col>
             `;
         }
         // We don't render these elements as part of this function
@@ -1109,13 +1109,13 @@ function generateVueComponentTemplate(entry, id, document) {
             const componentName = `${document.name.toLowerCase()}${element.name}Action`;
             const colorParam = element.params.find(x => isColorParam(x));
             const primaryColor = colorParam ? `'${colorParam.value}'` : "primaryColor";
-            return expandToNode `
-            <${componentName} 
-                :context="context" 
-                :color="${primaryColor}"
-                :editMode="editModeRef"
-                :visibility="visibilityStates['${element.name.toLowerCase()}'].value">
-            </${componentName}>
+            return expandToNode `
+            <${componentName} 
+                :context="context" 
+                :color="${primaryColor}"
+                :editMode="editModeRef"
+                :visibility="visibilityStates['${element.name.toLowerCase()}'].value">
+            </${componentName}>
             `;
         }
         if (!isProperty(element))
@@ -1132,17 +1132,17 @@ function generateVueComponentTemplate(entry, id, document) {
             const entry = AstUtils.getContainerOfType(element, isEntry);
             if (isRollVisualizerField(element)) {
                 const { formula, data } = compileVisualizerFormula(entry, id, element);
-                return expandToNode `
-                <i-roll-visualizer
-                    :context="context"
-                    label="${label}"
-                    ${iconParam ? `icon="${iconParam.value}"` : ``}
-                    ${colorParam ? `color="${colorParam.value}"` : ``}
-                    systemPath="${systemPath}"
-                    :formula='${formula}'
-                    :rollData='${data}'
-                    v-if="!isHidden('${element.name.toLowerCase()}')">
-                </i-roll-visualizer>
+                return expandToNode `
+                <i-roll-visualizer
+                    :context="context"
+                    label="${label}"
+                    ${iconParam ? `icon="${iconParam.value}"` : ``}
+                    ${colorParam ? `color="${colorParam.value}"` : ``}
+                    systemPath="${systemPath}"
+                    :formula='${formula}'
+                    :rollData='${data}'
+                    v-if="!isHidden('${element.name.toLowerCase()}')">
+                </i-roll-visualizer>
                 `;
             }
             if (isParentPropertyRefExp(element)) {
@@ -1217,15 +1217,15 @@ function generateVueComponentTemplate(entry, id, document) {
                 });
                 refChoices = refChoices.filter(x => x != undefined);
                 const choices = refChoices.map(c => `{ label: '${c === null || c === void 0 ? void 0 : c.parent} - ${c === null || c === void 0 ? void 0 : c.name}', value: '${c === null || c === void 0 ? void 0 : c.path}' }`).join(", ");
-                return expandToNode `
-                <i-parent-property-reference
-                    :context="context"
-                    label="${label}"
-                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                    systemPath="${systemPath}"
-                    :refChoices="[${choices}]"
-                    ${standardParamsFragment}>
-                </i-parent-property-reference>
+                return expandToNode `
+                <i-parent-property-reference
+                    :context="context"
+                    label="${label}"
+                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                    systemPath="${systemPath}"
+                    :refChoices="[${choices}]"
+                    ${standardParamsFragment}>
+                </i-parent-property-reference>
                 `;
             }
             if (isSelfPropertyRefExp(element)) {
@@ -1234,8 +1234,8 @@ function generateVueComponentTemplate(entry, id, document) {
                 // Get the current document
                 const currentDocument = getDocument(element);
                 if (!currentDocument) {
-                    return expandToNode `
-                    <div class="error">Self property reference error: Cannot find current document</div>
+                    return expandToNode `
+                    <div class="error">Self property reference error: Cannot find current document</div>
                     `;
                 }
                 switch (element.propertyType) {
@@ -1294,42 +1294,42 @@ function generateVueComponentTemplate(entry, id, document) {
                     refChoices = refChoices.filter(x => allowedProperties.includes(x.name.toLowerCase()));
                 }
                 const choices = refChoices.map(c => `{ title: '${c.name}', value: '${c.path}' }`).join(", ");
-                return expandToNode `
-                <i-self-property-reference
-                    :context="context"
-                    label="${label}"
-                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                    systemPath="${systemPath}"
-                    propertyType="${element.propertyType}"
-                    :choices="[${choices}]"
-                    ${standardParamsFragment}>
-                </i-self-property-reference>
+                return expandToNode `
+                <i-self-property-reference
+                    :context="context"
+                    label="${label}"
+                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                    systemPath="${systemPath}"
+                    propertyType="${element.propertyType}"
+                    :choices="[${choices}]"
+                    ${standardParamsFragment}>
+                </i-self-property-reference>
                 `;
             }
             if (isStringExp(element)) {
                 const valueParam = element.params.find(p => isStringParamValue(p));
                 if (valueParam !== undefined) {
-                    return expandToNode `
-                    <i-string
-                        :context="context"
-                        label="${label}"
-                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                        systemPath="${systemPath}"
-                        ${standardParamsFragment}>
-                    </i-string>
+                    return expandToNode `
+                    <i-string
+                        :context="context"
+                        label="${label}"
+                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                        systemPath="${systemPath}"
+                        ${standardParamsFragment}>
+                    </i-string>
                     `;
                 }
-                return expandToNode `
-                    <i-text-field
-                        label="${label}"
-                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                        systemPath="${systemPath}"
-                        ${standardParamsFragment}
-                        :context="context"
-                        :editMode="editModeRef"
-                        :primaryColor="primaryColor"
-                        :secondaryColor="secondaryColor">
-                    </i-text-field>
+                return expandToNode `
+                    <i-text-field
+                        label="${label}"
+                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                        systemPath="${systemPath}"
+                        ${standardParamsFragment}
+                        :context="context"
+                        :editMode="editModeRef"
+                        :primaryColor="primaryColor"
+                        :secondaryColor="secondaryColor">
+                    </i-text-field>
                 `;
             }
             if (isStringChoiceField(element)) {
@@ -1370,18 +1370,18 @@ function generateVueComponentTemplate(entry, id, document) {
                     }
                     return expandToNode `{ label: game.i18n.localize('${document.name}.${choiceField.name}.${choiceValue(choice)}'), value: '${choiceValue(choice)}', icon: '${(_c = icon === null || icon === void 0 ? void 0 : icon.value) !== null && _c !== void 0 ? _c : ""}', color: '${(_d = color === null || color === void 0 ? void 0 : color.value) !== null && _d !== void 0 ? _d : ""}' }`;
                 }
-                return expandToNode `
-                    <i-string-choice
-                        :context="context"
-                        label="${label}.label"
-                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                        systemPath="${systemPath}"
-                        :items="[${joinToNode(choicesParam.choices, choiceData, { separator: ',', appendNewLineIfNotEmpty: true })}]"
-                        :isExtended="true"
-                        :primaryColor="primaryColor"
-                        :secondaryColor="secondaryColor"
-                        ${standardParamsFragment}>
-                    </i-string-choice>
+                return expandToNode `
+                    <i-string-choice
+                        :context="context"
+                        label="${label}.label"
+                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                        systemPath="${systemPath}"
+                        :items="[${joinToNode(choicesParam.choices, choiceData, { separator: ',', appendNewLineIfNotEmpty: true })}]"
+                        :isExtended="true"
+                        :primaryColor="primaryColor"
+                        :secondaryColor="secondaryColor"
+                        ${standardParamsFragment}>
+                    </i-string-choice>
                     `;
             }
             if (isDamageTypeChoiceField(element)) {
@@ -1428,18 +1428,18 @@ function generateVueComponentTemplate(entry, id, document) {
                     }
                     return expandToNode `{ label: game.i18n.localize('${document.name}.${choiceField.name}.${choiceValue(choice)}'), value: '${choiceValue(choice)}', icon: '${(_c = icon === null || icon === void 0 ? void 0 : icon.value) !== null && _c !== void 0 ? _c : ""}', color: '${(_d = color === null || color === void 0 ? void 0 : color.value) !== null && _d !== void 0 ? _d : ""}' }`;
                 }
-                return expandToNode `
-                    <i-string-choice
-                        :context="context"
-                        label="${label}.label"
-                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                        systemPath="${systemPath}"
-                        :items="[${joinToNode(choicesParam.choices, choiceData, { separator: ',', appendNewLineIfNotEmpty: true })}]"
-                        :isExtended="true"
-                        :primaryColor="primaryColor"
-                        :secondaryColor="secondaryColor"
-                        ${standardParamsFragment}>
-                    </i-string-choice>
+                return expandToNode `
+                    <i-string-choice
+                        :context="context"
+                        label="${label}.label"
+                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                        systemPath="${systemPath}"
+                        :items="[${joinToNode(choicesParam.choices, choiceData, { separator: ',', appendNewLineIfNotEmpty: true })}]"
+                        :isExtended="true"
+                        :primaryColor="primaryColor"
+                        :secondaryColor="secondaryColor"
+                        ${standardParamsFragment}>
+                    </i-string-choice>
                     `;
             }
             if (isStringChoicesField(element)) {
@@ -1483,106 +1483,106 @@ function generateVueComponentTemplate(entry, id, document) {
                 // Get maxSelections parameter
                 const maxParam = element.params.find(p => p.$type === 'StringChoicesParamMax');
                 const maxSelections = maxParam ? maxParam.value : undefined;
-                return expandToNode `
-                    <i-string-choices
-                        :context="context"
-                        label="${label}.label"
-                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                        systemPath="${systemPath}"
-                        :items="[${joinToNode(choicesParam.choices, choiceData, { separator: ',', appendNewLineIfNotEmpty: true })}]"
-                        :isExtended="true"
-                        ${maxSelections ? `:maxSelections="${maxSelections}"` : ''}
-                        :primaryColor="primaryColor"
-                        :secondaryColor="secondaryColor"
-                        ${standardParamsFragment}>
-                    </i-string-choices>
+                return expandToNode `
+                    <i-string-choices
+                        :context="context"
+                        label="${label}.label"
+                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                        systemPath="${systemPath}"
+                        :items="[${joinToNode(choicesParam.choices, choiceData, { separator: ',', appendNewLineIfNotEmpty: true })}]"
+                        :isExtended="true"
+                        ${maxSelections ? `:maxSelections="${maxSelections}"` : ''}
+                        :primaryColor="primaryColor"
+                        :secondaryColor="secondaryColor"
+                        ${standardParamsFragment}>
+                    </i-string-choices>
                     `;
             }
             if (isDocumentChoiceExp(element)) {
                 const componentName = `${document.name.toLowerCase()}${element.name}DocumentChoice`;
-                return expandToNode `
-                    <${componentName}
-                        label="${label}"
-                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                        :context="context"
-                        :editMode="editModeRef"
-                        ${standardParamsFragment}
-                        :primaryColor="primaryColor"
-                        :secondaryColor="secondaryColor">
-                    </${componentName}>
+                return expandToNode `
+                    <${componentName}
+                        label="${label}"
+                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                        :context="context"
+                        :editMode="editModeRef"
+                        ${standardParamsFragment}
+                        :primaryColor="primaryColor"
+                        :secondaryColor="secondaryColor">
+                    </${componentName}>
                 `;
             }
             if (isDocumentChoicesExp(element)) {
                 const componentName = `${document.name.toLowerCase()}${element.name}DocumentChoices`;
-                return expandToNode `
-                    <${componentName}
-                        label="${label}"
-                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                        :context="context"
-                        :editMode="editModeRef"
-                        ${standardParamsFragment}
-                        :primaryColor="primaryColor"
-                        :secondaryColor="secondaryColor">
-                    </${componentName}>
+                return expandToNode `
+                    <${componentName}
+                        label="${label}"
+                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                        :context="context"
+                        :editMode="editModeRef"
+                        ${standardParamsFragment}
+                        :primaryColor="primaryColor"
+                        :secondaryColor="secondaryColor">
+                    </${componentName}>
                 `;
             }
             if (isMacroField(element)) {
-                return expandToNode `
-                    <i-macro
-                        label="${label}"
-                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                        systemPath="${systemPath}"
-                        ${standardParamsFragment}
-                        :context="context"
-                        :editMode="editModeRef"
-                        :primaryColor="primaryColor"
-                        :secondaryColor="secondaryColor">
-                    </i-macro>
+                return expandToNode `
+                    <i-macro
+                        label="${label}"
+                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                        systemPath="${systemPath}"
+                        ${standardParamsFragment}
+                        :context="context"
+                        :editMode="editModeRef"
+                        :primaryColor="primaryColor"
+                        :secondaryColor="secondaryColor">
+                    </i-macro>
                 `;
             }
             if (isHtmlExp(element)) {
-                return expandToNode `
-                <i-prosemirror
-                    label="${label}"
-                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                    :field="context.editors['${systemPath}']"
-                    ${standardParamsFragment}>
-                </i-prosemirror>
+                return expandToNode `
+                <i-prosemirror
+                    label="${label}"
+                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                    :field="context.editors['${systemPath}']"
+                    ${standardParamsFragment}>
+                </i-prosemirror>
                 `;
             }
             if (isMeasuredTemplateField(element)) {
-                return expandToNode `
-                <i-measured-template
-                    :context="context"
-                    label="${label}"
-                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                    systemPath="${systemPath}"
-                    :primaryColor="primaryColor"
-                    :secondaryColor="secondaryColor"
-                    ${standardParamsFragment}>
-                </i-measured-template>
+                return expandToNode `
+                <i-measured-template
+                    :context="context"
+                    label="${label}"
+                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                    systemPath="${systemPath}"
+                    :primaryColor="primaryColor"
+                    :secondaryColor="secondaryColor"
+                    ${standardParamsFragment}>
+                </i-measured-template>
                 `;
             }
             if (isDamageBonusesField(element)) {
-                return expandToNode `
-                <i-bonuses
-                    :context="context"
-                    label="${label}"
-                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                    systemPath="${systemPath}"
-                    ${standardParamsFragment}>
-                </i-bonuses>
+                return expandToNode `
+                <i-bonuses
+                    :context="context"
+                    label="${label}"
+                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                    systemPath="${systemPath}"
+                    ${standardParamsFragment}>
+                </i-bonuses>
                 `;
             }
             if (isDamageResistancesField(element)) {
-                return expandToNode `
-                <i-resistances
-                    :context="context"
-                    label="${label}"
-                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                    systemPath="${systemPath}"
-                    ${standardParamsFragment}>
-                </i-resistances>
+                return expandToNode `
+                <i-resistances
+                    :context="context"
+                    label="${label}"
+                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                    systemPath="${systemPath}"
+                    ${standardParamsFragment}>
+                </i-resistances>
                 `;
             }
             if (isPinnedField(element)) {
@@ -1594,27 +1594,27 @@ function generateVueComponentTemplate(entry, id, document) {
                 let componentName = `${document.name}${pageName}${element.name}VuetifyDatatable`;
                 // Wrap in a drop zone so drag-drop works for pinned tables inside a
                 // row/column (same reason as regular tables above).
-                return expandToNode `
-                <div class="datatable-drop-zone" v-if="!isHidden('${element.name.toLowerCase()}')">
-                    <${componentName}
-                        :context="context"
-                        label="${label}"
-                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                        systemPath="${systemPath}"
-                        :primaryColor="primaryColor" :secondaryColor="secondaryColor" :tertiaryColor="tertiaryColor">
-                    </${componentName}>
-                </div>
+                return expandToNode `
+                <div class="datatable-drop-zone" v-if="!isHidden('${element.name.toLowerCase()}')">
+                    <${componentName}
+                        :context="context"
+                        label="${label}"
+                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                        systemPath="${systemPath}"
+                        :primaryColor="primaryColor" :secondaryColor="secondaryColor" :tertiaryColor="tertiaryColor">
+                    </${componentName}>
+                </div>
                 `;
             }
             if (isBooleanExp(element)) {
-                return expandToNode `
-                <i-boolean
-                    :context="context"
-                    label="${label}"
-                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                    systemPath="${systemPath}"
-                    ${standardParamsFragment}>
-                </i-boolean>
+                return expandToNode `
+                <i-boolean
+                    :context="context"
+                    label="${label}"
+                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                    systemPath="${systemPath}"
+                    ${standardParamsFragment}>
+                </i-boolean>
                 `;
             }
             if (isNumberExp(element)) {
@@ -1632,21 +1632,21 @@ function generateVueComponentTemplate(entry, id, document) {
                 if (maxParam && typeof maxParam.value === 'number') {
                     maxValue = maxParam.value;
                 }
-                return expandToNode `
-                <i-number
-                    :context="context"
-                    label="${label}"
-                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                    systemPath="${systemPath}"
-                    :hasValueParam="${valueParam != undefined}"
-                    :editMode="editModeRef"
-                    :primaryColor="primaryColor"
-                    :secondaryColor="secondaryColor"
-                    ${minValue !== undefined ? `:min="${minValue}"` : ''}
-                    ${maxValue !== undefined ? `:max="${maxValue}"` : ''}
-                    ${calculatorParam !== undefined ? `:calculator="${calculatorParam.value}"` : ''}
-                    ${standardParamsFragment}>
-                </i-number>
+                return expandToNode `
+                <i-number
+                    :context="context"
+                    label="${label}"
+                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                    systemPath="${systemPath}"
+                    :hasValueParam="${valueParam != undefined}"
+                    :editMode="editModeRef"
+                    :primaryColor="primaryColor"
+                    :secondaryColor="secondaryColor"
+                    ${minValue !== undefined ? `:min="${minValue}"` : ''}
+                    ${maxValue !== undefined ? `:max="${maxValue}"` : ''}
+                    ${calculatorParam !== undefined ? `:calculator="${calculatorParam.value}"` : ''}
+                    ${standardParamsFragment}>
+                </i-number>
                 `;
             }
             if (isMoneyField(element)) {
@@ -1668,22 +1668,22 @@ function generateVueComponentTemplate(entry, id, document) {
                     }).join(', ');
                     denominationsArray = `[${denominations}]`;
                 }
-                return expandToNode `
-                <i-money
-                    :context="context"
-                    label="${label}"
-                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                    systemPath="${systemPath}"
-                    format="${format}"
-                    :precision="${precision}"
-                    display="${display}"
-                    :denominations="${denominationsArray}"
-                    :hasValueParam="${valueParam != undefined}"
-                    :editMode="editModeRef"
-                    :primaryColor="primaryColor"
-                    :secondaryColor="secondaryColor"
-                    ${standardParamsFragment}>
-                </i-money>
+                return expandToNode `
+                <i-money
+                    :context="context"
+                    label="${label}"
+                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                    systemPath="${systemPath}"
+                    format="${format}"
+                    :precision="${precision}"
+                    display="${display}"
+                    :denominations="${denominationsArray}"
+                    :hasValueParam="${valueParam != undefined}"
+                    :editMode="editModeRef"
+                    :primaryColor="primaryColor"
+                    :secondaryColor="secondaryColor"
+                    ${standardParamsFragment}>
+                </i-money>
                 `;
             }
             if (isAttributeExp(element)) {
@@ -1704,25 +1704,25 @@ function generateVueComponentTemplate(entry, id, document) {
                 // roll: keeps the die icon; function: shows the attribute's own icon (or a generic
                 // action bolt) so the overlay reflects what the click actually triggers.
                 const clickIcon = functionParam ? ((_h = iconParam === null || iconParam === void 0 ? void 0 : iconParam.value) !== null && _h !== void 0 ? _h : "fa-solid fa-bolt") : "fa-solid fa-dice";
-                return expandToNode `
-                    <i-attribute
-                        label="${label}"
-                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                        attributeStyle="${style}"
-                        :editMode="editModeRef"
-                        :hasMod="${hasMod}"
-                        :mod="context.${modSystemPath}"
-                        systemPath="${valueSystemPath}"
-                        :context="context"
-                        :min="${min}"
-                        ${standardParamsFragment}
-                        :primaryColor="primaryColor"
-                        :secondaryColor="secondaryColor"
-                        :roll="${clickHandler}"
-                        :hasRoll="${rollParam != undefined || functionParam != undefined}"
-                        clickIcon="${clickIcon}"
-                        >
-                    </i-attribute>
+                return expandToNode `
+                    <i-attribute
+                        label="${label}"
+                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                        attributeStyle="${style}"
+                        :editMode="editModeRef"
+                        :hasMod="${hasMod}"
+                        :mod="context.${modSystemPath}"
+                        systemPath="${valueSystemPath}"
+                        :context="context"
+                        :min="${min}"
+                        ${standardParamsFragment}
+                        :primaryColor="primaryColor"
+                        :secondaryColor="secondaryColor"
+                        :roll="${clickHandler}"
+                        :hasRoll="${rollParam != undefined || functionParam != undefined}"
+                        clickIcon="${clickIcon}"
+                        >
+                    </i-attribute>
                 `;
             }
             // if () {
@@ -1745,17 +1745,17 @@ function generateVueComponentTemplate(entry, id, document) {
                 const max = (_k = maxParam === null || maxParam === void 0 ? void 0 : maxParam.value) !== null && _k !== void 0 ? _k : 5;
                 const colorParam = element.params.find(x => isColorParam(x));
                 const primaryColor = colorParam ? `'${colorParam.value}'` : "primaryColor";
-                return expandToNode `
-                <i-damage-track
-                    label="${label}"
-                    systemPath="system.${element.name.toLowerCase()}"
-                    :context="context"
-                    :editMode="editModeRef"
-                    :primaryColor="${primaryColor}"
-                    :secondaryColor="secondaryColor"
-                    :types="[${types.map(t => `'${t}'`).join(', ')}]"
-                    :max="${max}"
-                ></i-damage-track>
+                return expandToNode `
+                <i-damage-track
+                    label="${label}"
+                    systemPath="system.${element.name.toLowerCase()}"
+                    :context="context"
+                    :editMode="editModeRef"
+                    :primaryColor="${primaryColor}"
+                    :secondaryColor="secondaryColor"
+                    :types="[${types.map(t => `'${t}'`).join(', ')}]"
+                    :max="${max}"
+                ></i-damage-track>
                 `;
             }
             if (isTrackerExp(element) || isResourceExp(element)) {
@@ -1781,75 +1781,75 @@ function generateVueComponentTemplate(entry, id, document) {
                     isHealth = element.tag == "health";
                     isWounds = element.tag == "wounds";
                 }
-                return expandToNode `
-                <i-tracker 
-                    label="${label}"
-                    systemPath="system.${element.name.toLowerCase()}" :context="context" 
-                    :visibility="visibilityStates['${element.name.toLowerCase()}'].value"
-                    :editMode="editModeRef"
-                    :primaryColor="${primaryColor}" :secondaryColor="secondaryColor" :tertiaryColor="tertiaryColor"
-                    trackerStyle="${style}"
-                    icon="${icon}" 
-                    :hideMin="${hideMin}"
-                    :disableMin="${disableMin}"
-                    :disableValue="${disableValue}"
-                    :disableMax="${disableMax}"
-                    :segments="${segments}"
-                    :isHealth="${isHealth}"
-                    :isWounds="${isWounds}"
-                    ></i-tracker>
+                return expandToNode `
+                <i-tracker 
+                    label="${label}"
+                    systemPath="system.${element.name.toLowerCase()}" :context="context" 
+                    :visibility="visibilityStates['${element.name.toLowerCase()}'].value"
+                    :editMode="editModeRef"
+                    :primaryColor="${primaryColor}" :secondaryColor="secondaryColor" :tertiaryColor="tertiaryColor"
+                    trackerStyle="${style}"
+                    icon="${icon}" 
+                    :hideMin="${hideMin}"
+                    :disableMin="${disableMin}"
+                    :disableValue="${disableValue}"
+                    :disableMax="${disableMax}"
+                    :segments="${segments}"
+                    :isHealth="${isHealth}"
+                    :isWounds="${isWounds}"
+                    ></i-tracker>
                 `;
             }
             if (isSingleDocumentExp(element)) {
-                return expandToNode `
-                <i-document-link 
-                    label="${label}"
-                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                    systemPath="system.${element.name.toLowerCase()}" 
-                    documentName="${(_p = element.document.ref) === null || _p === void 0 ? void 0 : _p.name.toLowerCase()}" 
-                    :context="context" 
-                    ${standardParamsFragment} 
-                    :secondaryColor="secondaryColor">
-                </i-document-link>
+                return expandToNode `
+                <i-document-link 
+                    label="${label}"
+                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                    systemPath="system.${element.name.toLowerCase()}" 
+                    documentName="${(_p = element.document.ref) === null || _p === void 0 ? void 0 : _p.name.toLowerCase()}" 
+                    :context="context" 
+                    ${standardParamsFragment} 
+                    :secondaryColor="secondaryColor">
+                </i-document-link>
                 `;
             }
             if (isDateExp(element)) {
-                return expandToNode `
-                <i-datetime 
-                    type="date" 
-                    label="${label}"
-                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                    systemPath="system.${element.name.toLowerCase()}" 
-                    :context="context" 
-                    ${standardParamsFragment}
-                    :primaryColor="primaryColor" :secondaryColor="secondaryColor">
-                </i-datetime>
+                return expandToNode `
+                <i-datetime 
+                    type="date" 
+                    label="${label}"
+                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                    systemPath="system.${element.name.toLowerCase()}" 
+                    :context="context" 
+                    ${standardParamsFragment}
+                    :primaryColor="primaryColor" :secondaryColor="secondaryColor">
+                </i-datetime>
                 `;
             }
             if (isTimeExp(element)) {
-                return expandToNode `
-                <i-datetime 
-                    type="time" 
-                    label="${label}"
-                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                    systemPath="system.${element.name.toLowerCase()}" 
-                    :context="context" 
-                    ${standardParamsFragment}
-                    :primaryColor="primaryColor" :secondaryColor="secondaryColor">
-                </i-datetime>
+                return expandToNode `
+                <i-datetime 
+                    type="time" 
+                    label="${label}"
+                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                    systemPath="system.${element.name.toLowerCase()}" 
+                    :context="context" 
+                    ${standardParamsFragment}
+                    :primaryColor="primaryColor" :secondaryColor="secondaryColor">
+                </i-datetime>
                 `;
             }
             if (isDateTimeExp(element)) {
-                return expandToNode `
-                <i-datetime 
-                    type="datetime-local" 
-                    label="${label}"
-                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                    systemPath="system.${element.name.toLowerCase()}" 
-                    :context="context" 
-                    ${standardParamsFragment}
-                    :primaryColor="primaryColor" :secondaryColor="secondaryColor">
-                </i-datetime>
+                return expandToNode `
+                <i-datetime 
+                    type="datetime-local" 
+                    label="${label}"
+                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                    systemPath="system.${element.name.toLowerCase()}" 
+                    :context="context" 
+                    ${standardParamsFragment}
+                    :primaryColor="primaryColor" :secondaryColor="secondaryColor">
+                </i-datetime>
                 `;
             }
             if (isPaperDollExp(element)) {
@@ -1857,17 +1857,17 @@ function generateVueComponentTemplate(entry, id, document) {
                 let size = (_q = sizeParam === null || sizeParam === void 0 ? void 0 : sizeParam.value) !== null && _q !== void 0 ? _q : "40px";
                 let imageParam = element.params.find(x => isImageParam(x));
                 let image = (_r = imageParam === null || imageParam === void 0 ? void 0 : imageParam.value) !== null && _r !== void 0 ? _r : `systems/${id}/img/paperdoll_default.png`;
-                return expandToNode `
-                <i-paperdoll 
-                    label="${label}"
-                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                    systemPath="system.${element.name.toLowerCase()}" 
-                    :context="context" 
-                    ${standardParamsFragment}
-                    image="${image}" 
-                    size="${size}" 
-                    :slots="${element.name.toLowerCase()}Slots">
-                </i-paperdoll>
+                return expandToNode `
+                <i-paperdoll 
+                    label="${label}"
+                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                    systemPath="system.${element.name.toLowerCase()}" 
+                    :context="context" 
+                    ${standardParamsFragment}
+                    image="${image}" 
+                    size="${size}" 
+                    :slots="${element.name.toLowerCase()}Slots">
+                </i-paperdoll>
                 `;
             }
             if (isDiceFields(element)) {
@@ -1876,32 +1876,32 @@ function generateVueComponentTemplate(entry, id, document) {
                 let noneParam = element.params.find(x => isDieNoneParam(x));
                 let noneAttr = (noneParam === null || noneParam === void 0 ? void 0 : noneParam.value) ? `:none="true"` : '';
                 if (isDieField(element)) {
-                    return expandToNode `
-                    <i-die
-                        :context="context"
-                        label="${label}"
-                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                        systemPath="${systemPath}"
-                        :choices="${choices}"
-                        ${noneAttr}
-                        ${standardParamsFragment}>
-                    </i-die>
+                    return expandToNode `
+                    <i-die
+                        :context="context"
+                        label="${label}"
+                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                        systemPath="${systemPath}"
+                        :choices="${choices}"
+                        ${noneAttr}
+                        ${standardParamsFragment}>
+                    </i-die>
                     `;
                 }
                 if (isDiceField(element)) {
-                    return expandToNode `
-                        <i-dice
-                            label="${label}"
-                            icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
-                            systemPath="system.${element.name.toLowerCase()}"
-                            :context="context"
-                            :editMode="editModeRef"
-                            :disabled="isDisabled('${element.name.toLowerCase()}')"
-                            v-if="!isHidden('${element.name.toLowerCase()}')"
-                            :choices="${choices}"
-                            :primaryColor="primaryColor"
-                            :secondaryColor="secondaryColor"
-                        />
+                    return expandToNode `
+                        <i-dice
+                            label="${label}"
+                            icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                            systemPath="system.${element.name.toLowerCase()}"
+                            :context="context"
+                            :editMode="editModeRef"
+                            :disabled="isDisabled('${element.name.toLowerCase()}')"
+                            v-if="!isHidden('${element.name.toLowerCase()}')"
+                            :choices="${choices}"
+                            :primaryColor="primaryColor"
+                            :secondaryColor="secondaryColor"
+                        />
                     `;
                 }
             }
@@ -1917,10 +1917,10 @@ function generateVueComponentTemplate(entry, id, document) {
                 // sheet's drop target); layout-rendered tables aren't, so without this
                 // wrapper they have no drop target. The wrapper only exists in the layout
                 // case (never nested inside a .tabs-container), so no double drop binding.
-                return expandToNode `
-                    <div class="datatable-drop-zone" v-if="!isHidden('${element.name.toLowerCase()}')">
-                        <${componentName} systemPath="${systemPath}" :context="context" :primaryColor="primaryColor" :secondaryColor="secondaryColor" :tertiaryColor="tertiaryColor"></${componentName}>
-                    </div>
+                return expandToNode `
+                    <div class="datatable-drop-zone" v-if="!isHidden('${element.name.toLowerCase()}')">
+                        <${componentName} systemPath="${systemPath}" :context="context" :primaryColor="primaryColor" :secondaryColor="secondaryColor" :tertiaryColor="tertiaryColor"></${componentName}>
+                    </div>
                 `.appendNewLine();
             }
             if (isInventoryField(element)) {
@@ -2009,43 +2009,43 @@ function generateVueComponentTemplate(entry, id, document) {
                     const whereNode = translateExpression(entry, id, whereParam.value);
                     whereExpression = whereNode ? toString(whereNode) : undefined;
                 }
-                return expandToNode `
-                    <i-inventory
-                        v-if="!isHidden('${element.name.toLowerCase()}')"
-                        label="${label}"
-                        systemPath="${systemPath}"
-                        :context="context"
-                        :editMode="editModeRef"
-                        ${icon ? `icon="${icon}"` : ''}
-                        ${slots ? `:maxSlots="${slots}"` : ''}
-                        ${rows ? `:rows="${rows}"` : ''}
-                        ${columns ? `:columns="${columns}"` : ''}
-                        :slotSize="${slotSize}"
-                        documentType="${documentType}"
-                        ${whereExpression ? `whereExpression="${whereExpression}"` : ''}
-                        ${globalAllowed ? ':globalAllowed="true"' : ''}
-                        ${quantityField ? `quantityField="${quantityField}"` : ''}
-                        ${moneyField ? `moneyField="${moneyField}"` : ''}
-                        ${moneyFieldLabel ? `moneyFieldLabel="${moneyFieldLabel}"` : ''}
-                        ${moneyFieldIcon ? `moneyFieldIcon="${moneyFieldIcon}"` : ''}
-                        ${sumProperties.length > 0 ? `:sumProperties='${JSON.stringify(sumProperties)}'` : ''}
-                        ${sumMax ? `:sumMax="${sumMax}"` : ''}
-                        ${sortProperty ? `sortProperty="${sortProperty}"` : ''}
-                        sortOrder="${sortOrder}"
-                        emptySlots="${emptySlots}"
-                        summary="${summary}"
-                        :primaryColor="primaryColor"
-                        :secondaryColor="secondaryColor"
-                        :tertiaryColor="tertiaryColor"
-                    />
+                return expandToNode `
+                    <i-inventory
+                        v-if="!isHidden('${element.name.toLowerCase()}')"
+                        label="${label}"
+                        systemPath="${systemPath}"
+                        :context="context"
+                        :editMode="editModeRef"
+                        ${icon ? `icon="${icon}"` : ''}
+                        ${slots ? `:maxSlots="${slots}"` : ''}
+                        ${rows ? `:rows="${rows}"` : ''}
+                        ${columns ? `:columns="${columns}"` : ''}
+                        :slotSize="${slotSize}"
+                        documentType="${documentType}"
+                        ${whereExpression ? `whereExpression="${whereExpression}"` : ''}
+                        ${globalAllowed ? ':globalAllowed="true"' : ''}
+                        ${quantityField ? `quantityField="${quantityField}"` : ''}
+                        ${moneyField ? `moneyField="${moneyField}"` : ''}
+                        ${moneyFieldLabel ? `moneyFieldLabel="${moneyFieldLabel}"` : ''}
+                        ${moneyFieldIcon ? `moneyFieldIcon="${moneyFieldIcon}"` : ''}
+                        ${sumProperties.length > 0 ? `:sumProperties='${JSON.stringify(sumProperties)}'` : ''}
+                        ${sumMax ? `:sumMax="${sumMax}"` : ''}
+                        ${sortProperty ? `sortProperty="${sortProperty}"` : ''}
+                        sortOrder="${sortOrder}"
+                        emptySlots="${emptySlots}"
+                        summary="${summary}"
+                        :primaryColor="primaryColor"
+                        :secondaryColor="secondaryColor"
+                        :tertiaryColor="tertiaryColor"
+                    />
                 `.appendNewLine();
             }
-            return expandToNode `
-            <v-alert text="Unknown Property ${element.name}" type="warning" density="compact" class="ga-2 ma-1" variant="outlined"></v-alert>
+            return expandToNode `
+            <v-alert text="Unknown Property ${element.name}" type="warning" density="compact" class="ga-2 ma-1" variant="outlined"></v-alert>
             `;
         }
-        return expandToNode `
-        <v-alert text="Unknown Element" type="warning" density="compact" class="ga-2 ma-1" variant="outlined"></v-alert>
+        return expandToNode `
+        <v-alert text="Unknown Element" type="warning" density="compact" class="ga-2 ma-1" variant="outlined"></v-alert>
         `;
     }
 }