@limetech/lime-crm-building-blocks 1.104.5 → 1.105.1

package/dist/collection/components/document-picker/document-item/document-item.js

@@ -13,6 +13,11 @@ export class DocumentItemComponent {
          * - 'checkbox': renders a checkbox for multiple selection.
          */
         this.type = 'checkbox';
+        /**
+         * The preferred file URL types to use when displaying
+         * the document's image preview.
+         */
+        this.fileTypes = ['view', 'contents', 'download'];
         this.handleDocumentItemClick = (event) => {
             if (this.isUnavailable()) {
                 return;
@@ -72,21 +77,22 @@ export class DocumentItemComponent {
     }
     render() {
         const isUnavailable = this.isUnavailable();
-        return (h(Host, { key: '625f38ae7e31ae2b900366df8ad60ff2099a2ce6', id: this.item.id.toString(), class: {
-                'has-image': !!this.item.thumbnail,
+        const image = this.getImage();
+        return (h(Host, { key: '7fc37bbc0185cdb38c837f2487c88f4d275d1c2f', id: String(this.item.file.id), class: {
+                'has-image': !!image,
                 'has-error': !!this.item.hasError,
-            }, role: this.type === 'radio' ? 'radio' : 'checkbox', "aria-checked": this.item.selected ? 'true' : 'false', "aria-disabled": isUnavailable ? 'true' : 'false', tabIndex: isUnavailable ? -1 : 0 }, h("limel-card", { key: 'b88db5b44b9dfcd858f1e395d0837623dfe9b5a5', image: this.item.thumbnail, clickable: isUnavailable ? false : true, onClick: this.handleDocumentItemClick, onKeyDown: this.handleKeyDown }, h("div", { key: '558028048aba88caf524373cbeb7c14ebc371bdb', slot: "component" }, this.renderFileSize(), this.renderBooleanInput())), this.renderHelp()));
+            }, role: this.type === 'radio' ? 'radio' : 'checkbox', "aria-checked": this.item.selected ? 'true' : 'false', "aria-disabled": isUnavailable ? 'true' : 'false', tabIndex: isUnavailable ? -1 : 0 }, h("limel-card", { key: 'da1329af4f1eac4617da054b5b02715b512631ff', image: image, clickable: isUnavailable ? false : true, onClick: this.handleDocumentItemClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'a30361cfb76512065fe3cf1b513f31257cf115ee', slot: "component" }, this.renderFileSize(), this.renderBooleanInput())), this.renderHelp()));
     }
     renderBooleanInput() {
         const id = this.getControlId();
         if (this.type === 'radio') {
-            return (h("limel-radio-button", { id: id, label: this.item.fileName, disabled: this.isUnavailable(), checked: this.item.selected, onClick: this.handleSelectionControlClick, onChange: this.handleSelectionControlChange }));
+            return (h("limel-radio-button", { id: id, label: this.item.file.filename, disabled: this.isUnavailable(), checked: this.item.selected, onClick: this.handleSelectionControlClick, onChange: this.handleSelectionControlChange }));
         }
-        return (h("limel-checkbox", { id: id, label: this.item.fileName, disabled: this.isUnavailable(), checked: this.item.selected, onClick: this.handleSelectionControlClick, onChange: this.handleSelectionControlChange }));
+        return (h("limel-checkbox", { id: id, label: this.item.file.filename, disabled: this.isUnavailable(), checked: this.item.selected, onClick: this.handleSelectionControlClick, onChange: this.handleSelectionControlChange }));
     }
     renderFileSize() {
-        var _a;
-        const formattedFileSize = formatBytes((_a = this.item) === null || _a === void 0 ? void 0 : _a.fileSize);
+        var _a, _b;
+        const formattedFileSize = formatBytes((_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.file) === null || _b === void 0 ? void 0 : _b.size);
         if (!formattedFileSize) {
             return;
         }
@@ -112,7 +118,7 @@ export class DocumentItemComponent {
         this.interact.emit(Object.assign(Object.assign({}, this.item), { selected }));
     }
     getControlId() {
-        return `boolean-input-${String(this.item.id)}`;
+        return `boolean-input-${String(this.item.file.id)}`;
     }
     isUnavailable() {
         var _a, _b;
@@ -126,6 +132,21 @@ export class DocumentItemComponent {
             input.checked = false;
         }
     }
+    getImage() {
+        const href = this.hrefForFile();
+        if (!href) {
+            return;
+        }
+        return {
+            src: href,
+            alt: this.item.file.filename,
+        };
+    }
+    hrefForFile() {
+        return ['preview', ...this.fileTypes]
+            .map((type) => this.item.file.getUrl(type))
+            .find(Boolean);
+    }
     static get is() { return "limebb-document-item"; }
     static get encapsulation() { return "shadow"; }
     static get delegatesFocus() { return true; }
@@ -162,7 +183,7 @@ export class DocumentItemComponent {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "Reference to the platform"
+                    "text": "Reference to the platform service container.\n\nUse this to access all platform services like repositories, HTTP client,\ncommand bus, navigator, and more. The platform instance is shared across\nall components in the same application context."
                 },
                 "getter": false,
                 "setter": false
@@ -188,7 +209,7 @@ export class DocumentItemComponent {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "The context this component belongs to"
+                    "text": "The context describing where this component is running.\n\nThe context provides information about the current limetype and record ID\n(if viewing/editing a specific record). Components can use this to load\nrelevant data and understand their operating environment."
                 },
                 "getter": false,
                 "setter": false
@@ -235,6 +256,30 @@ export class DocumentItemComponent {
                 "attribute": "type",
                 "reflect": true,
                 "defaultValue": "'checkbox'"
+            },
+            "fileTypes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LimeFileUrlType[]",
+                    "resolved": "LimeFileUrlType[]",
+                    "references": {
+                        "LimeFileUrlType": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::LimeFileUrlType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The preferred file URL types to use when displaying\nthe document's image preview."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "['view', 'contents', 'download']"
             }
         };
     }

package/dist/collection/components/document-picker/document-picker.js

@@ -47,7 +47,7 @@ export class DocumentPicker {
                 // or allow deselecting if clicking the already selected item
                 updatedItems = this.items
                     .map((item) => {
-                    if (item.id === interactedItem.id) {
+                    if (item.file.id === interactedItem.file.id) {
                         return Object.assign(Object.assign({}, item), { selected: interactedItem.selected });
                     }
                     return Object.assign(Object.assign({}, item), { selected: false });
@@ -57,7 +57,7 @@ export class DocumentPicker {
             else {
                 updatedItems = this.items
                     .map((item) => {
-                    if (item.id === interactedItem.id) {
+                    if (item.file.id === interactedItem.file.id) {
                         return Object.assign(Object.assign({}, item), { selected: interactedItem.selected });
                     }
                     return item;
@@ -79,7 +79,7 @@ export class DocumentPicker {
         return (h(Host, { key: '5e4a9004ed3b81b6c35be868c664e61cb88d490c' }, h("limel-notched-outline", { key: 'ada8928b3ed815896e1ef5fb61f539f0ab77c7af', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, hasFloatingLabel: true }, h("div", { key: '343aeef460a4ea4e0a4a247daf6988f749dc2b49', slot: "content", role: this.type === 'radio' ? 'radiogroup' : 'group', "aria-labelledby": this.label ? this.labelId : undefined, "aria-describedby": this.helperText ? this.helperTextId : undefined }, this.renderItems())), this.renderHelperLine()));
     }
     renderItems() {
-        return this.items.map((item) => (h("limebb-document-item", { platform: this.platform, context: this.context, item: item, key: item.id, type: this.type, onInteract: this.handleItemInteract })));
+        return this.items.map((item) => (h("limebb-document-item", { platform: this.platform, context: this.context, item: item, key: item.file.id, type: this.type, onInteract: this.handleItemInteract })));
     }
     static get is() { return "limebb-document-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -116,7 +116,7 @@ export class DocumentPicker {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "Reference to the platform"
+                    "text": "Reference to the platform service container.\n\nUse this to access all platform services like repositories, HTTP client,\ncommand bus, navigator, and more. The platform instance is shared across\nall components in the same application context."
                 },
                 "getter": false,
                 "setter": false
@@ -142,7 +142,7 @@ export class DocumentPicker {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "The context this component belongs to"
+                    "text": "The context describing where this component is running.\n\nThe context provides information about the current limetype and record ID\n(if viewing/editing a specific record). Components can use this to load\nrelevant data and understand their operating environment."
                 },
                 "getter": false,
                 "setter": false

package/dist/collection/components/feed/feed-item/feed-timeline-item.js

@@ -419,7 +419,7 @@ export class FeedTimelineItem {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "Reference to the platform"
+                    "text": "Reference to the platform service container.\n\nUse this to access all platform services like repositories, HTTP client,\ncommand bus, navigator, and more. The platform instance is shared across\nall components in the same application context."
                 },
                 "getter": false,
                 "setter": false
@@ -445,7 +445,7 @@ export class FeedTimelineItem {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "The context this component belongs to"
+                    "text": "The context describing where this component is running.\n\nThe context provides information about the current limetype and record ID\n(if viewing/editing a specific record). Components can use this to load\nrelevant data and understand their operating environment."
                 },
                 "getter": false,
                 "setter": false

package/dist/collection/components/feed/feed.js

@@ -227,7 +227,7 @@ export class Feed {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "Reference to the platform"
+                    "text": "Reference to the platform service container.\n\nUse this to access all platform services like repositories, HTTP client,\ncommand bus, navigator, and more. The platform instance is shared across\nall components in the same application context."
                 },
                 "getter": false,
                 "setter": false
@@ -253,7 +253,7 @@ export class Feed {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "The context this component belongs to"
+                    "text": "The context describing where this component is running.\n\nThe context provides information about the current limetype and record ID\n(if viewing/editing a specific record). Components can use this to load\nrelevant data and understand their operating environment."
                 },
                 "getter": false,
                 "setter": false

package/dist/collection/components/info-tile/info-tile.js

@@ -189,7 +189,7 @@ export class InfoTile {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Reference to the platform"
+                    "text": "Reference to the platform service container.\n\nUse this to access all platform services like repositories, HTTP client,\ncommand bus, navigator, and more. The platform instance is shared across\nall components in the same application context."
                 },
                 "getter": false,
                 "setter": false
@@ -212,7 +212,7 @@ export class InfoTile {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The context this component belongs to"
+                    "text": "The context describing where this component is running.\n\nThe context provides information about the current limetype and record ID\n(if viewing/editing a specific record). Components can use this to load\nrelevant data and understand their operating environment."
                 },
                 "getter": false,
                 "setter": false

package/dist/collection/components/kanban/kanban-group/kanban-group.js

@@ -127,7 +127,7 @@ export class KanbanGroup {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "Reference to the platform"
+                    "text": "Reference to the platform service container.\n\nUse this to access all platform services like repositories, HTTP client,\ncommand bus, navigator, and more. The platform instance is shared across\nall components in the same application context."
                 },
                 "getter": false,
                 "setter": false
@@ -153,7 +153,7 @@ export class KanbanGroup {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "The context this component belongs to"
+                    "text": "The context describing where this component is running.\n\nThe context provides information about the current limetype and record ID\n(if viewing/editing a specific record). Components can use this to load\nrelevant data and understand their operating environment."
                 },
                 "getter": false,
                 "setter": false

package/dist/collection/components/kanban/kanban-item/kanban-item.js

@@ -164,7 +164,7 @@ export class KanbanItemComponent {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "Reference to the platform"
+                    "text": "Reference to the platform service container.\n\nUse this to access all platform services like repositories, HTTP client,\ncommand bus, navigator, and more. The platform instance is shared across\nall components in the same application context."
                 },
                 "getter": false,
                 "setter": false
@@ -190,7 +190,7 @@ export class KanbanItemComponent {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "The context this component belongs to"
+                    "text": "The context describing where this component is running.\n\nThe context provides information about the current limetype and record ID\n(if viewing/editing a specific record). Components can use this to load\nrelevant data and understand their operating environment."
                 },
                 "getter": false,
                 "setter": false

package/dist/collection/components/kanban/kanban.js

@@ -72,7 +72,7 @@ export class Kanban {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "Reference to the platform"
+                    "text": "Reference to the platform service container.\n\nUse this to access all platform services like repositories, HTTP client,\ncommand bus, navigator, and more. The platform instance is shared across\nall components in the same application context."
                 },
                 "getter": false,
                 "setter": false
@@ -98,7 +98,7 @@ export class Kanban {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "The context this component belongs to"
+                    "text": "The context describing where this component is running.\n\nThe context provides information about the current limetype and record ID\n(if viewing/editing a specific record). Components can use this to load\nrelevant data and understand their operating environment."
                 },
                 "getter": false,
                 "setter": false

package/dist/collection/components/lime-query-builder/lime-query-builder.css

@@ -76,6 +76,7 @@
   margin: 0.25rem 0;
 }
 
+section.description,
 section.filter,
 section.query-options {
   display: flex;

package/dist/collection/components/lime-query-builder/lime-query-builder.js

@@ -78,6 +78,20 @@ export class LimeQueryBuilder {
             this.orderBy = event.detail;
             this.emitChange();
         };
+        this.handleDescriptionChange = (event) => {
+            event.stopPropagation();
+            this.description = event.detail || undefined;
+            this.emitChange();
+        };
+        this.handleDescriptionBlur = () => {
+            if (this.description) {
+                const trimmed = this.description.trim();
+                if (trimmed !== this.description) {
+                    this.description = trimmed || undefined;
+                    this.emitChange();
+                }
+            }
+        };
         this.handleChange = (event) => {
             event.stopPropagation();
             const mode = event.detail.id;
@@ -93,6 +107,7 @@ export class LimeQueryBuilder {
                     this.internalResponseFormat = parsed.responseFormat;
                     this.limit = parsed.limit;
                     this.orderBy = parsed.orderBy;
+                    this.description = parsed['#description'];
                     this.mode = 'visual';
                     this.change.emit(parsed);
                 }
@@ -146,6 +161,7 @@ export class LimeQueryBuilder {
             this.internalResponseFormat = this.value.responseFormat;
             this.limit = this.value.limit;
             this.orderBy = this.value.orderBy;
+            this.description = this.value['#description'];
         }
         // Initialize code value from prop
         this.updateCodeValue();
@@ -156,7 +172,7 @@ export class LimeQueryBuilder {
         }
     }
     render() {
-        return (h(Host, { key: '4f1481f575b1afdd63a3115761a52a62699d7f84' }, this.renderHeader(), this.renderContent()));
+        return (h(Host, { key: '72ad0a52788c07a8369ee28535d9a05be92f5144' }, this.renderHeader(), this.renderContent()));
     }
     renderContent() {
         const visualModeSupported = this.checkVisualModeSupport();
@@ -194,6 +210,9 @@ export class LimeQueryBuilder {
             responseFormat: responseFormat,
             filter: this.filter,
         };
+        if (this.description) {
+            limeQuery['#description'] = this.description;
+        }
         if (this.limit !== undefined && this.limit > 0) {
             limeQuery.limit = this.limit;
         }
@@ -275,6 +294,12 @@ export class LimeQueryBuilder {
     renderLimetypeSection() {
         return (h("limebb-limetype-field", { platform: this.platform, context: this.context, label: "Limetype", value: this.limetype, required: true, fieldName: "limetype", onChange: this.handleLimetypeChange }));
     }
+    renderDescriptionSection() {
+        if (!this.limetype) {
+            return;
+        }
+        return (h("section", { class: "description" }, h("limel-input-field", { label: "Description", type: "textarea", value: this.description || '', placeholder: "Describe what data this query retrieves...", helperText: "Optional: Help AI agents and humans understand the query purpose", onChange: this.handleDescriptionChange, onBlur: this.handleDescriptionBlur })));
+    }
     renderResponseFormatSection() {
         if (!this.limetype) {
             return;
@@ -295,7 +320,7 @@ export class LimeQueryBuilder {
         return (h("section", { class: "query-options" }, h("limel-header", { class: "is-narrow", heading: "Query Options", icon: "ask_question" }), h("div", { class: "query-options-controls" }, h("limel-input-field", { label: "Limit", type: "number", value: ((_a = this.limit) === null || _a === void 0 ? void 0 : _a.toString()) || '', placeholder: "No limit", helperText: "Maximum number of results", onChange: this.handleLimitChange }), h("limebb-lime-query-order-by-editor", { platform: this.platform, context: this.context, limetype: this.limetype, value: this.orderBy, onChange: this.handleOrderByChange }))));
     }
     renderVisualMode() {
-        return (h("div", { class: "visual-mode" }, this.renderLimetypeSection(), this.renderResponseFormatSection(), this.renderFilterSection(), this.renderQueryOptionsSection()));
+        return (h("div", { class: "visual-mode" }, this.renderLimetypeSection(), this.renderDescriptionSection(), this.renderResponseFormatSection(), this.renderFilterSection(), this.renderQueryOptionsSection()));
     }
     renderHeader() {
         const visualModeSupported = this.checkVisualModeSupport();
@@ -442,7 +467,8 @@ export class LimeQueryBuilder {
             "filter": {},
             "internalResponseFormat": {},
             "limit": {},
-            "orderBy": {}
+            "orderBy": {},
+            "description": {}
         };
     }
     static get events() {

package/dist/collection/components/lime-query-builder/limetype-field/limetype-field.js

@@ -133,7 +133,7 @@ export class LimetypeField {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "Reference to the platform"
+                    "text": "Reference to the platform service container.\n\nUse this to access all platform services like repositories, HTTP client,\ncommand bus, navigator, and more. The platform instance is shared across\nall components in the same application context."
                 },
                 "getter": false,
                 "setter": false
@@ -159,7 +159,7 @@ export class LimetypeField {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "The context this component belongs to"
+                    "text": "The context describing where this component is running.\n\nThe context provides information about the current limetype and record ID\n(if viewing/editing a specific record). Components can use this to load\nrelevant data and understand their operating environment."
                 },
                 "getter": false,
                 "setter": false

package/dist/collection/components/limeobject/file-viewer/file-viewer.js

@@ -161,7 +161,7 @@ export class FileViewer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Reference to the platform"
+                    "text": "Reference to the platform service container.\n\nUse this to access all platform services like repositories, HTTP client,\ncommand bus, navigator, and more. The platform instance is shared across\nall components in the same application context."
                 },
                 "getter": false,
                 "setter": false
@@ -184,7 +184,7 @@ export class FileViewer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The context this component belongs to"
+                    "text": "The context describing where this component is running.\n\nThe context provides information about the current limetype and record ID\n(if viewing/editing a specific record). Components can use this to load\nrelevant data and understand their operating environment."
                 },
                 "getter": false,
                 "setter": false

package/dist/collection/components/loader/loader.js

@@ -39,7 +39,7 @@ export class CrmComponentsLoader {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "Reference to the platform"
+                    "text": "Reference to the platform service container.\n\nUse this to access all platform services like repositories, HTTP client,\ncommand bus, navigator, and more. The platform instance is shared across\nall components in the same application context."
                 },
                 "getter": false,
                 "setter": false
@@ -65,7 +65,7 @@ export class CrmComponentsLoader {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "The context this component belongs to"
+                    "text": "The context describing where this component is running.\n\nThe context provides information about the current limetype and record ID\n(if viewing/editing a specific record). Components can use this to load\nrelevant data and understand their operating environment."
                 },
                 "getter": false,
                 "setter": false

package/dist/collection/components/locale-picker/locale-picker.js

@@ -80,7 +80,7 @@ export class LocalePicker {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "Reference to the platform"
+                    "text": "Reference to the platform service container.\n\nUse this to access all platform services like repositories, HTTP client,\ncommand bus, navigator, and more. The platform instance is shared across\nall components in the same application context."
                 },
                 "getter": false,
                 "setter": false
@@ -106,7 +106,7 @@ export class LocalePicker {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "The context this component belongs to"
+                    "text": "The context describing where this component is running.\n\nThe context provides information about the current limetype and record ID\n(if viewing/editing a specific record). Components can use this to load\nrelevant data and understand their operating environment."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/notification-list/notification-item/notification-item.js

@@ -178,7 +178,7 @@ export class NotificationListItem {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "Reference to the platform"
+                    "text": "Reference to the platform service container.\n\nUse this to access all platform services like repositories, HTTP client,\ncommand bus, navigator, and more. The platform instance is shared across\nall components in the same application context."
                 },
                 "getter": false,
                 "setter": false
@@ -204,7 +204,7 @@ export class NotificationListItem {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "The context this component belongs to"
+                    "text": "The context describing where this component is running.\n\nThe context provides information about the current limetype and record ID\n(if viewing/editing a specific record). Components can use this to load\nrelevant data and understand their operating environment."
                 },
                 "getter": false,
                 "setter": false

package/dist/collection/components/notification-list/notification-list.js

@@ -114,7 +114,7 @@ export class NotificationList {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "Reference to the platform"
+                    "text": "Reference to the platform service container.\n\nUse this to access all platform services like repositories, HTTP client,\ncommand bus, navigator, and more. The platform instance is shared across\nall components in the same application context."
                 },
                 "getter": false,
                 "setter": false
@@ -140,7 +140,7 @@ export class NotificationList {
                             "name": "inheritdoc",
                             "text": undefined
                         }],
-                    "text": "The context this component belongs to"
+                    "text": "The context describing where this component is running.\n\nThe context provides information about the current limetype and record ID\n(if viewing/editing a specific record). Components can use this to load\nrelevant data and understand their operating environment."
                 },
                 "getter": false,
                 "setter": false

package/dist/collection/components/percentage-visualizer/percentage-visualizer.js

@@ -232,7 +232,7 @@ export class PercentageVisualizer {
                             "name": "inherit",
                             "text": undefined
                         }],
-                    "text": "Reference to the platform"
+                    "text": "Reference to the platform service container.\n\nUse this to access all platform services like repositories, HTTP client,\ncommand bus, navigator, and more. The platform instance is shared across\nall components in the same application context."
                 },
                 "getter": false,
                 "setter": false
@@ -258,7 +258,7 @@ export class PercentageVisualizer {
                             "name": "inherit",
                             "text": undefined
                         }],
-                    "text": "The context this component belongs to"
+                    "text": "The context describing where this component is running.\n\nThe context provides information about the current limetype and record ID\n(if viewing/editing a specific record). Components can use this to load\nrelevant data and understand their operating environment."
                 },
                 "getter": false,
                 "setter": false

package/dist/collection/components/trend-indicator/trend-indicator.js

@@ -187,7 +187,7 @@ export class TrendIndicator {
                             "name": "inherit",
                             "text": undefined
                         }],
-                    "text": "Reference to the platform"
+                    "text": "Reference to the platform service container.\n\nUse this to access all platform services like repositories, HTTP client,\ncommand bus, navigator, and more. The platform instance is shared across\nall components in the same application context."
                 },
                 "getter": false,
                 "setter": false
@@ -213,7 +213,7 @@ export class TrendIndicator {
                             "name": "inherit",
                             "text": undefined
                         }],
-                    "text": "The context this component belongs to"
+                    "text": "The context describing where this component is running.\n\nThe context provides information about the current limetype and record ID\n(if viewing/editing a specific record). Components can use this to load\nrelevant data and understand their operating environment."
                 },
                 "getter": false,
                 "setter": false

package/dist/components/document-item.js

@@ -52,6 +52,11 @@ const DocumentItemComponent = /*@__PURE__*/ proxyCustomElement(class DocumentIte
          * - 'checkbox': renders a checkbox for multiple selection.
          */
         this.type = 'checkbox';
+        /**
+         * The preferred file URL types to use when displaying
+         * the document's image preview.
+         */
+        this.fileTypes = ['view', 'contents', 'download'];
         this.handleDocumentItemClick = (event) => {
             if (this.isUnavailable()) {
                 return;
@@ -111,21 +116,22 @@ const DocumentItemComponent = /*@__PURE__*/ proxyCustomElement(class DocumentIte
     }
     render() {
         const isUnavailable = this.isUnavailable();
-        return (h(Host, { key: '625f38ae7e31ae2b900366df8ad60ff2099a2ce6', id: this.item.id.toString(), class: {
-                'has-image': !!this.item.thumbnail,
+        const image = this.getImage();
+        return (h(Host, { key: '7fc37bbc0185cdb38c837f2487c88f4d275d1c2f', id: String(this.item.file.id), class: {
+                'has-image': !!image,
                 'has-error': !!this.item.hasError,
-            }, role: this.type === 'radio' ? 'radio' : 'checkbox', "aria-checked": this.item.selected ? 'true' : 'false', "aria-disabled": isUnavailable ? 'true' : 'false', tabIndex: isUnavailable ? -1 : 0 }, h("limel-card", { key: 'b88db5b44b9dfcd858f1e395d0837623dfe9b5a5', image: this.item.thumbnail, clickable: isUnavailable ? false : true, onClick: this.handleDocumentItemClick, onKeyDown: this.handleKeyDown }, h("div", { key: '558028048aba88caf524373cbeb7c14ebc371bdb', slot: "component" }, this.renderFileSize(), this.renderBooleanInput())), this.renderHelp()));
+            }, role: this.type === 'radio' ? 'radio' : 'checkbox', "aria-checked": this.item.selected ? 'true' : 'false', "aria-disabled": isUnavailable ? 'true' : 'false', tabIndex: isUnavailable ? -1 : 0 }, h("limel-card", { key: 'da1329af4f1eac4617da054b5b02715b512631ff', image: image, clickable: isUnavailable ? false : true, onClick: this.handleDocumentItemClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'a30361cfb76512065fe3cf1b513f31257cf115ee', slot: "component" }, this.renderFileSize(), this.renderBooleanInput())), this.renderHelp()));
     }
     renderBooleanInput() {
         const id = this.getControlId();
         if (this.type === 'radio') {
-            return (h("limel-radio-button", { id: id, label: this.item.fileName, disabled: this.isUnavailable(), checked: this.item.selected, onClick: this.handleSelectionControlClick, onChange: this.handleSelectionControlChange }));
+            return (h("limel-radio-button", { id: id, label: this.item.file.filename, disabled: this.isUnavailable(), checked: this.item.selected, onClick: this.handleSelectionControlClick, onChange: this.handleSelectionControlChange }));
         }
-        return (h("limel-checkbox", { id: id, label: this.item.fileName, disabled: this.isUnavailable(), checked: this.item.selected, onClick: this.handleSelectionControlClick, onChange: this.handleSelectionControlChange }));
+        return (h("limel-checkbox", { id: id, label: this.item.file.filename, disabled: this.isUnavailable(), checked: this.item.selected, onClick: this.handleSelectionControlClick, onChange: this.handleSelectionControlChange }));
     }
     renderFileSize() {
-        var _a;
-        const formattedFileSize = formatBytes((_a = this.item) === null || _a === void 0 ? void 0 : _a.fileSize);
+        var _a, _b;
+        const formattedFileSize = formatBytes((_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.file) === null || _b === void 0 ? void 0 : _b.size);
         if (!formattedFileSize) {
             return;
         }
@@ -151,7 +157,7 @@ const DocumentItemComponent = /*@__PURE__*/ proxyCustomElement(class DocumentIte
         this.interact.emit(Object.assign(Object.assign({}, this.item), { selected }));
     }
     getControlId() {
-        return `boolean-input-${String(this.item.id)}`;
+        return `boolean-input-${String(this.item.file.id)}`;
     }
     isUnavailable() {
         var _a, _b;
@@ -165,13 +171,29 @@ const DocumentItemComponent = /*@__PURE__*/ proxyCustomElement(class DocumentIte
             input.checked = false;
         }
     }
+    getImage() {
+        const href = this.hrefForFile();
+        if (!href) {
+            return;
+        }
+        return {
+            src: href,
+            alt: this.item.file.filename,
+        };
+    }
+    hrefForFile() {
+        return ['preview', ...this.fileTypes]
+            .map((type) => this.item.file.getUrl(type))
+            .find(Boolean);
+    }
     static get delegatesFocus() { return true; }
     static get style() { return LimebbDocumentItemStyle0; }
 }, [17, "limebb-document-item", {
         "platform": [16],
         "context": [16],
         "item": [16],
-        "type": [513]
+        "type": [513],
+        "fileTypes": [16]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {