@orangelogic/design-system 2.193.0 → 2.195.0

package/library/package.json

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

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

@@ -103,8 +103,6 @@ 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. */
-    private resolveItemFormat;
     handleItemClick(event: MouseEvent, item: MasonryItem): void;
     handleSortableUpdate(event: Sortable.SortableEvent): void;
     renderActions(item: MasonryItem): import('lit').TemplateResult<1>;

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

@@ -178,6 +178,12 @@ export default class CxSbImage extends CxImage {
     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

@@ -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";

package/library/packages/tools/src/fetch-image/fetch-image.d.ts

@@ -6,6 +6,14 @@ export type ExtendedGalleryItem = GalleryItem & {
     [key: string]: string | undefined;
 };
 type FetchImageControllerOptions = {
+    /**
+     * Whether delivery URLs carry the `.auto` marker, letting the backend serve a rendition
+     * suited to the asset instead of the file the URL names.
+     *
+     * Defaults to `false`: a consumer opts in deliberately, so a surface that needs the
+     * asset exactly as stored (an editor preview, say) never picks this up by accident.
+     */
+    autoFormat?: boolean;
     isSiteBuilder?: boolean;
     maxEnd?: number;
     pageSize?: number;
@@ -24,6 +32,8 @@ export declare class FetchImageController implements ReactiveController {
     private readonly authToken;
     private securityByPassToken;
     private readonly isSiteBuilder;
+    /** Whether delivery URLs carry the `.auto` marker. See `FetchImageControllerOptions`. */
+    private readonly autoFormat;
     private requestEpoch;
     constructor(host: ReactiveElement, options?: FetchImageControllerOptions);
     get totalDataCount(): number;

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

@@ -38,5 +38,6 @@ export type GalleryItem = {
     rawId?: string;
     size?: GalleryItemSize;
     src?: string;
+    srcset?: string;
     url?: string;
 };

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

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

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

@@ -79,17 +79,52 @@ export declare function resolveAutoMaxWidth(manualFormat: boolean, proxyWidth: s
  * 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:
  *
- * 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.
+ * 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 *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.
+ * 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 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

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; maxWidth: string; 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; srcset: 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; 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 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; srcset: 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; srcset: 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' | 'maxWidth' | 'alt' | 'hasError' | 'id' | 'objectFit';
+        idKey?: 'src' | 'extension' | 'loading' | 'maxWidth' | 'size' | 'alt' | 'hasError' | 'id' | 'objectFit' | 'srcset';
         /**
           * 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.
         */