@orangelogic/design-system 4.2.0 → 4.4.0

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

@@ -4,7 +4,7 @@ import { default as CxPopup } from '../../../atoms/src/components/popup/popup.ts
 import { default as CxSpinner } from '../../../atoms/src/components/spinner/spinner.ts';
 import { default as CortexElement } from '../../../base/src/cortex-element.ts';
 import { AssetFormatValue } from '../../../types/src/asset-format-picker';
-import { Asset, AssetTypeString, Device, EditorMode, TeamSpaceRole } from '../../../types/src/content-builder';
+import { Asset, AssetTypeString, ContentBuilderSection, ContentBuilderSectionContent, Device, EditorMode, TeamSpaceRole } from '../../../types/src/content-builder';
 import { Component, Editor } from 'grapesjs';
 import { TemplateResult } from 'lit';
 import { CxBlockPicker } from './components/block-picker';
@@ -16,13 +16,19 @@ 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, and timeline blocks. Off by default.
+ * carousel, column-group, and timeline blocks. Off by default.
  *
  * `default-image-format`, `default-video-poster-format`, `default-timeline-format`,
  * `default-gallery-format` and `default-carousel-format` are retained for backward
  * compatibility but no longer do anything: every block type now starts in `Auto` and
  * derives its proxy from the asset's own file extension.
  *
