@orangelogic/design-system 3.19.0 → 3.21.0

package/library/packages/organisms/src/content-builder/plugins/sections/section-fragment-component.d.ts

@@ -0,0 +1,22 @@
+import { Component, Editor } from 'grapesjs';
+
+/** Model property holding the section id. Serialized with the project, read back on save. */
+export declare const SECTION_ID_PROP = "sectionId";
+/** Model property holding the host container selector the fragment mounts into. */
+export declare const SECTION_SELECTOR_PROP = "containerSelector";
+/** Registers the fragment type once per editor. */
+export declare function registerSectionFragmentType(editor: Editor): void;
+export declare function isSectionFragment(component?: Component | null): boolean;
+/** Section id carried by a fragment. */
+export declare function getSectionId(fragment: Component): string;
+/** Every section fragment under the wrapper, in wrapper order. */
+export declare function getSectionFragments(editor: Editor): Component[];
+export declare function getSectionFragment(editor: Editor, sectionId: string): Component | undefined;
+/** The fragment a component belongs to — itself when it is one — or `undefined` outside any section. */
+export declare function getSectionOf(component?: Component | null): Component | undefined;
+/**
+ * The cell that receives blocks at the top of a section root: the first `BlockCell` whose parent is
+ * the root (page content), falling back to the first cell anywhere below it (hero: cell inside its
+ * column group).
+ */
+export declare function getRootCell(root: Component): Component | undefined;

package/library/packages/organisms/src/content-builder/plugins/sections/section-host-mounting.d.ts

@@ -0,0 +1,15 @@
+import { Component } from 'grapesjs';
+
+/** `querySelector` that never throws on a malformed selector coming from configuration. */
+export declare function resolveHost(doc: Document, selector: string): HTMLElement | null;
+/**
+ * Puts the fragment element inside its host container. Returns `true` when the fragment is (now)
+ * mounted in its host, `false` when the element or host is not available yet.
+ */
+export declare function mountFragmentIntoHost(fragment: Component): boolean;
+/**
+ * Re-mounts fragments whose host was replaced by the page (SPA refresh, VForm re-render). The
+ * callback is coalesced per task so a burst of mutations — including the ones our own
+ * `replaceChildren` produces — triggers one pass, which is a no-op once everything is mounted.
+ */
+export declare function observeHostReplacement(doc: Document, remountAll: () => void): MutationObserver;

package/library/packages/organisms/src/content-builder/plugins/sections/sections-canvas-patches.d.ts

@@ -0,0 +1,20 @@
+import { Editor } from 'grapesjs';
+
+/** Hides the wrapper element: its children are mounted in section hosts, it must not take space. */
+export declare function parkWrapperElement(editor: Editor): void;
+/**
+ * Block-manager drops are captured on the wrapper element by default; the sections live outside it,
+ * so the same `Droppable` is re-bound to the frame body (in-canvas moves already use the body).
+ */
+export declare function rebindBlockDropsToBody(editor: Editor): void;
+/**
+ * Drag autoscroll measures the wrapper element's height for its lower bound; with a parked wrapper
+ * that is zero. Measure the document instead so authors can autoscroll through every section.
+ */
+export declare function widenAutoscrollToBody(editor: Editor): void;
+/**
+ * Restricts grapesjs' `select-comp` click handling to targets inside a section host, so clicking the
+ * page chrome around the sections never selects anything. Also skips clicks on a column group while
+ * one of its columns is being resized.
+ */
+export declare function scopeSelectClicksToHosts(editor: Editor, hostSelector: string): void;

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

@@ -0,0 +1,7 @@
+import { ContentBuilderSection } from '../../../../../types/src/content-builder';
+import { Editor } from 'grapesjs';
+
+/** Selector list matching every section host container. */
+export declare function buildHostSelector(sections: ContentBuilderSection[]): string;
+declare const SectionsPlugin: (sections: ContentBuilderSection[]) => (editor: Editor) => void;
+export default SectionsPlugin;

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

@@ -1,10 +1,19 @@
 import { ToolbarItem } from '../../../../types/src/content-builder';
 import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
-import { Editor } from 'grapesjs';
+import { Component, Editor } from 'grapesjs';
 
 declare const toolbar: (localize: LocalizeController, toolbarConfigs?: {
     allowDuplicateBlocks?: boolean;
 }) => ToolbarItem[];
