intelligent-system-design-language 0.3.13

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

@@ -0,0 +1,2008 @@
+import * as path from 'node:path';
+import * as fs from 'node:fs';
+import { expandToNode, joinToNode, toString } from 'langium/generate';
+import { isAccess, isAction, isActor, isAttributeExp, isAttributeParamMod, isAttributeRollParam, isAttributeStyleParam, isBackgroundParam, isBooleanExp, isBooleanParamValue, isChoiceCustomProperty, isChoiceStringValue, isColorParam, isColumn, isDateExp, isDateTimeExp, isDiceField, isDiceFields, isDieChoicesParam, isDieNoneParam, isDieField, isDocumentChoiceExp, isDocumentChoicesExp, isEntry, isHtmlExp, isIconParam, isImageParam, isLabelParam, isMacroField, isMeasuredTemplateField, isDamageBonusesField, isDamageResistancesField, isPinnedField, isMoneyField, isDamageTrackExp, isDamageTrackTypesParam, isMethodBlock, isNumberExp, isNumberParamMax, isNumberParamMin, isNumberParamValue, isNumberParamCalculator, isPage, isPaperDollExp, isParentPropertyRefChoiceParam, isParentPropertyRefExp, isSelfPropertyRefExp, isProperty, isResourceExp, isRow, isSection, isSegmentsParameter, isSingleDocumentExp, isSizeParam, isStatusProperty, isStringChoiceField, isDamageTypeChoiceField, isStringChoicesField, isStringExp, isStringExtendedChoice, isStringParamChoices, isStringParamValue, isTableField, isTimeExp, isTrackerExp, isTrackerStyleParameter, isVisibilityParam, isInventoryField, isInventorySlotsParam, isInventoryRowsParam, isInventoryColumnsParam, isInventorySlotSizeParam, isInventoryQuantityParam, isInventoryMoneyParam, isInventorySumParam, isInventorySumMaxParam, isInventorySortParam, isInventoryEmptySlotsParam, isInventorySummaryParam, isWhereParam, isGlobalParam } from "../../../language/generated/ast.js";
+import { getAllOfType, getDocument, getSystemPath, globalGetAllOfType, toMachineIdentifier } from '../utils.js';
+import { AstUtils } from 'langium';
+import { generateActionComponent } from './vue-action-component-generator.js';
+import { generatePinnedVuetifyDatatableComponent } from './vue-pinned-datatable-component-generator.js';
+// import {generateDocumentChoiceComponent} from './vue-document-choice-component-generator.js';
+import { generateDocumentChoicesComponent } from './base-components/vue-document-choices.js';
+import { translateBodyExpressionToJavascript, translateExpression } from '../method-generator.js';
+import { humanize } from "inflection";
+import { generateVuetifyDatatableComponent } from "./vue-datatable2-component-generator.js";
+import { generateDocumentChoiceComponent } from "./base-components/vue-document-choice.js";
+export function generateDocumentVueComponent(entry, id, document, destination) {
+    const type = isActor(document) ? 'actor' : 'item';
+    const generatedFileDir = path.join(destination, "system", "templates", "vue", type, document.name.toLowerCase());
+    const generatedFilePath = path.join(generatedFileDir, `${document.name.toLowerCase()}App.vue`);
+    if (!fs.existsSync(generatedFileDir)) {
+        fs.mkdirSync(generatedFileDir, { recursive: true });
+    }
+    const fileNode = expandToNode `
+    ${generateVueComponentScript(entry, id, document, destination)}
+    ${generateVueComponentTemplate(entry, id, document)}
+    `.appendNewLineIfNotEmpty();
+    fs.writeFileSync(generatedFilePath, toString(fileNode));
+}
+function generateVueComponentScript(entry, id, document, destination) {
+    const pages = getAllOfType(document.body, isPage);
+    const actions = getAllOfType(document.body, isAction, false);
+    const paperDoll = getAllOfType(document.body, isPaperDollExp);
+    const documentChoices = getAllOfType(document.body, isDocumentChoiceExp);
+    const documentChoicesPlural = getAllOfType(document.body, isDocumentChoicesExp);
+    const firstPagePinned = document.body.filter(isPinnedField);
+    function getPageBackground(page) {
+        var _a, _b, _c;
+        const background = (_c = (_b = (_a = page.params) === null || _a === void 0 ? void 0 : _a.find(x => isBackgroundParam(x))) === null || _b === void 0 ? void 0 : _b.background) !== null && _c !== void 0 ? _c : 'topography';
+        return `'${page.name.toLowerCase()}': '${background}'`;
+    }
+    //let tables = getAllOfType<TableField>(document.body, isTableField, true);
+    let allTables = getAllOfType(document.body, isTableField, false);
+    function importDataTable2(table) {
+        const page = AstUtils.getContainerOfType(table, isPage);
+        const pageName = page ? page.name : document.name;
+        generateVuetifyDatatableComponent(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';
+        `;
+    }
+    function importEffectsDataTable() {
+        generateEffectsVuetifyDatatableComponent(id, document, destination);
+        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';
+        `;
+    }
+    function generateEffectsVuetifyDatatableComponent(id, document, destination) {
+        const type = isActor(document) ? 'actor' : 'item';
+        const generatedFileDir = path.join(destination, "system", "templates", "vue", type, document.name.toLowerCase(), "components", "datatables");
+        const generatedFilePath = path.join(generatedFileDir, `${document.name.toLowerCase()}EffectsVuetifyDatatable.vue`);
+        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>
+        `;
+        fs.writeFileSync(generatedFilePath, toString(fileNode));
+    }
+    function importPageOfPinnedDataTable(page) {
+        const pinned = getAllOfType(page.body, isPinnedField, 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';
+        `;
+    }
+    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';
+        `;
+    }
+    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';
+        `;
+    }
+    function paperDollSlots(element) {
+        var _a, _b, _c;
+        let slots = [];
+        for (const property of element.elements) {
+            slots.push({
+                name: property.name,
+                systemPath: `system.${element.name.toLowerCase()}.${property.name.toLowerCase()}`,
+                type: (_a = property.document.ref) === null || _a === void 0 ? void 0 : _a.name.toLowerCase(),
+                left: (_b = property.left) !== null && _b !== void 0 ? _b : "0px",
+                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 })}
+        ];
+        `;
+    }
+    const properties = getAllOfType(document.body, isProperty, false);
+    function isComputedField(element) {
+        if (isStringExp(element)) {
+            return element.params.find(isStringParamValue) !== undefined;
+        }
+        if (isBooleanExp(element)) {
+            return element.params.find(isBooleanParamValue) !== undefined;
+        }
+        if (isNumberExp(element) || isAttributeExp(element) || isResourceExp(element) || isTrackerExp(element) || isMoneyField(element)) {
+            const numberParams = element.params;
+            return numberParams.find(isNumberParamValue) !== undefined;
+        }
+        return false;
+    }
+    function generateVisibilityState(element) {
+        var _a;
+        if (isProperty(element) || isAction(element)) {
+            const standardParams = element.params;
+            const visibilityParam = standardParams.find(function (p) {
+                return isVisibilityParam(p);
+            });
+            // 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}';
+                })
+                `;
+            }
+            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(() => {
+                    return '${visibilityParam.visibility}';
+                })
+                `;
+            }
+        }
+        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: "",
+                    type: ${attribute.name}Context.parts.find(x => x.isRoll) ? null : CONST.CHAT_MESSAGE_STYLES.IC,
+                    rolls: Array.from(${attribute.name}Context.parts.filter(x => x.isRoll).map(x => x.value)),
+                });
+            };
+            `;
+        }
+        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';
+            teritaryColor.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 })}
+    </script>
+    <style>
+    </style>
+    `;
+}
+function generateVueComponentTemplate(entry, id, document) {
+    const pages = getAllOfType(document.body, isPage);
+    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>
+    `;
+    function generateSubTab(tab) {
+        var _a, _b;
+        const params = tab.params;
+        const iconParam = params.find((p) => isIconParam(p));
+        const icon = (_a = iconParam === null || iconParam === void 0 ? void 0 : iconParam.value) !== null && _a !== void 0 ? _a : "fa-solid fa-table";
+        const page = AstUtils.getContainerOfType(tab, isPage);
+        const pageName = page ? page.name : document.name;
+        // 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 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>
+        `;
+    }
+    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>
+        `;
+    }
+    function generateVuetifyDatatable(pageName, element) {
+        const systemPath = getSystemPath(element, [], undefined, false);
+        let componentName = `${document.name}${pageName}${element.name}VuetifyDatatable`;
+        return expandToNode `
+        <v-tabs-window-item value="${element.name.toLowerCase()}" data-tab="${element.name.toLowerCase()}" data-type="table" class="tabs-container">
+            <${componentName} systemPath="${systemPath}" :context="context" :primaryColor="primaryColor" :secondaryColor="secondaryColor" :teritaryColor="teritaryColor"></${componentName}>
+        </v-tabs-window-item>
+        `.appendNewLine();
+    }
+    function generateInventoryTabWindow(pageName, element) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        const systemPath = getSystemPath(element, [], undefined, false);
+        const iconParam = element.params.find(p => isIconParam(p));
+        const labelParam = element.params.find(p => isLabelParam(p));
+        const slotsParam = element.params.find(isInventorySlotsParam);
+        const rowsParam = element.params.find(isInventoryRowsParam);
+        const slotSizeParam = element.params.find(isInventorySlotSizeParam);
+        const quantityParam = element.params.find(isInventoryQuantityParam);
+        const moneyParam = element.params.find(isInventoryMoneyParam);
+        const sumParam = element.params.find(isInventorySumParam);
+        const sumMaxParam = element.params.find(isInventorySumMaxParam);
+        const sortParam = element.params.find(isInventorySortParam);
+        const whereParam = element.params.find(isWhereParam);
+        const globalParam = element.params.find(isGlobalParam);
+        const emptySlotsParam = element.params.find(isInventoryEmptySlotsParam);
+        const summaryParam = element.params.find(isInventorySummaryParam);
+        const label = labelParam ? labelParam.value : `${document.name}.${element.name}`;
+        const icon = iconParam === null || iconParam === void 0 ? void 0 : iconParam.value;
+        const slots = (_a = slotsParam === null || slotsParam === void 0 ? void 0 : slotsParam.value) !== null && _a !== void 0 ? _a : 20;
+        const rows = rowsParam === null || rowsParam === void 0 ? void 0 : rowsParam.value;
+        const slotSize = slotSizeParam ? parseInt(slotSizeParam.value.replace('px', '')) : 60;
+        const documentType = (_b = element.document.ref) === null || _b === void 0 ? void 0 : _b.name.toLowerCase();
+        const quantityField = (_c = quantityParam === null || quantityParam === void 0 ? void 0 : quantityParam.field.ref) === null || _c === void 0 ? void 0 : _c.name.toLowerCase();
+        const moneyField = (_d = moneyParam === null || moneyParam === void 0 ? void 0 : moneyParam.field.ref) === null || _d === void 0 ? void 0 : _d.name.toLowerCase();
+        const moneyFieldLabel = moneyField ? `${document.name}.${(_f = (_e = moneyParam === null || moneyParam === void 0 ? void 0 : moneyParam.field) === null || _e === void 0 ? void 0 : _e.ref) === null || _f === void 0 ? void 0 : _f.name}` : undefined;
+        const moneyFieldIcon = moneyField ? (_j = (_h = (_g = moneyParam === null || moneyParam === void 0 ? void 0 : moneyParam.field) === null || _g === void 0 ? void 0 : _g.ref) === null || _h === void 0 ? void 0 : _h.params.find(isIconParam)) === null || _j === void 0 ? void 0 : _j.value : undefined;
+        const sortProperty = (_k = sortParam === null || sortParam === void 0 ? void 0 : sortParam.property.ref) === null || _k === void 0 ? void 0 : _k.name;
+        const sortOrder = (_l = sortParam === null || sortParam === void 0 ? void 0 : sortParam.order) !== null && _l !== void 0 ? _l : 'asc';
+        const globalAllowed = (_m = globalParam === null || globalParam === void 0 ? void 0 : globalParam.value) !== null && _m !== void 0 ? _m : false;
+        const emptySlots = (_o = emptySlotsParam === null || emptySlotsParam === void 0 ? void 0 : emptySlotsParam.value) !== null && _o !== void 0 ? _o : 'show';
+        const summary = (_p = summaryParam === null || summaryParam === void 0 ? void 0 : summaryParam.value) !== null && _p !== void 0 ? _p : 'full';
+        // Handle sum properties (can be single or array)
+        let sumProperties = [];
+        if (sumParam) {
+            if (sumParam.properties.property) {
+                sumProperties = [((_q = sumParam.properties.property.ref) === null || _q === void 0 ? void 0 : _q.name) || ''];
+            }
+            else if (sumParam.properties.properties) {
+                sumProperties = sumParam.properties.properties
+                    .map(p => { var _a; return ((_a = p.ref) === null || _a === void 0 ? void 0 : _a.name) || ''; })
+                    .filter(n => n !== '');
+            }
+        }
+        // Handle sumMax (can be int, expression, or array of ints/expressions)
+        let sumMax = undefined;
+        if (sumMaxParam) {
+            if (sumMaxParam.value !== undefined) {
+                // It's a single INT
+                sumMax = String(sumMaxParam.value);
+            }
+            else if (sumMaxParam.expression) {
+                // It's a single expression (like self.CarryCapacity), translate it
+                const sumMaxNode = translateExpression(entry, id, sumMaxParam.expression);
+                if (sumMaxNode) {
+                    // Prefix with context. so it evaluates correctly in Vue template
+                    sumMax = `context.${toString(sumMaxNode)}`;
+                }
+            }
+            else if ((_r = sumMaxParam.values) === null || _r === void 0 ? void 0 : _r.values) {
+                // It's an array of ints/expressions
+                const maxValues = sumMaxParam.values.values.map((val) => {
+                    if (typeof val === 'number') {
+                        return String(val);
+                    }
+                    else {
+                        // It's an expression, translate it
+                        const valNode = translateExpression(entry, id, val);
+                        if (valNode) {
+                            return `context.${toString(valNode)}`;
+                        }
+                        return '0';
+                    }
+                });
+                sumMax = `[${maxValues.join(', ')}]`;
+            }
+        }
+        // Handle where expression
+        let whereExpression = undefined;
+        if (whereParam) {
+            const whereNode = translateExpression(entry, id, whereParam.value);
+            whereExpression = whereNode ? toString(whereNode) : undefined;
+        }
+        return expandToNode `
+        <v-tabs-window-item 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"
+                :teritaryColor="teritaryColor"
+            />
+        </v-tabs-window-item>
+        `.appendNewLine();
+    }
+    function generatePinnedTab(element) {
+        var _a, _b;
+        const iconParam = element.params.find(p => isIconParam(p));
+        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 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 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;
+        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>
+            `;
+        }
+        if (isRow(element)) {
+            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>
+            `;
+        }
+        // We don't render these elements as part of this function
+        if (isPage(element) || isAccess(element) || isStatusProperty(element)) {
+            return expandToNode ``;
+        }
+        if (isAction(element)) {
+            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}>
+            `;
+        }
+        if (!isProperty(element))
+            return expandToNode ``;
+        if (isProperty(element)) {
+            if (element.modifier == "hidden")
+                return expandToNode ``;
+            if (element.name == "RollVisualizer") {
+                return expandToNode `
+                <i-roll-visualizer :context="context"></i-roll-visualizer>
+                `;
+            }
+            const standardParams = element.params;
+            const iconParam = standardParams.find(p => isIconParam(p));
+            const colorParam = standardParams.find(p => isColorParam(p));
+            const label = `${document.name}.${element.name}`;
+            const standardParamsFragment = colorParam ? `:disabled="isDisabled('${element.name.toLowerCase()}')" v-if="!isHidden('${element.name.toLowerCase()}')" color="${colorParam.value}"` : `:disabled="isDisabled('${element.name.toLowerCase()}')" v-if="!isHidden('${element.name.toLowerCase()}')"`;
+            const systemPath = getSystemPath(element, [], undefined, false);
+            const entry = AstUtils.getContainerOfType(element, isEntry);
+            if (isParentPropertyRefExp(element)) {
+                const choicesParam = element.params.find(p => isParentPropertyRefChoiceParam(p));
+                let allChoices = [];
+                switch (element.propertyType) {
+                    case "attribute":
+                        allChoices = globalGetAllOfType(entry, isAttributeExp);
+                        break;
+                    case "resource":
+                        allChoices = globalGetAllOfType(entry, isResourceExp);
+                        break;
+                    case "number":
+                        allChoices = globalGetAllOfType(entry, isNumberExp);
+                        break;
+                    case "boolean":
+                        allChoices = globalGetAllOfType(entry, isBooleanExp);
+                        break;
+                    case "date":
+                        allChoices = globalGetAllOfType(entry, isDateExp);
+                        break;
+                    case "time":
+                        allChoices = globalGetAllOfType(entry, isTimeExp);
+                        break;
+                    case "datetime":
+                        allChoices = globalGetAllOfType(entry, isDateTimeExp);
+                        break;
+                    case "die":
+                        allChoices = globalGetAllOfType(entry, isDieField);
+                        break;
+                    case "dice":
+                        allChoices = globalGetAllOfType(entry, isDiceField);
+                        break;
+                    case "string":
+                        allChoices = globalGetAllOfType(entry, isStringExp);
+                        break;
+                    case "tracker":
+                        allChoices = globalGetAllOfType(entry, isTrackerExp);
+                        break;
+                    case "choice":
+                        allChoices = globalGetAllOfType(entry, isDocumentChoiceExp);
+                        break;
+                    case "paperdoll":
+                        allChoices = globalGetAllOfType(entry, isPaperDollExp);
+                        break;
+                    case "html":
+                        allChoices = globalGetAllOfType(entry, isHtmlExp);
+                        break;
+                    //default: console.error("Unsupported parent property type: " + element.propertyType); break;
+                }
+                let refChoices = allChoices.map(x => {
+                    let parentDocument = getDocument(x);
+                    if (choicesParam && choicesParam.choices.length > 0) {
+                        if (!choicesParam.choices.find(y => {
+                            var _a, _b;
+                            const documentNameMatches = ((_a = y.document.ref) === null || _a === void 0 ? void 0 : _a.name.toLowerCase()) == (parentDocument === null || parentDocument === void 0 ? void 0 : parentDocument.name.toLowerCase());
+                            if (y.property != undefined) {
+                                const propertyNameMatches = ((_b = y.property.ref) === null || _b === void 0 ? void 0 : _b.name.toLowerCase()) == x.name.toLowerCase();
+                                return documentNameMatches && propertyNameMatches;
+                            }
+                            // Just check document name
+                            return documentNameMatches;
+                        })) {
+                            return undefined;
+                        }
+                    }
+                    return {
+                        path: `system.${x.name.toLowerCase()}`,
+                        parent: parentDocument === null || parentDocument === void 0 ? void 0 : parentDocument.name,
+                        name: x.name
+                    };
+                });
+                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>
+                `;
+            }
+            if (isSelfPropertyRefExp(element)) {
+                const choicesParam = element.params.find(p => p.$type === 'SelfPropertyRefChoiceParam');
+                let allChoices = [];
+                // Get the current document
+                const currentDocument = getDocument(element);
+                if (!currentDocument) {
+                    return expandToNode `
+                    <div class="error">Self property reference error: Cannot find current document</div>
+                    `;
+                }
+                switch (element.propertyType) {
+                    case "attribute":
+                        allChoices = getAllOfType(currentDocument.body, isAttributeExp);
+                        break;
+                    case "resource":
+                        allChoices = getAllOfType(currentDocument.body, isResourceExp);
+                        break;
+                    case "number":
+                        allChoices = getAllOfType(currentDocument.body, isNumberExp);
+                        break;
+                    case "boolean":
+                        allChoices = getAllOfType(currentDocument.body, isBooleanExp);
+                        break;
+                    case "date":
+                        allChoices = getAllOfType(currentDocument.body, isDateExp);
+                        break;
+                    case "time":
+                        allChoices = getAllOfType(currentDocument.body, isTimeExp);
+                        break;
+                    case "datetime":
+                        allChoices = getAllOfType(currentDocument.body, isDateTimeExp);
+                        break;
+                    case "die":
+                        allChoices = getAllOfType(currentDocument.body, isDieField);
+                        break;
+                    case "dice":
+                        allChoices = getAllOfType(currentDocument.body, isDiceField);
+                        break;
+                    case "string":
+                        allChoices = getAllOfType(currentDocument.body, isStringExp);
+                        break;
+                    case "tracker":
+                        allChoices = getAllOfType(currentDocument.body, isTrackerExp);
+                        break;
+                    case "choice":
+                        allChoices = getAllOfType(currentDocument.body, isDocumentChoiceExp);
+                        break;
+                    case "paperdoll":
+                        allChoices = getAllOfType(currentDocument.body, isPaperDollExp);
+                        break;
+                    case "html":
+                        allChoices = getAllOfType(currentDocument.body, isHtmlExp);
+                        break;
+                }
+                let refChoices = allChoices.filter(x => x !== element).map(x => {
+                    return {
+                        path: `system.${x.name.toLowerCase()}`,
+                        name: x.name
+                    };
+                });
+                // Filter based on choices parameter if provided
+                if (choicesParam && ((_a = choicesParam.choices) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    const allowedProperties = choicesParam.choices.map((c) => { var _a; return (_a = c.property.ref) === null || _a === void 0 ? void 0 : _a.name.toLowerCase(); });
+                    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>
+                `;
+            }
+            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-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)) {
+                const choicesParam = element.params.find(p => isStringParamChoices(p));
+                if (!choicesParam) {
+                    console.warn(`StringChoiceField ${element.name} does not have a choices parameter.`);
+                    return expandToNode ``;
+                }
+                if (((_b = choicesParam === null || choicesParam === void 0 ? void 0 : choicesParam.choices) === null || _b === void 0 ? void 0 : _b.length) === 0)
+                    return expandToNode ``;
+                function choiceValue(choice) {
+                    if (!isStringExtendedChoice(choice.value)) {
+                        return toMachineIdentifier(choice.value);
+                    }
+                    let value = choice.value.properties.find(isChoiceStringValue);
+                    if (value) {
+                        return toMachineIdentifier(value.value);
+                    }
+                    let label = choice.value.properties.find(isLabelParam);
+                    if (label) {
+                        return toMachineIdentifier(label.value);
+                    }
+                    return "unknown";
+                }
+                function choiceData(choice) {
+                    var _a, _b, _c, _d;
+                    let choiceField = element;
+                    if (!isStringExtendedChoice(choice.value)) {
+                        return expandToNode `{ label: game.i18n.localize('${document.name}.${choiceField.name}.${choiceValue(choice)}'), value: '${choiceValue(choice)}', icon: '', color: '' }`;
+                    }
+                    let icon = choice.value.properties.find(isIconParam);
+                    let color = choice.value.properties.find(isColorParam);
+                    if (isStringExtendedChoice(choice.value)) {
+                        let customProperties = choice.value.properties.filter(isChoiceCustomProperty);
+                        if (customProperties.length > 0) {
+                            return expandToNode `{ label: game.i18n.localize('${document.name}.${choiceField.name}.${choiceValue(choice)}'), value: '${choiceValue(choice)}', icon: '${(_a = icon === null || icon === void 0 ? void 0 : icon.value) !== null && _a !== void 0 ? _a : ""}', color: '${(_b = color === null || color === void 0 ? void 0 : color.value) !== null && _b !== void 0 ? _b : ""}', customKeys: [${joinToNode(customProperties, custom => `{ key: '${custom.key}', label: '${humanize(custom.key)}', value: ${custom.value} }`, { separator: ',' })}] }`;
+                        }
+                    }
+                    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>
+                    `;
+            }
+            if (isDamageTypeChoiceField(element)) {
+                const choicesParam = element.params.find(p => isStringParamChoices(p));
+                if (!choicesParam) {
+                    console.warn(`DamageTypeChoiceField ${element.name} does not have a choices parameter.`);
+                    return expandToNode ``;
+                }
+                if (((_c = choicesParam === null || choicesParam === void 0 ? void 0 : choicesParam.choices) === null || _c === void 0 ? void 0 : _c.length) === 0)
+                    return expandToNode ``;
+                function choiceValue(choice) {
+                    if (!isStringExtendedChoice(choice.value)) {
+                        return toMachineIdentifier(choice.value);
+                    }
+                    let value = choice.value.properties.find(isChoiceStringValue);
+                    if (value) {
+                        return toMachineIdentifier(value.value);
+                    }
+                    let label = choice.value.properties.find(isLabelParam);
+                    if (label) {
+                        return toMachineIdentifier(label.value);
+                    }
+                    return "unknown";
+                }
+                function choiceData(choice) {
+                    var _a, _b, _c, _d;
+                    let choiceField = element;
+                    if (!isStringExtendedChoice(choice.value)) {
+                        return expandToNode `{ label: game.i18n.localize('${document.name}.${choiceField.name}.${choiceValue(choice)}'), value: '${choiceValue(choice)}', icon: '', color: '' }`;
+                    }
+                    let icon = choice.value.properties.find(isIconParam);
+                    let color = choice.value.properties.find(isColorParam);
+                    function asStringOrVal(value) {
+                        // If string, return as "value", else just value
+                        if (typeof value === 'string')
+                            return `'${value}'`;
+                        return `${value}`;
+                    }
+                    if (isStringExtendedChoice(choice.value)) {
+                        let customProperties = choice.value.properties.filter(isChoiceCustomProperty);
+                        if (customProperties.length > 0) {
+                            return expandToNode `{ label: game.i18n.localize('${document.name}.${choiceField.name}.${choiceValue(choice)}'), value: '${choiceValue(choice)}', icon: '${(_a = icon === null || icon === void 0 ? void 0 : icon.value) !== null && _a !== void 0 ? _a : ""}', color: '${(_b = color === null || color === void 0 ? void 0 : color.value) !== null && _b !== void 0 ? _b : ""}', customKeys: [${joinToNode(customProperties, custom => `{ key: '${custom.key}', label: '${humanize(custom.key)}', value: ${asStringOrVal(custom.value)} }`, { separator: ',' })}] }`;
+                        }
+                    }
+                    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>
+                    `;
+            }
+            if (isStringChoicesField(element)) {
+                const choicesParam = element.params.find(p => p.$type === 'StringChoicesParamChoices');
+                if (!choicesParam) {
+                    console.warn(`StringChoicesField ${element.name} does not have a choices parameter.`);
+                    return expandToNode ``;
+                }
+                if (((_d = choicesParam === null || choicesParam === void 0 ? void 0 : choicesParam.choices) === null || _d === void 0 ? void 0 : _d.length) === 0)
+                    return expandToNode ``;
+                function choiceValue(choice) {
+                    if (!isStringExtendedChoice(choice.value)) {
+                        return toMachineIdentifier(choice.value);
+                    }
+                    let value = choice.value.properties.find(isChoiceStringValue);
+                    if (value) {
+                        return toMachineIdentifier(value.value);
+                    }
+                    let label = choice.value.properties.find(isLabelParam);
+                    if (label) {
+                        return toMachineIdentifier(label.value);
+                    }
+                    return "unknown";
+                }
+                function choiceData(choice) {
+                    var _a, _b, _c, _d;
+                    let choiceField = element;
+                    if (!isStringExtendedChoice(choice.value)) {
+                        return expandToNode `{ label: game.i18n.localize('${document.name}.${choiceField.name}.${choiceValue(choice)}'), value: '${choiceValue(choice)}', icon: '', color: '' }`;
+                    }
+                    let icon = choice.value.properties.find(isIconParam);
+                    let color = choice.value.properties.find(isColorParam);
+                    if (isStringExtendedChoice(choice.value)) {
+                        let customProperties = choice.value.properties.filter(isChoiceCustomProperty);
+                        if (customProperties.length > 0) {
+                            return expandToNode `{ label: game.i18n.localize('${document.name}.${choiceField.name}.${choiceValue(choice)}'), value: '${choiceValue(choice)}', icon: '${(_a = icon === null || icon === void 0 ? void 0 : icon.value) !== null && _a !== void 0 ? _a : ""}', color: '${(_b = color === null || color === void 0 ? void 0 : color.value) !== null && _b !== void 0 ? _b : ""}', customKeys: [${joinToNode(customProperties, custom => `{ key: '${custom.key}', label: '${humanize(custom.key)}', value: ${custom.value} }`, { separator: ',' })}] }`;
+                        }
+                    }
+                    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 : ""}' }`;
+                }
+                // 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>
+                    `;
+            }
+            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}>
+                `;
+            }
+            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}>
+                `;
+            }
+            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>
+                `;
+            }
+            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>
+                `;
+            }
+            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>
+                `;
+            }
+            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>
+                `;
+            }
+            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>
+                `;
+            }
+            if (isPinnedField(element)) {
+                if (isTopLevel)
+                    return expandToNode ``;
+                const page = AstUtils.getContainerOfType(element, isPage);
+                const pageName = (_e = page === null || page === void 0 ? void 0 : page.name) !== null && _e !== void 0 ? _e : document.name;
+                const systemPath = getSystemPath(element, [], undefined, false);
+                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">
+                    <${componentName}
+                        :context="context"
+                        label="${label}"
+                        icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                        systemPath="${systemPath}"
+                        :primaryColor="primaryColor" :secondaryColor="secondaryColor" :teritaryColor="teritaryColor">
+                    </${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>
+                `;
+            }
+            if (isNumberExp(element)) {
+                const valueParam = element.params.find(x => isNumberParamValue(x));
+                const maxParam = element.params.find(x => isNumberParamMax(x));
+                const calculatorParam = element.params.find(x => isNumberParamCalculator(x));
+                // Determine if max value is a number (not a MethodBlock)
+                let maxValue = undefined;
+                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"
+                    ${maxValue !== undefined ? `:max="${maxValue}"` : ''}
+                    ${calculatorParam !== undefined ? `:calculator="${calculatorParam.value}"` : ''}
+                    ${standardParamsFragment}>
+                </i-number>
+                `;
+            }
+            if (isMoneyField(element)) {
+                const formatParam = element.params.find(p => p.$type === 'MoneyFormatParam');
+                const precisionParam = element.params.find(p => p.$type === 'MoneyPrecisionParam');
+                const displayParam = element.params.find(p => p.$type === 'MoneyDisplayParam');
+                const valueParam = element.params.find(x => isNumberParamValue(x));
+                const format = (formatParam === null || formatParam === void 0 ? void 0 : formatParam.value) || 'auto';
+                const precision = (precisionParam === null || precisionParam === void 0 ? void 0 : precisionParam.value) || 1;
+                const display = (displayParam === null || displayParam === void 0 ? void 0 : displayParam.value) || 'breakdown';
+                // Generate denominations array from AST
+                let denominationsArray = '[]';
+                if (element.denominations && element.denominations.length > 0) {
+                    const denominations = element.denominations.map(denom => {
+                        const valueParam = denom.params.find((p) => p.$type === 'MoneyDenominationValueParam');
+                        const denomIconParam = denom.params.find((p) => p.$type === 'IconParam');
+                        const denomColorParam = denom.params.find((p) => p.$type === 'ColorParam');
+                        return `{ name: '${denom.name}', value: ${(valueParam === null || valueParam === void 0 ? void 0 : valueParam.value) || 1}, icon: '${(denomIconParam === null || denomIconParam === void 0 ? void 0 : denomIconParam.value) || ''}', color: '${(denomColorParam === null || denomColorParam === void 0 ? void 0 : denomColorParam.value) || ''}' }`;
+                    }).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>
+                `;
+            }
+            if (isAttributeExp(element)) {
+                const minParam = element.params.find(x => isNumberParamMin(x));
+                const min = (_f = minParam === null || minParam === void 0 ? void 0 : minParam.value) !== null && _f !== void 0 ? _f : 0;
+                const hasMod = element.params.find(x => isAttributeParamMod(x)) != undefined;
+                const modSystemPath = getSystemPath(element, ["mod"], undefined, false);
+                const valueSystemPath = getSystemPath(element, ["value"], undefined, false);
+                const styleParam = element.params.find(x => isAttributeStyleParam(x));
+                const style = (_g = styleParam === null || styleParam === void 0 ? void 0 : styleParam.style) !== null && _g !== void 0 ? _g : "box";
+                const rollParam = element.params.find(x => isAttributeRollParam(x));
+                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="${rollParam ? expandToNode `on${element.name}AttributeRoll` : expandToNode `undefined`}"
+                        :hasRoll="${rollParam != undefined}"
+                        >
+                    </i-attribute>
+                `;
+            }
+            // if () {
+            //     return expandToNode`
+            //     <i-resource
+            //         label="${label}"
+            //         icon="${iconParam?.value}"
+            //         systemPath="system.${element.name.toLowerCase()}"
+            //         :context="context"
+            //         ${standardParamsFragment}
+            //         :primaryColor="primaryColor"
+            //         :secondaryColor="secondaryColor">
+            //     </i-resource>
+            //     `;
+            // }
+            if (isDamageTrackExp(element)) {
+                const typesParam = element.params.find(x => isDamageTrackTypesParam(x));
+                const types = (_h = typesParam === null || typesParam === void 0 ? void 0 : typesParam.types) !== null && _h !== void 0 ? _h : [];
+                const maxParam = element.params.find(x => isNumberParamMax(x));
+                const max = (_j = maxParam === null || maxParam === void 0 ? void 0 : maxParam.value) !== null && _j !== void 0 ? _j : 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>
+                `;
+            }
+            if (isTrackerExp(element) || isResourceExp(element)) {
+                const styleParam = element.params.find(x => isTrackerStyleParameter(x));
+                const style = (_k = styleParam === null || styleParam === void 0 ? void 0 : styleParam.style) !== null && _k !== void 0 ? _k : "bar";
+                const iconParam = element.params.find(x => isIconParam(x));
+                const icon = (_l = iconParam === null || iconParam === void 0 ? void 0 : iconParam.value) !== null && _l !== void 0 ? _l : undefined;
+                const minParam = element.params.find(x => isNumberParamMin(x));
+                const disableMin = (minParam === null || minParam === void 0 ? void 0 : minParam.value) != undefined;
+                let hideMin = false;
+                const valueParam = element.params.find(x => isNumberParamValue(x));
+                const disableValue = (valueParam === null || valueParam === void 0 ? void 0 : valueParam.value) != undefined;
+                const maxParam = element.params.find(x => isNumberParamMax(x));
+                const disableMax = (maxParam === null || maxParam === void 0 ? void 0 : maxParam.value) != undefined;
+                const colorParam = element.params.find(x => isColorParam(x));
+                const primaryColor = colorParam ? `'${colorParam.value}'` : "primaryColor";
+                const segmentParm = element.params.find(x => isSegmentsParameter(x));
+                const segments = (_m = segmentParm === null || segmentParm === void 0 ? void 0 : segmentParm.segments) !== null && _m !== void 0 ? _m : 1;
+                let isHealth = false;
+                let isWounds = false;
+                if (isResourceExp(element)) {
+                    hideMin = true;
+                    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>
+                `;
+            }
+            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="${(_o = element.document.ref) === null || _o === void 0 ? void 0 : _o.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>
+                `;
+            }
+            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>
+                `;
+            }
+            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>
+                `;
+            }
+            if (isPaperDollExp(element)) {
+                let sizeParam = element.params.find(x => isSizeParam(x));
+                let size = (_p = sizeParam === null || sizeParam === void 0 ? void 0 : sizeParam.value) !== null && _p !== void 0 ? _p : "40px";
+                let imageParam = element.params.find(x => isImageParam(x));
+                let image = (_q = imageParam === null || imageParam === void 0 ? void 0 : imageParam.value) !== null && _q !== void 0 ? _q : `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>
+                `;
+            }
+            if (isDiceFields(element)) {
+                let choicesParam = element.params.find(x => isDieChoicesParam(x));
+                let choices = choicesParam ? `[${choicesParam.choices.join(", ")}]` : "[ 'd4', 'd6', 'd8', 'd10', 'd12', 'd20' ]";
+                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>
+                    `;
+                }
+                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"
+                        />
+                    `;
+                }
+            }
+            if (isTableField(element)) {
+                if (isTopLevel)
+                    return expandToNode ``;
+                const page = AstUtils.getContainerOfType(element, isPage);
+                const pageName = (_r = page === null || page === void 0 ? void 0 : page.name) !== null && _r !== void 0 ? _r : document.name;
+                const systemPath = getSystemPath(element, [], undefined, false);
+                let componentName = `${document.name}${pageName}${element.name}VuetifyDatatable`;
+                // Wrap in a drop zone so drag-drop works for tables inside a row/column.
+                // Tables rendered as their own tab are wrapped in .tabs-container (the
+                // 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">
+                        <${componentName} systemPath="${systemPath}" :context="context" :primaryColor="primaryColor" :secondaryColor="secondaryColor" :teritaryColor="teritaryColor"></${componentName}>
+                    </div>
+                `.appendNewLine();
+            }
+            if (isInventoryField(element)) {
+                if (isTopLevel)
+                    return expandToNode ``;
+                const systemPath = getSystemPath(element, [], undefined, false);
+                const iconParam = element.params.find(p => isIconParam(p));
+                const labelParam = element.params.find(p => isLabelParam(p));
+                const slotsParam = element.params.find(isInventorySlotsParam);
+                const rowsParam = element.params.find(isInventoryRowsParam);
+                const columnsParam = element.params.find(isInventoryColumnsParam);
+                const slotSizeParam = element.params.find(isInventorySlotSizeParam);
+                const quantityParam = element.params.find(isInventoryQuantityParam);
+                const moneyParam = element.params.find(isInventoryMoneyParam);
+                const sumParam = element.params.find(isInventorySumParam);
+                const sumMaxParam = element.params.find(isInventorySumMaxParam);
+                const sortParam = element.params.find(isInventorySortParam);
+                const whereParam = element.params.find(isWhereParam);
+                const globalParam = element.params.find(isGlobalParam);
+                const emptySlotsParam = element.params.find(isInventoryEmptySlotsParam);
+                const summaryParam = element.params.find(isInventorySummaryParam);
+                const label = labelParam ? labelParam.value : `${document.name}.${element.name}`;
+                const icon = iconParam === null || iconParam === void 0 ? void 0 : iconParam.value;
+                const slots = (_s = slotsParam === null || slotsParam === void 0 ? void 0 : slotsParam.value) !== null && _s !== void 0 ? _s : 20;
+                const rows = rowsParam === null || rowsParam === void 0 ? void 0 : rowsParam.value;
+                const columns = columnsParam === null || columnsParam === void 0 ? void 0 : columnsParam.value;
+                const slotSize = slotSizeParam ? parseInt(slotSizeParam.value.replace('px', '')) : 60;
+                const documentType = (_t = element.document.ref) === null || _t === void 0 ? void 0 : _t.name.toLowerCase();
+                const quantityField = (_u = quantityParam === null || quantityParam === void 0 ? void 0 : quantityParam.field.ref) === null || _u === void 0 ? void 0 : _u.name.toLowerCase();
+                const moneyField = (_v = moneyParam === null || moneyParam === void 0 ? void 0 : moneyParam.field.ref) === null || _v === void 0 ? void 0 : _v.name.toLowerCase();
+                const moneyFieldLabel = moneyField ? `${document.name}.${(_x = (_w = moneyParam === null || moneyParam === void 0 ? void 0 : moneyParam.field) === null || _w === void 0 ? void 0 : _w.ref) === null || _x === void 0 ? void 0 : _x.name}` : undefined;
+                const moneyFieldIcon = moneyField ? (_0 = (_z = (_y = moneyParam === null || moneyParam === void 0 ? void 0 : moneyParam.field) === null || _y === void 0 ? void 0 : _y.ref) === null || _z === void 0 ? void 0 : _z.params.find(isIconParam)) === null || _0 === void 0 ? void 0 : _0.value : undefined;
+                const sortProperty = (_1 = sortParam === null || sortParam === void 0 ? void 0 : sortParam.property.ref) === null || _1 === void 0 ? void 0 : _1.name;
+                const sortOrder = (_2 = sortParam === null || sortParam === void 0 ? void 0 : sortParam.order) !== null && _2 !== void 0 ? _2 : 'asc';
+                const globalAllowed = (_3 = globalParam === null || globalParam === void 0 ? void 0 : globalParam.value) !== null && _3 !== void 0 ? _3 : false;
+                const emptySlots = (_4 = emptySlotsParam === null || emptySlotsParam === void 0 ? void 0 : emptySlotsParam.value) !== null && _4 !== void 0 ? _4 : 'show';
+                const summary = (_5 = summaryParam === null || summaryParam === void 0 ? void 0 : summaryParam.value) !== null && _5 !== void 0 ? _5 : 'full';
+                // Handle sum properties (can be single or array)
+                let sumProperties = [];
+                if (sumParam) {
+                    if (sumParam.properties.property) {
+                        sumProperties = [((_6 = sumParam.properties.property.ref) === null || _6 === void 0 ? void 0 : _6.name) || ''];
+                    }
+                    else if (sumParam.properties.properties) {
+                        sumProperties = sumParam.properties.properties
+                            .map(p => { var _a; return ((_a = p.ref) === null || _a === void 0 ? void 0 : _a.name) || ''; })
+                            .filter(n => n !== '');
+                    }
+                }
+                // Handle sumMax (can be int, expression, or array of ints/expressions)
+                let sumMax = undefined;
+                if (sumMaxParam) {
+                    if (sumMaxParam.value !== undefined) {
+                        // It's a single INT
+                        sumMax = String(sumMaxParam.value);
+                    }
+                    else if (sumMaxParam.expression) {
+                        // It's a single expression (like self.CarryCapacity), translate it
+                        const sumMaxNode = translateExpression(entry, id, sumMaxParam.expression);
+                        if (sumMaxNode) {
+                            // Prefix with context. so it evaluates correctly in Vue template
+                            sumMax = `context.${toString(sumMaxNode)}`;
+                        }
+                    }
+                    else if ((_7 = sumMaxParam.values) === null || _7 === void 0 ? void 0 : _7.values) {
+                        // It's an array of ints/expressions
+                        const maxValues = sumMaxParam.values.values.map((val) => {
+                            if (typeof val === 'number') {
+                                return String(val);
+                            }
+                            else {
+                                // It's an expression, translate it
+                                const valNode = translateExpression(entry, id, val);
+                                if (valNode) {
+                                    return `context.${toString(valNode)}`;
+                                }
+                                return '0';
+                            }
+                        });
+                        sumMax = `[${maxValues.join(', ')}]`;
+                    }
+                }
+                // Handle where expression
+                let whereExpression = undefined;
+                if (whereParam) {
+                    const whereNode = translateExpression(entry, id, whereParam.value);
+                    whereExpression = whereNode ? toString(whereNode) : undefined;
+                }
+                return expandToNode `
+                    <i-inventory
+                        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"
+                        :teritaryColor="teritaryColor"
+                    />
+                `.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 Element" type="warning" density="compact" class="ga-2 ma-1" variant="outlined"></v-alert>
+        `;
+    }
+}
+//# sourceMappingURL=vue-sheet-application-generator.js.map