@orangelogic/design-system 2.192.0 → 2.194.0

package/library/components/video.js

@@ -1,7 +1,7 @@
 import { _ as kd, a as Sa, b as Be, c as Je } from "../chunks/inheritsLoose.BuSn_CvZ.js";
 import { c as ps, a as Bn } from "../chunks/_commonjsHelpers.DQNKXVTB.js";
 import { r as Sb } from "../chunks/___vite-browser-external_commonjs-proxy.C2tf3HsQ.js";
-import { C as Cb } from "../chunks/image.CiQwSDfe.js";
+import { C as Cb } from "../chunks/image.BSvc6eti.js";
 import Mb from "./resize-observer.js";
 import { r as Db, R as Pb, a as Rp, b as Lb } from "../chunks/resizable-component.styles.CAfXABBc.js";
 import { c as Rb } from "../chunks/component.styles.CRO4Odto.js";

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.192.0",
+  "version": "2.194.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/atoms/src/components/image/image.d.ts

@@ -174,6 +174,8 @@ export default class CxImage extends ResizableElement {
     };
     /** The crossorigin value for the `<img>`; `undefined` (attribute omitted) when `noCrossorigin` is set. */
     get crossorigin(): string | undefined;
+    /** Whether there is nothing to display: no source and no placeholder to stand in for one. */
+    protected get isEmpty(): boolean;
     /**
      * Whether to hold the box with a skeleton rather than the loaded image.
      *

package/library/packages/molecules/src/masonry/masonry.d.ts

@@ -103,7 +103,7 @@ export default class CxMasonry extends CortexElement {
      * the default `100vw`.
      */
     private get itemSizes();
-    /** The format one item is served under: the configured one, or derived from its extension. */
+    /** The format one item is served under: the configured one, or derived from the item. */
     private resolveItemFormat;
     handleItemClick(event: MouseEvent, item: MasonryItem): void;
     handleSortableUpdate(event: Sortable.SortableEvent): void;

package/library/packages/organisms/src/content-builder/blocks/image/image.d.ts

@@ -176,6 +176,14 @@ export default class CxSbImage extends CxImage {
      * server-side resize would flatten to a still frame.
      */
     private assetExtension;
+    /** Width of the proxy currently displayed; caps `srcset` so it never asks to upscale. */
+    private assetProxyWidth;
+    /**
+     * The asset's file size, which is what `Auto` uses to choose between the original-file
+     * proxy and the transcoded one. Empty until the asset fetch reports back, which
+     * `resolveAutoFormat` reads as "within the limit".
+     */
+    private assetFileSize;
     /**
      * Whether an asset fetch has reported back for the current record.
      *

package/library/packages/organisms/src/content-builder-viewer/content-builder-viewer.d.ts

@@ -6,11 +6,11 @@ import { default as CortexLightElement } from '../../../base/src/cortex-light-el
  *
  * @description Scans its light-DOM children for record-id blocks (`cx-sb-image`,
  * `cx-sb-video`, `cx-sb-audio`) and batch-fetches their asset metadata in one Search
- * call, and for blocks linking to a team space (`cx-sb-button`, `cx-sb-image`,
- * `cx-sb-video`), fetching the space list once and assigning it as `spaces`. It also
- * distributes its `securityBypassToken` to every record-id child (including
- * `cx-timeline`, for expired-URL recovery only) so their own runtime Search calls are
- * authorised. Renders no UI. Blocks skip their own fetch whenever an ancestor supplies
+ * call, and for blocks needing the team-space list (`cx-sb-button`, `cx-sb-image`,
+ * `cx-sb-video` linking to a space, and `cx-gallery` showing space cards), fetching
+ * the space list once and assigning it as `spaces`. It also distributes its
+ * `securityBypassToken` to every record-id child (including `cx-timeline`, for
+ * expired-URL recovery only) so their own runtime Search calls are authorised. Renders no UI. Blocks skip their own fetch whenever an ancestor supplies
  * it, so they must sit inside this element for that to apply — in the editor that means
  * inside the canvas document.
  *

package/library/packages/services/src/api/asset/asset.d.ts

@@ -1,4 +1,4 @@
-import { GetAllFormatCodesResponse, GetAssetsInFolderRequest, GetAssetsInFolderResponse, GetAssetsRequest, GetAssetsResponse, GetAuthorizedObjectsRequest, GetAuthorizedObjectsResponse, GetAvailableProxiesResponse, GetCropZoneSuggestionRequest, GetCropZoneSuggestionResponse, GetTransformAssetLinkResponse, SearchAssetsParams, SearchAssetsResponse } from './asset.types';
+import { GetAllFormatCodesResponse, GetAssetsInFolderRequest, GetAssetsInFolderResponse, GetAssetsRequest, GetAssetsResponse, GetAuthorizedObjectsRequest, GetAuthorizedObjectsResponse, GetAvailableProxiesResponse, GetCropZoneSuggestionRequest, GetCropZoneSuggestionResponse, GetTransformAssetLinkResponse, SearchAssetsItem, SearchAssetsParams, SearchAssetsResponse } from './asset.types';
 
 export declare const DEFAULT_VIEW_SIZE = "CoreField.LargeSizePreview";
 export declare const FIELD_CORTEX_PATH = "Document.CortexPath";
@@ -8,7 +8,6 @@ export declare const FIELD_DOC_CAPTION_LONG = "Document.CaptionLong";
 export declare const FIELD_EXTENSION = "Document.FileExtension";
 export declare const FIELD_FILE_SIZE = "CoreField.FileSize";
 export declare const FIELD_IDENTIFIER = "CoreField.Identifier";
-export declare const FIELD_KEYWORDS = "CoreField.Keywords";
 export declare const FIELD_MAX_HEIGHT = "CoreField.MaxHeight";
 export declare const FIELD_MAX_WIDTH = "CoreField.MaxWidth";
 export declare const FIELD_RECORD_ID = "Document.RecordID";
@@ -19,6 +18,8 @@ export declare const FIELD_ORIGINAL_FILE_NAME = "CoreField.OriginalFileName";
 export declare const FIELD_UPDATED_FILE_NAME = "CoreField.UpdatedFileName";
 export declare const FIELD_LARGE_SIZE_PREVIEW_ID = "Document.DocumentDirectRepresentativeRID";
 export declare const LIBRARY_NAME = "Library";
+/** Appended to a `path_*` key to carry that proxy's rendered width alongside its URI. */
+export declare const MEDIA_FIELD_WIDTH_SUFFIX = "__width";
 export declare const MESSAGE_NEW_LINE = "\n";
 export declare const ORIGINAL_VIEW_SIZE = "CoreField.OriginalPreview";
 export declare const FIELD_DOC_SUBTYPE = "Document.DocSubType";
@@ -41,7 +42,14 @@ export declare function apiGetTransformAssetLink({ assetId, extension, format, s
     useSession?: string;
 }): Promise<GetTransformAssetLinkResponse | null>;
 export declare function apiGetAssets({ extraFields, getPermanentAssetsPaths, isSiteBuilder, recordIds, securityByPassToken, token, }: GetAssetsRequest): Promise<GetAssetsResponse>;
-export declare function apiGetAssetsInFolder({ countPerPage, directParentFolderIdentifier, extraFields, getPermanentAssetsPaths, isSiteBuilder, limitedDocTypes, pageNumber, parentFolderIdentifier, searchTerm, securityByPassToken, sortOrder, token, }: GetAssetsInFolderRequest): Promise<GetAssetsInFolderResponse>;
+/**
+ * Reads the pixel width a `path_*` proxy field actually has.
+ *
+ * Each proxy is rendered at its own size, so this is the ceiling for resizing that URL —
+ * distinct from `CoreField.MaximumWidth`, which describes the original file.
+ */
+export declare function readSearchAssetItemWidth(item: SearchAssetsItem, field: string): number | undefined;
+export declare function apiGetAssetsInFolder({ countPerPage, directParentFolderIdentifier, excludedDocTypes, extraFields, getPermanentAssetsPaths, isSiteBuilder, limitedDocTypes, pageNumber, parentFolderIdentifier, searchTerm, securityByPassToken, sortOrder, token, }: GetAssetsInFolderRequest): Promise<GetAssetsInFolderResponse>;
 export declare function apiGetCropFocusMode({ autoCropMode, cropHeight, cropWidth, imageUrl, useSession, }: GetCropZoneSuggestionRequest): Promise<GetCropZoneSuggestionResponse | null>;
 export declare function apiGetAvailableProxies({ assetRecordId, isSiteBuilder, siteUrl, token, useSession, }: {
     assetRecordId: string;

package/library/packages/types/src/gallery-item.d.ts

@@ -30,6 +30,7 @@ export type GalleryItem = {
     header?: string;
     id: string;
     isClone?: boolean;
+    maxWidth?: string;
     name?: string;
     objectFit?: ObjectFit;
     openInNewTab?: boolean;

package/library/packages/types/src/masonry.d.ts

@@ -10,7 +10,9 @@ export type MasonryItem = {
     hasError?: boolean;
     id: string;
     loading?: boolean;
+    maxWidth?: string;
     objectFit?: ObjectFit;
+    size?: string;
     src: string;
 };
 export type MasonryItemAction = {

package/library/packages/utils/src/transformation/transformation.d.ts

@@ -67,30 +67,74 @@ export declare const AUTO_ORIGINAL_FORMAT_MAX_BYTES: number;
  * reported" apart from "genuinely empty file" — the two lead to different decisions.
  */
 export declare function parseFileSizeToBytes(size: string | number | null | undefined): number | undefined;
+/**
+ * The largest width `Auto` may request for an item.
+ *
+ * Each proxy is rendered at a fixed size (a `TR1` may be 1200px where its `TRX` is 7360px),
+ * so resizing past it only asks the backend to upscale. Returns `undefined` under a manual
+ * format — the author's choice is left alone — and when the proxy reported no width.
+ */
+export declare function resolveAutoMaxWidth(manualFormat: boolean, proxyWidth: string | number | null | undefined): number | undefined;
 /**
  * Picks the proxy format an asset should be served under when the author chose `Auto`
  * instead of naming a format.
  *
- * Extensions that would lose something to a transcode (animation, alpha, bit depth) take
- * the original-file proxy, but only up to `AUTO_ORIGINAL_FORMAT_MAX_BYTES`; everything
- * else takes the transcoded raster proxy, which is the one `buildAssetSrcset` may resize.
+ * Two things have to hold before the original file is served untouched:
+ *
+ * 1. The source is itself a displayable image (`IMAGE_ORIGINAL_EXTENSIONS`). For a
+ *    document source the original-file proxy is a PDF, which cannot be transformed or
+ *    displayed as an image, so those always take the transcoded raster proxy.
+ * 2. It is no larger than `AUTO_ORIGINAL_FORMAT_MAX_BYTES` — past that, delivering the
+ *    original costs the viewer more than the fidelity it preserves.
  *
- * An unknown or missing extension resolves to the raster proxy — the safe default for the
- * majority of assets, and the same value the format ladders already fall back to.
+ * The delivery URL still carries the `AUTO_FORMAT_EXTENSION` marker (see
+ * `applyAutoFormatToAssetUrl`) so the backend picks the exact rendition; this only decides
+ * which proxy to ask for in the first place.
  *
- * An unknown *size* does not: a size the API did not report is treated as within the
- * limit, so a missing field never silently strips a GIF of its animation.
+ * An unknown or missing extension resolves to the raster proxy — the safe default, since
+ * it is a real image whatever the source turns out to be. An unknown *size* does not: a
+ * size the API did not report is treated as within the limit, so a missing field never
+ * silently downgrades an image away from its original.
  */
 export declare function resolveAutoFormat(extension: string | null | undefined, size?: string | number | null): string;
+/**
+ * Extension marker that asks the backend to serve whichever rendition suits the asset,
+ * rather than the exact file the delivery URL names.
+ */
+export declare const AUTO_FORMAT_EXTENSION = ".auto";
+/**
+ * Appends the `.auto` marker to an asset-link URL, letting the backend pick a rendition
+ * suited to the source instead of returning the file exactly as named.
+ *
+ * The existing extension is kept (`photo.jpg` becomes `photo.jpg.auto`): the URL names a
+ * real proxy file, and rewriting that name is the backend's business, not ours. Only the
+ * final path segment is touched, so the access key and any `/t/` transform segment are
+ * preserved and a configured crop or resize still applies.
+ *
+ * An animated GIF served as the original file is left alone: whatever rendition the
+ * backend picked instead would be a still frame, so the marker would cost the animation.
+ * A GIF under any other format is already a rendered still, so it has nothing left to
+ * lose and takes the marker like anything else — the same distinction `buildAssetSrcset`
+ * draws before it resizes.
+ *
+ * Returns the URL unchanged when it is not an asset link (arbitrary external sources are
+ * never rewritten), when there is no final segment to append to, or when the marker is
+ * already present, so the call is safe to repeat.
+ */
+export declare function applyAutoFormatToAssetUrl(url: string, options?: {
+    extension?: string | null;
+    format?: string;
+}): string;
 /**
  * Builds a `srcset` value for an asset-link URL by emitting one width-only resize
  * candidate per ladder entry, letting the browser fetch and decode only the pixels
  * the layout actually needs.
  *
- * Candidates wider than `maxWidth` are dropped so the backend is never asked to
- * upscale past the asset's real dimensions. When `maxWidth` falls below the whole
- * ladder, the smallest candidate is still emitted so a `srcset` is always produced
- * for an eligible URL.
+ * When `maxWidth` is known the list is bounded by the asset itself: rungs above it are
+ * dropped so the backend is never asked to upscale, rungs within
+ * `ORIGINAL_INSTEAD_OF_RESIZE_MARGIN` of it are dropped as near-duplicates, and the
+ * untransformed URL closes the list at its real width. That last candidate costs no
+ * render and is the only one that can serve the image sharp at full size.
  *
  * Returns an empty string when the URL is not an asset link, when it already carries
  * a transformation (the width was configured upstream), or when it is an animated GIF

package/library/react-web-component.d.ts

@@ -22,7 +22,7 @@
             export type CxGraphViewNodeAction = { controlType: 'default' | 'switch'; icon: string; id: string; name: string; showDivider: boolean; style: { color: string; }; };
             export type CxGraphViewRecord = any;
             export type CxGraphViewSummary = { icon: string; texts: string[]; };
-            export type CxMasonryMasonryItem = { alt: string; extension: string; hasError: boolean; id: string; loading: boolean; objectFit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'; src: string; };
+            export type CxMasonryMasonryItem = { alt: string; extension: string; hasError: boolean; id: string; loading: boolean; maxWidth: string; objectFit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'; size: string; src: string; };
             export type CxMasonryMasonryItemAction = { color: string; event: string; icon: string; src: string; tooltip: string; };
             export type CxMentionsAutocompleteItem = { id: string; label: string; name: string; suffixContent: string; suffixIcon: string; suffixTooltip: string; suffixType: 'badge'; title: string; type: string; };
             export type CxMultiSelectColumnData = { id: string; items: { disabled: boolean; group: string; id: string; index: string; text: string; tooltip: string; type: string; }[]; sort: boolean; title: string; };
@@ -33,8 +33,8 @@
             export type CxAssetLinkFormatFocusMode = { auto: boolean; label: string; value: string; };
             export type CxAssetLinkFormatProxy = { cdnName: string; extension: string; formatHeight: number; formatWidth: number; height: number; id: string; permanentLink: string; proxyLabel: string; proxyName: string; width: number; };
             export type CxAssetLinkFormatTransformation = { key: 'Crop' | 'Metadata' | 'Proxy' | 'Quality' | 'Resize' | 'Rotate'; value: { disabledSize: boolean; focusMode: string; height: number; isFocusModeAuto: boolean; keepMetadata: boolean; mode: string; position: 'bottom-center' | 'bottom-left' | 'bottom-right' | 'center-center' | 'center-left' | 'center-right' | 'top-center' | 'top-left' | 'top-right'; quality: number; ratioHeight: number; ratioWidth: number; rotation: number; unit: '%' | 'px'; width: number; x: number; y: number; }; };
-            export type CxBentoGridGalleryItem = { additions: string[]; alt: string; cardType: 'asset' | 'folder' | 'link' | 'page' | 'space'; className: string; details: string; docType: '' | 'Album' | 'Audio' | 'Audio segment' | 'Image' | 'Multimedia' | 'ProjectDocument' | 'Story' | 'Video' | 'Widget'; extension: string; filler: boolean; header: string; id: string; isClone: boolean; name: string; objectFit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'; openInNewTab: boolean; pageId: string; rawId: string; size: string; src: string; url: string; };
-            export type CxCarouselGalleryItem = { additions: string[]; alt: string; cardType: 'asset' | 'folder' | 'link' | 'page' | 'space'; className: string; details: string; docType: '' | 'Album' | 'Audio' | 'Audio segment' | 'Image' | 'Multimedia' | 'ProjectDocument' | 'Story' | 'Video' | 'Widget'; extension: string; filler: boolean; header: string; id: string; isClone: boolean; name: string; objectFit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'; openInNewTab: boolean; pageId: string; rawId: string; size: string; src: string; url: string; };
+            export type CxBentoGridGalleryItem = { additions: string[]; alt: string; cardType: 'asset' | 'folder' | 'link' | 'page' | 'space'; className: string; details: string; docType: '' | 'Album' | 'Audio' | 'Audio segment' | 'Image' | 'Multimedia' | 'ProjectDocument' | 'Story' | 'Video' | 'Widget'; extension: string; filler: boolean; header: string; id: string; isClone: boolean; maxWidth: string; name: string; objectFit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'; openInNewTab: boolean; pageId: string; rawId: string; size: string; src: string; url: string; };
+            export type CxCarouselGalleryItem = { additions: string[]; alt: string; cardType: 'asset' | 'folder' | 'link' | 'page' | 'space'; className: string; details: string; docType: '' | 'Album' | 'Audio' | 'Audio segment' | 'Image' | 'Multimedia' | 'ProjectDocument' | 'Story' | 'Video' | 'Widget'; extension: string; filler: boolean; header: string; id: string; isClone: boolean; maxWidth: string; name: string; objectFit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'; openInNewTab: boolean; pageId: string; rawId: string; size: string; src: string; url: string; };
             export type CxChatbotChatbotEvent = { event: string; excludedFromPurposes: string[]; label: string; };
             export type CxTableTimeFormatterParams = { color: string; fontSize: string; fontWeight: string; inputUnit: string; locale: string; placeholder: string; style: dictionary; unitsFormat: string; displayStyle: string; paramsMapField: string; paramsMap: dictionary; };
             export type CxTableTextFormatParams = { colorMap: dictionary; color: string; };
@@ -6762,7 +6762,7 @@
         /**
           * The key to use for the id of the items in the masonry layout.
         */
-        idKey?: 'src' | 'extension' | 'loading' | 'alt' | 'hasError' | 'id' | 'objectFit';
+        idKey?: 'src' | 'extension' | 'loading' | 'maxWidth' | 'size' | 'alt' | 'hasError' | 'id' | 'objectFit';
         /**
           * The proxy format the item images were resolved with. <br/> Only used to decide whether a `srcset` may be generated: an original-file format paired with an animated source must be delivered untouched.
         */