@orangelogic/design-system 4.28.0 → 4.29.0

package/library/components/video.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../chunks/video.BHfy8igQ.js";
+import { n as e, t } from "../chunks/video.Ba5xl_3K.js";
 export { t as VIDEO_BACKGROUND_SIZE_BY_OBJECT_FIT, e as default };

package/library/package.json

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

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

@@ -77,6 +77,8 @@ export default class CxAudio extends ResizableElement {
      * `--waves-color` and `--background-color`.
      */
     waveformSrc: string;
+    /** Runtime source hook for wrappers resolving waveform URLs without changing saved attributes. */
+    protected get waveformSource(): string;
     /**
      * Playback start position in seconds. The UI time counter starts from 0 relative to this point.
      * `cx-time-update` emits `time` relative to this value.

package/library/packages/atoms/src/components/document-viewer/document-viewer.d.ts

@@ -39,6 +39,10 @@ export default class CxDocumentViewer extends ResizableElement {
     identifier: string;
     /** True when the current image source failed to load. */
     private hasImageError;
+    /** Runtime source hook for wrappers that resolve delivery URLs without mutating `src`. */
+    protected get documentSource(): string;
+    /** Runtime representative hook for wrappers that resolve URLs without mutating the model. */
+    protected get representativeSource(): string;
     get isPptx(): boolean;
     get isPdf(): boolean;
     get isExtensionSupported(): boolean;
@@ -47,6 +51,8 @@ export default class CxDocumentViewer extends ResizableElement {
     updated(changedProps: Map<string, unknown>): void;
     private handleSizeChange;
     private handleImageError;
+    /** Clears an image error when a subclass supplies a newly resolved runtime URL. */
+    protected resetImageError(): void;
     private renderPdfViewer;
     private renderExtensionFallback;
     private renderRepresentativeImage;

package/library/packages/atoms/src/components/tab-group/tab-group.d.ts

@@ -8,6 +8,7 @@ import { default as CxIconButton } from '../icon-button/icon-button';
 import { default as CxMenu } from '../menu/menu';
 import { default as CxMenuItem } from '../menu-item/menu-item';
 import { default as CxTab } from '../tab/tab';
+import { default as CxTabPanel } from '../tab-panel/tab-panel';
 /**
  * @summary Tab groups organize content into a container that shows one section at a time.
  *
@@ -18,12 +19,14 @@ import { default as CxTab } from '../tab/tab';
  * (default) adds scroll buttons, `dropdown` collapses the overflow into a trigger and menu, and `pagination`
  * splits the tabs into fixed-size pages. With `overflow-variant="dropdown"`, `promote-active-overflow-tab`
  * keeps a selected hidden tab visible next to the trigger by swapping it with the tab it displaces, without
- * reordering either tab in the light DOM.
+ * reordering either tab in the light DOM. The dropdown trigger sits outside the tablist as its own tab stop and
+ * follows the menu button pattern; arrow keys, Home and End in the tablist only move between the visible tabs.
  *
  * @slot (default) - Used for grouping tab panels in the tab group. Must be `<cx-tab-panel>` elements.
  * @slot nav - Used for grouping tabs in the tab group. Must be `<cx-tab>` elements.
  *
- * @event {{ name: String }} cx-tab-show - Emitted when a tab is shown.
+ * @event {{ name: String }} cx-tab-show - Emitted when a tab is shown. With `force-on-change`, also emitted when
+ *   the user selects the active tab again.
  * @event {{ name: String }} cx-tab-hide - Emitted when a tab is hidden.
  *
  * @csspart base - The component's base wrapper.
@@ -44,7 +47,10 @@ import { default as CxTab } from '../tab/tab';
  * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
  * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
  * @cssproperty [--tab-dropdown-trigger-max-width=150px] - The maximum width of the dropdown button.
+ * @cssproperty [--tab-dropdown-menu-max-width=300px] - The maximum width of each item in the dropdown menu, which the
+ *   menu shrinks to. Longer tab labels are truncated with an ellipsis.
  * @cssproperty [--tab-group-nav-padding=0] - The padding around the tab group's navigation container.
+ * @cssproperty [--tab-group-tabs-gap=normal] - The horizontal gap between tabs.
  * @cssproperty [--tab-group-tabs-padding=var(--cx-spacing-2x-small)] - The padding around the tabs in the button variant.
  * @cssproperty [--tab-group-top-gap=var(--cx-spacing-small)] - The gap between the nav and body when placement is top.
  */
@@ -58,6 +64,7 @@ export default class CxTabGroup extends CortexElement {
         'cx-menu-item': typeof CxMenuItem;
         'cx-resize-observer': typeof CxResizeObserver;
         'cx-tab': typeof CxTab;
+        'cx-tab-panel': typeof CxTabPanel;
     };
     private readonly localize;
     private mutationObserver;
@@ -72,12 +79,15 @@ export default class CxTabGroup extends CortexElement {
      * dropdownOffset and the tabs' hidden marker with outdated results.
      */
     private overflowObserver?;
+    /**
+     * Waits for the group to become visible to apply the initial active tab. Tracked so disconnectedCallback() can
+     * release it when the group is removed before it was ever shown.
+     */
+    private initialTabObserver?;
     /** Tab kept visible next to the dropdown trigger by promote-active-overflow-tab. */
     private promotedTab?;
     /** Tab to refocus once its promotion's fit-loop pass clears the hidden attribute (see restorePromotedTabFocus). */
     private promotedTabPendingFocus?;
-    /** Keyboard "position" for arrow-key nav, independent of tabIndex (which always mirrors selection). */
-    private focusedTab?;
     private tabs;
     private focusableTabs;
     private panels;
@@ -139,6 +149,11 @@ export default class CxTabGroup extends CortexElement {
     minTabWidth: number;
     /** When overflow-variant is "dropdown", keeps a selected hidden tab visible next to the trigger. */
     promoteActiveOverflowTab: boolean;
+    /**
+     * When set to true, the `cx-tab-show` event will be emitted when the user selects the active tab again,
+     * even if the active tab is not changed.
+     */
+    forceOnChange: boolean;
     /** Minimum clamp width - The minimum width of the tab not to be clamped */
     private static readonly MIN_CLAMP_WIDTH;
     private static readonly HIDDEN_TAB_ATTRIBUTE;
@@ -161,6 +176,10 @@ export default class CxTabGroup extends CortexElement {
     private getAllTabs;
     private getAllPanels;
     private getActiveTab;
+    /**
+     * The column gap between tabs (--tab-group-tabs-gap) in pixels; `normal` reads as 0.
+     */
+    private getTabGap;
     /**
      * If dropdown overflow but placement is start and end, count as scroll overflow
      */
@@ -171,6 +190,8 @@ export default class CxTabGroup extends CortexElement {
      * this getter is what the fit loop reads so a stale reservation can never keep the feature switched on.
      */
     private get activePromotedTab();
+    /** Whether promote-active-overflow-tab currently applies (it needs the dropdown overflow to be in effect). */
+    private get isPromotionEnabled();
     /**
      * Get the height of the body
      */
@@ -181,15 +202,46 @@ export default class CxTabGroup extends CortexElement {
     private get caretDirection();
     private handleClick;
     private handleKeyDown;
+    /**
+     * The tab that an arrow key, Home or End moves focus to: the first, last, previous or next enabled tab that is in
+     * the tablist, wrapping at both ends. Tabs hidden in the dropdown are menu items, not tabs, so they are skipped.
+     */
+    private getKeyboardTargetTab;
     private handleScrollToStart;
     private handleScrollToEnd;
-    private handleDropdownAfterShow;
-    /** Opens the dropdown from the last visible tab without activating anything; see handleDropdownAfterShow() for the item focus. */
-    private enterDropdownFromTabStrip;
+    /**
+     * Promotes a tab that is already active when the group first renders (e.g. server-rendered after a round trip),
+     * so the first overflow pass never hides it. A display:none tab can't hold focus, so a host focusing it right
+     * after mount would otherwise lose focus. This can't wait for the first-load callback in connectedCallback():
+     * that callback runs a frame later, after the first overflow pass has already hidden the tab.
+     * Sets promotedTab only; the caller's syncTabsAndPanels() applies it.
+     */
+    private promoteInitialActiveTab;
+    /**
+     * The tab to select on first load: the first enabled `active` tab, else the first enabled tab. When a tab is
+     * explicitly active it matches what promoteInitialActiveTab() promoted.
+     * Skipping disabled tabs matters because setActiveTab() refuses them, which would leave nothing selected.
+     */
+    private findInitialTab;
     /** Marks tab as promoted (see promotedTab) without moving it in the DOM. */
     private promoteHiddenActiveTab;
     /** Queues tab to be refocused in syncTabAndPanels() once promoteHiddenActiveTab()'s fit-loop pass makes it visible again. */
     private restorePromotedTabFocus;
+    /**
+     * Single entry point for user and API activation, so every path keeps the promoted active tab visible.
+     * promoteHiddenActiveTab() only schedules the overflow pass, which runs later in an IntersectionObserver callback,
+     * so setActiveTab() still sees the tab hidden. restorePromotedTabFocus() must come first: promoteHiddenActiveTab()
+     * drops the refocus it queues when no pass is needed.
+     * Pass restoreFocus only when focus is on the tab itself (click, Enter/Space), not when it moves elsewhere.
+     * Pass isUserSelection only for an explicit pick (click, Enter/Space): with force-on-change it re-emits
+     * cx-tab-show for the active tab, which programmatic and arrow-key paths must not do.
+     */
+    private activateTab;
+    /**
+     * Roving tabindex: the active tab is the tablist's only tab stop. While the active tab is hidden in the dropdown,
+     * the first visible enabled tab takes its place so Tab can still reach the tablist.
+     */
+    private syncTabStop;
     private setActiveTab;
     private setAriaLabels;
     private repositionIndicator;
@@ -250,6 +302,12 @@ export default class CxTabGroup extends CortexElement {
     private handlePaginationDotClick;
     private handlePaginationDotKeyDown;
     private renderPaginationDot;
+    /**
+     * The overflow trigger and its menu follow the menu button pattern and sit outside the tablist, which may only own
+     * tabs. cx-dropdown and cx-menu provide the keyboard behavior (arrow keys wrap, Home/End, Escape returns focus to
+     * the trigger).
+     */
+    private renderDropdown;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/library/packages/events/src/events.d.ts

@@ -112,7 +112,6 @@ export * from './cx-hub-connection-disconnected';
 export * from './cx-hub-connection-reconnected';
 export * from './cx-hub-connection-reconnecting';
 export * from './cx-image-click';
-export * from './cx-image-src-resolved';
 export * from './cx-import-settings';
 export * from './cx-initial-focus';
 export * from './cx-input';
@@ -228,7 +227,6 @@ export * from './cx-table-switch-change';
 export * from './cx-table-validation-change';
 export * from './cx-time-based-change';
 export * from './cx-time-update';
-export * from './cx-timeline-data-resolved';
 export * from './cx-tiptap-code-block-doc-request';
 export * from './cx-tiptap-image-doc-request';
 export * from './cx-tiptap-image-host-feedback';
@@ -248,7 +246,6 @@ export * from './cx-video-comment-mouseleave';
 export * from './cx-video-comment-mouseover';
 export * from './cx-video-context-change';
 export * from './cx-video-editor-track-canvas-ready';
-export * from './cx-video-src-resolved';
 export * from './cx-video-editor-track-click';
 export * from './cx-video-editor-transition-click';
 export * from './cx-video-editor-events';
@@ -263,7 +260,6 @@ export * from './cx-video-seeked';
 export * from './cx-video-segment-change';
 export * from './cx-video-media';
 export * from './cx-video-time-update';
-export * from './cx-video-thumbnail-resolved';
 export * from './cx-view-and-sort-action-click';
 export * from './cx-view-logs';
 export * from './cx-xml-editor-asset-type-change';

package/library/packages/hybrid/rich-text/src/rich-text.d.ts

@@ -19,6 +19,13 @@ import { RichTextMenuBarSpec, RichTextStyleFormat, RichTextToolbarSpec } from '.
  * @cssproperty --width - The width of the rich text editor
  * @cssproperty --rich-text-background-color - The background color of the rich text editor
  * @cssproperty --rich-text-font-family - The font family applied to the editor content area. Inherits from the page font when not set.
+ * @cssproperty --rich-text-border - The border around the rich text editor
+ * @cssproperty --rich-text-border-radius - The border radius of the rich text editor
+ * @cssproperty --rich-text-toolbar-background-color - The background color of the toolbar
+ * @cssproperty --rich-text-toolbar-border-color - The color of the line between the toolbar and the content
+ * @cssproperty --rich-text-table-resize-handle-color - The color of the table column and row resize handles
+ * @cssproperty --rich-text-inline-code-color - The text color of inline code
+ * @cssproperty --rich-text-inline-code-background-color - The background color of inline code
  *
  * @description When `editable` is true, a `cx-rich-text-toolbar` is rendered above the editor using the same `Editor`
  * instance for formatting commands. Set **`show-toolbar`** to false to hide only the formatting **icon row** (menu bar is unchanged).
@@ -99,6 +106,8 @@ export default class CxRichText extends CortexElement {
      * skipped when `getHTML()` is unchanged.
      */
     private lastContent;
+    /** False until this component's onCreate ran; updates before it are the editor normalising its own content. */
+    private editorCreated;
     content: string;
     editable: boolean;
     /**

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

@@ -37,12 +37,25 @@ export default class CxSbAudio extends CxAudio {
      * own asset metadata and maps this data into state instead.
      */
     fetchedAssetData: Record<string, unknown>;
+    private lastAppliedWaveformSrc;
+    private sourceResolveVersion;
+    private forceSourceResolution;
+    private resolvedWaveformSrc;
+    protected get waveformSource(): string;
     /**
      * Support CMS5 edit mode for the audio.
      */
     get isInEditMode(): boolean;
     runConnectedCallback(): void;
     handleSrcChange(): Promise<void>;
+    handleSourceIdentityChange(): void;
+    private resolveWaveformSource;
+    /**
+     * Re-resolves a stored URL that has expired, from `record-id` + `format`. Returns the stored URL
+     * unchanged when there is nothing to recover from, or when the fresh resolve fails.
+     */
+    private recoverStoredSrc;
+    disconnectedCallback(): void;
     handleRecordIdChange(): Promise<void>;
     handleFetchedAssetDataChange(): void;
     private applyAssetData;

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

@@ -35,6 +35,7 @@ export default class CxSbButton extends CxButton {
      */
     assetSrc: string;
     recordId: string;
+    siteBuilderToken: string;
     recordName: string;
     dataLabel: string;
     dataIconName: {
@@ -105,6 +106,13 @@ export default class CxSbButton extends CxButton {
     spaces?: TeamSpace[];
     /** Space URL re-resolved when the stored one points at a space that moved. */
     private resolvedClickSpace;
+    /** Runtime-only asset URL resolved for the active permanent/expiring mode. */
+    private resolvedAssetSrc;
+    private fetchImageController?;
+    private fetchAssetController?;
+    private assetResolveVersion;
+    resolveAssetSrcFromRecordId(): Promise<void>;
+    private get renderedAssetSrc();
     handleClickSpaceChange(): void;
     /**
      * `outline` is a boolean on `cx-button`, but the block carries every appearance

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

@@ -32,6 +32,8 @@ export default class CxColumn extends CortexElement {
     };
     private readonly localize;
     private readonly hasSlotController;
+    private fetchImageController?;
+    private backgroundResolveVersion;
     containerEl: HTMLDivElement;
     defaultSlot: HTMLSlotElement;
     resizable: boolean;
@@ -81,6 +83,7 @@ export default class CxColumn extends CortexElement {
      * The asset transformations applied to the background image.
      */
     backgroundTransformations: Transformation[];
+    siteBuilderToken: string;
     /**
      * The object-fit-style crop applied to the background image.
      */
@@ -101,6 +104,7 @@ export default class CxColumn extends CortexElement {
      */
     nestedBandLayout: boolean;
     private showAddBlockButton;
+    private resolvedBackgroundSrc;
     /**
      * Whether the add-block button overlays the column (`--column-add-block-position: absolute`).
      * An overlaid button cannot rely on selecting the column to appear — a full column offers no
@@ -183,6 +187,7 @@ export default class CxColumn extends CortexElement {
     private handleScroll;
     private syncHasDamViewChild;
     private handleSlotChange;
+    handleBackgroundAssetChange(): Promise<void>;
     get resolvedBackgroundImageUrl(): string | undefined;
     render(): TemplateResult;
 }

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

@@ -14,6 +14,8 @@ export default class CxColumnGroup extends CortexElement {
         'cx-divider': typeof CxDivider;
     };
     private mutationObserver;
+    private fetchImageController?;
+    private backgroundResolveVersion;
     containerEl: HTMLDivElement;
     private readonly assignedColumns;
     trigger: ColumnTriggerMode;
@@ -54,11 +56,13 @@ export default class CxColumnGroup extends CortexElement {
      * The asset transformations applied to the background image.
      */
     backgroundTransformations: Transformation[];
+    siteBuilderToken: string;
     /**
      * Breakpoints for responsive design.
      */
     breakpoints: [number, number, number];
     private columnCount;
+    private resolvedBackgroundSrc;
     private isDeprecated;
     constructor();
     connectedCallback(): void;
@@ -70,6 +74,7 @@ export default class CxColumnGroup extends CortexElement {
     private handleMutation;
     private checkIsDeprecated;
     handleSlotChange(): Promise<void>;
+    handleBackgroundAssetChange(): Promise<void>;
     get resolvedBackgroundImageUrl(): string | undefined;
     render(): TemplateResult;
 }

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

@@ -20,10 +20,18 @@ export default class CxSbDocumentViewer extends CxDocumentViewer {
     static readonly styles: CSSResultGroup;
     /** The asset record ID, used to open the asset overview when can-open-asset is enabled. */
     recordId: string;
+    siteBuilderToken: string;
     /** When true, renders a corner overlay button that opens the asset overview on hover and click. */
     canOpenAsset: boolean;
+    private resolvedDocumentSource;
+    private resolvedRepresentativeSource;
+    private fetchAssetController?;
+    private assetResolveVersion;
     private get isInEditMode();
+    protected get documentSource(): string;
+    protected get representativeSource(): string;
     constructor();
+    resolveAssetSourcesFromRecordId(): Promise<void>;
     private handleOpenAssetButtonClick;
     private renderOpenAssetButton;
     render(): import('lit-html').TemplateResult<1>;

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

@@ -156,6 +156,8 @@ export default class CxSbImage extends CxImage {
      * delivery URL from the `path_*` fields here rather than searching for one.
      */
     fetchedAssetData: Record<string, unknown>;
+    /** Batched data for the dark variant; retained independently of the light asset. */
+    fetchedAssetDataDarkMode: Record<string, unknown>;
     private renderedImageSrc;
     /**
      * Indicates whether the image is currently zoomed.
@@ -209,6 +211,13 @@ export default class CxSbImage extends CxImage {
     private srcResolveVersion;
     /** A source recovery is already queued for the current update cycle. */
     private sourceRecoveryScheduled;
+    /** Serializes Search calls so metadata updates cannot invalidate each other forever. */
+    private sourceRecoveryInFlight?;
+    /** Runs one final recovery after inputs change during an in-flight request. */
+    private sourceRecoveryPending;
+    /** Last successfully resolved edit-mode input keys, one per image variant. */
+    private resolvedSrcKey;
+    private resolvedSrcDarkModeKey;
     /**
      * Support CMS5 edit mode for the image.
      */
@@ -305,6 +314,7 @@ export default class CxSbImage extends CxImage {
      */
     handleRecordIdChangeForExtension(): void;
     handleFetchedAssetDataChange(): void;
+    handleProvidedVariantChange(): void;
     protected update(changedProps: PropertyValues): void;
     protected handleLoad(event: Event): void;
     /**
@@ -345,20 +355,13 @@ export default class CxSbImage extends CxImage {
      * itself — one call per page instead of one (or more) per block.
      */
     private get hasAssetDataProvider();
-    /**
-     * Picks one variant's delivery URL out of the viewer's batched data. Mirrors
-     * `FetchAssetController.refetchFormatUrl`: the original-file proxy is only used for a
-     * browser-displayable original and otherwise falls back to the transcoded one. Empty
-     * until the batch lands, and for a variant the batch did not cover.
-     */
+    /** Selects metadata by identity, independently of which theme was initially loaded. */
+    private getProvidedAssetData;
+    /** Picks a variant's delivery URL, with a transcoded fallback for non-image originals. */
     private readProvidedSource;
-    /**
-     * When a stored URL has expired, or none was stored, resolve one from the block's
-     * `record-id` + `format` (light and dark variants independently). Fires on every
-     * `src` / `srcDarkMode` / record change and no-ops for non-expired URLs, so working
-     * paths are untouched. On failure it leaves the stored URL in place and lets the
-     * existing `@error` / fallback path handle it.
-     */
+    /** Each batched variant has its own extension and file size for Auto format. */
+    private resolveProvidedAutoFormat;
+    /** Resolves light and dark URLs independently without changing their saved sources. */
     private recoverExpiredSources;
     private recoverExpiredSource;
     private get renderedSrc();

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

@@ -12,7 +12,6 @@ import { CSSResultGroup } from 'lit';
  * @summary CxTimeline
  */
 export default class CxTimeline extends CortexElement {
-    #private;
     static readonly styles: CSSResultGroup;
     static readonly dependencies: {
         'cx-icon-button': typeof CxIconButton;
@@ -67,7 +66,6 @@ export default class CxTimeline extends CortexElement {
     /** Proxy URLs and their `srcset` candidates resolved from asset fetch, keyed by item.id. */
     private resolvedThumbnails;
     handleDataChange(): Promise<void>;
-    private persistResolvedThumbnailsToData;
     private handlePreviousClick;
     private handleNextClick;
     render(): import('lit-html').TemplateResult<1>;

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

@@ -146,6 +146,13 @@ export default class CxSbVideo extends CxVideo {
     private resolvedClickSpace;
     /** Lazily created; recovers a fresh signed URL when the stored one expires. */
     private fetchAssetController?;
+    /** Lazily resolves the poster from its record id for the active URL mode. */
+    private posterFetchImageController?;
+    /** Runtime-only poster URL. Signed URLs must never be reflected into the document. */
+    private resolvedPoster;
+    /** Monotonic token to drop stale poster lookups. */
+    private posterResolveVersion;
+    private forceSourceResolution;
     /**
      * Support CMS5 edit mode for the video.
      */
@@ -186,8 +193,10 @@ export default class CxSbVideo extends CxVideo {
     private resolveClickSpace;
     handleThumbnailChange(): void;
     handlePosterChange(): Promise<void>;
+    resolvePosterFromRecordId(): Promise<void>;
     handleFetchedAssetDataChange(): void;
     handleSrcChange(): Promise<void>;
+    handleSourceIdentityChange(): void;
     /**
      * Returns the URL to hand to the player
      */

package/library/packages/organisms/src/content-builder/components/template-manager/template-manager.d.ts

@@ -84,6 +84,13 @@ export default class CxTemplateManager extends CortexElement {
      * @default false
      */
     enableAssetFormatControls: boolean;
+    /**
+     * Whether the server mints expiring asset URLs for this instance (42ASN5). When set, resolutions stop
+     * asking for permanent asset paths, which on the server would create the permanent anonymous link this
+     * feature removes. When this and `enable-asset-format-controls` are both true,
+     * expiring URLs take precedence and the incompatible controls stay disabled.
+     */
+    useExpiringAssetUrls: boolean;
     /**
      * Exposes the font family / style / weight pickers in the block config sidebar.
      * Should match the host `cx-content-builder` setting.
@@ -146,7 +153,11 @@ export default class CxTemplateManager extends CortexElement {
     private _apiGetTemplates;
     private _apiGetTemplatesForType;
     private _apiUpdateTemplate;
+    /** Keep standalone template editing on the same URL mode as the page host. */
+    protected willUpdate(): void;
     handleLoadedChange(): Promise<void>;
+    /** Expiring asset URLs cannot be rewritten by format or transformation controls. */
+    private get resolvedEnableAssetFormatControls();
     private resetState;
     handleTemplateChange(): void;
     private handleEdit;

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

@@ -15,7 +15,9 @@ import { CxRTEBubbleMenu, CxRTETableGenerator } from './plugins';
  *
  * Set `enable-asset-format-controls` to expose the asset format, transformation,
  * download-format, and asset-format-picker controls on image, video, gallery,
- * carousel, column-group, and timeline blocks. Off by default.
+ * carousel, column-group, and timeline blocks. Off by default. When
+ * `use-expiring-asset-urls` is also set, expiring URLs take precedence and the
+ * incompatible format and transformation controls stay disabled.
  *
  * `default-image-format`, `default-video-poster-format`, `default-timeline-format`,
  * `default-gallery-format` and `default-carousel-format` are retained for backward
@@ -135,6 +137,13 @@ export default class CxContentBuilder extends CortexElement {
      * @default false
      */
     enableAssetFormatControls: boolean;
+    /**
+     * Whether the server mints expiring asset URLs for this instance (42ASN5). When set, resolutions stop
+     * asking for permanent asset paths, which on the server would create the permanent anonymous link this
+     * feature removes. When this and `enable-asset-format-controls` are both true,
+     * expiring URLs take precedence and the incompatible controls stay disabled.
+     */
+    useExpiringAssetUrls: boolean;
     /**
      * Whether the content builder emits `ol:ui-metric` events timing each user action,
      * for collection as browser OpenTelemetry histograms.
@@ -331,6 +340,13 @@ export default class CxContentBuilder extends CortexElement {
     private get measuredOnRequestDownloadFormat();
     private get measuredOnConfigureWorkflow();
     private get measuredOnRequestAssetFormat();
+    /** Expiring asset URLs cannot be rewritten by format or transformation controls. */
+    private get resolvedEnableAssetFormatControls();
+    /**
+     * 42ASN5: one mode per page. The template manager reuses the block config sidebar, so the mode is set
+     * here once on first update rather than in each consumer — a second read could disagree with the viewer.
+     */
+    protected willUpdate(): void;
     get isDesigner(): boolean;
     get isTemplateEditable(): boolean;
     get isMultiLanguage(): boolean;

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

@@ -1,4 +1,5 @@
 import { default as CortexLightElement } from '../../../base/src/cortex-light-element.ts';
+import { PropertyValues } from 'lit';
 /**
  * @summary Wraps content-builder output — read mode and the editor canvas alike —
  * supplying its blocks with data they would otherwise each fetch for themselves.
@@ -9,10 +10,10 @@ import { default as CortexLightElement } from '../../../base/src/cortex-light-el
  * `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 the record-id children that still search for themselves
- * (`cx-sb-video`, `cx-sb-audio`, `cx-timeline`, and `cx-details-group` for section backgrounds); an
- * image block takes its URL from the batch instead. 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.
+ * (`cx-sb-video`, `cx-sb-audio`, `cx-timeline`, background containers, buttons, and document
+ * viewers); an image block takes its URL from the batch instead. 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.
  *
  * Space URLs are re-resolved per scan because they break when the space moves domain;
  * doing it per block would repeat one identical request each and race this assignment.
@@ -26,6 +27,12 @@ export default class CxContentBuilderViewer extends CortexLightElement {
      * (which consume it as `siteBuilderToken`). Empty on authenticated/preview pages.
      */
     securityBypassToken: string;
+    /**
+     * Whether the server minted expiring asset URLs for this page (42ASN5). When present, resolutions must
+     * not ask for permanent asset paths — on the server that request creates the permanent anonymous link
+     * this feature removes. Set from the host attribute, same as `security-bypass-token`.
+     */
+    useExpiringAssetUrls: boolean;
     /** Blocks already populated by a previous asset-data scan; skipped on re-scans. */
     private readonly processedFetchableBlocks;
     /** Blocks already populated by a previous space-list scan; skipped on re-scans. */
@@ -38,6 +45,8 @@ export default class CxContentBuilderViewer extends CortexLightElement {
     createRenderRoot(): this;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    private syncAssetUrlMode;
     /** Blocks arrive in bursts as the page parses, so scans are collapsed. */
     private scheduleScan;
     private scanAndFetch;
@@ -45,8 +54,8 @@ export default class CxContentBuilderViewer extends CortexLightElement {
     private distributeToken;
     private scanAndFetchAssetData;
     private collectFetchableBlocks;
-    /** The record ID a block would use if it fetched its own asset data right now. */
-    private getPrimaryRecordId;
+    /** Fetch both image variants so a theme switch needs no additional request. */
+    private getRecordIds;
     /** Every field a block could map from fetched asset data. */
     private getRequestedFields;
     /**

package/library/packages/organisms/src/form/control-renderer/control-renderer.d.ts

@@ -157,7 +157,7 @@ export declare class ControlRenderer {
      */
     private resolveAssetFormatSrc;
     /** Resolves the URL and intrinsic ratio from the same selected media field. */
-    resolveAssetFormat(recordId: string, format: string): Promise<{
+    resolveAssetFormat(recordId: string, format: string, resolveExpiringImagePath: boolean): Promise<{
         aspectRatio: number;
         src: string;
     }>;

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

@@ -23,9 +23,10 @@ export declare class FetchAssetController implements ReactiveController {
      * `apiGetAssets` maps a `path_<format>` media field to its `.URI` string, so the
      * fresh URL is read straight back off the requested field.
      */
-    refetchFormatUrl({ format, recordId, securityByPassToken, token, }: {
+    refetchFormatUrl({ format, recordId, resolveExpiringImagePath, securityByPassToken, token, }: {
         format: string;
         recordId: string;
+        resolveExpiringImagePath?: boolean;
         securityByPassToken?: string;
         token?: string;
     }): Promise<string>;