+export declare const addColumnItem: (localize: LocalizeController, command: ToolbarItem['command']) => ToolbarItem;
+/** Appends the column with its text block, instead of opening the picker. */
+export declare const fontKitAddColumnItem: (localize: LocalizeController, templateRow: Component) => ToolbarItem;
+/**
+ * Reads as a remove but unticks the part's Elements checkbox, leaving the block
+ * in place. The id cannot be `remove`: `applyComponentFlagsToToolbar` strips
+ * that one for a block with `removable: false`, which these are.
+ */
+export declare const fontKitRemoveElementItems: (localize: LocalizeController, fontKit: Component, toggleAttribute: string) => ToolbarItem[];
 export declare const execCommand: (event: MouseEvent, editor: Editor, command: any) => void;
 export declare const generateToolbar: (items: any[], editor: Editor, dividerIndices?: number[]) => any[];
 export default toolbar;

package/library/packages/organisms/src/content-builder/plugins/utils/block-width.d.ts

@@ -0,0 +1,20 @@
+import { default as CxColumn } from '../../blocks/column/column';
+
+/**
+ * The width a block's percentage `width` should be measured against.
+ *
+ * Blocks sit inside `cx-column`, so a raw percentage resolves against the column. Once a
+ * page sets `--content-builder-viewer-content-max-width`, non-full-bleed blocks are
+ * constrained to a narrower content band instead, and a percentage stored against the
+ * column would no longer match what renders. Read mode already clamps to the band via
+ * CSS; this keeps the editor's px/% conversion on the same reference so the resize
+ * handle and the width field agree with the page.
+ *
+ * Full-bleed blocks span the whole viewer, so they keep measuring the column.
+ *
+ * @param el - The block being measured.
+ * @param column - The `cx-column` the block belongs to.
+ * @param canvasWindow - The canvas window, needed for `getComputedStyle`.
+ * @returns The reference width in CSS pixels.
+ */
+export default function getBlockReferenceWidth(el: Element, column: CxColumn, canvasWindow: Window): number;

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

@@ -1,5 +1,5 @@
 import { PropertyConfig } from '../../../types/src/content-builder';
-import { FontTypeface } from '../../../types/src/font-picker';
+import { FontFamily, FontTypeface } from '../../../types/src/font-picker';
 import { LocalizeController } from '../../../utils/src/custom-element/i18n';
 import { STYLE_CONTROL } from './content-builder-constants';
 
