@orangelogic/design-system 2.162.0 → 2.164.0

package/library/components/video.js

@@ -1,14 +1,14 @@
 import { _ as kd, a as Sa, b as Be, c as Je } from "../chunks/inheritsLoose.BuSn_CvZ.js";
 import { c as ps, a as Bn } from "../chunks/_commonjsHelpers.DQNKXVTB.js";
 import { r as Sb } from "../chunks/___vite-browser-external_commonjs-proxy.C2tf3HsQ.js";
-import { C as Cb } from "../chunks/image.5mhGPvMN.js";
+import { C as Cb } from "../chunks/image.BgODrAzQ.js";
 import Mb from "./resize-observer.js";
 import { r as Db, R as Pb, a as Rp, b as Lb } from "../chunks/resizable-component.styles.CAfXABBc.js";
 import { c as Rb } from "../chunks/component.styles.CRO4Odto.js";
 import { b as Ib } from "../chunks/browser.BHOCIF_A.js";
 import { c as Ob } from "../chunks/custom-element.L4WJXn1j.js";
 import { L as kb } from "../chunks/i18n.Bchq8v1d.js";
-import { w as Ki } from "../chunks/watch.DOt4Mabe.js";
+import { w as Ki } from "../chunks/watch.DJF5K-8U.js";
 import { i as Bb, x as Qc } from "../chunks/lit-element.jLBm65_O.js";
 import { n as Ri } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { r as yn } from "../chunks/state.CSDxrqLd.js";

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.162.0",
+  "version": "2.164.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {
@@ -12,6 +12,7 @@
     "build": "vite build --config vite.config.ts && bun run build-worker && node ./scripts/remove-index-html-file.js && node ./scripts/copy-entry-file.js",
     "build-sync": "bun run build && bun run sync-csharp",
     "start": "vite",
+    "host": "bun run build && bunx serve dist --cors -l 4321",
     "dev-build": "vite build --config vite.dev-build.config.ts",
     "open": "npx playwright test --project=chromium --ui",
     "playwright": "npx playwright test --project=chromium",

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

@@ -1,3 +1,4 @@
+import { default as CxIconButton } from '../icon-button/icon-button.ts';
 import { default as CortexLightElement } from '../../../../base/src/cortex-light-element.ts';
 import { TemplateResult } from 'lit';
 import { RendererObject, TokenizerAndRendererExtension } from 'marked';
@@ -8,10 +9,36 @@ import { RendererObject, TokenizerAndRendererExtension } from 'marked';
  * @description cx-markdown is a Light DOM element, so can be styled from outside the Shadow DOM.
  * cx-markdown is powered by [MarkedJs](https://marked.js.org/).
  *
- * @event cx-ready - Emitted when the markdown has been rendered.
+ * Fenced `mermaid` code blocks render as diagrams; Mermaid is imported lazily only when one is
+ * present. Output is sanitized with DOMPurify unless `live-script` is set.
+ *
+ * Leading YAML frontmatter renders as a collapsed disclosure instead of an `<hr>` plus heading, and
+ * is parsed onto the `frontmatter` property.
+ *
+ * Set `link-target="_blank"` to open links in a new tab — that is enough for the common case, so
+ * consumers should not need a custom `link` renderer.
+ *
+ * Fenced code blocks get a copy button, revealed on hover or keyboard focus.
+ *
+ * Clicks on interactive rendered content — links, the frontmatter disclosure, checkboxes, copy
+ * buttons, Mermaid nodes — do not bubble past the component. Clicks on inert content still do.
+ *
+ * @event cx-ready - Emitted when the markdown has been rendered, deferred until any Mermaid
+ * diagrams have been drawn.
  */
 export default class CxMarkdown extends CortexLightElement {
     #private;
+    static readonly styles: import('lit').CSSResult;
+    static readonly dependencies: {
+        'cx-icon-button': typeof CxIconButton;
+    };
+    private readonly localize;
+    /**
+     * YAML frontmatter parsed from `markdown`, empty when there is none. Derived output — assigning
+     * to it has no effect. Read it after `cx-ready`. Deliberately non-reactive: the disclosure is
+     * built in the same pass, so setting it during `update()` would only cost an extra render.
+     */
+    frontmatter: Record<string, unknown>;
     /**
      * The class name to apply to the root element. As this is a light DOM element, it can be styled
      * from outside the Shadow DOM.
@@ -19,8 +46,14 @@ export default class CxMarkdown extends CortexLightElement {
     classname: string;
     /**
      * If true, re-adds script tags from inside the markdown to the body, wrapping them in IIFEs.
+     * Also skips sanitization, since DOMPurify would strip those script tags. Trusted content only.
      */
     liveScript: boolean;
+    /**
+     * Target applied to every rendered link. Set to `_blank` to open links in a new tab, which also
+     * adds `rel="noopener noreferrer"`. Empty (the default) leaves anchors untouched.
+     */
+    linkTarget: string;
     /**
      * The markdown to render.
      */
@@ -39,7 +72,14 @@ export default class CxMarkdown extends CortexLightElement {
      */
     rendered: string;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     updateRendered(): void;
+    /**
+     * Light DOM means every click reaches ancestors, which commonly treat one as "start editing".
+     * Clicks the rendered markdown acts on itself stop here; inert content still bubbles. The
+     * containment check keeps an ancestor `<a>` or `<label>` around the component from matching.
+     */
+    handleClick(event: MouseEvent): void;
     handleRenderedWithNewMarkdown(): void;
     render(): TemplateResult;
     updated(): void;

package/library/packages/atoms/src/components/markdown/parser.d.ts

@@ -1,7 +1,22 @@
-import { Marked } from 'marked';
+import { Marked, Tokens } from 'marked';
 
+/** Class name cx-markdown looks for when deciding whether to load Mermaid. */
+export declare const MERMAID_CLASS_NAME = "mermaid";
+/** Class name on the disclosure wrapping YAML frontmatter. */
+export declare const FRONTMATTER_CLASS_NAME = "cx-frontmatter";
+export type ExtractedFrontmatter = {
+    /** The markdown with the frontmatter block removed. */
+    body: string;
+    /** Parsed YAML mapping. Empty when absent, malformed, or not a mapping. */
+    data: Record<string, unknown>;
+    /** Raw YAML source, kept for display. */
+    raw: string;
+};
+export declare function extractFrontmatter(source: string): ExtractedFrontmatter;
+/** Collapsed disclosure shown in place of the frontmatter block. */
+export declare function renderFrontmatterDetails(raw: string, label: string): string;
 export declare const baseRenderer: {
-    code(text: string, value: string | undefined): string;
+    code(this: import('marked').Renderer<string, string>, { escaped, lang: infoString, text }: Tokens.Code): string;
 };
 /**
  * https://marked.js.org/using_advanced in Marked instance section.
@@ -10,5 +25,5 @@ export declare const baseRenderer: {
  *
  * Change from Singleton to Factory pattern: returns a new isolated Marked parser.
  */
-export declare function createParser(): Marked;
+export declare function createParser(): Marked<string, string>;
 export type Parser = ReturnType<typeof createParser>;

package/library/packages/atoms/src/components/markdown/styles.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Baseline document typography, modelled on the VS Code markdown preview. Without this a bare
+ * cx-markdown inherits whatever the host page provides, which collapses tables and flattens the
+ * heading hierarchy. Apps that already style markdown (the docs site) override via a `classname`,
+ * since a class selector outranks these element selectors.
+ */
+export declare const documentStyles: import('lit').CSSResult;
+/**
+ * Prism default theme. CortexLightElement injects these into `document.head` with `:host` rewritten
+ * to `cx-markdown`, so every selector needs the `:host` prefix or it styles the whole page.
+ */
+export declare const code: import('lit').CSSResult;
+/**
+ * Single stylesheet for the component. CortexLightElement assigns `static styles` straight to
+ * `textContent`, so an array would stringify with a stray comma between the two sheets.
+ */
+export declare const styles: import('lit').CSSResult;

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

@@ -1,6 +1,6 @@
 import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
 import { TreeSelection } from '../../../../types/src/tree';
-import { ExpandButtonPlacement } from '../../../../types/src/tree-item';
+import { ExpandButtonPlacement, TreeItemVariant } from '../../../../types/src/tree-item';
 import { CSSResultGroup, PropertyValues } from 'lit';
 import { default as Sortable } from 'sortablejs';
 import { default as CxTreeItem } from '../tree-item/tree-item';
@@ -58,6 +58,12 @@ export default class CxTree extends CortexElement {
      * Whether to not forward the expand button placement to the children.
      */
     noForwardExpandButtonPlacement: boolean;
+    /**
+     * The visual treatment forwarded to every tree item. Leave unset for the regular look. `text` removes
+     * the hover, active and selected backgrounds so the selection is conveyed by the checkbox alone, and
+     * colors the label on hover instead.
+     */
+    variant?: TreeItemVariant;
     /**
      * When set to true, the `cx-selection-change` event will be emitted on every change of the value, even if the value is not changed.
      */

package/library/packages/atoms/src/components/tree-item/tree-item.d.ts

@@ -1,5 +1,5 @@
 import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
-import { ExpandButtonPlacement } from '../../../../types/src/tree-item';
+import { ExpandButtonPlacement, TreeItemVariant } from '../../../../types/src/tree-item';
 import { CSSResultGroup, PropertyValueMap, PropertyValues, TemplateResult } from 'lit';
 import { default as Sortable } from 'sortablejs';
 import { default as CxCheckbox } from '../checkbox/checkbox';
@@ -47,6 +47,7 @@ import { default as CxSpinner } from '../spinner/spinner';
  * @cssproperty [--hover-background-color=var(--cx-menu-item-background-color-hover)] - The background color of the hovered tree item.
  * @cssproperty [--active-background-color=var(--cx-color-neutral-200)] - The background color of the active tree item.
  * @cssproperty [--item-padding=var(--cx-spacing-x-small) var(--cx-spacing-small)] - The padding of the tree item.
+ * @cssproperty [--hover-color=var(--cx-color-primary)] - The label color of the hovered tree item. Only applied when `variant` is `text`.
  *
  * When `max-lines` is set, the label is wrapped in a `cx-line-clamp` and the text is clamped with an ellipsis
  * after the given number of lines. A tooltip with the full text is shown automatically when clamping is active.
@@ -132,6 +133,15 @@ export default class CxTreeItem extends CortexElement {
      * Whether to not forward the expand button placement to the children.
      */
     noForwardExpandButtonPlacement: boolean;
+    /**
+     * The visual treatment of the row. Leave unset for the regular look. `text` removes the hover, active
+     * and selected backgrounds so the selection is conveyed by the checkbox alone, and colors the label on
+     * hover instead.
+     *
+     * Owned by the parent `cx-tree`: it forwards its own `variant` to every item, so setting this directly
+     * on an item inside a tree is overwritten. Set it on the tree instead.
+     */
+    variant?: TreeItemVariant;
     /**
      * Indicates whether the tree checkboxes should be synced with the selected state of the tree items.
      * For example, when select all children, the parent checkbox will be checked. When parent checkbox is checked, all children will be checked.

package/library/packages/events/src/cx-folder-select-loading-change.d.ts

@@ -0,0 +1,8 @@
+export type CxFolderSelectLoadingChangeEvent = CustomEvent<{
+    loading: boolean;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-folder-select-loading-change': CxFolderSelectLoadingChangeEvent;
+    }
+}

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

@@ -85,6 +85,7 @@ export * from './cx-find-and-replace';
 export * from './cx-finish';
 export * from './cx-focus';
 export * from './cx-folder-select-children-loaded';
+export * from './cx-folder-select-loading-change';
 export * from './cx-folder-select-search-term-change';
 export * from './cx-folder-select-selection-seeded';
 export * from './cx-font-picker-change';

package/library/packages/hybrid/table-core/src/table/styles/table-frozen.styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Sticky can't pin frozen cells here — every wrapper up to the real horizontal scroller (the
+ * OverlayScrollbars viewport on `.tabulator`) is `width: max-content` and never scrolls — so
+ * `syncFrozenOffset` mirrors the viewport's scrollLeft into these vars instead. If horizontal
+ * scrolling ever moves back onto `.tabulator-tableholder`, delete this sheet.
+ */
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/hybrid/table-core/src/table/table.d.ts

@@ -39,7 +39,7 @@ import { CxTableColumnEditor, CxTableFooter, CxTableHeaderMenu, CxTableRowAction
  * @cssproperty [--row-even-background-color=var(--cx-color-neutral-100)] - The background color of the even table rows.
  * @cssproperty [--row-hover-background-color=var(--cx-color-neutral-50)] - The background color of the table rows on hover.
  * @cssproperty [--row-even-hover-background-color=var(--cx-color-neutral-100)] - The background color of the even table rows on hover.
- * @cssproperty [--frozen-border-color=var(--cx-color-neutral-200)] - The color of the frozen table rows border.
+ * @cssproperty [--frozen-border-color=var(--cx-color-neutral-300)] - The color of the frozen table rows border.
  * @cssproperty [--header-background-color=var(--cx-color-neutral-50)] - The background color of the table header.
  * @cssproperty [--header-hover-background-color=var(--cx-color-neutral-200)] - The background color of the table header on hover.
  * @cssproperty [--header-font-weight=var(--cx-font-weight-regular)] - The font weight of the table header.
@@ -102,6 +102,8 @@ export default class CxTable extends CortexElement {
     };
     private verticalOsInstance;
     private horizontalOsInstance;
+    /** Removes the horizontal scrollbar's scroll listener (see syncFrozenOffset). */
+    private frozenScrollOff;
     private resizeObserver;
     private overflowObserver;
     private readonly ajaxFacetsController;
@@ -910,6 +912,12 @@ export default class CxTable extends CortexElement {
     disconnectedCallback(): void;
     private initVerticalScrollbar;
     private initHorizontalScrollbar;
+    /**
+     * Mirrors the horizontal scroller's offset into `--frozen-offset-start/end` so
+     * `table-frozen.styles.ts` can pin frozen columns. Deliberately not debounced: the offset must
+     * land in the same frame as the scroll, and it is only two custom-property writes.
+     */
+    private syncFrozenOffset;
     private readonly checkHorizontalOverflow;
     private initOverflowObserver;
     private registerEventListeners;

package/library/packages/hybrid/table-core/src/tabulator-tables/modules/FrozenColumns/FrozenColumns.d.ts

@@ -8,7 +8,6 @@ export default class FrozenColumns extends Module {
     static moduleName: string;
     leftColumns: IColumn[];
     rightColumns: IColumn[];
-    initializationMode: 'left' | 'right';
     active: boolean;
     blocked: boolean;
     constructor(table: any);
@@ -18,6 +17,20 @@ export default class FrozenColumns extends Module {
     unblockLayout(): void;
     layoutCell(cell: Cell): void;
     reinitializeColumns(): void;
+    /**
+     * Rebuilds both frozen lists from column order, so the outcome never depends on the order
+     * `column-init` events arrive in. They cannot be trusted: `Column._initialize` is async in this
+     * fork, so they land after `columns-loaded` and may resolve out of order.
+     */
+    private rebuildFrozenLists;
+    /** Records which edge a frozen column belongs to and files it under the matching list. */
+    private pinColumn;
+    /**
+     * Runs once per frozen column, whenever that column initializes. `column-init` lands after
+     * `columns-loaded` in this fork (async `Column._initialize`), so this is what gets the margins
+     * and edge flags recomputed after that late wave — `layout()` guards itself on `active` and
+     * `blocked`, and non-frozen columns return before reaching it.
+     */
     initializeColumn(column: IColumn): void;
     frozenCheck(column: IColumn): boolean;
     layoutCalcRows(): void;

package/library/packages/hybrid/table-core/src/tabulator-tables/modules/ResizeColumns/ResizeColumns.d.ts

@@ -8,6 +8,7 @@ export default class ResizeColumns extends Module {
     startColumn: Column | false;
     startX: number | false;
     startWidth: number | false;
+    startColumnPinnedEnd: boolean;
     latestX: number | false;
     handle: HTMLElement | null;
     initialNextColumn: Column | null;
@@ -21,7 +22,23 @@ export default class ResizeColumns extends Module {
     layoutColumnHeader(column: Column): void;
     columnLayoutUpdated(column: Column): void;
     columnWidthUpdated(column: Column): void;
-    frozenColumnOffset(column: Column): string | false;
+    /**
+     * An end-pinned column's only draggable edge is its left one (the freeze divider). Derived from
+     * `definition.frozen` + column order, not frozen-module state (event timing is unreliable), and
+     * walks `columns` because `columnsByIndex` is still empty when `column-rendered` creates handles.
+     */
+    private isPinnedEnd;
+    /**
+     * The in-flow handle goes right after the element it resizes — except for an end-pinned column,
+     * whose right edge is the table edge: its handle goes before the element, onto the freeze
+     * divider (drag deltas invert to match, see `resize`). Callers resolve `isPinnedEnd` once.
+     */
+    private attachHandle;
+    /**
+     * Re-inserts handles next to the element they resize. Upstream wrote `left`/`right` insets here
+     * for frozen columns, which added to the flow position and pushed handles a column width off;
+     * frozen handles travel via `table-frozen.styles.ts` instead (which also owns their z-index).
+     */
     reinitializeColumn(column: Column): void;
     initializeColumn(type: string, component: any, column: Column, element: HTMLElement): void;
     deInitializeColumn(column: Column): void;

package/library/packages/molecules/src/folder-select/components/folder-select-tree/folder-select-tree.d.ts

@@ -40,6 +40,12 @@ export default class CxFolderSelectTree extends CortexElement {
     data: Folder[];
     hasMore: boolean;
     loading: boolean;
+    /**
+     * True while `preloadSelectedFolders` is fetching folders for selected IDs
+     * not yet rendered in the tree. Forwarded via `cx-folder-select-loading-change`
+     * so hosts (e.g. cx-folder-select) can show a loading indicator during preload.
+     */
+    private preloading;
     /**
      * Folders fetched for selected IDs not yet rendered in the tree (e.g. nested
      * under an unexpanded parent). Rendered as hidden tree items so cx-select can
@@ -65,6 +71,7 @@ export default class CxFolderSelectTree extends CortexElement {
     createRenderRoot(): this;
     private computeInitialLimit;
     runFirstUpdated(): void;
+    handleLoadingStateChange(): void;
     handleExtraFolderIdChange(): Promise<void>;
     /**
      * Update `currentRootIDsSet` from a tree-item's toggle. Per-folder

package/library/packages/molecules/src/folder-select/folder-select.d.ts

@@ -47,11 +47,18 @@ export default class CxFolderSelect extends CortexElement {
     autoPageSize: boolean;
     firstFetchCallback: ((data: Folder[]) => void) | null;
     searchTerm: string;
+    /**
+     * Mirrors cx-folder-select-tree's combined fetch/preload loading state, so
+     * the Select variant can show a loading spinner on cx-select while folders
+     * (including preloaded selected folders) are being fetched.
+     */
+    private treeLoading;
     constructor();
     updateWrappedApi(): void;
     handleSearchTermChange(): void;
     private handleSearchTermInputChange;
     private handleSearchTermSelectChange;
+    private handleTreeLoadingChange;
     private handleSelectClear;
     /**
      * cx-select's own `value` only reflects our `value` correctly the very

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

@@ -24,6 +24,7 @@ export { default as CxFontPicker } from './font-picker/font-picker';
 export { default as CxGalleryItem } from './gallery-item/gallery-item';
 export { default as CxGraphView } from './graph-view/graph-view';
 export { default as CxIconPicker } from './icon-picker/icon-picker';
+export { default as CxMarkdownViewer } from './markdown-viewer/markdown-viewer';
 export { default as CxMasonry } from './masonry/masonry';
 export { default as CxMentions } from './mentions/mentions';
 export { default as CxMultiSelect } from './multi-select/multi-select';

package/library/packages/molecules/src/markdown-viewer/markdown-viewer.d.ts

@@ -0,0 +1,124 @@
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { MarkdownViewerViewMode } from '../../../types/src/markdown-viewer';
+import { CSSResultGroup, TemplateResult } from 'lit';
+
+/**
+ * @summary Renders markdown with a toggle between the rendered preview, the raw source, and — when
+ * `editable` — a plain-text editor and a rich editor.
+ *
+ * @description Wraps `cx-markdown` and adds a view switcher. The source view shows the markdown
+ * verbatim, frontmatter included, syntax highlighted with Prism.
+ *
+ * `editable` adds two editors. `edit` is a `cx-textarea` over the raw source: plain text only, and
+ * byte-exact — what is loaded is what is saved. `wysiwyg` is a ProseMirror editor over a document
+ * model, with formatting and table controls; it is **not** byte-exact, because blocks the user
+ * changes are regenerated. Constructs the model cannot represent, such as HTML blocks, keep their
+ * source and are written back untouched. Choose per document which editor a host offers, through
+ * `available-view-modes`.
+ *
+ * `markdown` is the source coming in, `value` the current text including unsaved edits. Preview and
+ * source both render `value`. Assigning `markdown` again resets `value`.
+ *
+ * The view switcher is omitted when only one mode is on offer, since there is nothing to switch to.
+ *
+ * `cx-markdown` is a Light DOM element whose stylesheet is injected into `document.head`, out of
+ * reach of this shadow root. It is therefore imported into this component's `styles` too, where its
+ * `:host`-prefixed rules give the preview its typography.
+ *
+ * @event cx-change - Emitted after editing settles. Read the new markdown from `value`.
+ *
+ * @csspart toolbar - The overlaid bar holding the view switcher.
+ * @csspart preview - The `cx-markdown` element rendering the markdown.
+ * @csspart source - The `pre` element showing the raw markdown.
+ * @csspart editor - The `cx-textarea` used by the edit view.
+ * @csspart rich-editor - The wrapper around the rich editor and its formatting toolbar.
+ * @csspart format-toolbar - The formatting toolbar shown in the rich view.
+ *
+ * @cssproperty [--cx-markdown-viewer-toolbar-gap=var(--cx-spacing-x-small)] - Gap between toolbar items.
+ * @cssproperty [--cx-markdown-viewer-toolbar-offset-block=var(--cx-spacing-medium)] - Toolbar inset from the top edge.
+ * @cssproperty [--cx-markdown-viewer-toolbar-offset-inline=var(--cx-spacing-medium)] - Toolbar inset from the end edge.
+ * @cssproperty [--cx-markdown-viewer-source-font-size=var(--cx-font-size-small)] - Font size of the source and edit views.
+ * @cssproperty [--cx-markdown-viewer-source-max-height=none] - Max height of the source view before it scrolls.
+ * @cssproperty [--cx-markdown-viewer-edit-min-height=auto] - Min height of the plain-text editor, overriding its row count. The rich editor uses it too, defaulting to 20lh.
+ * @cssproperty [--cx-markdown-viewer-view-switcher-width=12rem] - Space the rich view's toolbar reserves at its end so the overlaid view switcher never covers a control.
+ */
+export default class CxMarkdownViewer extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: Record<string, typeof CortexElement>;
+    private readonly localize;
+    private readonly richEditor;
+    private readonly richEditorHost?;
+    /** The modes the switcher offers, in this order. Empty offers all of them. */
+    availableViewModes: MarkdownViewerViewMode[];
+    /** The mode to open in. Omit to open on the preview. */
+    defaultViewMode?: MarkdownViewerViewMode;
+    /** Adds the edit view. While false no editor is created. */
+    editable: boolean;
+    /** Target applied to rendered links. `_blank` also adds `rel="noopener noreferrer"`. */
+    linkTarget: string;
+    /** The markdown to render. Assigning it resets `value`. */
+    markdown: string;
+    /** Drops the copy button the source view otherwise offers. */
+    noCopyButton: boolean;
+    /** Lets the toolbar scroll away with the content instead of pinning to the top. */
+    noStickyToolbar: boolean;
+    /** Drops the view switcher, fixing the component to the current view. */
+    noViewToggle: boolean;
+    /** The current markdown, including unsaved edits. What hosts read back. */
+    value: string;
+    /** Which view is showing. Falls back to the first offered mode. */
+    view: MarkdownViewerViewMode;
+    handleDefaultViewModeChange(): void;
+    /** A replacement source document discards any in-progress edit of the previous one. */
+    handleMarkdownChange(): void;
+    /**
+     * The editor is created after render, since its mount point only exists once the view is showing.
+     * Leaving the view tears it down rather than leaving a hidden editor holding a selection.
+     *
+     * Watched props are the ones `activeView` and `editorSource` are derived from. The await is what
+     * makes a watcher workable here — they run before render, when the mount point does not exist yet.
+     * Two watched props changing in the same cycle call this twice; harmless, since the first pass
+     * mounts and the second finds the editor already holding this markdown.
+     */
+    handleRichEditorSync(): Promise<void>;
+    /** LF form of `value`: what both editors work in, since a textarea and marked both report LF. */
+    private get editorSource();
+    /**
+     * The view actually showing. `render()` derives the same thing; this exists for the editor-sync
+     * watcher, which runs outside the template and has no access to its locals.
+     */
+    private get activeView();
+    /** The host's list narrowed to supported modes, falling back to all of them when empty. */
+    private get offeredViews();
+    private handleViewChange;
+    /** The host contract is `value` plus one `cx-change`, so the textarea's own events stop here. */
+    private handleEditorInput;
+    private handleEditorChange;
+    /**
+     * One handler for every formatting button: the action rides on the element as a data attribute, so
+     * the template needs no per-button closure.
+     */
+    private handleFormatClick;
+    private handleInsertTableClick;
+    private handleUndoClick;
+    private handleRedoClick;
+    /** Same contract as the plain-text editor: `value` stays current, `cx-change` settles. */
+    private handleRichEditorChange;
+    /** Debounced: `value` is current on every keystroke, so hosts only need the settled edit. */
+    private emitChange;
+    /**
+     * A native `<textarea>` reports LF, so put back the ending the source used and keep the round trip
+     * byte-exact. One ending for the whole document: a mixed-ending source comes back uniformly CRLF.
+     */
+    private restoreLineEndings;
+    /** Prism escapes its input, so the result is safe to pass to `unsafeHTML` unsanitized. */
+    private highlightSource;
+    /** Formatting and table controls for the rich view. */
+    private renderFormatToolbar;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-markdown-viewer': CxMarkdownViewer;
+    }
+}

package/library/packages/molecules/src/markdown-viewer/markdown-viewer.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Deliberately small: cx-markdown's own stylesheet is imported into this shadow root, so document
+ * typography arrives with it.
+ */
+declare const _default: import('lit').CSSResult;
+export default _default;

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

@@ -59,6 +59,11 @@ export default class CxMasonry extends CortexElement {
      * The key to use for the id of the items in the masonry layout.
      */
     idKey: keyof MasonryItem;
+    /**
+     * When true, forwards `no-crossorigin` to each inner `<cx-image>`, disabling CORS mode
+     * (e.g. in Site Builder contexts where CORS headers are absent).
+     */
+    noCrossorigin: boolean;
     private sortableInstance;
     private previous;
     /**

package/library/packages/organisms/src/asset-link-format/asset-link-format.d.ts

@@ -4,6 +4,7 @@ import { default as CxTypography } from '../../../atoms/src/components/typograph
 import { default as CortexElement } from '../../../base/src/cortex-element.ts';
 import { default as CxCropper } from '../../../molecules/src/cropper/cropper.ts';
 import { Asset, CropMode, FocusMode, Parameter, Proxy, Transformation, Unit } from '../../../types/src/asset-link-format';
+import { PositionPickerValue } from '../../../types/src/position-picker';
 import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { default as CxAssetLinkFormatCrop } from './components/asset-link-format-crop/asset-link-format-crop';
 import { default as CxAssetLinkFormatExtension } from './components/asset-link-format-extension/asset-link-format-extension';
@@ -209,6 +210,12 @@ export default class CxAssetLinkFormat extends CortexElement {
      * when nothing has been applied yet.
      */
     get lastAppliedCropFocusMode(): string;
+    /**
+     * The anchor position of the last applied crop transformation, for the no-asset case
+     * only. Reflects whatever position the last committed Crop transformation used, or
+     * top-left when nothing has been applied yet.
+     */
+    get lastAppliedCropPosition(): PositionPickerValue;
     /**
      * Checks if the crop apply button should be disabled.
      * This is determined by comparing the current crop size with the last crop size.
@@ -297,6 +304,7 @@ export default class CxAssetLinkFormat extends CortexElement {
         keepAspectRatio?: boolean;
         percentageHeight: number;
         percentageWidth: number;
+        position: PositionPickerValue;
         ratioHeight: number;
         ratioWidth: number;
         unit: Unit;
@@ -327,6 +335,7 @@ export default class CxAssetLinkFormat extends CortexElement {
     private onProxyChange;
     private onCropModeChange;
     private onCropFocusModeChange;
+    private onCropPositionChange;
     private onCropChange;
     private onCropChanged;
     private onCropApply;