intelligent-system-design-language 0.3.27 → 0.3.29

package/out/cli/components/vue/vue-mixin.js

@@ -35,6 +35,7 @@ export function generateVueMixin(description) {
         "i-money": "MoneyField",
         "i-inventory": "Inventory",
         "i-damage-track": "DamageTrack",
+        "i-image": "ImageField",
     };
     const fileNode = expandToNode `
         import { createApp } from "../../../lib/vue.esm-browser.js";

package/out/cli/components/vue/vue-mixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"vue-mixin.js","sourceRoot":"","sources":["../../../../src/cli/components/vue/vue-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEtE,MAAM,UAAU,gBAAgB,CAAC,WAAmB;IAChD,MAAM,gBAAgB,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;IAC3E,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,uBAAuB,CAAC,CAAC;IAE/E,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAE;QAClC,EAAE,CAAC,SAAS,CAAC,gBAAgB,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KACvD;IAED,MAAM,gBAAgB,GAAG;QACrB,aAAa,EAAE,WAAW;QAC1B,YAAY,EAAE,UAAU;QACxB,iBAAiB,EAAE,cAAc;QACjC,eAAe,EAAE,aAAa;QAC9B,mBAAmB,EAAE,gBAAgB;QACrC,aAAa,EAAE,WAAW;QAC1B,cAAc,EAAE,YAAY;QAC5B,cAAc,EAAE,WAAW;QAC3B,YAAY,EAAE,UAAU;QACxB,WAAW,EAAE,SAAS;QACtB,SAAS,EAAE,YAAY;QACvB,qBAAqB,EAAE,uBAAuB;QAC9C,mBAAmB,EAAE,qBAAqB;QAC1C,QAAQ,EAAE,WAAW;QACrB,WAAW,EAAE,eAAe;QAC5B,eAAe,EAAE,mBAAmB;QACpC,WAAW,EAAE,cAAc;QAC3B,OAAO,EAAE,UAAU;QACnB,UAAU,EAAE,mBAAmB;QAC/B,UAAU,EAAE,aAAa;QACzB,iBAAiB,EAAE,mBAAmB;QACtC,kBAAkB,EAAE,oBAAoB;QACxC,6BAA6B,EAAE,8BAA8B;QAC7D,2BAA2B,EAAE,4BAA4B;QACzD,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,WAAW;QAC1B,gBAAgB,EAAE,aAAa;KAClC,CAAC;IAEF,MAAM,QAAQ,GAAG,YAAY,CAAA;;;mBAGd,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,YAAY,CAAA,GAAG,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAgMrF,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAyC,EAAE,CAAC,CAAC,EAAE,CAAC,YAAY,CAAA,0BAA0B,CAAC,MAAM,gBAAgB,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,uBAAuB,EAAE,IAAI,EAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqG/M,CAAC,aAAa,EAAE,CAAC;IAElB,EAAE,CAAC,aAAa,CAAC,iBAAiB,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC;AAC5D,CAAC"}
+{"version":3,"file":"vue-mixin.js","sourceRoot":"","sources":["../../../../src/cli/components/vue/vue-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEtE,MAAM,UAAU,gBAAgB,CAAC,WAAmB;IAChD,MAAM,gBAAgB,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;IAC3E,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,uBAAuB,CAAC,CAAC;IAE/E,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAE;QAClC,EAAE,CAAC,SAAS,CAAC,gBAAgB,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KACvD;IAED,MAAM,gBAAgB,GAAG;QACrB,aAAa,EAAE,WAAW;QAC1B,YAAY,EAAE,UAAU;QACxB,iBAAiB,EAAE,cAAc;QACjC,eAAe,EAAE,aAAa;QAC9B,mBAAmB,EAAE,gBAAgB;QACrC,aAAa,EAAE,WAAW;QAC1B,cAAc,EAAE,YAAY;QAC5B,cAAc,EAAE,WAAW;QAC3B,YAAY,EAAE,UAAU;QACxB,WAAW,EAAE,SAAS;QACtB,SAAS,EAAE,YAAY;QACvB,qBAAqB,EAAE,uBAAuB;QAC9C,mBAAmB,EAAE,qBAAqB;QAC1C,QAAQ,EAAE,WAAW;QACrB,WAAW,EAAE,eAAe;QAC5B,eAAe,EAAE,mBAAmB;QACpC,WAAW,EAAE,cAAc;QAC3B,OAAO,EAAE,UAAU;QACnB,UAAU,EAAE,mBAAmB;QAC/B,UAAU,EAAE,aAAa;QACzB,iBAAiB,EAAE,mBAAmB;QACtC,kBAAkB,EAAE,oBAAoB;QACxC,6BAA6B,EAAE,8BAA8B;QAC7D,2BAA2B,EAAE,4BAA4B;QACzD,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,WAAW;QAC1B,gBAAgB,EAAE,aAAa;QAC/B,SAAS,EAAE,YAAY;KAC1B,CAAC;IAEF,MAAM,QAAQ,GAAG,YAAY,CAAA;;;mBAGd,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,YAAY,CAAA,GAAG,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAgMrF,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAyC,EAAE,CAAC,CAAC,EAAE,CAAC,YAAY,CAAA,0BAA0B,CAAC,MAAM,gBAAgB,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,uBAAuB,EAAE,IAAI,EAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqG/M,CAAC,aAAa,EAAE,CAAC;IAElB,EAAE,CAAC,aAAa,CAAC,iBAAiB,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC;AAC5D,CAAC"}

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

@@ -1,7 +1,7 @@
 import * as path from 'node:path';
 import * as fs from 'node:fs';
 import { expandToNode, joinToNode, toString } from 'langium/generate';
-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, 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, generateDocumentPromptApps } from './vue-action-component-generator.js';
@@ -9,7 +9,7 @@ import { generatePinnedVuetifyDatatableComponent } from './vue-pinned-datatable-
 // 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 { themeBlockToInlineStyle } from '../css-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";
@@ -497,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);
                 };
                 `;
             }
@@ -832,6 +830,10 @@ function generateVueComponentTemplate(entry, id, document) {
     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 :style="userColorVars">
@@ -854,11 +856,11 @@ 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 })}
@@ -1020,7 +1022,7 @@ function generateVueComponentTemplate(entry, id, document) {
         `.appendNewLine();
     }
     function generateInventoryTabWindow(pageName, element) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
         const systemPath = getSystemPath(element, [], undefined, false);
         const iconParam = element.params.find(p => isIconParam(p));
         const labelParam = element.params.find(p => isLabelParam(p));
@@ -1037,25 +1039,26 @@ 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;
         const slotSize = slotSizeParam ? parseInt(slotSizeParam.value.replace('px', '')) : 60;
-        const documentType = (_b = element.document.ref) === null || _b === void 0 ? void 0 : _b.name.toLowerCase();
-        const quantityField = (_c = quantityParam === null || quantityParam === void 0 ? void 0 : quantityParam.field.ref) === null || _c === void 0 ? void 0 : _c.name.toLowerCase();
-        const moneyField = (_d = moneyParam === null || moneyParam === void 0 ? void 0 : moneyParam.field.ref) === null || _d === void 0 ? void 0 : _d.name.toLowerCase();
-        const moneyFieldLabel = moneyField ? `${document.name}.${(_f = (_e = moneyParam === null || moneyParam === void 0 ? void 0 : moneyParam.field) === null || _e === void 0 ? void 0 : _e.ref) === null || _f === void 0 ? void 0 : _f.name}` : undefined;
-        const moneyFieldIcon = moneyField ? (_j = (_h = (_g = moneyParam === null || moneyParam === void 0 ? void 0 : moneyParam.field) === null || _g === void 0 ? void 0 : _g.ref) === null || _h === void 0 ? void 0 : _h.params.find(isIconParam)) === null || _j === void 0 ? void 0 : _j.value : undefined;
-        const sortProperty = (_k = sortParam === null || sortParam === void 0 ? void 0 : sortParam.property.ref) === null || _k === void 0 ? void 0 : _k.name;
-        const sortOrder = (_l = sortParam === null || sortParam === void 0 ? void 0 : sortParam.order) !== null && _l !== void 0 ? _l : 'asc';
-        const globalAllowed = (_m = globalParam === null || globalParam === void 0 ? void 0 : globalParam.value) !== null && _m !== void 0 ? _m : false;
-        const emptySlots = (_o = emptySlotsParam === null || emptySlotsParam === void 0 ? void 0 : emptySlotsParam.value) !== null && _o !== void 0 ? _o : 'show';
-        const summary = (_p = summaryParam === null || summaryParam === void 0 ? void 0 : summaryParam.value) !== null && _p !== void 0 ? _p : 'full';
+        const documentType = (_c = (_b = element.documents[0]) === null || _b === void 0 ? void 0 : _b.ref) === null || _c === void 0 ? void 0 : _c.name.toLowerCase();
+        const quantityField = (_d = quantityParam === null || quantityParam === void 0 ? void 0 : quantityParam.field.ref) === null || _d === void 0 ? void 0 : _d.name.toLowerCase();
+        const moneyField = (_e = moneyParam === null || moneyParam === void 0 ? void 0 : moneyParam.field.ref) === null || _e === void 0 ? void 0 : _e.name.toLowerCase();
+        const moneyFieldLabel = moneyField ? `${document.name}.${(_g = (_f = moneyParam === null || moneyParam === void 0 ? void 0 : moneyParam.field) === null || _f === void 0 ? void 0 : _f.ref) === null || _g === void 0 ? void 0 : _g.name}` : undefined;
+        const moneyFieldIcon = moneyField ? (_k = (_j = (_h = moneyParam === null || moneyParam === void 0 ? void 0 : moneyParam.field) === null || _h === void 0 ? void 0 : _h.ref) === null || _j === void 0 ? void 0 : _j.params.find(isIconParam)) === null || _k === void 0 ? void 0 : _k.value : undefined;
+        const sortProperty = (_l = sortParam === null || sortParam === void 0 ? void 0 : sortParam.property.ref) === null || _l === void 0 ? void 0 : _l.name;
+        const sortOrder = (_m = sortParam === null || sortParam === void 0 ? void 0 : sortParam.order) !== null && _m !== void 0 ? _m : 'asc';
+        const globalAllowed = (_o = globalParam === null || globalParam === void 0 ? void 0 : globalParam.value) !== null && _o !== void 0 ? _o : false;
+        const emptySlots = (_p = emptySlotsParam === null || emptySlotsParam === void 0 ? void 0 : emptySlotsParam.value) !== null && _p !== void 0 ? _p : 'show';
+        const summary = (_q = summaryParam === null || summaryParam === void 0 ? void 0 : summaryParam.value) !== null && _q !== void 0 ? _q : 'full';
         // Handle sum properties (can be single or array)
         let sumProperties = [];
         if (sumParam) {
             if (sumParam.properties.property) {
-                sumProperties = [((_q = sumParam.properties.property.ref) === null || _q === void 0 ? void 0 : _q.name) || ''];
+                sumProperties = [((_r = sumParam.properties.property.ref) === null || _r === void 0 ? void 0 : _r.name) || ''];
             }
             else if (sumParam.properties.properties) {
                 sumProperties = sumParam.properties.properties
@@ -1078,7 +1081,7 @@ function generateVueComponentTemplate(entry, id, document) {
                     sumMax = `context.${toString(sumMaxNode)}`;
                 }
             }
-            else if ((_r = sumMaxParam.values) === null || _r === void 0 ? void 0 : _r.values) {
+            else if ((_s = sumMaxParam.values) === null || _s === void 0 ? void 0 : _s.values) {
                 // It's an array of ints/expressions
                 const maxValues = sumMaxParam.values.values.map((val) => {
                     if (typeof val === 'number') {
@@ -1109,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}"` : ''}
@@ -1159,17 +1163,28 @@ function generateVueComponentTemplate(entry, id, document) {
         `.appendNewLine();
     }
     function generateElement(element, isTopLevel = false) {
-        var _a;
+        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).
-        // Section paints the inner <v-card> (border/bg/text live there); row/col paint themselves.
-        const layoutStyle = themeBlockToInlineStyle((_a = element.params) === null || _a === void 0 ? void 0 : _a.find(isThemeFieldParam));
-        const styleAttr = layoutStyle.length > 0 ? ` style="${layoutStyle}"` : '';
+        // 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 isdl-section isdl-section-${element.name.toLowerCase()}">
-                <v-card variant="outlined" elevation="4"${styleAttr}>
-                    <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>
@@ -1180,6 +1195,13 @@ 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 class="isdl-row"${styleAttr}>
@@ -1220,7 +1242,11 @@ 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);
             // Single choke point for the theme marker: render the field by type, then stamp the
@@ -1228,7 +1254,7 @@ function generateVueComponentTemplate(entry, id, document) {
             // 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;
+                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, _9;
                 if (isRollVisualizerField(element)) {
                     const { formula, data } = compileVisualizerFormula(entry, id, element);
                     return expandToNode `
@@ -1237,6 +1263,7 @@ function generateVueComponentTemplate(entry, id, document) {
                     label="${label}"
                     ${iconParam ? `icon="${iconParam.value}"` : ``}
                     ${colorParam ? `color="${colorParam.value}"` : ``}
+                    ${hideLabel ? `:hideLabel="true"` : ``}
                     systemPath="${systemPath}"
                     :formula='${formula}'
                     :rollData='${data}'
@@ -1662,6 +1689,24 @@ function generateVueComponentTemplate(entry, id, document) {
                 </i-measured-template>
                 `;
                 }
+                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
@@ -1847,6 +1892,7 @@ function generateVueComponentTemplate(entry, id, document) {
                     return expandToNode `
                 <i-damage-track
                     label="${label}"
+                    ${hideLabel ? `:hideLabel="true"` : ''}
                     systemPath="system.${element.name.toLowerCase()}"
                     :context="context"
                     :editMode="editModeRef"
@@ -1881,9 +1927,10 @@ function generateVueComponentTemplate(entry, id, document) {
                         isWounds = element.tag == "wounds";
                     }
                     return expandToNode `
-                <i-tracker 
+                <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"
@@ -2017,9 +2064,9 @@ function generateVueComponentTemplate(entry, id, document) {
                     // 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()}')">
+                    <v-col class="pa-1 datatable-drop-zone" cols="12" v-if="!isHidden('${element.name.toLowerCase()}')">
                         <${componentName} systemPath="${systemPath}" :context="context" :primaryColor="primaryColor" :secondaryColor="secondaryColor" :tertiaryColor="tertiaryColor"></${componentName}>
-                    </div>
+                    </v-col>
                 `.appendNewLine();
                 }
                 if (isInventoryField(element)) {
@@ -2047,21 +2094,21 @@ function generateVueComponentTemplate(entry, id, document) {
                     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';
+                    const documentType = (_v = (_u = element.documents[0]) === null || _u === void 0 ? void 0 : _u.ref) === null || _v === void 0 ? void 0 : _v.name.toLowerCase();
+                    const quantityField = (_w = quantityParam === null || quantityParam === void 0 ? void 0 : quantityParam.field.ref) === null || _w === void 0 ? void 0 : _w.name.toLowerCase();
+                    const moneyField = (_x = moneyParam === null || moneyParam === void 0 ? void 0 : moneyParam.field.ref) === null || _x === void 0 ? void 0 : _x.name.toLowerCase();
+                    const moneyFieldLabel = moneyField ? `${document.name}.${(_z = (_y = moneyParam === null || moneyParam === void 0 ? void 0 : moneyParam.field) === null || _y === void 0 ? void 0 : _y.ref) === null || _z === void 0 ? void 0 : _z.name}` : undefined;
+                    const moneyFieldIcon = moneyField ? (_2 = (_1 = (_0 = moneyParam === null || moneyParam === void 0 ? void 0 : moneyParam.field) === null || _0 === void 0 ? void 0 : _0.ref) === null || _1 === void 0 ? void 0 : _1.params.find(isIconParam)) === null || _2 === void 0 ? void 0 : _2.value : undefined;
+                    const sortProperty = (_3 = sortParam === null || sortParam === void 0 ? void 0 : sortParam.property.ref) === null || _3 === void 0 ? void 0 : _3.name;
+                    const sortOrder = (_4 = sortParam === null || sortParam === void 0 ? void 0 : sortParam.order) !== null && _4 !== void 0 ? _4 : 'asc';
+                    const globalAllowed = (_5 = globalParam === null || globalParam === void 0 ? void 0 : globalParam.value) !== null && _5 !== void 0 ? _5 : false;
+                    const emptySlots = (_6 = emptySlotsParam === null || emptySlotsParam === void 0 ? void 0 : emptySlotsParam.value) !== null && _6 !== void 0 ? _6 : 'show';
+                    const summary = (_7 = summaryParam === null || summaryParam === void 0 ? void 0 : summaryParam.value) !== null && _7 !== void 0 ? _7 : '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) || ''];
+                            sumProperties = [((_8 = sumParam.properties.property.ref) === null || _8 === void 0 ? void 0 : _8.name) || ''];
                         }
                         else if (sumParam.properties.properties) {
                             sumProperties = sumParam.properties.properties
@@ -2084,7 +2131,7 @@ function generateVueComponentTemplate(entry, id, document) {
                                 sumMax = `context.${toString(sumMaxNode)}`;
                             }
                         }
-                        else if ((_8 = sumMaxParam.values) === null || _8 === void 0 ? void 0 : _8.values) {
+                        else if ((_9 = sumMaxParam.values) === null || _9 === void 0 ? void 0 : _9.values) {
                             // It's an array of ints/expressions
                             const maxValues = sumMaxParam.values.values.map((val) => {
                                 if (typeof val === 'number') {
@@ -2115,6 +2162,7 @@ function generateVueComponentTemplate(entry, id, document) {
                         systemPath="${systemPath}"
                         :context="context"
                         :editMode="editModeRef"
+                        ${hideLabel ? `:hideLabel="true"` : ''}
                         ${icon ? `icon="${icon}"` : ''}
                         ${slots ? `:maxSlots="${slots}"` : ''}
                         ${rows ? `:rows="${rows}"` : ''}