intelligent-system-design-language 0.3.26 → 0.3.28

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

@@ -1,17 +1,46 @@
 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, isAttributeFunctionParam, 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, isRollVisualizerField, 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 { isAccess, isAction, isActor, isConfigFlag, isTheme, isThemeFieldParam, isThemePrimaryParam, isThemeSecondaryParam, isThemeTertiaryParam, isAttributeExp, isAttributeParamMod, isAttributeRollParam, isAttributeFunctionParam, 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, isRollVisualizerField, isImageField, isImagePrimaryParam, isHideLabelParam, 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 { generateActionComponent, generateDocumentPromptApps } 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, compileVisualizerFormula } from '../method-generator.js';
+import { themeWidthToInlineStyle, themeHeightToInlineStyle, themePaintToInlineStyle, themeSizingToInlineStyle } from '../css-generator.js';
 import { humanize } from "inflection";
 import { generateVuetifyDatatableComponent } from "./vue-datatable2-component-generator.js";
 import { generateDocumentChoiceComponent } from "./base-components/vue-document-choice.js";
+// --- Theme-derived color defaults -------------------------------------------
+// The per-document primary/secondary/tertiary color pickers default to the
+// system theme (`config { theme { primary/secondary/tertiary } }`) when set,
+// otherwise to the built-in palette. `userColors = false` in config hides the
+// picker entirely (art-directed systems whose look is fixed by the theme).
+const DEFAULT_PRIMARY = '#1565c0';
+const DEFAULT_SECONDARY = '#4db6ac';
+const DEFAULT_TERTIARY = '#ffb74d';
+function getThemeColorDefaults(entry) {
+    const theme = entry.config.body.find(isTheme);
+    let primary = DEFAULT_PRIMARY, secondary = DEFAULT_SECONDARY, tertiary = DEFAULT_TERTIARY;
+    if (theme) {
+        for (const param of theme.params) {
+            if (isThemePrimaryParam(param))
+                primary = param.value;
+            else if (isThemeSecondaryParam(param))
+                secondary = param.value;
+            else if (isThemeTertiaryParam(param))
+                tertiary = param.value;
+        }
+    }
+    return { primary, secondary, tertiary };
+}
+// `userColors = false` disables the per-document color pickers. Default is true.
+function getUserColorsEnabled(entry) {
+    const flag = entry.config.body.find(x => isConfigFlag(x) && x.type === 'userColors');
+    return flag ? flag.value : true;
+}
 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());
@@ -19,6 +48,9 @@ export function generateDocumentVueComponent(entry, id, document, destination) {
     if (!fs.existsSync(generatedFileDir)) {
         fs.mkdirSync(generatedFileDir, { recursive: true });
     }
+    // Generate prompt apps for every action AND function prompt in this document,
+    // unconditionally per document (covers documents with function-prompts but no actions).
+    generateDocumentPromptApps(entry, id, document, destination);
     const fileNode = expandToNode `
     ${generateVueComponentScript(entry, id, document, destination)}
     ${generateVueComponentTemplate(entry, id, document)}
@@ -465,19 +497,17 @@ function generateVueComponentScript(entry, id, document, destination) {
     function generateAttributeRollMethod(attribute) {
         const rollParam = attribute.params.find(isAttributeRollParam);
         if (rollParam) {
-            // A block-style `roll: { ... }` is a method body: it declares its own variables, runs its
-            // own logic, and creates its own `chat` cards. Emit those statements directly. An
-            // expression-style `roll: roll(...)` produces a single Roll value we wrap in a chat card.
-            // `system` is provided in scope so `self.X` (which compiles to bare `system.x`) and
-            // `success:` thresholds resolve, matching the function/action handler convention.
+            // A block-style `roll: { ... }` is a method body that can call user functions
+            // (self.Foo(...)) and mutate the document (self.X += 1). Those need `this`, the action-style
+            // flush objects, and a flush/render tail — none of which exist in this <script setup> scope
+            // (`this` is undefined, `update` is never declared). So, like `function:`, the block runs as a
+            // real sheet method (_on<Attr>AttributeRoll, generated in vue-sheet-class-generator); here we
+            // only emit a delegating arrow. An expression-style `roll: roll(...)` (the else branch below)
+            // produces a single Roll value we wrap in a chat card and is unaffected.
             if (isMethodBlock(rollParam.roll)) {
                 return expandToNode `
-                const on${toMachineIdentifier(attribute.name)}AttributeRoll = async () => {
-                    const context = {
-                        object: document
-                    };
-                    let system = context.object.system;
-                    ${translateExpression(entry, id, rollParam.roll, false, attribute)}
+                const on${attribute.name}AttributeRoll = async (event) => {
+                    await document.sheet._on${attribute.name}AttributeRoll(event);
                 };
                 `;
             }
@@ -533,6 +563,8 @@ function generateVueComponentScript(entry, id, document, destination) {
         }
         return expandToNode ``;
     }
+    const themeColors = getThemeColorDefaults(entry);
+    const userColorsEnabled = getUserColorsEnabled(entry);
     return expandToNode `
     <script setup>
         import { ref, watch, inject, computed, watchEffect } from "vue";
@@ -549,10 +581,37 @@ function generateVueComponentScript(entry, id, document, destination) {
         const props = defineProps(['context']);
 
         // Colors
+        // Defaults come from the system theme (theme primary/secondary/tertiary tokens);
+        // when the theme doesn't set them they fall back to the built-in palette. These feed
+        // the Vuetify :color props on fields. userColorsEnabled mirrors the userColors config.
+        const userColorsEnabled = ${userColorsEnabled};
+        const defaultPrimaryColor = '${themeColors.primary}';
+        const defaultSecondaryColor = '${themeColors.secondary}';
+        const defaultTertiaryColor = '${themeColors.tertiary}';
+
         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 documentColors = userColorsEnabled ? (storedColors[document.uuid] ?? {}) : {};
+        const primaryColor = ref(documentColors.primary ?? defaultPrimaryColor);
+        const secondaryColor = ref(documentColors.secondary ?? defaultSecondaryColor);
+        const tertiaryColor = ref(documentColors.tertiary ?? defaultTertiaryColor);
+
+        // Track which colors the user has explicitly chosen. Only an explicit choice is
+        // emitted as a CSS variable (below) so it can override the theme default; the ref
+        // defaults must NOT leak to --isdl-* or an unthemed sheet would gain a colored edge.
+        const primarySet = ref(documentColors.primary != null);
+        const secondarySet = ref(documentColors.secondary != null);
+        const tertiarySet = ref(documentColors.tertiary != null);
+
+        // User-chosen colors override the theme's --isdl-primary/secondary/tertiary for this
+        // document. Bound inline on <v-app>, which sits inside .${id}.vue-application, so it wins
+        // over the theme.css defaults for every descendant field. Keys are omitted unless chosen.
+        const userColorVars = computed(() => {
+            const vars = {};
+            if (primarySet.value) vars['--isdl-primary'] = primaryColor.value;
+            if (secondarySet.value) vars['--isdl-secondary'] = secondaryColor.value;
+            if (tertiarySet.value) vars['--isdl-tertiary'] = tertiaryColor.value;
+            return vars;
+        });
 
         const setupColors = () => {
             const colors = {
@@ -563,19 +622,28 @@ function generateVueComponentScript(entry, id, document, destination) {
             game.settings.set('${id}', 'documentColorThemes', { ...storedColors, [document.uuid]: colors });
         };
         const resetColors = () => {
-            primaryColor.value = '#1565c0';
-            secondaryColor.value = '#4db6ac';
-            tertiaryColor.value = '#ffb74d';
-            setupColors();
+            primaryColor.value = defaultPrimaryColor;
+            secondaryColor.value = defaultSecondaryColor;
+            tertiaryColor.value = defaultTertiaryColor;
+            primarySet.value = false;
+            secondarySet.value = false;
+            tertiarySet.value = false;
+            let updated = { ...storedColors };
+            delete updated[document.uuid];
+            storedColors = updated;
+            game.settings.set('${id}', 'documentColorThemes', updated);
         };
 
         watch(primaryColor, () => {
+            primarySet.value = true;
             setupColors();
         });
         watch(secondaryColor, () => {
+            secondarySet.value = true;
             setupColors();
         });
         watch(tertiaryColor, () => {
+            tertiarySet.value = true;
             setupColors();
         });
 
@@ -761,9 +829,14 @@ function generateVueComponentTemplate(entry, id, document) {
     const firstPageTables = document.body.filter(isTableField); // We explicitly only want top-level tables
     const firstPagePinned = document.body.filter(isPinnedField); // We explicitly only want top-level pinned fields
     const firstPageInventories = document.body.filter(isInventoryField); // We explicitly only want top-level inventories
+    const userColorsEnabled = getUserColorsEnabled(entry);
+    // If the author placed a primary image field (one bound to the native `img`), the portrait is
+    // rendered inline in their layout -- suppress the default drawer portrait to avoid two of them.
+    const hasPrimaryImage = getAllOfType(document.body, isImageField)
+        .some(f => f.params.some(p => isImagePrimaryParam(p) && p.value));
     return expandToNode `
     <template>
-        <v-app>
+        <v-app :style="userColorVars">
             <!-- 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>
@@ -783,17 +856,17 @@ function generateVueComponentTemplate(entry, id, document) {
 
             <!-- 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'>
+                ${hasPrimaryImage ? '' : expandToNode `<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-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">
+                    <div class="pa-2" ${userColorsEnabled ? '' : 'v-if="false"'}>
                         <v-btn block @click="setupColors" :color="secondaryColor" prepend-icon="fa-solid fa-palette">
                         Setup Colors
 
@@ -966,6 +1039,7 @@ function generateVueComponentTemplate(entry, id, document) {
         const emptySlotsParam = element.params.find(isInventoryEmptySlotsParam);
         const summaryParam = element.params.find(isInventorySummaryParam);
         const label = labelParam ? labelParam.value : `${document.name}.${element.name}`;
+        const hideLabel = element.params.some((p) => isHideLabelParam(p) && p.value);
         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;
@@ -1038,6 +1112,7 @@ function generateVueComponentTemplate(entry, id, document) {
                 systemPath="${systemPath}"
                 :context="context"
                 :editMode="editModeRef"
+                ${hideLabel ? `:hideLabel="true"` : ''}
                 ${icon ? `icon="${icon}"` : ''}
                 ${slots ? `:maxSlots="${slots}"` : ''}
                 ${rows ? `:rows="${rows}"` : ''}
@@ -1088,12 +1163,28 @@ function generateVueComponentTemplate(entry, id, document) {
         `.appendNewLine();
     }
     function generateElement(element, isTopLevel = false) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
+        var _a, _b;
+        // A layout container's `theme: { ... }` compiles to an inline `style="..."` of ACTUAL
+        // CSS (not `--isdl-*` vars, which would inherit and leak sizing into nested children).
+        // The themed style is split by who owns the geometry: WIDTH governs the flex item that
+        // lays out in the row (the OUTER v-col/v-row), so it must ride that element -- putting it
+        // on the inner card lets the column keep its full width and the card just floats inside.
+        // HEIGHT + PAINT (border/bg/text) belong on the visible v-card surface (or the bare
+        // row/column when there is no card). See css-generator's theme*ToInlineStyle helpers.
+        const themeParam = (_a = element.params) === null || _a === void 0 ? void 0 : _a.find(isThemeFieldParam);
         if (isSection(element)) {
+            const colStyle = themeWidthToInlineStyle(themeParam);
+            const colAttr = colStyle.length > 0 ? ` style="${colStyle}"` : '';
+            const cardStyle = [themeHeightToInlineStyle(themeParam), themePaintToInlineStyle(themeParam)]
+                .filter(s => s.length > 0).join('; ');
+            const cardAttr = cardStyle.length > 0 ? ` style="${cardStyle}"` : '';
+            // `hideLabel: true` on a section drops its title bar entirely (compact, unlabeled panel).
+            const hideTitle = ((_b = element.params) !== null && _b !== void 0 ? _b : []).some((p) => isHideLabelParam(p) && p.value);
+            const titleNode = hideTitle ? '' : `<v-card-title>{{ game.i18n.localize('${document.name}.${element.name}') }}</v-card-title>`;
             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-col class="section isdl-section isdl-section-${element.name.toLowerCase()}"${colAttr}>
+                <v-card variant="outlined" elevation="4"${cardAttr}>
+                    ${titleNode}
 
                     <v-card-text>
                         <v-row dense>
@@ -1104,16 +1195,23 @@ function generateVueComponentTemplate(entry, id, document) {
             </v-col>
             `;
         }
+        // Bare row/column have no inner card, so sizing AND border ride the element itself.
+        // (background/text are section-only and rejected by the validator, so paint here only ever
+        // yields a border.) themePaintToInlineStyle was previously omitted here -- dropping borders
+        // authored on a row/column.
+        const containerStyle = [themeSizingToInlineStyle(themeParam), themePaintToInlineStyle(themeParam)]
+            .filter(s => s.length > 0).join('; ');
+        const styleAttr = containerStyle.length > 0 ? ` style="${containerStyle}"` : '';
         if (isRow(element)) {
             return expandToNode `
-            <v-row dense>
+            <v-row dense class="isdl-row"${styleAttr}>
                 ${joinToNode(element.body, element => generateElement(element), { appendNewLineIfNotEmpty: true })}
             </v-row>
             `;
         }
         if (isColumn(element)) {
             return expandToNode `
-            <v-col>
+            <v-col class="isdl-column"${styleAttr}>
                 ${joinToNode(element.body, element => generateElement(element), { appendNewLineIfNotEmpty: true })}
             </v-col>
             `;
@@ -1144,97 +1242,108 @@ function generateVueComponentTemplate(entry, id, document) {
             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()}')"`;
+            // `hideLabel: true` suppresses the field's label text. Passed to every field component
+            // via the shared fragment; each component guards its label render on !hideLabel.
+            const hideLabel = standardParams.some(p => isHideLabelParam(p) && p.value);
+            const baseFragment = `:disabled="isDisabled('${element.name.toLowerCase()}')" v-if="!isHidden('${element.name.toLowerCase()}')"`;
+            const standardParamsFragment = `${baseFragment}${colorParam ? ` color="${colorParam.value}"` : ''}${hideLabel ? ' :hideLabel="true"' : ''}`;
             const systemPath = getSystemPath(element, [], undefined, false);
             const entry = AstUtils.getContainerOfType(element, isEntry);
-            if (isRollVisualizerField(element)) {
-                const { formula, data } = compileVisualizerFormula(entry, id, element);
-                return expandToNode `
+            // Single choke point for the theme marker: render the field by type, then stamp the
+            // universal `isdl-field` (+ per-field `isdl-field-<name>`) class onto its <i-...> root.
+            // Every field branch returns an <i-...> root, so this reaches ALL field types -- no
+            // per-branch allowlist to drift out of sync as new field types are added.
+            const fieldComponent = (() => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
+                if (isRollVisualizerField(element)) {
+                    const { formula, data } = compileVisualizerFormula(entry, id, element);
+                    return expandToNode `
                 <i-roll-visualizer
                     :context="context"
                     label="${label}"
                     ${iconParam ? `icon="${iconParam.value}"` : ``}
                     ${colorParam ? `color="${colorParam.value}"` : ``}
+                    ${hideLabel ? `:hideLabel="true"` : ``}
                     systemPath="${systemPath}"
                     :formula='${formula}'
                     :rollData='${data}'
                     v-if="!isHidden('${element.name.toLowerCase()}')">
                 </i-roll-visualizer>
                 `;
-            }
-            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;
+                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;
                             }
-                            // 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 `
+                        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}"
@@ -1244,74 +1353,74 @@ function generateVueComponentTemplate(entry, id, document) {
                     ${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 `
+                }
+                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 `
+                    }
+                    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}"
@@ -1322,11 +1431,11 @@ function generateVueComponentTemplate(entry, id, document) {
                     ${standardParamsFragment}>
                 </i-self-property-reference>
                 `;
-            }
-            if (isStringExp(element)) {
-                const valueParam = element.params.find(p => isStringParamValue(p));
-                if (valueParam !== undefined) {
-                    return expandToNode `
+                }
+                if (isStringExp(element)) {
+                    const valueParam = element.params.find(p => isStringParamValue(p));
+                    if (valueParam !== undefined) {
+                        return expandToNode `
                     <i-string
                         :context="context"
                         label="${label}"
@@ -1335,8 +1444,8 @@ function generateVueComponentTemplate(entry, id, document) {
                         ${standardParamsFragment}>
                     </i-string>
                     `;
-                }
-                return expandToNode `
+                    }
+                    return expandToNode `
                     <i-text-field
                         label="${label}"
                         icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
@@ -1348,46 +1457,46 @@ function generateVueComponentTemplate(entry, id, document) {
                         :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);
+                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 ``;
                     }
-                    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: '' }`;
+                    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";
                     }
-                    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: ',' })}] }`;
+                    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 `{ 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 `
+                    return expandToNode `
                     <i-string-choice
                         :context="context"
                         label="${label}.label"
@@ -1400,52 +1509,52 @@ function generateVueComponentTemplate(entry, id, document) {
                         ${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: '' }`;
+                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 ``;
                     }
-                    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 (((_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";
                     }
-                    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: ',' })}] }`;
+                    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 `{ 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 `
+                    return expandToNode `
                     <i-string-choice
                         :context="context"
                         label="${label}.label"
@@ -1458,49 +1567,49 @@ function generateVueComponentTemplate(entry, id, document) {
                         ${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);
+                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 ``;
                     }
-                    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: '' }`;
+                    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";
                     }
-                    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: ',' })}] }`;
+                    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 `{ 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 `
+                    // 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"
@@ -1514,10 +1623,10 @@ function generateVueComponentTemplate(entry, id, document) {
                         ${standardParamsFragment}>
                     </i-string-choices>
                     `;
-            }
-            if (isDocumentChoiceExp(element)) {
-                const componentName = `${document.name.toLowerCase()}${element.name}DocumentChoice`;
-                return expandToNode `
+                }
+                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}"
@@ -1528,10 +1637,10 @@ function generateVueComponentTemplate(entry, id, document) {
                         :secondaryColor="secondaryColor">
                     </${componentName}>
                 `;
-            }
-            if (isDocumentChoicesExp(element)) {
-                const componentName = `${document.name.toLowerCase()}${element.name}DocumentChoices`;
-                return expandToNode `
+                }
+                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}"
@@ -1542,9 +1651,9 @@ function generateVueComponentTemplate(entry, id, document) {
                         :secondaryColor="secondaryColor">
                     </${componentName}>
                 `;
-            }
-            if (isMacroField(element)) {
-                return expandToNode `
+                }
+                if (isMacroField(element)) {
+                    return expandToNode `
                     <i-macro
                         label="${label}"
                         icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
@@ -1556,9 +1665,9 @@ function generateVueComponentTemplate(entry, id, document) {
                         :secondaryColor="secondaryColor">
                     </i-macro>
                 `;
-            }
-            if (isHtmlExp(element)) {
-                return expandToNode `
+                }
+                if (isHtmlExp(element)) {
+                    return expandToNode `
                 <i-prosemirror
                     label="${label}"
                     icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
@@ -1566,9 +1675,9 @@ function generateVueComponentTemplate(entry, id, document) {
                     ${standardParamsFragment}>
                 </i-prosemirror>
                 `;
-            }
-            if (isMeasuredTemplateField(element)) {
-                return expandToNode `
+                }
+                if (isMeasuredTemplateField(element)) {
+                    return expandToNode `
                 <i-measured-template
                     :context="context"
                     label="${label}"
@@ -1579,9 +1688,27 @@ function generateVueComponentTemplate(entry, id, document) {
                     ${standardParamsFragment}>
                 </i-measured-template>
                 `;
-            }
-            if (isDamageBonusesField(element)) {
-                return expandToNode `
+                }
+                if (isImageField(element)) {
+                    // A `primary: true` image binds to the document's native `img` (the movable
+                    // portrait); otherwise it stores at its own system path. The edit path is
+                    // document-relative ("img" vs "system.<name>") so the sheet's onEditImage handler
+                    // reads/writes the right property.
+                    const isPrimary = element.params.some(p => isImagePrimaryParam(p) && p.value);
+                    const imagePath = isPrimary ? 'img' : systemPath;
+                    return expandToNode `
+                <i-image
+                    :context="context"
+                    label="${label}"
+                    icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
+                    systemPath="${imagePath}"
+                    :primary="${isPrimary}"
+                    ${standardParamsFragment}>
+                </i-image>
+                `;
+                }
+                if (isDamageBonusesField(element)) {
+                    return expandToNode `
                 <i-bonuses
                     :context="context"
                     label="${label}"
@@ -1590,9 +1717,9 @@ function generateVueComponentTemplate(entry, id, document) {
                     ${standardParamsFragment}>
                 </i-bonuses>
                 `;
-            }
-            if (isDamageResistancesField(element)) {
-                return expandToNode `
+                }
+                if (isDamageResistancesField(element)) {
+                    return expandToNode `
                 <i-resistances
                     :context="context"
                     label="${label}"
@@ -1601,17 +1728,17 @@ function generateVueComponentTemplate(entry, id, document) {
                     ${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 `
+                }
+                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" v-if="!isHidden('${element.name.toLowerCase()}')">
                     <${componentName}
                         :context="context"
@@ -1622,9 +1749,9 @@ function generateVueComponentTemplate(entry, id, document) {
                     </${componentName}>
                 </div>
                 `;
-            }
-            if (isBooleanExp(element)) {
-                return expandToNode `
+                }
+                if (isBooleanExp(element)) {
+                    return expandToNode `
                 <i-boolean
                     :context="context"
                     label="${label}"
@@ -1633,23 +1760,23 @@ function generateVueComponentTemplate(entry, id, document) {
                     ${standardParamsFragment}>
                 </i-boolean>
                 `;
-            }
-            if (isNumberExp(element)) {
-                const valueParam = element.params.find(x => isNumberParamValue(x));
-                const minParam = element.params.find(x => isNumberParamMin(x));
-                const maxParam = element.params.find(x => isNumberParamMax(x));
-                const calculatorParam = element.params.find(x => isNumberParamCalculator(x));
-                // Determine if min/max are literal numbers (not MethodBlocks). Literal bounds are
-                // bound onto the widget so it clamps input at entry, matching the schema's clamp.
-                let minValue = undefined;
-                if (minParam && typeof minParam.value === 'number') {
-                    minValue = minParam.value;
-                }
-                let maxValue = undefined;
-                if (maxParam && typeof maxParam.value === 'number') {
-                    maxValue = maxParam.value;
                 }
-                return expandToNode `
+                if (isNumberExp(element)) {
+                    const valueParam = element.params.find(x => isNumberParamValue(x));
+                    const minParam = element.params.find(x => isNumberParamMin(x));
+                    const maxParam = element.params.find(x => isNumberParamMax(x));
+                    const calculatorParam = element.params.find(x => isNumberParamCalculator(x));
+                    // Determine if min/max are literal numbers (not MethodBlocks). Literal bounds are
+                    // bound onto the widget so it clamps input at entry, matching the schema's clamp.
+                    let minValue = undefined;
+                    if (minParam && typeof minParam.value === 'number') {
+                        minValue = minParam.value;
+                    }
+                    let maxValue = undefined;
+                    if (maxParam && typeof maxParam.value === 'number') {
+                        maxValue = maxParam.value;
+                    }
+                    return expandToNode `
                 <i-number
                     :context="context"
                     label="${label}"
@@ -1665,27 +1792,27 @@ function generateVueComponentTemplate(entry, id, document) {
                     ${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 `
+                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}"
@@ -1702,26 +1829,26 @@ function generateVueComponentTemplate(entry, id, document) {
                     ${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));
-                const functionParam = element.params.find(x => isAttributeFunctionParam(x));
-                // Both `roll:` and `function:` drive the attribute's click overlay. Validation forbids
-                // setting both, so at most one of these is defined.
-                const clickHandler = rollParam
-                    ? expandToNode `on${element.name}AttributeRoll`
-                    : (functionParam ? expandToNode `on${element.name}AttributeFunction` : expandToNode `undefined`);
-                // roll: keeps the die icon; function: shows the attribute's own icon (or a generic
-                // action bolt) so the overlay reflects what the click actually triggers.
-                const clickIcon = functionParam ? ((_h = iconParam === null || iconParam === void 0 ? void 0 : iconParam.value) !== null && _h !== void 0 ? _h : "fa-solid fa-bolt") : "fa-solid fa-dice";
-                return expandToNode `
+                }
+                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));
+                    const functionParam = element.params.find(x => isAttributeFunctionParam(x));
+                    // Both `roll:` and `function:` drive the attribute's click overlay. Validation forbids
+                    // setting both, so at most one of these is defined.
+                    const clickHandler = rollParam
+                        ? expandToNode `on${element.name}AttributeRoll`
+                        : (functionParam ? expandToNode `on${element.name}AttributeFunction` : expandToNode `undefined`);
+                    // roll: keeps the die icon; function: shows the attribute's own icon (or a generic
+                    // action bolt) so the overlay reflects what the click actually triggers.
+                    const clickIcon = functionParam ? ((_h = iconParam === null || iconParam === void 0 ? void 0 : iconParam.value) !== null && _h !== void 0 ? _h : "fa-solid fa-bolt") : "fa-solid fa-dice";
+                    return expandToNode `
                     <i-attribute
                         label="${label}"
                         icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
@@ -1741,30 +1868,31 @@ function generateVueComponentTemplate(entry, id, document) {
                         >
                     </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 = (_j = typesParam === null || typesParam === void 0 ? void 0 : typesParam.types) !== null && _j !== void 0 ? _j : [];
-                const maxParam = element.params.find(x => isNumberParamMax(x));
-                const max = (_k = maxParam === null || maxParam === void 0 ? void 0 : maxParam.value) !== null && _k !== void 0 ? _k : 5;
-                const colorParam = element.params.find(x => isColorParam(x));
-                const primaryColor = colorParam ? `'${colorParam.value}'` : "primaryColor";
-                return expandToNode `
+                }
+                // 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 = (_j = typesParam === null || typesParam === void 0 ? void 0 : typesParam.types) !== null && _j !== void 0 ? _j : [];
+                    const maxParam = element.params.find(x => isNumberParamMax(x));
+                    const max = (_k = maxParam === null || maxParam === void 0 ? void 0 : maxParam.value) !== null && _k !== void 0 ? _k : 5;
+                    const colorParam = element.params.find(x => isColorParam(x));
+                    const primaryColor = colorParam ? `'${colorParam.value}'` : "primaryColor";
+                    return expandToNode `
                 <i-damage-track
                     label="${label}"
+                    ${hideLabel ? `:hideLabel="true"` : ''}
                     systemPath="system.${element.name.toLowerCase()}"
                     :context="context"
                     :editMode="editModeRef"
@@ -1774,34 +1902,35 @@ function generateVueComponentTemplate(entry, id, document) {
                     :max="${max}"
                 ></i-damage-track>
                 `;
-            }
-            if (isTrackerExp(element) || isResourceExp(element)) {
-                const styleParam = element.params.find(x => isTrackerStyleParameter(x));
-                const style = (_l = styleParam === null || styleParam === void 0 ? void 0 : styleParam.style) !== null && _l !== void 0 ? _l : "bar";
-                const iconParam = element.params.find(x => isIconParam(x));
-                const icon = (_m = iconParam === null || iconParam === void 0 ? void 0 : iconParam.value) !== null && _m !== void 0 ? _m : 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 = (_o = segmentParm === null || segmentParm === void 0 ? void 0 : segmentParm.segments) !== null && _o !== void 0 ? _o : 1;
-                let isHealth = false;
-                let isWounds = false;
-                if (isResourceExp(element)) {
-                    hideMin = true;
-                    isHealth = element.tag == "health";
-                    isWounds = element.tag == "wounds";
                 }
-                return expandToNode `
-                <i-tracker 
+                if (isTrackerExp(element) || isResourceExp(element)) {
+                    const styleParam = element.params.find(x => isTrackerStyleParameter(x));
+                    const style = (_l = styleParam === null || styleParam === void 0 ? void 0 : styleParam.style) !== null && _l !== void 0 ? _l : "bar";
+                    const iconParam = element.params.find(x => isIconParam(x));
+                    const icon = (_m = iconParam === null || iconParam === void 0 ? void 0 : iconParam.value) !== null && _m !== void 0 ? _m : 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 = (_o = segmentParm === null || segmentParm === void 0 ? void 0 : segmentParm.segments) !== null && _o !== void 0 ? _o : 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" 
+                    ${hideLabel ? `:hideLabel="true"` : ''}
+                    systemPath="system.${element.name.toLowerCase()}" :context="context"
                     :visibility="visibilityStates['${element.name.toLowerCase()}'].value"
                     :editMode="editModeRef"
                     :primaryColor="${primaryColor}" :secondaryColor="secondaryColor" :tertiaryColor="tertiaryColor"
@@ -1816,9 +1945,9 @@ function generateVueComponentTemplate(entry, id, document) {
                     :isWounds="${isWounds}"
                     ></i-tracker>
                 `;
-            }
-            if (isSingleDocumentExp(element)) {
-                return expandToNode `
+                }
+                if (isSingleDocumentExp(element)) {
+                    return expandToNode `
                 <i-document-link 
                     label="${label}"
                     icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
@@ -1829,9 +1958,9 @@ function generateVueComponentTemplate(entry, id, document) {
                     :secondaryColor="secondaryColor">
                 </i-document-link>
                 `;
-            }
-            if (isDateExp(element)) {
-                return expandToNode `
+                }
+                if (isDateExp(element)) {
+                    return expandToNode `
                 <i-datetime 
                     type="date" 
                     label="${label}"
@@ -1842,9 +1971,9 @@ function generateVueComponentTemplate(entry, id, document) {
                     :primaryColor="primaryColor" :secondaryColor="secondaryColor">
                 </i-datetime>
                 `;
-            }
-            if (isTimeExp(element)) {
-                return expandToNode `
+                }
+                if (isTimeExp(element)) {
+                    return expandToNode `
                 <i-datetime 
                     type="time" 
                     label="${label}"
@@ -1855,9 +1984,9 @@ function generateVueComponentTemplate(entry, id, document) {
                     :primaryColor="primaryColor" :secondaryColor="secondaryColor">
                 </i-datetime>
                 `;
-            }
-            if (isDateTimeExp(element)) {
-                return expandToNode `
+                }
+                if (isDateTimeExp(element)) {
+                    return expandToNode `
                 <i-datetime 
                     type="datetime-local" 
                     label="${label}"
@@ -1868,13 +1997,13 @@ function generateVueComponentTemplate(entry, id, document) {
                     :primaryColor="primaryColor" :secondaryColor="secondaryColor">
                 </i-datetime>
                 `;
-            }
-            if (isPaperDollExp(element)) {
-                let sizeParam = element.params.find(x => isSizeParam(x));
-                let size = (_q = sizeParam === null || sizeParam === void 0 ? void 0 : sizeParam.value) !== null && _q !== void 0 ? _q : "40px";
-                let imageParam = element.params.find(x => isImageParam(x));
-                let image = (_r = imageParam === null || imageParam === void 0 ? void 0 : imageParam.value) !== null && _r !== void 0 ? _r : `systems/${id}/img/paperdoll_default.png`;
-                return expandToNode `
+                }
+                if (isPaperDollExp(element)) {
+                    let sizeParam = element.params.find(x => isSizeParam(x));
+                    let size = (_q = sizeParam === null || sizeParam === void 0 ? void 0 : sizeParam.value) !== null && _q !== void 0 ? _q : "40px";
+                    let imageParam = element.params.find(x => isImageParam(x));
+                    let image = (_r = imageParam === null || imageParam === void 0 ? void 0 : imageParam.value) !== null && _r !== void 0 ? _r : `systems/${id}/img/paperdoll_default.png`;
+                    return expandToNode `
                 <i-paperdoll 
                     label="${label}"
                     icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
@@ -1886,14 +2015,14 @@ function generateVueComponentTemplate(entry, id, document) {
                     :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 `
+                }
+                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}"
@@ -1904,9 +2033,9 @@ function generateVueComponentTemplate(entry, id, document) {
                         ${standardParamsFragment}>
                     </i-die>
                     `;
-                }
-                if (isDiceField(element)) {
-                    return expandToNode `
+                    }
+                    if (isDiceField(element)) {
+                        return expandToNode `
                         <i-dice
                             label="${label}"
                             icon="${iconParam === null || iconParam === void 0 ? void 0 : iconParam.value}"
@@ -1920,119 +2049,120 @@ function generateVueComponentTemplate(entry, id, document) {
                             :secondaryColor="secondaryColor"
                         />
                     `;
+                    }
                 }
-            }
-            if (isTableField(element)) {
-                if (isTopLevel)
-                    return expandToNode ``;
-                const page = AstUtils.getContainerOfType(element, isPage);
-                const pageName = (_s = page === null || page === void 0 ? void 0 : page.name) !== null && _s !== void 0 ? _s : 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 `
+                if (isTableField(element)) {
+                    if (isTopLevel)
+                        return expandToNode ``;
+                    const page = AstUtils.getContainerOfType(element, isPage);
+                    const pageName = (_s = page === null || page === void 0 ? void 0 : page.name) !== null && _s !== void 0 ? _s : 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" v-if="!isHidden('${element.name.toLowerCase()}')">
                         <${componentName} systemPath="${systemPath}" :context="context" :primaryColor="primaryColor" :secondaryColor="secondaryColor" :tertiaryColor="tertiaryColor"></${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 = (_t = slotsParam === null || slotsParam === void 0 ? void 0 : slotsParam.value) !== null && _t !== void 0 ? _t : 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 = (_u = element.document.ref) === null || _u === void 0 ? void 0 : _u.name.toLowerCase();
-                const quantityField = (_v = quantityParam === null || quantityParam === void 0 ? void 0 : quantityParam.field.ref) === null || _v === void 0 ? void 0 : _v.name.toLowerCase();
-                const moneyField = (_w = moneyParam === null || moneyParam === void 0 ? void 0 : moneyParam.field.ref) === null || _w === void 0 ? void 0 : _w.name.toLowerCase();
-                const moneyFieldLabel = moneyField ? `${document.name}.${(_y = (_x = moneyParam === null || moneyParam === void 0 ? void 0 : moneyParam.field) === null || _x === void 0 ? void 0 : _x.ref) === null || _y === void 0 ? void 0 : _y.name}` : undefined;
-                const moneyFieldIcon = moneyField ? (_1 = (_0 = (_z = moneyParam === null || moneyParam === void 0 ? void 0 : moneyParam.field) === null || _z === void 0 ? void 0 : _z.ref) === null || _0 === void 0 ? void 0 : _0.params.find(isIconParam)) === null || _1 === void 0 ? void 0 : _1.value : undefined;
-                const sortProperty = (_2 = sortParam === null || sortParam === void 0 ? void 0 : sortParam.property.ref) === null || _2 === void 0 ? void 0 : _2.name;
-                const sortOrder = (_3 = sortParam === null || sortParam === void 0 ? void 0 : sortParam.order) !== null && _3 !== void 0 ? _3 : 'asc';
-                const globalAllowed = (_4 = globalParam === null || globalParam === void 0 ? void 0 : globalParam.value) !== null && _4 !== void 0 ? _4 : false;
-                const emptySlots = (_5 = emptySlotsParam === null || emptySlotsParam === void 0 ? void 0 : emptySlotsParam.value) !== null && _5 !== void 0 ? _5 : 'show';
-                const summary = (_6 = summaryParam === null || summaryParam === void 0 ? void 0 : summaryParam.value) !== null && _6 !== void 0 ? _6 : 'full';
-                // Handle sum properties (can be single or array)
-                let sumProperties = [];
-                if (sumParam) {
-                    if (sumParam.properties.property) {
-                        sumProperties = [((_7 = sumParam.properties.property.ref) === null || _7 === void 0 ? void 0 : _7.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)}`;
+                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 = (_t = slotsParam === null || slotsParam === void 0 ? void 0 : slotsParam.value) !== null && _t !== void 0 ? _t : 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 = (_u = element.document.ref) === null || _u === void 0 ? void 0 : _u.name.toLowerCase();
+                    const quantityField = (_v = quantityParam === null || quantityParam === void 0 ? void 0 : quantityParam.field.ref) === null || _v === void 0 ? void 0 : _v.name.toLowerCase();
+                    const moneyField = (_w = moneyParam === null || moneyParam === void 0 ? void 0 : moneyParam.field.ref) === null || _w === void 0 ? void 0 : _w.name.toLowerCase();
+                    const moneyFieldLabel = moneyField ? `${document.name}.${(_y = (_x = moneyParam === null || moneyParam === void 0 ? void 0 : moneyParam.field) === null || _x === void 0 ? void 0 : _x.ref) === null || _y === void 0 ? void 0 : _y.name}` : undefined;
+                    const moneyFieldIcon = moneyField ? (_1 = (_0 = (_z = moneyParam === null || moneyParam === void 0 ? void 0 : moneyParam.field) === null || _z === void 0 ? void 0 : _z.ref) === null || _0 === void 0 ? void 0 : _0.params.find(isIconParam)) === null || _1 === void 0 ? void 0 : _1.value : undefined;
+                    const sortProperty = (_2 = sortParam === null || sortParam === void 0 ? void 0 : sortParam.property.ref) === null || _2 === void 0 ? void 0 : _2.name;
+                    const sortOrder = (_3 = sortParam === null || sortParam === void 0 ? void 0 : sortParam.order) !== null && _3 !== void 0 ? _3 : 'asc';
+                    const globalAllowed = (_4 = globalParam === null || globalParam === void 0 ? void 0 : globalParam.value) !== null && _4 !== void 0 ? _4 : false;
+                    const emptySlots = (_5 = emptySlotsParam === null || emptySlotsParam === void 0 ? void 0 : emptySlotsParam.value) !== null && _5 !== void 0 ? _5 : 'show';
+                    const summary = (_6 = summaryParam === null || summaryParam === void 0 ? void 0 : summaryParam.value) !== null && _6 !== void 0 ? _6 : 'full';
+                    // Handle sum properties (can be single or array)
+                    let sumProperties = [];
+                    if (sumParam) {
+                        if (sumParam.properties.property) {
+                            sumProperties = [((_7 = sumParam.properties.property.ref) === null || _7 === void 0 ? void 0 : _7.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 !== '');
                         }
                     }
-                    else if ((_8 = sumMaxParam.values) === null || _8 === void 0 ? void 0 : _8.values) {
-                        // It's an array of ints/expressions
-                        const maxValues = sumMaxParam.values.values.map((val) => {
-                            if (typeof val === 'number') {
-                                return String(val);
+                    // 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 {
-                                // It's an expression, translate it
-                                const valNode = translateExpression(entry, id, val);
-                                if (valNode) {
-                                    return `context.${toString(valNode)}`;
+                        }
+                        else if ((_8 = sumMaxParam.values) === null || _8 === void 0 ? void 0 : _8.values) {
+                            // It's an array of ints/expressions
+                            const maxValues = sumMaxParam.values.values.map((val) => {
+                                if (typeof val === 'number') {
+                                    return String(val);
                                 }
-                                return '0';
-                            }
-                        });
-                        sumMax = `[${maxValues.join(', ')}]`;
+                                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 `
+                    // Handle where expression
+                    let whereExpression = undefined;
+                    if (whereParam) {
+                        const whereNode = translateExpression(entry, id, whereParam.value);
+                        whereExpression = whereNode ? toString(whereNode) : undefined;
+                    }
+                    return expandToNode `
                     <i-inventory
                         v-if="!isHidden('${element.name.toLowerCase()}')"
                         label="${label}"
                         systemPath="${systemPath}"
                         :context="context"
                         :editMode="editModeRef"
+                        ${hideLabel ? `:hideLabel="true"` : ''}
                         ${icon ? `icon="${icon}"` : ''}
                         ${slots ? `:maxSlots="${slots}"` : ''}
                         ${rows ? `:rows="${rows}"` : ''}
@@ -2056,14 +2186,37 @@ function generateVueComponentTemplate(entry, id, document) {
                         :tertiaryColor="tertiaryColor"
                     />
                 `.appendNewLine();
-            }
-            return expandToNode `
+                }
+                return expandToNode `
             <v-alert text="Unknown Property ${element.name}" type="warning" density="compact" class="ga-2 ma-1" variant="outlined"></v-alert>
             `;
+            })();
+            return injectFieldMarker(fieldComponent, element);
         }
         return expandToNode `
         <v-alert text="Unknown Element" type="warning" density="compact" class="ga-2 ma-1" variant="outlined"></v-alert>
         `;
     }
+    // Stamp the universal field marker onto a rendered field's <i-...> component root (the
+    // element that also carries the type + single/double-wide classes via attribute fallthrough).
+    // `.isdl-field` is the one selector theme-token consumption targets; `.isdl-field-<name>` is
+    // the per-field hook + the target a per-field theme override is emitted against.
+    function injectFieldMarker(node, element) {
+        const html = toString(node);
+        const marker = `isdl-field isdl-field-${element.name.toLowerCase()}`;
+        // Stamp the marker onto the FIRST element tag of the rendered field, whatever its name --
+        // <i-number>, a datatable <div class="datatable-drop-zone">, a <DocumentChoice> component,
+        // etc. Insert right after the tag NAME so attribute values (which can contain '>') are never
+        // parsed. If that tag already leads with a `class` attribute, merge into it (no double class).
+        const tag = html.match(/<([A-Za-z][\w.-]*)/);
+        if ((tag === null || tag === void 0 ? void 0 : tag.index) === undefined)
+            return node;
+        const insertAt = tag.index + tag[0].length;
+        const rest = html.slice(insertAt);
+        const injected = /^\s+class="/.test(rest)
+            ? html.slice(0, insertAt) + rest.replace(/^(\s+class=")/, `$1${marker} `)
+            : html.slice(0, insertAt) + ` class="${marker}"` + rest;
+        return expandToNode `${injected}`;
+    }
 }
 //# sourceMappingURL=vue-sheet-application-generator.js.map