+ * Several regions of one canvas page can be edited at once: `container-selector` /
+ * `initial-data` describe the implicit `page-content` section and `sections` adds more
+ * (for CMS5, the `hero` masthead). Each section is mounted inside its own host container
+ * of the canvas document and read back with `getSectionContent(id)`; `html()` / `json()`
+ * keep returning the page content.
+ *
  * @event cx-change - Emitted when the content builder changes.
  */
 export default class CxContentBuilder extends CortexElement {
@@ -97,6 +103,16 @@ export default class CxContentBuilder extends CortexElement {
      * @default undefined
      */
     containerSelector?: string;
+    /**
+     * Additional editable sections rendered inside the same canvas document (L-429UPF).
+     * Each section owns a host container (`containerSelector`) in the canvas page and its own
+     * project data (`initialData`); the builder mounts a fragment node inside the host and edits
+     * that node's tree. `container-selector` / `initial-data` remain the implicit `page-content`
+     * section, so existing single-region usages are unaffected. Read a section back with
+     * `getSectionContent(id)`.
+     * @default []
+     */
+    sections: ContentBuilderSection[];
     /**
      * This property indicates whether the content builder should initialize automatically.
      * @default false
@@ -233,7 +249,18 @@ export default class CxContentBuilder extends CortexElement {
     private containerDropdowns;
     private containerDropdownStateMap;
     private distance;
+    /**
+     * How far, in px, the add-block button is pushed below its divider line so it clears the
+     * editor header. The line stays on the insertion point; only the button moves.
+     */
+    private addBlockButtonOffset;
     private toolbar;
+    /** Last toolbar position GrapesJS computed, re-clamped whenever the toolbar changes size. */
+    private lastToolbarPos?;
+    /** Watches the toolbar's box: its Lit items render after GrapesJS has already measured it. */
+    private toolbarResizeObserver?;
+    /** `select-comp` commands already wrapped by `patchToolsWrapperBounds`, so a re-init cannot stack wrappers. */
+    private toolsBoundsPatchedCommands;
     private toolbarActive;
     private childSelected;
     private mappedSupportedLanguages;
@@ -334,6 +361,19 @@ export default class CxContentBuilder extends CortexElement {
      * @returns HTML string
      */
     html(): string;
+    /**
+     * Returns one section's persisted content: its inner HTML (with the default-language
+     * translatable texts applied) plus the CSS rules matched by that section, and the section's own
+     * project JSON in the same shape a single-section builder produces. `undefined` when the section
+     * is not configured or not rendered yet.
+     * @param sectionId - `page-content`, `hero`, or any id passed through `sections`
+     */
+    getSectionContent(sectionId: string): ContentBuilderSectionContent | undefined;
+    /**
+     * Replaces each translatable text node's markup with the default-language record stored in the
+     * project's translatable-texts data source, so the persisted HTML reads in the space language.
+     */
+    private localizeHtml;
     /**
      * This method returns the JSON representation of the content builder's project data.
      * It filters the styles to include only those that have selectors starting with '#',
@@ -484,6 +524,32 @@ export default class CxContentBuilder extends CortexElement {
     deselectAll(): void;
     tryToGetSelectedComponent(): Component | undefined;
     private fetchTeamSpaceRoles;
+    /**
+     * The sections this builder edits: the implicit page-content section (from `container-selector`)
+     * followed by the configured `sections`. Empty when the builder runs in its legacy single-wrapper
+     * mode (no container selector, no sections).
+     */
+    private get resolvedSections();
+    /**
+     * Selector list matching every section host container in the canvas document. Falls back to the
+     * CMS5 page-content container so canvas hit-testing keeps its historical behaviour without sections.
+     */
+    private get sectionHostSelector();
+    /**
+     * One entry per editable root: each section fragment, or the wrapper itself in single-wrapper mode.
+     */
+    private getSectionRoots;
+    /**
+     * Guarantees the page-content root cell: a locked `BlockCell` directly under the root that receives
+     * the top-level blocks, and consistent drag/drop rules on every root-level cell.
+     */
+    private ensureRootCell;
+    /**
+     * Guarantees the hero root (L-429UPF): exactly one column group, fixed in place (no remove / drag /
+     * duplicate — the toolbar drops those actions from the flags on selection), holding regular cells
+     * authors fill with the same blocks as the page content.
+     */
+    private ensureHeroRoot;
     private updateTranslatableTextsDataSourceEntries;
     /**
      * @param generation The load this refresh belongs to. Once `apiGetTemplates`
@@ -492,6 +558,12 @@ export default class CxContentBuilder extends CortexElement {
      */
     private updateTemplatesDataSourceEntries;
     private getHoveredComponentPlacement;
+    /**
+     * Model lookup by element id. `Component.find()` walks the wrapper *element*, which the sections
+     * plugin parks while the fragments live in their hosts, so a DOM search from the wrapper misses
+     * every block.
+     */
+    private findComponentById;
     private mapHoveredComponent;
     private handleCanvasMouseMove;
     private handleCanvasScroll;
@@ -512,6 +584,13 @@ export default class CxContentBuilder extends CortexElement {
      * Both `left` and `top` are relative to the tools wrapper, which GrapesJS
      * sizes to the selected element's box — hence the wrapper-to-canvas delta.
      *
+     * GrapesJS also measures the toolbar in the same tick it renders it, before
+     * the `cx-*` items inside have laid out, so `pos.left` assumes a toolbar
+     * narrower than it ends up. Re-deriving the right-aligned offset from the
+     * toolbar's current width (the wrapper is exactly the element's box) fixes
+     * that; on a full-bleed block the stale offset would otherwise push the
+     * toolbar past the canvas edge, where nothing is left to clip against.
+     *
      * Values are written with `important` so stylesheet rules on `.gjs-toolbar`
      * cannot override the computed placement.
      */
@@ -526,6 +605,39 @@ export default class CxContentBuilder extends CortexElement {
      * typings, so the command is narrowed through a local structural type.
      */
     private patchToolbarPositioning;
+    /**
+     * Caps the tools wrappers at the bottom of the visible canvas.
+     *
+     * GrapesJS sizes both wrappers to the target element's whole box — the hover one from
+     * `updateToolsLocal` (it carries the badge) and the selection one from `updateToolsGlobal` (it
+     * carries the toolbar). Each is `position: absolute` against `.gjs-editor` rather than the
+     * canvas, so `.gjs-cv-canvas`'s `overflow: hidden` never clips them: its containing block is an
+     * ancestor of the clipping box. Hovering a block that runs past the bottom of the viewport
+     * therefore stretches the wrapper past the page panel, the panel grows a scrollbar, and the
+     * whole page jumps 16px narrower.
+     *
+     * Only the wrappers' top edge places anything visible — the badge sits at `top: -30px` and the
+     * toolbar at `top: -40px`, both anchored to it — so capping the height leaves them untouched.
+     * The height itself only backs the highlighter, which this component hides outright, and the
+     * resize handles, which stay correct across the part of the element that is actually on screen.
+     * Clipping the wrappers instead would take the badge and the toolbar with them.
+     *
+     * A wrapper whose top already sits past the canvas bottom is the one case the cap cannot solve:
+     * the badge and toolbar hang above that top, so both are off screen anyway, and even at zero
+     * height the wrapper's own position keeps stretching the panel. Hiding is what is left. Only
+     * `none` is ever written here — GrapesJS clears the inline `display` itself when it shows a
+     * wrapper again, so this corrects as soon as the target is back inside the canvas.
+     */
+    private clampToolsWrappersToCanvas;
+    /**
+     * Wraps the two `select-comp` hooks that size the tools wrappers, so the cap in
+     * `clampToolsWrappersToCanvas` is re-applied after GrapesJS writes its own inline height.
+     *
+     * Neither hook is in the published `grapesjs` typings, so the command is narrowed through a
+     * local structural type. GrapesJS re-runs both on canvas and frame scroll, so a wrapper that
+     * gains room again is re-measured from a fresh height rather than staying capped.
+     */
+    private patchToolsWrapperBounds;
     private handleCanvasClick;
     private handleCanvasKeydown;
     private handleTemplateManagerUpdated;
@@ -597,6 +709,14 @@ export default class CxContentBuilder extends CortexElement {
     private toggleBadge;
     private handleToolbarAndBadge;
     private toggleToolbarAndBadge;
+    /**
+     * The add-block popup draws its divider on the line `distance` above the block's top edge but
+     * renders in this document, so the button has to clear the editor header. A block whose top
+     * edge is itself scrolled under the header gets no popup; a visible edge that is merely too
+     * close (a block starting at the top of the canvas, such as a hero behind the page header)
+     * keeps its divider on the insertion line and pushes only the button down.
+     */
+    private placeAddBlockPopupBelowEditorHeader;
     private calculateDistance;
     render(): TemplateResult;
 }

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

@@ -0,0 +1,78 @@
+import { ContentBuilderSection } from '../../../types/src/content-builder';
+
+/** Minimal view of a grapesjs component definition — only what the section helpers touch. */
+export type ComponentDefinitionLike = {
+    [key: string]: unknown;
+    attributes?: Record<string, unknown>;
+    components?: ComponentDefinitionLike[];
+};
+/** Minimal view of grapesjs project data — only what the section helpers touch. */
+export type ProjectDataLike = {
+    [key: string]: unknown;
+    assets?: unknown[];
+    dataSources?: DataSourceLike[];
+    pages?: Array<{
+        [key: string]: unknown;
+        frames?: Array<{
+            [key: string]: unknown;
+            component?: ComponentDefinitionLike;
+        }>;
+    }>;
+    styles?: StyleRuleLike[];
+    symbols?: unknown[];
+};
+export type StyleRuleLike = {
+    [key: string]: unknown;
+    selectors?: unknown[];
+};
+export type DataSourceLike = {
+    [key: string]: unknown;
+    id?: string;
+    records?: Array<{
+        [key: string]: unknown;
+        id?: string | number;
+    }>;
+};
+/**
+ * Builds the ordered section list the engine works with: the implicit page-content section first
+ * (only when a container selector is set), then the extra sections that are well-formed. Duplicate
+ * ids keep the first occurrence; an extra section must not reuse the page-content id.
+ */
+export declare function resolveSections(input: {
+    containerSelector?: string;
+    initialData?: string;
+    sections?: ContentBuilderSection[];
+}): ContentBuilderSection[];
+/** Parses stored project data; anything that is not a JSON object yields `undefined`. */
+export declare function parseProjectData(json?: string): ProjectDataLike | undefined;
+/** The wrapper's direct children of the first frame of the first page. */
+export declare function getRootComponents(data?: ProjectDataLike): ComponentDefinitionLike[];
+/** The section-fragment definition that wraps one section's components inside the shared wrapper. */
+export declare function buildFragmentDefinition(section: ContentBuilderSection, components: ComponentDefinitionLike[]): ComponentDefinitionLike;
+/**
+ * Merges the stored project of every section into the single project the editor loads: one
+ * fragment per section under the wrapper, styles/assets/symbols concatenated, data sources
+ * merged by id (records concatenated). The page-content project, when present, is the base so
+ * page-level settings it carries survive.
+ */
+export declare function mergeSectionsProjectData(sections: ContentBuilderSection[]): ProjectDataLike;
+/** The fragment definition of one section among the wrapper's children of a (live or stored) project. */
+export declare function findFragmentDefinition(data: ProjectDataLike, sectionId: string): ComponentDefinitionLike | undefined;
+/** Every `attributes.id` in a component subtree, the root included. */
+export declare function collectComponentIds(components: ComponentDefinitionLike[]): Set<string>;
+/**
+ * Keeps the `#id` rules that target the given component ids — the same "id rules only" filter the
+ * builder has always applied on save, narrowed to one section.
+ */
+export declare function partitionStyleRules(styles: StyleRuleLike[] | undefined, ids: Set<string>): StyleRuleLike[];
+/**
+ * Keeps, for component-keyed data sources (translatable texts / attributes), only the records whose
+ * component id belongs to the section. Other data sources (templates) are shared and kept intact.
+ */
+export declare function partitionDataSources(dataSources: DataSourceLike[] | undefined, ids: Set<string>): DataSourceLike[];
+/**
+ * Extracts one section's own project from the live merged project: the fragment's children become
+ * the wrapper's children again (the legacy stored shape), styles and data-source records are
+ * narrowed to that subtree. Everything else on the project is carried over unchanged.
+ */
+export declare function buildSectionProjectData(full: ProjectDataLike, fragment: ComponentDefinitionLike | undefined): ProjectDataLike;

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

@@ -1,5 +1,6 @@
-import { BlockType, PropertyConfig } from '../../../types/src/content-builder';
+import { BlockType, PropertyConfig, ToolbarItem } from '../../../types/src/content-builder';
 import { FontTypeface } from '../../../types/src/font-picker';
+import { Component } from 'grapesjs';
 
 export type FontPickerKeys = {
     familyKey: string;
@@ -52,10 +53,40 @@ export declare function getFontPickerControlValues({ blockAttributes, keys, type
     /** No match: keep the raw stored value (not '') so it renders as unmatched, not Default. */
     styleValue: string;
 };
-export declare function getFontPickerAttributeValues({ clearDefaultFamily, familyValue, styleValue, typefaces, }: {
+export declare function getFontPickerAttributeValues({ clearDefaultFamily, familyValue, spaceFontFamily, styleValue, typefaces, }: {
     clearDefaultFamily?: boolean;
     familyValue: string;
+    /**
+     * Resolved name of the space's font. When given, the space-default option is
+     * stored under that name instead of being cleared, so it still wins inside a
+     * container that resolves a font of its own.
+     */
+    spaceFontFamily?: string;
     styleValue: string;
     typefaces: FontTypeface[];
 }): FontPickerStoredValues;
+/**
+ * grapesjs component flags the block toolbar must honour. Only an explicit `false` locks an action:
+ * grapesjs also accepts selector strings / functions for `draggable`, and those keep the action.
+ */
+export type ToolbarComponentFlags = {
+    copyable?: unknown;
+    draggable?: unknown;
+    removable?: unknown;
+};
+/** Drops leading, trailing and consecutive dividers left behind by removed toolbar actions. */
+export declare function collapseToolbarDividers(items: ToolbarItem[]): ToolbarItem[];
+/**
+ * Hides the toolbar actions a component's flags forbid — remove for `removable: false`, duplicate
+ * for `copyable: false`, move up/down for `draggable: false` — and tidies the dividers around them.
+ * The toolbar is rebuilt from the type defaults on every selection, so the flags are the single
+ * source of truth for locked blocks such as the hero column group.
+ */
+export declare function applyComponentFlagsToToolbar(items: ToolbarItem[], flags: ToolbarComponentFlags): ToolbarItem[];
+/**
+ * Whether any ancestor of the component is a block of the given type. Blocks
+ * that only behave a certain way inside a specific container ask this rather
+ * than each container stamping its children.
+ */
+export declare function isInsideBlockType(model: Component | null | undefined, blockType: BlockType): boolean;
 export {};

package/library/packages/organisms/src/content-builder/plugins/font-kit-advanced.d.ts

@@ -0,0 +1,5 @@
+import { Editor } from 'grapesjs';
+import { EditorPluginOptions } from './plugin-factory';
+
+declare const FontKitAdvancedPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
+export default FontKitAdvancedPlugin;

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

@@ -11,6 +11,12 @@ type GalleryViewThis = ComponentViewDefinition & ComponentView<Component>;
  * interaction needs a different cleanup path.
  */
 export declare function createBlockHoverEvent(editor: Editor, clearHover?: () => void): (event: MouseEvent) => void;
+/**
+ * `max-rows` used to drive every breakpoint. Content saved before the mobile
+ * value existed inherits that value, so the mobile grid keeps its current
+ * height and the control never opens empty.
+ */
+export declare function backfillMaxRowsMobile(model: Component): void;
 export declare function handleOnRequestAsset(model: Component): void;
 export declare function createHandleComponentChange(timerId: GalleryTimerMap, options?: {
     columnStyle?: ComponentDefinition['style'];

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

@@ -1,5 +1,11 @@
-import { Editor } from 'grapesjs';
+import { Component, Editor } from 'grapesjs';
 import { EditorPluginOptions } from './plugin-factory';
 
+/**
+ * `font-size` used to drive every breakpoint and now only drives mobile.
+ * Content saved before the tablet/desktop sizes existed inherits it, so those
+ * headings keep the size they already had and their controls never open empty.
+ */
+export declare function backfillResponsiveFontSizes(model: Component): void;
 declare const HeaderPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
 export default HeaderPlugin;

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

@@ -11,6 +11,7 @@ export { default as DamViewPlugin } from './dam-view';
 export { default as DividerPlugin } from './divider';
 export { default as DocumentViewerPlugin } from './document-viewer';
 export { default as FontKitPlugin } from './font-kit';
+export { default as FontKitAdvancedPlugin } from './font-kit-advanced';
 export { default as GalleryPlugin } from './gallery';
 export { default as HeaderPlugin } from './header';
 export { default as AnalyticsPlugin } from './analytics';
@@ -18,9 +19,9 @@ export { default as ImagePlugin } from './image';
 export { default as RichTextEditorPlugin } from './rich-text-editor';
 export * from './rich-text-editor/components';
 export { default as SearchBoxPlugin } from './search-box';
+export { default as SectionsPlugin } from './sections/sections-plugin';
 export { default as TabsPlugin } from './tab-group';
 export { default as TelemetryPlugin } from './telemetry';
 export { default as TextPlugin } from './text';
 export { default as TimelinePlugin } from './timeline';
 export { default as VideoPlugin } from './video';
-export { default as WrapperContainerPlugin } from './wrapper-container';

package/library/packages/organisms/src/content-builder/plugins/rich-text-editor/components/rte-bubble-menu/rte-bubble-menu.d.ts

@@ -17,7 +17,7 @@ import { default as CxSpace } from '../../../../../../../atoms/src/components/sp
 import { default as CxTypography } from '../../../../../../../atoms/src/components/typography/typography.ts';
 import { default as CortexElement } from '../../../../../../../base/src/cortex-element.ts';
 import { default as CxSpecialCharactersDialog } from '../../../../../special-characters-dialog/special-characters-dialog.ts';
-import { Asset, AssetTypeString } from '../../../../../../../types/src/content-builder';
+import { Asset, AssetTypeString, RteMetafieldOption } from '../../../../../../../types/src/content-builder';
 import { Component } from 'grapesjs';
 import { TemplateResult } from 'lit';
 import { default as CxAnchorDialog } from './anchor-dialog';
@@ -124,6 +124,19 @@ export default class CxRTEBubbleMenu extends CortexElement {
      * @default false
      * */
     highlight: boolean;
+    /**
+     * Keeps the menu visible with a collapsed caret, for controls that insert
+     * content at the cursor instead of formatting a selection.
+     * @type {boolean}
+     * @default false
+     * */
+    alwaysShowBubbleMenu: boolean;
+    /**
+     * Placeholder tokens offered by the metafield dropdown. Empty hides it.
+     * @type {RteMetafieldOption[]}
+     * @default []
+     * */
+    metafield: RteMetafieldOption[];
     /**
      * The boundary property of the confirm popover's dropdown/dialog popup.
      */
@@ -147,6 +160,7 @@ export default class CxRTEBubbleMenu extends CortexElement {
     runConnectedCallback(): void;
     disconnectedCallback(): void;
     onFontSizeChange(value: string | string[]): void;
+    onMetafieldChange(value: string | string[]): void;
     onBlockFormatChange(value: string | string[]): void;
     onLineHeightChange(value: string | string[]): void;
     private onKeydown;
@@ -174,6 +188,12 @@ export default class CxRTEBubbleMenu extends CortexElement {
     renderTextAlignment(): TemplateResult<1>;
     renderList(): TemplateResult<1>;
     renderFontSize(): TemplateResult<1> | null;
+    /**
+     * Dropdown that inserts a placeholder token at the caret. It is an action,
+     * not a value, so it keeps its own template instead of reusing
+     * `renderDropdown`, whose placeholder mirrors the selected value.
+     */
+    renderMetafield(): TemplateResult<1>;
     private renderBlockFormatOption;
     renderBlockFormatting(): TemplateResult<1>;
     renderLineHeight(): TemplateResult<1> | null;

package/library/packages/organisms/src/content-builder/plugins/rich-text-editor/extensions/index.d.ts

@@ -25,6 +25,8 @@ export declare const lineHeightExtensions: import('@tiptap/core').Extension<{
     types: string[];
 }, any>[];
 export declare const blockFormatExtensions: import('@tiptap/core').Node<any, any>[];
+/** Loaded only for blocks that configure placeholder tokens (RTE_CONFIG.metafield). */
+export declare const metafieldExtensions: import('@tiptap/core').Node<any, any>[];
 export declare const listExtensions: import('@tiptap/core').Node<any, any>[];
 export declare const customNodes: import('@tiptap/core').Node<any, any>[];
 /**

package/library/packages/organisms/src/content-builder/plugins/rich-text-editor/rte-configs.d.ts

@@ -0,0 +1,14 @@
+import { RTE_CONFIG } from '../../../../../types/src/content-builder';
+import { Component } from 'grapesjs';
+
+/**
+ * Resolves the RTE config for a block, merging in the `childRteConfigs` of its
+ * nearest ancestor that declares one.
+ *
+ * Rich-text blocks are registered once with a shared defaults object, so a
+ * container block cannot enable extra controls for the copies of that block it
+ * owns. Declaring the extra config on the container and reading it from here
+ * scopes those controls to that container without touching the shared
+ * defaults, and resolves late enough that the component tree is complete.
+ */
+export declare const resolveRteConfigs: (model?: Component) => RTE_CONFIG | undefined;

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;
@@ -55,6 +55,7 @@ export default class StyleController {
             versionLabelKey?: string;
         };
         assetTransformationConfigs?: {
+            aspectRatioKey?: string;
             assetIdKey?: string;
             defaultFormat?: string;
             dialogLabel?: string;
@@ -98,6 +99,8 @@ export default class StyleController {
         fontPickerConfigs?: {
             api: () => Promise<FontTypeface[]>;
             familyKey: string;
+            inheritedFamilies?: FontFamily[];
+            inheritedOptionLabel?: string;
             styleKey: string;
             weightKey?: string;
         };
@@ -125,7 +128,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,13 +138,14 @@ export default class StyleController {
             displayField?: string;
             editDialogLabel: string;
             noHeader?: boolean;
-            sampleItem: Record<string, string>;
+            sampleItem: Record<string, unknown>;
         };
         mask?: string;
         maskBlocks?: Record<string, unknown>;
         multiple?: boolean;
         pickerConfigs?: {
             accepts?: string[];
+            aspectRatioKey?: string;
             defaultFormat?: string;
             multiple?: boolean;
             nameKey?: string;
@@ -182,10 +186,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;