@@ -21,8 +21,8 @@ export default class StyleController {
         default?: any;
         max?: number | undefined;
         min?: number | undefined;
-        placeholder?: string;
         text?: string | undefined;
+        placeholder?: string;
         category?: (string | import('grapesjs').BlockCategoryProperties) | undefined;
         command?: string | ((editor: import('grapesjs').Editor, trait: import('grapesjs').Trait) => any) | undefined;
         step?: number | undefined;
@@ -98,6 +98,8 @@ export default class StyleController {
         fontPickerConfigs?: {
             api: () => Promise<FontTypeface[]>;
             familyKey: string;
+            inheritedFamilies?: FontFamily[];
+            inheritedOptionLabel?: string;
             styleKey: string;
             weightKey?: string;
         };
@@ -125,7 +127,7 @@ export default class StyleController {
                 options: import('../../../types/src/content-builder').Option[];
                 type: "unit";
             };
-            validation?: (record: Record<string, unknown>) => string;
+            validation?: (record: Record<string, unknown>, siblings?: Array<Record<string, unknown>>) => string;
         };
         itemsPerRow?: number;
         listEditorConfigs?: {
@@ -135,7 +137,7 @@ export default class StyleController {
             displayField?: string;
             editDialogLabel: string;
             noHeader?: boolean;
-            sampleItem: Record<string, string>;
+            sampleItem: Record<string, unknown>;
         };
         mask?: string;
         maskBlocks?: Record<string, unknown>;
@@ -182,10 +184,12 @@ export default class StyleController {
     /**
      * Builds the controls for a font picker.
      */
-    getFontPickerControls<T = Record<string, any>>({ api, familyKey, styleKey, type, weightKey, ...control }: Omit<Partial<PropertyConfig<T>>, 'api' | 'controlType' | 'fontPickerConfigs'> & {
+    getFontPickerControls<T = Record<string, any>>({ api, familyKey, inheritedFamilies, inheritedOptionLabel, styleKey, type, weightKey, ...control }: Omit<Partial<PropertyConfig<T>>, 'api' | 'controlType' | 'fontPickerConfigs'> & {
         api: () => Promise<FontTypeface[]>;
         familyKey: string;
         id: string;
+        inheritedFamilies?: FontFamily[];
+        inheritedOptionLabel?: string;
         name: string;
         styleKey: string;
         weightKey?: string;

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

@@ -9,9 +9,8 @@ import { default as CortexLightElement } from '../../../base/src/cortex-light-el
  * 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 the record-id children that still search for themselves
- * (`cx-sb-video`, `cx-sb-audio`, and `cx-timeline` for expired-URL recovery only); an
- * image block takes its URL from the batch instead. Renders no UI. Blocks skip their own fetch whenever an ancestor supplies
+ * `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.
  *
@@ -20,6 +19,7 @@ import { default as CortexLightElement } from '../../../base/src/cortex-light-el
  */
 export default class CxContentBuilderViewer extends CortexLightElement {
     #private;
+    static styles: import('lit').CSSResult[];
     /**
      * Page-scoped security-bypass token, stamped by the server on this element in read-mode HTML.
      * The viewer uses it for its batched Search call and distributes it to its record-id children
@@ -46,13 +46,6 @@ export default class CxContentBuilderViewer extends CortexLightElement {
     private getPrimaryRecordId;
     /** Every field a block could map from fetched asset data. */
     private getRequestedFields;
-    /**
-     * Proxy fields that can serve as an image's delivery URL. A hand-picked format names one
-     * proxy; `Auto` is decided by the extension this same response carries, so both candidates
-     * are requested up front rather than in a follow-up call. The original-file proxy always
-     * comes with the transcoded fallback, which is what a non-image original falls back to.
-     */
-    private getImagePathFields;
     private buildFetchPlan;
     private fetchAllAssetData;
     private applyFetchedData;

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

@@ -0,0 +1,170 @@
+import { AssetFormatValue } from '../../../../types/src/asset-format-picker';
+import { Asset, AssetTypeString, PropertyConfig } from '../../../../types/src/content-builder';
+import { StyleProps } from 'grapesjs';
+import { ReactiveControllerHost } from 'lit';
+import { Ref } from 'lit/directives/ref.js';
+
+/** Where a decoded value is written to: a block attribute, a style, a property, or nothing. */
+export type ControlValueType = 'attribute' | 'style' | 'property' | 'decorative';
+/**
+ * Ambient host state that the control branches read at render time.
+ *
+ * Every field is optional so a consumer supplies only what the control types it actually
+ * renders need. Missing fields are defaulted in the private `context` getter; the class
+ * doc lists which branch degrades without which field.
+ */
+export type ControlRendererContext = {
+    allowedFolders?: string[];
+    baseUrl?: string;
+    blockAttributes?: Record<string, any>;
+    blockStyles?: StyleProps;
+    boundary?: HTMLElement;
+    defaultLanguage?: string;
+    isAfterShow?: boolean;
+    onConfigureWorkflow?: (id?: string) => Promise<string>;
+    onRequestAsset?: (type: AssetTypeString, multiple?: boolean, accepts?: string[], restrictType?: AssetTypeString) => Promise<Asset | Record<string, Asset>>;
+    onRequestAssetFormat?: (assetId: string, value?: AssetFormatValue) => Promise<AssetFormatValue | null | undefined>;
+    onRequestDownloadFormat?: (assetIds: string[], formats?: Record<string, string[]>) => Promise<Record<string, string[]>>;
+    /**
+     * The list's other rows inside a list editor's dialog, so an
+     * `inputConfigs.validation` can reject duplicates. `cx-config-form` has no
+     * siblings and leaves it empty.
+     */
+    siblingRecords?: Array<Record<string, unknown>>;
+    sortedLanguages?: string[];
+    token?: string;
+    traits?: PropertyConfig[];
+};
+/**
+ * Writes one decoded value to the consumer's storage.
+ *
+ * `cx-config-form` routes this to block attributes / styles / properties and emits
+ * `cx-content-builder-form-change`. `cx-list-editor` writes into the edited item and
+ * ignores `type`, since an item row is a single flat record.
+ */
+export type ControlCommit = (params: {
+    callback?: PropertyConfig['callback'];
+    /** Skip the consumer's `await host.updateComplete` — the `switch` + attribute path. */
+    immediate?: boolean;
+    key: string;
+    type: ControlValueType;
+    value: unknown;
+}) => Promise<void> | void;
+export type ControlRendererOptions = {
+    commit: ControlCommit;
+    /** Live consumer state. Re-invoked at every read site — never cache the result. */
+    getContext: () => ControlRendererContext;
+    /** Renders a `group` trait's children. Omit when the consumer has no `group` support. */
+    renderChildren?: (children: PropertyConfig[], parent: PropertyConfig) => unknown;
+};
+/**
+ * @summary Renders a content-builder `PropertyConfig` as a form control, and decodes the value
+ * that control emits back into key/value writes.
+ *
+ * Shared by `cx-config-form` (the block settings panel) and `cx-list-editor` (the add/edit item
+ * dialog) so the control types are implemented once.
+ *
+ * Two layers, usable independently:
+ * - `renderControl()` dispatches on `trait.controlType` and returns the control's template. It
+ *   never writes anything; it calls the injected `handleChange` with a per-controlType payload.
+ * - `createChangeHandler()` builds the `handleChange` that decodes that payload and calls
+ *   `options.commit`.
+ *
+ * The rendered `cx-*` tags are bare tag names: this module imports no component class for them.
+ * Each consumer declares the tags it needs in its own `static dependencies`, which is what lets
+ * `cx-list-editor` reuse the renderer without pulling in every picker.
+ *
+ * Context fields and the branches that read them:
+ *
+ * | Field | Read by | Missing means |
+ * | --- | --- | --- |
+ * | `onRequestAsset` | gallery / image / other / all / audio / video / icon picker | picker opens no DAM dialog |
+ * | `boundary` | asset-transformation, folder / gallery / page / color-swatch picker, list-editor | popup clipping only |
+ * | `blockStyles` | corner-position-input-group, font-picker | offsets read 0px, default font family |
+ * | `blockAttributes` | default input validation, image-picker record id | validation sees an empty record |
+ * | `sortedLanguages`, `defaultLanguage` | list-editor, color-swatch-picker | no translation tab |
+ * | `traits` | audio / video picker | no sibling asset-format-picker lookup |
+ * | `token`, `baseUrl` | asset-transformation | dialog cannot fetch the asset |
+ * | `onRequestDownloadFormat` | download-format-picker | picker inert |
+ * | `onRequestAssetFormat` | asset-format-picker | picker inert |
+ * | `onConfigureWorkflow` | dam-custom-toolbar-buttons | configure-workflow inert |
+ * | `isAfterShow` | color-swatch-picker | the swatch table never loads |
+ * | `allowedFolders` | folder-picker with `useAllowedFolders` | unrestricted root |
+ */
+export declare class ControlRenderer {
+    private readonly host;
+    private readonly options;
+    private readonly localize;
+    private apiSearchAssets;
+    private apiGetTeamSpaceFontFamily;
+    private readonly pendingGalleryPickerSaves;
+    private readonly fontFamiliesCache;
+    /** Space font name per control, to store the space-default option explicitly. */
+    private readonly spaceFontFamilyCache;
+    private readonly pendingFontFamilyFetches;
+    private readonly typeSubtypeOptionsCache;
+    private readonly pendingTypeSubtypeOptionsFetches;
+    /**
+     * Monotonic request counter per `srcKey`, so a slow format lookup cannot write
+     * its URL over a newer format's. Keyed by `srcKey` because that is the
+     * attribute being written — two traits writing different keys never race.
+     */
+    private readonly srcResolveVersions;
+    constructor(host: ReactiveControllerHost & HTMLElement, options: ControlRendererOptions);
+    /**
+     * Builds the `handleChange` for one trait: it decodes the payload that the matching
+     * `renderControl` branch emits, then commits one or more key/value writes.
+     */
+    createChangeHandler({ key, trait, type, }: {
+        key: string;
+        trait: PropertyConfig;
+        type: ControlValueType;
+    }): (newValue: unknown, ...args: unknown[]) => Promise<void>;
+    /**
+     * Reads the consumer's live state and fills in defaults.
+     *
+     * Deliberately a getter, invoked at each read site: the default input branch validates
+     * against `blockAttributes` after an `await`, so snapshotting the context into a local
+     * would turn a live read into a stale one.
+     */
+    private get context();
+    private handleConfigChange;
+    private handleAttributeChange;
+    /** Claims the next request slot for `srcKey`; call before the first await. */
+    private claimSrcResolveVersion;
+    /**
+     * Resolves a format URL and returns it only if no newer request for the same
+     * `srcKey` was claimed while this one was in flight.
+     *
+     * The version must be claimed by the caller before its first await: the
+     * transformation, format and manual-format commits each suspend on the host
+     * update, so a confirmation that pauses there would otherwise claim a newer
+     * version on resume and overwrite the confirmation that already committed.
+     */
+    private resolveLatestAssetFormatSrc;
+    /**
+     * Resolves the delivery URL to persist for an asset under a given format.
+     *
+     * A blank `format` means `Auto`, which is what a reset leaves behind: the proxy is then
+     * derived from the asset's own extension and size (`resolveAutoFormat`), matching what
+     * the block computes at runtime. Without this the reset would keep whichever URL the
+     * previous hand-picked format wrote.
+     *
+     * `TRX` proxies serve the asset's original file. When that file is not something a
+     * browser can display — its extension says so, or its doc type does — fall back to the
+     * `TR1` transformation proxy, which is always transcoded to a raster format. Mirrors the
+     * same fallback in `FetchImageController` (used by the gallery/timeline blocks) and
+     * `cx-asset-transformation-dialog`.
+     */
+    private resolveAssetFormatSrc;
+    renderControl({ blockAttributes, container, currentValue, disabled, handleChange, key, label, trait, }: {
+        blockAttributes: Record<string, any>;
+        container?: Ref<HTMLElement>;
+        currentValue: unknown;
+        disabled?: boolean;
+        handleChange: (newValue: unknown, ...args: unknown[]) => Promise<void>;
+        key: string;
+        label?: string | false;
+        trait: PropertyConfig;
+    }): import('lit').TemplateResult<1>;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * Styles for the markup that `ControlRenderer.renderControl()` emits.
+ *
+ * Every consumer of `ControlRenderer` must include this sheet in its `static styles`,
+ * otherwise the shared controls render unstyled. The `config-form__*` class prefix is kept
+ * from when these rules lived in `config-form.styles.ts` so the moved markup is untouched.
+ */
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/organisms/src/list-editor/list-editor.d.ts

@@ -1,24 +1,56 @@
 import { default as CxButton } from '../../../atoms/src/components/button/button.ts';
+import { default as CxButtonGroup } from '../../../atoms/src/components/button-group/button-group.ts';
+import { default as CxCard } from '../../../atoms/src/components/card/card.ts';
+import { default as CxCheckbox } from '../../../atoms/src/components/checkbox/checkbox.ts';
 import { default as CxDialog } from '../../../atoms/src/components/dialog/dialog.ts';
+import { default as CxDivider } from '../../../atoms/src/components/divider/divider.ts';
+import { default as CxDropdown } from '../../../atoms/src/components/dropdown/dropdown.ts';
 import { default as CxGrid } from '../../../atoms/src/components/grid/grid.ts';
 import { default as CxGridItem } from '../../../atoms/src/components/grid-item/grid-item.ts';
+import { default as CxIcon } from '../../../atoms/src/components/icon/icon.ts';
 import { default as CxInput } from '../../../atoms/src/components/input/input.ts';
 import { default as CxLineClamp } from '../../../atoms/src/components/line-clamp/line-clamp.ts';
+import { default as CxMenu } from '../../../atoms/src/components/menu/menu.ts';
+import { default as CxMenuItem } from '../../../atoms/src/components/menu-item/menu-item.ts';
 import { default as CxOption } from '../../../atoms/src/components/option/option.ts';
 import { default as CxRadio } from '../../../atoms/src/components/radio/radio.ts';
+import { default as CxRadioCard } from '../../../atoms/src/components/radio-card/radio-card.ts';
 import { default as CxRadioGroup } from '../../../atoms/src/components/radio-group/radio-group.ts';
 import { default as CxSelect } from '../../../atoms/src/components/select/select.ts';
 import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
+import { default as CxSwitch } from '../../../atoms/src/components/switch/switch.ts';
 import { default as CxTab } from '../../../atoms/src/components/tab/tab.ts';
 import { default as CxTabGroup } from '../../../atoms/src/components/tab-group/tab-group.ts';
 import { default as CxTabPanel } from '../../../atoms/src/components/tab-panel/tab-panel.ts';
+import { default as CxTextarea } from '../../../atoms/src/components/textarea/textarea.ts';
+import { default as CxTooltip } from '../../../atoms/src/components/tooltip/tooltip.ts';
 import { default as CxTypography } from '../../../atoms/src/components/typography/typography.ts';
+import { default as CxVisuallyHidden } from '../../../atoms/src/components/visually-hidden/visually-hidden.ts';
 import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { default as CxAssetFormatPicker } from '../../../molecules/src/asset-format-picker/asset-format-picker.ts';
 import { default as CxAssetPicker } from '../../../molecules/src/asset-picker/asset-picker.ts';
+import { default as CxBicolorPicker } from '../../../molecules/src/bicolor-picker/bicolor-picker.ts';
+import { default as CxBorderInputGroup } from '../../../molecules/src/border-input-group/border-input-group.ts';
+import { default as CxConfirmPopover } from '../../../molecules/src/confirm-popover/confirm-popover.ts';
+import { default as CxCornerPositionInputGroup } from '../../../molecules/src/corner-position-input-group/corner-position-input-group.ts';
+import { default as CxDownloadFormatPicker } from '../../../molecules/src/download-format-picker/download-format-picker.ts';
 import { default as CxDynamicSelect } from '../../../molecules/src/dynamic-select/dynamic-select.ts';
+import { default as CxFontPicker } from '../../../molecules/src/font-picker/font-picker.ts';
+import { default as CxIconPicker } from '../../../molecules/src/icon-picker/icon-picker.ts';
+import { default as CxPaddingInputGroup } from '../../../molecules/src/padding-input-group/padding-input-group.ts';
+import { default as CxPositionPicker } from '../../../molecules/src/position-picker/position-picker.ts';
+import { default as CxShadowInputGroup } from '../../../molecules/src/shadow-input-group/shadow-input-group.ts';
+import { default as CxSizeInputGroup } from '../../../molecules/src/size-input-group/size-input-group.ts';
+import { default as CxTypeSubtypeSelect } from '../../../molecules/src/type-subtype-select/type-subtype-select.ts';
+import { default as CxAssetTransformationDialog } from '../asset-transformation-dialog/asset-transformation-dialog.ts';
 import { default as CxTable } from '../../../hybrid/table-core/src/index.ts';
+import { AssetFormatValue } from '../../../types/src/asset-format-picker';
 import { Asset, AssetTypeString } from '../../../types/src/content-builder';
-import { CSSResultGroup } from 'lit';
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { CxColorSwatchPicker } from '../content-builder/components/color-swatch-picker';
+import { CxFolderPicker } from '../content-builder/components/folder-picker';
+import { default as CxGalleryPicker } from '../content-builder/components/gallery-picker/gallery-picker';
+import { default as CxPagePicker } from '../content-builder/components/page-picker/page-picker';
 
 export declare const columnDefaults: {
     resizable: boolean;
@@ -32,37 +64,115 @@ declare enum TabType {
  */
 export default class CxListEditor extends CortexElement {
     static readonly styles: CSSResultGroup;
+    /**
+     * Mirrors `cx-config-form`'s dependency set, because the add/edit dialog renders its
+     * controls through the shared `ControlRenderer` and can therefore emit any control type.
+     *
+     * Two of the config-form tags are deliberately absent:
+     * - `cx-dam-custom-toolbar-buttons-editor` imports `cx-list-editor`, so declaring it here
+     *   would be a module cycle.
+     * - `cx-list-editor` itself, since a list editor nested in its own row dialog has no way
+     *   to receive `columns` / `sampleItem`.
+     *
+     * `getColumnTrait()` maps both of those control types to a plain input so a column config
+     * naming them degrades predictably instead of rendering an unupgraded element.
+     */
     static readonly dependencies: {
+        'cx-asset-format-picker': typeof CxAssetFormatPicker;
         'cx-asset-picker': typeof CxAssetPicker;
+        'cx-asset-transformation-dialog': typeof CxAssetTransformationDialog;
+        'cx-bicolor-picker': typeof CxBicolorPicker;
+        'cx-border-input-group': typeof CxBorderInputGroup;
         'cx-button': typeof CxButton;
+        'cx-button-group': typeof CxButtonGroup;
+        'cx-card': typeof CxCard;
+        'cx-checkbox': typeof CxCheckbox;
+        'cx-color-swatch-picker': typeof CxColorSwatchPicker;
+        'cx-confirm-popover': typeof CxConfirmPopover;
+        'cx-corner-position-input-group': typeof CxCornerPositionInputGroup;
         'cx-dialog': typeof CxDialog;
+        'cx-divider': typeof CxDivider;
+        'cx-download-format-picker': typeof CxDownloadFormatPicker;
+        'cx-dropdown': typeof CxDropdown;
         'cx-dynamic-select': typeof CxDynamicSelect;
+        'cx-folder-picker': typeof CxFolderPicker;
+        'cx-font-picker': typeof CxFontPicker;
+        'cx-gallery-picker': typeof CxGalleryPicker;
         'cx-grid': typeof CxGrid;
         'cx-grid-item': typeof CxGridItem;
+        'cx-icon': typeof CxIcon;
+        'cx-icon-picker': typeof CxIconPicker;
         'cx-input': typeof CxInput;
         'cx-line-clamp': typeof CxLineClamp;
+        'cx-menu': typeof CxMenu;
+        'cx-menu-item': typeof CxMenuItem;
         'cx-option': typeof CxOption;
+        'cx-padding-input-group': typeof CxPaddingInputGroup;
+        'cx-page-picker': typeof CxPagePicker;
+        'cx-position-picker': typeof CxPositionPicker;
         'cx-radio': typeof CxRadio;
+        'cx-radio-card': typeof CxRadioCard;
         'cx-radio-group': typeof CxRadioGroup;
         'cx-select': typeof CxSelect;
+        'cx-shadow-input-group': typeof CxShadowInputGroup;
+        'cx-size-input-group': typeof CxSizeInputGroup;
         'cx-space': typeof CxSpace;
+        'cx-switch': typeof CxSwitch;
         'cx-tab': typeof CxTab;
         'cx-tab-group': typeof CxTabGroup;
         'cx-tab-panel': typeof CxTabPanel;
         'cx-table': typeof CxTable;
+        'cx-textarea': typeof CxTextarea;
+        'cx-tooltip': typeof CxTooltip;
+        'cx-type-subtype-select': typeof CxTypeSubtypeSelect;
         'cx-typography': typeof CxTypography;
+        'cx-visually-hidden': typeof CxVisuallyHidden;
     };
+    /**
+     * Control types the shared renderer supports but this component cannot host: both render a
+     * `cx-list-editor`, which would nest a list editor inside its own row dialog, and the
+     * toolbar-buttons editor imports this module so it cannot be a dependency here.
+     */
+    private static readonly UNSUPPORTED_CONTROL_TYPES;
     private readonly localize;
+    /**
+     * Renders the add/edit dialog's controls. Shared with `cx-config-form` so every
+     * content-builder control type is implemented once.
+     *
+     * `commit` collapses the renderer's attribute / style / property distinction: an item row
+     * is a single flat record, so every write lands on `editedItem` under its own key.
+     *
+     * Values are stored as the renderer emits them, without stringifying. That keeps a
+     * `switch` column a real boolean, which is what lets the renderer's checked state fall
+     * through to plain truthiness instead of needing `checkedValue` / `uncheckedValue`.
+     */
+    private readonly controlRenderer;
     dialog: CxDialog;
     table: CxTable;
-    data: Array<Record<string, string>>;
+    /**
+     * The rows being edited.
+     *
+     * Field values keep whatever JSON type they were authored or edited with — a `switch`
+     * column round-trips a real boolean, not the string `'true'`. The attribute form is JSON,
+     * so the type survives serializing to a block attribute and parsing back.
+     */
+    data: Array<Record<string, unknown>>;
     canAdd: boolean;
     addDialogLabel: string;
     editDialogLabel: string;
     displayField: string;
     descriptionField: string;
     addItemText: string;
-    sampleItem: Record<string, string>;
+    sampleItem: Record<string, unknown>;
+    /**
+     * Values from the surrounding scope, keyed by column `field`, shown when an item has not
+     * overridden that field. For the content builder these are the block's own styles and
+     * attributes, so a section's controls start out showing what the block applies to it.
+     *
+     * Display only: nothing here is written into the item. The item stays unset until the user
+     * changes the control, which is what keeps it inheriting when the block value later changes.
+     */
+    inheritedValues: Record<string, unknown>;
     useEvents: boolean;
     sortable: boolean;
     loadingEvent: string;
@@ -89,11 +199,48 @@ export default class CxListEditor extends CortexElement {
      * @default undefined
      */
     onRequestAsset: ((type: AssetTypeString, multiple?: boolean, accepts?: string[]) => Promise<Asset | Record<string, Asset>>) | undefined;
-    editedItem: Record<string, string> | null;
+    /**
+     * Base URL forwarded to the dialog's `cx-asset-transformation-dialog`.
+     * Only needed when a column uses the `asset-transformation` control.
+     */
+    baseUrl: string;
+    /**
+     * Auth token forwarded to the dialog's `cx-asset-transformation-dialog`.
+     * Only needed when a column uses the `asset-transformation` control.
+     */
+    token: string;
+    /**
+     * Restricts the dialog's `cx-folder-picker` to these folders.
+     * Only applies when a column sets `folderPickerConfigs.useAllowedFolders`.
+     */
+    allowedFolders: string[];
+    /**
+     * Function forwarded to the dialog's `cx-download-format-picker`.
+     * @default undefined
+     */
+    onRequestDownloadFormat: ((assetIds: string[], formats?: Record<string, string[]>) => Promise<Record<string, string[]>>) | undefined;
+    /**
+     * Function forwarded to the dialog's `cx-asset-format-picker`.
+     * @default undefined
+     */
+    onRequestAssetFormat: ((assetId: string, value?: AssetFormatValue) => Promise<AssetFormatValue | null | undefined>) | undefined;
+    editedItem: Record<string, unknown> | null;
     isAdding: boolean;
+    /**
+     * True once the add/edit dialog has finished opening. The `color-swatch-picker` control
+     * defers loading its table until then, so it must be threaded into the renderer context.
+     */
+    private isDialogAfterShow;
     private columnsMap;
     private sortedEntries;
     private translatableControls;
+    /**
+     * `columns` adapted to traits, rebuilt only when `columns` changes.
+     *
+     * The audio/video-picker controls look up a sibling `asset-format-picker` trait, so the
+     * renderer needs the whole set. Building it per read would be quadratic in column count.
+     */
+    private columnTraits;
     private disableCloseConfigDialog;
     get tabs(): TabType[];
     handleColumnsChange(): void;
@@ -108,9 +255,37 @@ export default class CxListEditor extends CortexElement {
     private handleTableRowMoved;
     private handleAssetRequestStatus;
     handleLoadingEventChange(): Promise<void>;
-    private handleChange;
+    private handleDialogAfterShow;
+    private handleDialogAfterHide;
+    /**
+     * Adapts one column config into the `PropertyConfig` the shared renderer consumes.
+     *
+     * The column is spread through untouched, so a column can set any renderer option
+     * (`options`, `api`, `clearable`, `selectConfigs`, …) directly. Only the fields the
+     * list editor has to own are overridden.
+     */
+    private getColumnTrait;
+    /**
+     * Evaluates a column's `show`, which is either a literal or a predicate over the item being
+     * edited — the same contract `cx-config-form` uses for block traits. Because this runs from
+     * the `editedItem` watcher, toggling one control re-evaluates the rest.
+     */
+    private isColumnVisible;
+    /**
+     * Resolves what a column's control displays: the item's own value, else the inherited
+     * value from the surrounding scope, else the column default.
+     *
+     * `undefined` and `''` count as not overridden — an emptied control means "inherit". A
+     * `false` from a switch does not, so the check is explicit rather than a falsy test.
+     */
+    private getColumnValue;
+    private renderColumnControl;
+    /** Renders the children of a `group` column, which are traits rather than columns. */
+    private renderGroupChildren;
+    /** A horizontal group child's width as a percentage, or 0 when it has none. */
+    private resolveChildWidth;
     private renderControls;
-    render(): import('lit').TemplateResult<1>;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {