@rulecms/source-components-angular 0.1.0

package/fesm2022/rulecms-source-components-angular.mjs

@@ -0,0 +1,3979 @@
+import * as i0 from '@angular/core';
+import { Input, Component, ViewChild } from '@angular/core';
+import { NgStyle } from '@angular/common';
+import * as i1 from '@angular/platform-browser';
+
+const DEFAULT_CONTENT_TEXT = 'This is a text block. Click to edit and add your own content.';
+const defaultAttributeValues$8 = [
+    {
+        name: 'content-text-3-resolutions',
+        defaultValues: {
+            all: DEFAULT_CONTENT_TEXT,
+        },
+    },
+    {
+        name: 'enclosing-tag-3-resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'links-3-resolutions',
+        defaultValues: {},
+    },
+];
+
+/**
+ * HTML tags the RText component is allowed to enclose its text content in,
+ * ordered from most common to least common.
+ *
+ * Every entry is a standard HTML element that can directly contain text
+ * without changing how that text behaves. Deliberately excluded:
+ * - Interactive / behavior-changing tags: a, button, label, summary, option,
+ *   textarea, select, details, dialog
+ * - Void elements that cannot enclose text: br, wbr, hr, img, input
+ * - Tags only valid inside a specific parent: li, dt, dd, td, th, caption,
+ *   legend, figcaption, rt, rp, optgroup
+ * - Raw-text / metadata tags: script, style, title, template
+ * - Live-region / form-output tags that alter assistive-technology behavior:
+ *   output
+ */
+const ENCLOSING_TAGS = [
+    // Common block-level text containers
+    'p',
+    'div',
+    // Generic inline container
+    'span',
+    // Headings
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    // Common inline emphasis and importance
+    'strong',
+    'em',
+    'b',
+    'i',
+    'u',
+    // Common text presentation
+    'small',
+    'mark',
+    // Preformatted and code text
+    'pre',
+    'code',
+    // Quotations
+    'blockquote',
+    'q',
+    // Subscript and superscript
+    'sub',
+    'sup',
+    // Edits and strikethrough
+    's',
+    'del',
+    'ins',
+    // Citations, definitions and abbreviations
+    'cite',
+    'abbr',
+    'dfn',
+    // Computer I/O text
+    'kbd',
+    'samp',
+    'var',
+    // Machine-readable text
+    'time',
+    'data',
+    // Contact information
+    'address',
+    // Bidirectional text
+    'bdi',
+    'bdo',
+    // Sectioning and grouping containers
+    'figure',
+    'article',
+    'section',
+    'aside',
+    'header',
+    'footer',
+    'main',
+    'nav',
+];
+/**
+ * The tags above whose default CSS display is block-level.
+ *
+ * Box styles — margin, padding, width, border — behave as authored on these
+ * elements, so RText can carry the column's styles on the tag itself and
+ * needs no wrapper div (see `resolve-no-container.ts`).
+ */
+const BLOCK_ENCLOSING_TAGS = [
+    'p',
+    'div',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'pre',
+    'blockquote',
+    'address',
+    'figure',
+    'article',
+    'section',
+    'aside',
+    'header',
+    'footer',
+    'main',
+    'nav',
+];
+/**
+ * The tags above that default to `display: inline`, where vertical
+ * margin/padding and width/height are ignored by the layout engine. Column
+ * box styles must go on a wrapper element instead of on the tag.
+ *
+ * Kept as an explicit list rather than derived from BLOCK_ENCLOSING_TAGS so
+ * adding a tag to ENCLOSING_TAGS forces a deliberate block-or-inline call;
+ * the coverage test in `__tests__/enclosing-tags.test.ts` fails otherwise.
+ */
+const INLINE_ENCLOSING_TAGS = [
+    'span',
+    'strong',
+    'em',
+    'b',
+    'i',
+    'u',
+    'small',
+    'mark',
+    'code',
+    'q',
+    'sub',
+    'sup',
+    's',
+    'del',
+    'ins',
+    'cite',
+    'abbr',
+    'dfn',
+    'kbd',
+    'samp',
+    'var',
+    'time',
+    'data',
+    'bdi',
+    'bdo',
+];
+/**
+ * Runtime guard for values arriving through componentAttributes (untyped
+ * editor-authored data). Unknown values are rejected so a bad persisted value
+ * can never render an unexpected element.
+ */
+function isEnclosingTag(value) {
+    return (typeof value === 'string' &&
+        ENCLOSING_TAGS.includes(value));
+}
+/**
+ * True when the tag renders as a block-level box. Unknown values count as
+ * non-block: the safe answer, because it routes box styles to a wrapper
+ * element where they are guaranteed to apply.
+ */
+function isBlockEnclosingTag(value) {
+    return (isEnclosingTag(value) &&
+        BLOCK_ENCLOSING_TAGS.includes(value));
+}
+
+/** Editor-authored attribute holding the tag, flattened per device resolution. */
+const ENCLOSING_TAG_ATTRIBUTE = 'enclosing-tag-3-resolutions';
+/**
+ * The single source of truth for which tag RText will render.
+ *
+ * Both the component and `resolveNoContainer` go through here: if they
+ * disagreed, widget-react would wrap a block element in a redundant div or
+ * hand box styles to an inline element that ignores them.
+ *
+ * The editor-authored attribute wins over the caller's prop. Attribute values
+ * are untyped, so an unrecognised value falls back to the prop, then to no
+ * enclosing tag at all.
+ */
+function resolveEnclosingTag(componentAttributes, fallback) {
+    const userAssignedTag = componentAttributes?.[ENCLOSING_TAG_ATTRIBUTE];
+    return isEnclosingTag(userAssignedTag) ? userAssignedTag : fallback;
+}
+
+/**
+ * Runtime guard for entries arriving through componentAttributes (untyped,
+ * editor-authored data).
+ *
+ * Only object shape is checked. Field types are not: a single bad field must
+ * cost that field, not the whole entry, so per-field validation belongs to
+ * `resolveLinkAttributes` where each value is turned into an attribute.
+ */
+function isLinkItem(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+/**
+ * True for a cleared slot. Clearing a link stores `{}` rather than removing
+ * the array element, because marker indexes are 1-based positions: dropping an
+ * element would silently repoint every later marker.
+ */
+function isEmptyLinkItem(item) {
+    if (!isLinkItem(item)) {
+        return true;
+    }
+    return Object.values(item).every((value) => value === undefined ||
+        value === null ||
+        (typeof value === 'string' && value.trim() === ''));
+}
+/**
+ * The entry a `{n|…}` marker points at, by 1-based position. Tolerant of bad
+ * data on every axis — a non-array list, a fractional or out-of-range index,
+ * a hole in the array — because none of it may throw during a render.
+ */
+function getLinkItemAt(links, oneBasedIndex) {
+    if (!Array.isArray(links)) {
+        return undefined;
+    }
+    if (!Number.isInteger(oneBasedIndex) || oneBasedIndex < 1) {
+        return undefined;
+    }
+    const entry = links[oneBasedIndex - 1];
+    return isLinkItem(entry) ? entry : undefined;
+}
+
+/**
+ * Schemes that can execute or smuggle a payload. Mirrors the denylist in
+ * RuleCMS `text-safety/validate-text-content.ts`; the two must stay in step,
+ * because that one warns at save and this one is the guarantee at render.
+ */
+const REJECTED_HREF_SCHEMES = [
+    'javascript',
+    // Netscape-era aliases for javascript:. No browser in use today runs them,
+    // but RuleCMS refuses them in prose, and an href accepting what the text
+    // field rejects is the kind of gap that outlives the reason for it.
+    'livescript',
+    'mocha',
+    'vbscript',
+    'data',
+    'file',
+    'blob',
+];
+const SCHEME = /^([a-z][a-z0-9+.-]*):/;
+/**
+ * Characters a browser ignores while reading a scheme. Stripped before the
+ * scheme is matched so `java\tscript:` and a leading NUL cannot hide one.
+ */
+const isIgnoredWhenReadingAScheme = (charCode) => charCode <= 0x20 || charCode === 0x7f;
+const schemeProbe = (value) => {
+    let probe = '';
+    for (let index = 0; index < value.length; index += 1) {
+        if (!isIgnoredWhenReadingAScheme(value.charCodeAt(index))) {
+            probe += value[index];
+        }
+    }
+    return probe.toLowerCase();
+};
+/**
+ * Whether a value is safe to put in an `href`.
+ *
+ * A denylist, not an allowlist. Customers link with git and ssh URLs, mobile
+ * deep links, `mailto:`, `tel:`, `sms:`, custom app schemes, protocol-relative
+ * `//host/path`, and bare `/path`, `#anchor`, `?q=1`, `./rel` — all of which
+ * are accepted. A host is not required and neither is http/https. Only the
+ * schemes that turn a link into code or an opaque payload are turned away.
+ *
+ * Rejection happens at render, never at save: the composer may use this for a
+ * non-blocking warning, but stored content is not trusted content.
+ */
+function isSafeHref(value) {
+    if (typeof value !== 'string' || value.trim() === '') {
+        return false;
+    }
+    const match = SCHEME.exec(schemeProbe(value));
+    // No scheme at all: relative, fragment, query, or protocol-relative.
+    if (!match) {
+        return true;
+    }
+    return !REJECTED_HREF_SCHEMES.includes(match[1]);
+}
+
+const BLANK_TARGET = '_blank';
+const IMPLIED_REL_FOR_BLANK_TARGET = ['noopener', 'noreferrer'];
+const cleanString = (value) => {
+    if (typeof value !== 'string') {
+        return undefined;
+    }
+    const trimmed = value.trim();
+    return trimmed === '' ? undefined : trimmed;
+};
+const resolveRel = (authorRel, target) => {
+    const tokens = authorRel ? authorRel.split(/\s+/) : [];
+    if (target?.toLowerCase() !== BLANK_TARGET) {
+        return tokens.length > 0 ? tokens.join(' ') : undefined;
+    }
+    const present = new Set(tokens.map((token) => token.toLowerCase()));
+    const merged = [...tokens];
+    IMPLIED_REL_FOR_BLANK_TARGET.forEach((token) => {
+        if (!present.has(token)) {
+            merged.push(token);
+        }
+    });
+    return merged.join(' ');
+};
+const resolveDownload = (download) => {
+    if (download === true) {
+        return true;
+    }
+    return cleanString(download);
+};
+function resolveLinkAttributes(item) {
+    if (!isLinkItem(item)) {
+        return undefined;
+    }
+    const href = cleanString(item.href);
+    if (!isSafeHref(href)) {
+        return undefined;
+    }
+    const target = cleanString(item.target);
+    const rel = resolveRel(cleanString(item.rel), target);
+    const title = cleanString(item.title);
+    const ariaLabel = cleanString(item.ariaLabel);
+    const download = resolveDownload(item.download);
+    const hrefLang = cleanString(item.hreflang);
+    const referrerPolicy = cleanString(item.referrerPolicy);
+    return {
+        href: href,
+        ...(target !== undefined ? { target } : {}),
+        ...(rel !== undefined ? { rel } : {}),
+        ...(title !== undefined ? { title } : {}),
+        ...(ariaLabel !== undefined ? { 'aria-label': ariaLabel } : {}),
+        ...(download !== undefined ? { download } : {}),
+        ...(hrefLang !== undefined ? { hrefLang } : {}),
+        ...(referrerPolicy !== undefined ? { referrerPolicy } : {}),
+    };
+}
+
+/**
+ * `{` + optional mark letters + optional index + `|` + text + `}`.
+ *
+ * Sticky, so it can be tried at one position without slicing the string. The
+ * text is everything up to the first `}`, which is what makes markers
+ * non-nesting.
+ */
+const MARKER = /\{([a-z]*)(\d*)\|([^}]*)\}/y;
+/**
+ * One letter per mark. Order is not significant (`{bi1|x}` and `{ib1|x}` are
+ * the same span) and repeats are harmless, because the letters resolve to a
+ * set.
+ *
+ * **`r` must never become a mark letter.** `br` is the line-break token below,
+ * and it is only unambiguous while `r` cannot appear in a mark sequence.
+ */
+const MARK_LETTERS$1 = {
+    b: 'bold',
+    i: 'italic',
+    s: 'strike',
+};
+/** The one marker that carries no text: `{br|}`. */
+const BREAK_TOKEN = 'br';
+const NO_MARKS = { bold: false, italic: false, strike: false };
+/**
+ * Letters to a mark set, or `undefined` when any letter is not a mark. An
+ * unknown letter makes the whole marker literal text rather than a span with
+ * the bad letter ignored: an author who mistypes should see it.
+ */
+const resolveMarks = (letters) => {
+    if (letters === '') {
+        return { ...NO_MARKS };
+    }
+    const marks = { ...NO_MARKS };
+    for (const letter of letters) {
+        const mark = MARK_LETTERS$1[letter];
+        if (mark === undefined) {
+            return undefined;
+        }
+        marks[mark] = true;
+    }
+    return marks;
+};
+/**
+ * Splits authored text into plain runs, marked/linked spans, and line breaks.
+ *
+ * The grammar, and everything it deliberately leaves as literal text, is
+ * specified in `rulecms/__docs__/__ARCHITECTURE__/INLINE_MARKUP_ARCHITECTURE.md`.
+ * In short: a marker is `{`, then lowercase mark letters, then a link index,
+ * then `|`, then its text, then `}`. At least one of the letters and the index
+ * must be present, and everything that does not match that shape stays
+ * verbatim — `{name}`, `{99}`, a lone `{`, JSON fragments, an unterminated
+ * marker, an unknown mark letter, and empty span text.
+ *
+ * Indexes are 1-based and normalize through a base-10 parse, so `{01|x}` and
+ * `{1|x}` point at the same entry. Resolving an index to an entry is the
+ * caller's job; this stays pure and free of React.
+ */
+function parseInlineMarkers(value) {
+    if (typeof value !== 'string' || value === '') {
+        return [];
+    }
+    const runs = [];
+    let pendingText = '';
+    let cursor = 0;
+    const flushPendingText = () => {
+        if (pendingText !== '') {
+            runs.push({ kind: 'text', text: pendingText });
+            pendingText = '';
+        }
+    };
+    while (cursor < value.length) {
+        const open = value.indexOf('{', cursor);
+        if (open === -1) {
+            pendingText += value.slice(cursor);
+            break;
+        }
+        MARKER.lastIndex = open;
+        const match = MARKER.exec(value);
+        const run = match ? resolveRun(match[1], match[2], match[3]) : undefined;
+        if (run === undefined) {
+            // Not a marker: keep the brace as text and look for the next one.
+            pendingText += value.slice(cursor, open + 1);
+            cursor = open + 1;
+            continue;
+        }
+        pendingText += value.slice(cursor, open);
+        flushPendingText();
+        runs.push(run);
+        cursor = open + match[0].length;
+    }
+    flushPendingText();
+    return runs;
+}
+/**
+ * One matched `{…|…}` to the run it means, or `undefined` when the match is
+ * not a marker after all and its opening brace is literal text.
+ */
+const resolveRun = (letters, digits, text) => {
+    if (letters === BREAK_TOKEN) {
+        // A break carries nothing. `{br|x}` is a mistake, not a break with text.
+        return digits === '' && text === '' ? { kind: 'break' } : undefined;
+    }
+    if (letters === '' && digits === '') {
+        return undefined;
+    }
+    // Empty text has no words to mark or link, and staying literal is what shows
+    // the author the mistake instead of swallowing the marker.
+    if (text === '') {
+        return undefined;
+    }
+    const marks = resolveMarks(letters);
+    if (marks === undefined) {
+        return undefined;
+    }
+    return {
+        kind: 'span',
+        text,
+        ...(digits === '' ? {} : { index: Number.parseInt(digits, 10) }),
+        marks,
+    };
+};
+
+const MARK_TAGS = [
+    ['bold', 'strong'],
+    ['italic', 'em'],
+    ['strike', 's'],
+];
+const hasMark = (marks) => marks.bold || marks.italic || marks.strike;
+const plainTextOf = (run) => (run.kind === 'break' ? '' : run.text);
+class InlineMarkupComponent {
+    constructor(host, renderer) {
+        this.host = host;
+        this.renderer = renderer;
+        this.text = '';
+    }
+    ngOnChanges() {
+        this.clear();
+        const runs = parseInlineMarkers(this.text);
+        const anchors = runs.map((run) => run.kind === 'span' && run.index !== undefined
+            ? resolveLinkAttributes(getLinkItemAt(this.links, run.index))
+            : undefined);
+        const needsElement = runs.some((run, position) => run.kind === 'break' ||
+            (run.kind === 'span' && (anchors[position] !== undefined || hasMark(run.marks))));
+        if (!needsElement) {
+            this.renderer.appendChild(this.host.nativeElement, this.renderer.createText(runs.map(plainTextOf).join('')));
+            return;
+        }
+        runs.forEach((run, position) => {
+            if (run.kind === 'text') {
+                this.renderer.appendChild(this.host.nativeElement, this.renderer.createText(run.text));
+                return;
+            }
+            if (run.kind === 'break') {
+                this.renderer.appendChild(this.host.nativeElement, this.renderer.createElement('br'));
+                return;
+            }
+            this.renderer.appendChild(this.host.nativeElement, this.renderSpan(run, anchors[position]));
+        });
+    }
+    renderSpan(run, anchor) {
+        let node = anchor === undefined
+            ? this.renderer.createText(run.text)
+            : this.createAnchor(anchor, run.text);
+        for (let position = MARK_TAGS.length - 1; position >= 0; position -= 1) {
+            const [mark, tag] = MARK_TAGS[position];
+            if (run.marks[mark]) {
+                const wrapper = this.renderer.createElement(tag);
+                this.renderer.appendChild(wrapper, node);
+                node = wrapper;
+            }
+        }
+        return node;
+    }
+    createAnchor(anchor, text) {
+        const el = this.renderer.createElement('a');
+        this.renderer.setAttribute(el, 'href', anchor.href);
+        if (anchor.target)
+            this.renderer.setAttribute(el, 'target', anchor.target);
+        if (anchor.rel)
+            this.renderer.setAttribute(el, 'rel', anchor.rel);
+        if (anchor.title)
+            this.renderer.setAttribute(el, 'title', anchor.title);
+        if (anchor['aria-label'])
+            this.renderer.setAttribute(el, 'aria-label', anchor['aria-label']);
+        if (anchor.download === true)
+            this.renderer.setAttribute(el, 'download', '');
+        else if (typeof anchor.download === 'string')
+            this.renderer.setAttribute(el, 'download', anchor.download);
+        if (anchor.hrefLang)
+            this.renderer.setAttribute(el, 'hreflang', anchor.hrefLang);
+        if (anchor.referrerPolicy)
+            this.renderer.setAttribute(el, 'referrerpolicy', anchor.referrerPolicy);
+        this.renderer.appendChild(el, this.renderer.createText(text));
+        return el;
+    }
+    clear() {
+        const el = this.host.nativeElement;
+        while (el.firstChild) {
+            this.renderer.removeChild(el, el.firstChild);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InlineMarkupComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: InlineMarkupComponent, isStandalone: true, selector: "rulecms-inline-markup", inputs: { text: "text", links: "links" }, host: { styleAttribute: "display: contents" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InlineMarkupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rulecms-inline-markup',
+                    standalone: true,
+                    template: '',
+                    host: { style: 'display: contents' },
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { text: [{
+                type: Input
+            }], links: [{
+                type: Input
+            }] } });
+
+class HtmlTagComponent {
+    constructor(host, renderer, vcr) {
+        this.host = host;
+        this.renderer = renderer;
+        this.vcr = vcr;
+        this.created = null;
+        this.viewReady = false;
+    }
+    ngAfterViewInit() {
+        this.viewReady = true;
+        this.render();
+    }
+    ngOnChanges() {
+        if (this.viewReady) {
+            this.render();
+        }
+    }
+    render() {
+        if (this.created) {
+            this.renderer.removeChild(this.host.nativeElement, this.created);
+            this.created = null;
+        }
+        const el = this.renderer.createElement(this.tag);
+        if (this.className !== undefined) {
+            this.renderer.setAttribute(el, 'class', this.className);
+        }
+        if (this.styleProps) {
+            Object.entries(this.styleProps).forEach(([key, value]) => {
+                if (value !== undefined && value !== null && value !== '') {
+                    this.renderer.setStyle(el, key, String(value));
+                }
+            });
+        }
+        const view = this.vcr.createEmbeddedView(this.projected);
+        view.rootNodes.forEach((node) => this.renderer.appendChild(el, node));
+        this.renderer.appendChild(this.host.nativeElement, el);
+        this.created = el;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HtmlTagComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: HtmlTagComponent, isStandalone: true, selector: "rulecms-html-tag", inputs: { tag: "tag", styleProps: "styleProps", className: "className" }, host: { styleAttribute: "display: contents" }, viewQueries: [{ propertyName: "projected", first: true, predicate: ["projected"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    <ng-template #projected>
+      <ng-content />
+    </ng-template>
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HtmlTagComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rulecms-html-tag',
+                    standalone: true,
+                    template: `
+    <ng-template #projected>
+      <ng-content />
+    </ng-template>
+  `,
+                    host: { style: 'display: contents' },
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }], propDecorators: { tag: [{
+                type: Input,
+                args: [{ required: true }]
+            }], styleProps: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], projected: [{
+                type: ViewChild,
+                args: ['projected', { static: true }]
+            }] } });
+
+class RTextComponent {
+    get content() {
+        const contentVal = this.componentAttributes?.['content-text-3-resolutions'] ?? DEFAULT_CONTENT_TEXT;
+        return typeof contentVal === 'string' ? contentVal : String(contentVal ?? '');
+    }
+    get links() {
+        return this.componentAttributes?.['links-3-resolutions'];
+    }
+    get tag() {
+        return resolveEnclosingTag(this.componentAttributes);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: RTextComponent, isStandalone: true, selector: "rulecms-r-text", inputs: { componentAttributes: "componentAttributes", styleProps: "styleProps", className: "className" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
+    @if (tag) {
+      <rulecms-html-tag [tag]="tag" [styleProps]="styleProps" [className]="className">
+        <rulecms-inline-markup [text]="content" [links]="links" />
+      </rulecms-html-tag>
+    } @else {
+      <rulecms-inline-markup [text]="content" [links]="links" />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: InlineMarkupComponent, selector: "rulecms-inline-markup", inputs: ["text", "links"] }, { kind: "component", type: HtmlTagComponent, selector: "rulecms-html-tag", inputs: ["tag", "styleProps", "className"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RTextComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rulecms-r-text',
+                    standalone: true,
+                    imports: [InlineMarkupComponent, HtmlTagComponent],
+                    template: `
+    @if (tag) {
+      <rulecms-html-tag [tag]="tag" [styleProps]="styleProps" [className]="className">
+        <rulecms-inline-markup [text]="content" [links]="links" />
+      </rulecms-html-tag>
+    } @else {
+      <rulecms-inline-markup [text]="content" [links]="links" />
+    }
+  `,
+                    host: { style: 'display: contents' },
+                }]
+        }], propDecorators: { componentAttributes: [{
+                type: Input
+            }], styleProps: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }] } });
+
+/**
+ * RText needs a wrapper div for the column's box styles unless it is about to
+ * render a block-level element that can hold those styles itself.
+ *
+ * - No enclosing tag: bare text with no element to style → wrapper needed.
+ * - Inline tag (`span`, `em`, `code`, …): vertical margin/padding and width
+ *   are ignored on inline boxes → wrapper needed.
+ * - Block tag (`p`, `div`, `h1`, `section`, …): RText puts styleProps on the
+ *   tag itself → no wrapper, one less element in the DOM.
+ */
+const resolveNoContainer$8 = ({ componentAttributes, }) => !isBlockEnclosingTag(resolveEnclosingTag(componentAttributes));
+
+/**
+ * True when RText is about to render an element that can carry a className —
+ * any enclosing tag, block or inline. Bare text has no element, so false.
+ *
+ * Shares `resolveEnclosingTag` with RText and `resolveNoContainer`: if this
+ * disagreed with what the component renders, a class would either land on
+ * nothing or force a redundant wrapper.
+ */
+const resolveRendersOwnElement$8 = ({ componentAttributes, }) => !!resolveEnclosingTag(componentAttributes);
+
+const attributeEditModeConfigs$8 = [
+    {
+        name: 'content-text-3-resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'enclosing-tag-3-resolutions',
+        heading: 'Enclosing Tag',
+        subHeading: 'HTML tag to enclose the text in (e.g. p, h1, span); see ENCLOSING_TAGS for the allowed values, for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'links-3-resolutions',
+        heading: 'Links',
+        subHeading: 'Links this text can point at. To link part of the text, wrap those words in {1|linked text}, where the number is the position of the entry in this list counting from 1; clearing an entry leaves its position in place so the other numbers keep pointing where they did, for 3 different device resolutions',
+        defaultValues: {},
+    },
+];
+
+const ComponentIdentifiers = {
+    rText: 'r-text',
+    somethingElse: 'something-else',
+    cloudinaryAdvancedImage: 'cloudinary-advanced-image',
+    rVideo: 'r-video',
+    rIcon: 'r-icon',
+    rButton: 'r-button',
+    rDivider: 'r-divider',
+    rEmbed: 'r-embed',
+    rList: 'r-list',
+    rAccordion: 'r-accordion',
+};
+
+const displayCardEntry$8 = {
+    id: ComponentIdentifiers.rText,
+    resolveNoContainer: resolveNoContainer$8,
+    resolveRendersOwnElement: resolveRendersOwnElement$8,
+    card: RTextComponent,
+    defaultAttributeValues: defaultAttributeValues$8,
+    attributeEditModeConfigs: attributeEditModeConfigs$8,
+};
+
+// Builds Cloudinary delivery URLs directly so the component renders a complete
+// <img src/srcSet> during server rendering (no browser-only Cloudinary SDK).
+// `f_auto,q_auto` lets Cloudinary pick format/quality; `c_limit` scales down
+// but never upscales beyond the original asset.
+// Covers phone through large desktop displays, including 2x DPR on common
+// viewport widths. Upper bound keeps multi-thousand-pixel originals in check.
+const cloudinarySrcSetWidths = [480, 768, 1080, 1600, 2400];
+// Mid-size fallback for browsers/tools that ignore srcset.
+const fallbackSrcWidth = 1080;
+const defaultTransformations = {
+    f: 'auto',
+    q: 'auto',
+    c: 'limit',
+};
+function serializeTransformations$1(transformations) {
+    return Object.entries(transformations)
+        .map(([key, value]) => `${key}_${value}`)
+        .join(',');
+}
+// Accepts the raw Cloudinary string form ("c_fill,g_auto,ar_4:3") and parses
+// it into an object so it merges over the defaults the same way object input
+// does (e.g. a user c_fill cleanly replaces the default c_limit)
+function parseTransformationString$1(value) {
+    const result = {};
+    value.split(',').forEach((entry) => {
+        const trimmed = entry.trim();
+        if (!trimmed) {
+            return;
+        }
+        const separatorIndex = trimmed.indexOf('_');
+        if (separatorIndex <= 0) {
+            return;
+        }
+        result[trimmed.slice(0, separatorIndex)] = trimmed.slice(separatorIndex + 1);
+    });
+    return result;
+}
+function buildCloudinaryImageUrl(cloudName, publicId, width, transformations) {
+    const userTransformations = typeof transformations === 'string'
+        ? parseTransformationString$1(transformations)
+        : transformations;
+    // User keys override defaults (object spread = "split the object onto the
+    // configuration"). `w` is always component-managed so srcset width variants
+    // stay correct; combined with user ar/c/g values Cloudinary produces
+    // consistent crops at every width.
+    const merged = {
+        ...defaultTransformations,
+        ...userTransformations,
+        w: width,
+    };
+    // encodeURI preserves the slashes that are part of Cloudinary public IDs
+    // (e.g. "images/<uuid>/<id>") while escaping unsafe characters
+    return encodeURI(`https://res.cloudinary.com/${cloudName}/image/upload/${serializeTransformations$1(merged)}/${publicId}`);
+}
+function buildCloudinarySrc(cloudName, publicId, transformations) {
+    return buildCloudinaryImageUrl(cloudName, publicId, fallbackSrcWidth, transformations);
+}
+function buildCloudinarySrcSet(cloudName, publicId, transformations) {
+    return cloudinarySrcSetWidths
+        .map((width) => `${buildCloudinaryImageUrl(cloudName, publicId, width, transformations)} ${width}w`)
+        .join(', ');
+}
+
+class CloudinaryAdvancedImageComponent {
+    constructor() {
+        this.cloudName = 'rulecms';
+        this.publicId = 'main-sample';
+        this.alt = 'RuleCMS Component';
+    }
+    get finalCloudName() {
+        return this.componentAttributes?.['cloudinary-cloud-name'] || this.cloudName;
+    }
+    get finalPublicId() {
+        return (this.componentAttributes?.['media-selector-3-resolutions'] ||
+            this.componentAttributes?.['cloudinary-public-id'] ||
+            this.publicId);
+    }
+    get finalTransformations() {
+        return this.componentAttributes?.['cloudinary-transformations-3-resolutions'] || this.transformations;
+    }
+    get src() {
+        return buildCloudinarySrc(this.finalCloudName, this.finalPublicId, this.finalTransformations);
+    }
+    get srcSet() {
+        return buildCloudinarySrcSet(this.finalCloudName, this.finalPublicId, this.finalTransformations);
+    }
+    get imageAttributes() {
+        const imageAttributes = {
+            alt: this.alt,
+            decoding: 'async',
+            sizes: '100vw',
+        };
+        const imageStyles = { height: 'auto' };
+        if (this.componentAttributes) {
+            Object.keys(this.componentAttributes).forEach((keyWithDimensionSuffix) => {
+                const value = this.componentAttributes[keyWithDimensionSuffix];
+                if (value === undefined || value === null) {
+                    return;
+                }
+                const key = keyWithDimensionSuffix.endsWith('-3-resolutions')
+                    ? keyWithDimensionSuffix.slice(0, -'-3-resolutions'.length)
+                    : keyWithDimensionSuffix;
+                if (key.startsWith('pass-through-image-attributes-style-')) {
+                    imageStyles[key.slice('pass-through-image-attributes-style-'.length)] = value;
+                }
+                else if (key.startsWith('pass-through-image-attributes-')) {
+                    imageAttributes[key.slice('pass-through-image-attributes-'.length)] = value;
+                }
+            });
+        }
+        imageAttributes.__styles = imageStyles;
+        return imageAttributes;
+    }
+    get mergedClassName() {
+        const { className: passThroughClassName } = this.imageAttributes;
+        return [passThroughClassName, this.className].filter(Boolean).join(' ') || undefined;
+    }
+    get mergedStyles() {
+        return { ...this.imageAttributes.__styles, ...this.styleProps };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CloudinaryAdvancedImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: CloudinaryAdvancedImageComponent, isStandalone: true, selector: "rulecms-cloudinary-image", inputs: { cloudName: "cloudName", publicId: "publicId", alt: "alt", transformations: "transformations", componentAttributes: "componentAttributes", styleProps: "styleProps", className: "className" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
+    <img
+      [src]="src"
+      [srcset]="srcSet"
+      [attr.alt]="imageAttributes['alt']"
+      [attr.decoding]="imageAttributes['decoding']"
+      [attr.sizes]="imageAttributes['sizes']"
+      [attr.loading]="imageAttributes['loading']"
+      [attr.fetchpriority]="imageAttributes['fetchpriority']"
+      [attr.width]="imageAttributes['width']"
+      [attr.height]="imageAttributes['height']"
+      [class]="mergedClassName"
+      [ngStyle]="mergedStyles"
+    />
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CloudinaryAdvancedImageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rulecms-cloudinary-image',
+                    standalone: true,
+                    imports: [NgStyle],
+                    template: `
+    <img
+      [src]="src"
+      [srcset]="srcSet"
+      [attr.alt]="imageAttributes['alt']"
+      [attr.decoding]="imageAttributes['decoding']"
+      [attr.sizes]="imageAttributes['sizes']"
+      [attr.loading]="imageAttributes['loading']"
+      [attr.fetchpriority]="imageAttributes['fetchpriority']"
+      [attr.width]="imageAttributes['width']"
+      [attr.height]="imageAttributes['height']"
+      [class]="mergedClassName"
+      [ngStyle]="mergedStyles"
+    />
+  `,
+                    host: { style: 'display: contents' },
+                }]
+        }], propDecorators: { cloudName: [{
+                type: Input
+            }], publicId: [{
+                type: Input
+            }], alt: [{
+                type: Input
+            }], transformations: [{
+                type: Input
+            }], componentAttributes: [{
+                type: Input
+            }], styleProps: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }] } });
+
+/**
+ * The component spreads styleProps onto its `<img>`, a replaced element that
+ * honors min/max sizing, margin and padding directly — a wrapper div would
+ * only add a redundant element. There is no configuration that changes this,
+ * so the answer is the same for every render.
+ */
+const resolveNoContainer$7 = () => false;
+
+/**
+ * Always renders an `<img>`, which can carry a className. There is no
+ * configuration that changes this.
+ */
+const resolveRendersOwnElement$7 = () => true;
+
+const defaultAttributeValues$7 = [
+    {
+        name: 'cloudinary-cloud-name',
+        defaultValues: {},
+    },
+    {
+        name: 'cloudinary-public-id',
+        defaultValues: {},
+    },
+    {
+        name: 'media-selector-3-resolutions',
+        defaultValues: {
+            all: 'main-sample',
+        },
+    },
+    {
+        name: 'pass-through-image-attributes-alt-3-resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-image-attributes-width-3-resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-image-attributes-height-3-resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-image-attributes-sizes-3-resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-image-attributes-loading-3-resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-image-attributes-fetchpriority-3-resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'cloudinary-transformations-3-resolutions',
+        defaultValues: {},
+    },
+];
+
+const attributeEditModeConfigs$7 = [
+    {
+        name: 'cloudinary-cloud-name',
+        heading: 'Cloudinary Cloud Name',
+        subHeading: 'Set the Cloudinary cloud name for 3 different device resolutions',
+        defaultValues: {},
+        // Filled by Media Selector / team defaults — not something marketers edit by hand.
+        hiddenToUser: true,
+    },
+    {
+        name: 'cloudinary-public-id',
+        heading: 'Image Public ID',
+        subHeading: 'Set the Cloudinary image public ID for 3 different device resolutions',
+        defaultValues: {},
+        // Filled by Media Selector — not something marketers edit by hand.
+        hiddenToUser: true,
+    },
+    {
+        name: 'media-selector-3-resolutions',
+        heading: 'Media Selector',
+        subHeading: 'Select media for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-image-attributes-alt-3-resolutions',
+        heading: 'Image Alt Text',
+        subHeading: 'Set the image alt text for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-image-attributes-width-3-resolutions',
+        heading: 'Image Intrinsic Width',
+        subHeading: 'Set the intrinsic pixel width (with height, reserves layout space before the image loads) for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-image-attributes-height-3-resolutions',
+        heading: 'Image Intrinsic Height',
+        subHeading: 'Set the intrinsic pixel height (with width, reserves layout space before the image loads) for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-image-attributes-sizes-3-resolutions',
+        heading: 'Image Sizes',
+        subHeading: 'Set the sizes attribute (e.g. "(max-width: 600px) 100vw, 600px") so the browser downloads the right srcset variant, for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-image-attributes-loading-3-resolutions',
+        heading: 'Image Loading',
+        subHeading: 'Set to "lazy" for below-the-fold images (never for the main hero image), for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-image-attributes-fetchpriority-3-resolutions',
+        heading: 'Image Fetch Priority',
+        subHeading: 'Set to "high" for the most important image on the page (e.g. the hero), for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'cloudinary-transformations-3-resolutions',
+        heading: 'Cloudinary Transformations',
+        subHeading: 'Set extra Cloudinary transformations (e.g. "c_fill,g_auto,ar_4:3"); merged over the defaults f_auto,q_auto,c_limit, for 3 different device resolutions',
+        defaultValues: {},
+    },
+];
+
+const displayCardEntry$7 = {
+    id: ComponentIdentifiers.cloudinaryAdvancedImage,
+    resolveNoContainer: resolveNoContainer$7,
+    resolveRendersOwnElement: resolveRendersOwnElement$7,
+    card: CloudinaryAdvancedImageComponent,
+    defaultAttributeValues: defaultAttributeValues$7,
+    attributeEditModeConfigs: attributeEditModeConfigs$7,
+};
+
+// Builds media-host delivery URLs directly so the component renders a complete
+// <video src/poster> during server rendering (no browser-only SDK).
+//
+// Delivery choices for web video:
+// - `.mp4` extension: every uploaded source format (webm, mov, …) is
+//   transcoded to progressive MP4, which plays in every browser.
+// - `vc_auto,q_auto`: the host picks the best codec and quality for the
+//   requested container.
+// - `c_limit,w_1920`: scales oversized originals down to a web-appropriate
+//   width but never upscales.
+const defaultVideoTransformations = {
+    q: 'auto',
+    vc: 'auto',
+    c: 'limit',
+    w: 1920,
+};
+// Poster is a single still frame: take the first frame (so_0), same
+// downscale cap as the video itself. Format comes from the .jpg extension.
+const defaultPosterTransformations = {
+    so: 0,
+    q: 'auto',
+    c: 'limit',
+    w: 1920,
+};
+// Custom posters are uploaded images, so they get the image pipeline's
+// automatic format/quality.
+const defaultCustomPosterTransformations = {
+    f: 'auto',
+    q: 'auto',
+    c: 'limit',
+    w: 1920,
+};
+function serializeTransformations(transformations) {
+    return Object.entries(transformations)
+        .map(([key, value]) => (value === '' ? key : `${key}_${value}`))
+        .join(',');
+}
+// Accepts the raw string form ("c_fill,ar_16:9") and parses it into an object
+// so it merges over the defaults the same way object input does.
+function parseTransformationString(value) {
+    const result = {};
+    value.split(',').forEach((entry) => {
+        const trimmed = entry.trim();
+        if (!trimmed) {
+            return;
+        }
+        const separatorIndex = trimmed.indexOf('_');
+        if (separatorIndex <= 0) {
+            // Flag-style component with no value (e.g. "so_0" handled above; keep
+            // unknown flags as bare keys so they serialize unchanged).
+            result[trimmed] = '';
+            return;
+        }
+        result[trimmed.slice(0, separatorIndex)] = trimmed.slice(separatorIndex + 1);
+    });
+    return result;
+}
+function mergeTransformations(defaults, transformations) {
+    const userTransformations = typeof transformations === 'string'
+        ? parseTransformationString(transformations)
+        : transformations;
+    return { ...defaults, ...userTransformations };
+}
+function buildVideoSrc(cloudName, publicId, transformations) {
+    const merged = mergeTransformations(defaultVideoTransformations, transformations);
+    // encodeURI preserves the slashes that are part of public IDs
+    // (e.g. "videos/<uuid>/<id>") while escaping unsafe characters
+    return encodeURI(`https://res.cloudinary.com/${cloudName}/video/upload/${serializeTransformations(merged)}/${publicId}.mp4`);
+}
+// First frame of the video itself — the zero-configuration poster.
+function buildVideoPosterSrc(cloudName, publicId) {
+    return encodeURI(`https://res.cloudinary.com/${cloudName}/video/upload/${serializeTransformations(defaultPosterTransformations)}/${publicId}.jpg`);
+}
+// A separately uploaded image chosen as the poster.
+function buildCustomPosterSrc(cloudName, posterPublicId) {
+    return encodeURI(`https://res.cloudinary.com/${cloudName}/image/upload/${serializeTransformations(defaultCustomPosterTransformations)}/${posterPublicId}`);
+}
+
+const BOOLEAN_VIDEO_ATTRIBUTES = new Set(['controls', 'autoplay', 'loop', 'muted', 'playsinline']);
+const coerceBoolean = (value) => value === true || value === 'true';
+class RVideoComponent {
+    constructor() {
+        this.cloudName = 'rulecms';
+        this.publicId = 'main-sample-video';
+    }
+    get finalCloudName() {
+        return this.componentAttributes?.['video-host-cloud-name'] || this.cloudName;
+    }
+    get finalPublicId() {
+        return (this.componentAttributes?.['video-selector-3-resolutions'] ||
+            this.componentAttributes?.['video-public-id'] ||
+            this.publicId);
+    }
+    get finalTransformations() {
+        return this.componentAttributes?.['video-transformations-3-resolutions'] || this.transformations;
+    }
+    get src() {
+        return buildVideoSrc(this.finalCloudName, this.finalPublicId, this.finalTransformations);
+    }
+    get videoAttributes() {
+        const posterPublicId = this.componentAttributes?.['video-poster-selector-3-resolutions'];
+        const videoAttributes = {
+            controls: true,
+            playsinline: true,
+            preload: 'metadata',
+            poster: posterPublicId
+                ? buildCustomPosterSrc(this.finalCloudName, posterPublicId)
+                : buildVideoPosterSrc(this.finalCloudName, this.finalPublicId),
+        };
+        const videoStyles = {
+            maxWidth: '100%',
+            height: 'auto',
+        };
+        if (this.componentAttributes) {
+            Object.keys(this.componentAttributes).forEach((keyWithDimensionSuffix) => {
+                const value = this.componentAttributes[keyWithDimensionSuffix];
+                if (value === undefined || value === null) {
+                    return;
+                }
+                const key = keyWithDimensionSuffix.endsWith('-3-resolutions')
+                    ? keyWithDimensionSuffix.slice(0, -'-3-resolutions'.length)
+                    : keyWithDimensionSuffix;
+                if (key.startsWith('pass-through-video-attributes-style-')) {
+                    videoStyles[key.slice('pass-through-video-attributes-style-'.length)] = value;
+                }
+                else if (key.startsWith('pass-through-video-attributes-')) {
+                    const attributeName = key.slice('pass-through-video-attributes-'.length);
+                    if (BOOLEAN_VIDEO_ATTRIBUTES.has(attributeName)) {
+                        if (coerceBoolean(value)) {
+                            videoAttributes[attributeName] = true;
+                        }
+                        else {
+                            delete videoAttributes[attributeName];
+                        }
+                        return;
+                    }
+                    videoAttributes[attributeName] = value;
+                }
+            });
+        }
+        videoAttributes.__styles = videoStyles;
+        return videoAttributes;
+    }
+    get mergedClassName() {
+        const { className: passThroughClassName } = this.videoAttributes;
+        return [passThroughClassName, this.className].filter(Boolean).join(' ') || undefined;
+    }
+    get mergedStyles() {
+        return { ...this.videoAttributes.__styles, ...this.styleProps };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: RVideoComponent, isStandalone: true, selector: "rulecms-r-video", inputs: { cloudName: "cloudName", publicId: "publicId", transformations: "transformations", componentAttributes: "componentAttributes", styleProps: "styleProps", className: "className" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
+    <video
+      [src]="src"
+      [attr.poster]="videoAttributes['poster']"
+      [attr.controls]="videoAttributes['controls'] ? true : null"
+      [attr.autoplay]="videoAttributes['autoplay'] ? true : null"
+      [attr.loop]="videoAttributes['loop'] ? true : null"
+      [attr.muted]="videoAttributes['muted'] ? true : null"
+      [attr.playsinline]="videoAttributes['playsinline'] ? true : null"
+      [attr.preload]="videoAttributes['preload']"
+      [attr.width]="videoAttributes['width']"
+      [attr.height]="videoAttributes['height']"
+      [class]="mergedClassName"
+      [ngStyle]="mergedStyles"
+    ></video>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RVideoComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rulecms-r-video',
+                    standalone: true,
+                    imports: [NgStyle],
+                    template: `
+    <video
+      [src]="src"
+      [attr.poster]="videoAttributes['poster']"
+      [attr.controls]="videoAttributes['controls'] ? true : null"
+      [attr.autoplay]="videoAttributes['autoplay'] ? true : null"
+      [attr.loop]="videoAttributes['loop'] ? true : null"
+      [attr.muted]="videoAttributes['muted'] ? true : null"
+      [attr.playsinline]="videoAttributes['playsinline'] ? true : null"
+      [attr.preload]="videoAttributes['preload']"
+      [attr.width]="videoAttributes['width']"
+      [attr.height]="videoAttributes['height']"
+      [class]="mergedClassName"
+      [ngStyle]="mergedStyles"
+    ></video>
+  `,
+                    host: { style: 'display: contents' },
+                }]
+        }], propDecorators: { cloudName: [{
+                type: Input
+            }], publicId: [{
+                type: Input
+            }], transformations: [{
+                type: Input
+            }], componentAttributes: [{
+                type: Input
+            }], styleProps: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }] } });
+
+/**
+ * The component spreads styleProps onto its `<video>`, a replaced element that
+ * honors min/max sizing, margin and padding directly — a wrapper div would
+ * only add a redundant element. There is no configuration that changes this,
+ * so the answer is the same for every render.
+ */
+const resolveNoContainer$6 = () => false;
+
+/**
+ * Always renders a `<video>`, which can carry a className. There is no
+ * configuration that changes this.
+ */
+const resolveRendersOwnElement$6 = () => true;
+
+const defaultAttributeValues$6 = [
+    {
+        name: 'video-host-cloud-name',
+        defaultValues: {},
+    },
+    {
+        name: 'video-public-id',
+        defaultValues: {},
+    },
+    {
+        name: 'video-selector-3-resolutions',
+        defaultValues: {
+            all: 'main-sample-video',
+        },
+    },
+    {
+        name: 'video-poster-selector-3-resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-video-attributes-controls-3-resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-video-attributes-autoplay-3-resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-video-attributes-loop-3-resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-video-attributes-muted-3-resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-video-attributes-playsinline-3-resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-video-attributes-preload-3-resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-video-attributes-width-3-resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-video-attributes-height-3-resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'video-transformations-3-resolutions',
+        defaultValues: {},
+    },
+];
+
+const attributeEditModeConfigs$6 = [
+    {
+        name: 'video-host-cloud-name',
+        heading: 'Video Host Cloud Name',
+        subHeading: 'Set the media host cloud name for 3 different device resolutions',
+        defaultValues: {},
+        // Filled by Video Selector / team defaults — not something marketers edit by hand.
+        hiddenToUser: true,
+    },
+    {
+        name: 'video-public-id',
+        heading: 'Video Public ID',
+        subHeading: 'Set the video public ID for 3 different device resolutions',
+        defaultValues: {},
+        // Filled by Video Selector — not something marketers edit by hand.
+        hiddenToUser: true,
+    },
+    {
+        name: 'video-selector-3-resolutions',
+        heading: 'Video Selector',
+        subHeading: 'Select a video for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'video-poster-selector-3-resolutions',
+        heading: 'Poster Image',
+        subHeading: 'Select an uploaded image shown before playback; defaults to the video\'s first frame, for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-video-attributes-controls-3-resolutions',
+        heading: 'Video Controls',
+        subHeading: 'Show the browser playback controls (default "true"; set "false" for background/ambient video), for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-video-attributes-autoplay-3-resolutions',
+        heading: 'Video Autoplay',
+        subHeading: 'Start playback automatically (browsers require muted "true" for autoplay to work), for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-video-attributes-loop-3-resolutions',
+        heading: 'Video Loop',
+        subHeading: 'Restart the video automatically when it ends, for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-video-attributes-muted-3-resolutions',
+        heading: 'Video Muted',
+        subHeading: 'Start with the audio muted (required by browsers for autoplay), for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-video-attributes-playsinline-3-resolutions',
+        heading: 'Video Plays Inline',
+        subHeading: 'Play within the page on mobile instead of forcing fullscreen (default "true"), for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-video-attributes-preload-3-resolutions',
+        heading: 'Video Preload',
+        subHeading: 'How much to download before playback: "none", "metadata" (default) or "auto", for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-video-attributes-width-3-resolutions',
+        heading: 'Video Intrinsic Width',
+        subHeading: 'Set the intrinsic pixel width (with height, reserves layout space before the video loads) for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'pass-through-video-attributes-height-3-resolutions',
+        heading: 'Video Intrinsic Height',
+        subHeading: 'Set the intrinsic pixel height (with width, reserves layout space before the video loads) for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'video-transformations-3-resolutions',
+        heading: 'Video Transformations',
+        subHeading: 'Set extra delivery transformations (e.g. "c_fill,ar_16:9"); merged over the defaults q_auto,vc_auto,c_limit,w_1920, for 3 different device resolutions',
+        defaultValues: {},
+    },
+];
+
+const displayCardEntry$6 = {
+    id: ComponentIdentifiers.rVideo,
+    resolveNoContainer: resolveNoContainer$6,
+    resolveRendersOwnElement: resolveRendersOwnElement$6,
+    card: RVideoComponent,
+    defaultAttributeValues: defaultAttributeValues$6,
+    attributeEditModeConfigs: attributeEditModeConfigs$6,
+};
+
+/**
+ * The placeholder a freshly dropped icon shows before the author picks one:
+ * Lucide's `shapes`, inlined as a literal.
+ *
+ * It is a literal rather than a registry lookup on purpose. Nothing on the
+ * render path may import `lucide-static` — the default library is registered
+ * eagerly by every consumer, so its bundle reaches every customer page.
+ * `__tests__/default-attribute-values.test.ts` checks this literal still
+ * matches the registry, so a drift shows up as a test failure rather than a
+ * placeholder that quietly stops matching the real icon.
+ */
+const PLACEHOLDER_ICON_NAME = 'shapes';
+const PLACEHOLDER_ICON_NODE = [
+    [
+        'path',
+        { d: 'M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z' },
+    ],
+    ['rect', { x: '3', y: '14', width: '7', height: '7', rx: '1' }],
+    ['circle', { cx: '17.5', cy: '17.5', r: '3.5' }],
+];
+const PLACEHOLDER_ICON = {
+    name: PLACEHOLDER_ICON_NAME,
+    iconNode: PLACEHOLDER_ICON_NODE,
+};
+const isIconNode = (value) => Array.isArray(value) &&
+    value.length > 0 &&
+    value.every((entry) => Array.isArray(entry) &&
+        entry.length >= 2 &&
+        typeof entry[0] === 'string' &&
+        entry[1] != null &&
+        typeof entry[1] === 'object' &&
+        !Array.isArray(entry[1]));
+/**
+ * Read geometry out of a persisted icon attribute.
+ *
+ * The composer writes `{ name, iconNode }` when the author picks an icon, so
+ * every surface renders from the value alone and never needs the registry.
+ * Anything else — a bare name string from a hand-edited config, a half-written
+ * value — yields null and renders nothing, which is the specified behaviour
+ * for an unresolvable icon on a published page.
+ */
+const resolveIconAttributeValue = (value) => {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) {
+        return null;
+    }
+    const { iconNode } = value;
+    return isIconNode(iconNode) ? iconNode : null;
+};
+
+/** Turns persisted Lucide geometry into SVG children on `svg`. */
+function appendIconChildren(renderer, svg, iconNode) {
+    iconNode.forEach(([tag, attributes]) => {
+        const child = renderer.createElement(tag, 'svg');
+        Object.entries(attributes).forEach(([name, value]) => {
+            if (name !== 'key') {
+                renderer.setAttribute(child, name, value);
+            }
+        });
+        renderer.appendChild(svg, child);
+    });
+}
+
+class SvgIconComponent {
+    constructor(host, renderer) {
+        this.host = host;
+        this.renderer = renderer;
+        this.width = 24;
+        this.height = 24;
+        this.ariaHidden = true;
+        this.a11yProps = {};
+    }
+    ngOnChanges() {
+        const el = this.host.nativeElement;
+        while (el.firstChild) {
+            this.renderer.removeChild(el, el.firstChild);
+        }
+        const svg = this.renderer.createElement('svg', 'svg');
+        this.renderer.setAttribute(svg, 'xmlns', 'http://www.w3.org/2000/svg');
+        this.renderer.setAttribute(svg, 'width', String(this.width));
+        this.renderer.setAttribute(svg, 'height', String(this.height));
+        this.renderer.setAttribute(svg, 'viewBox', '0 0 24 24');
+        this.renderer.setAttribute(svg, 'fill', 'none');
+        this.renderer.setAttribute(svg, 'stroke', 'currentColor');
+        this.renderer.setAttribute(svg, 'stroke-width', '2');
+        this.renderer.setAttribute(svg, 'stroke-linecap', 'round');
+        this.renderer.setAttribute(svg, 'stroke-linejoin', 'round');
+        if (this.className !== undefined) {
+            this.renderer.setAttribute(svg, 'class', this.className);
+        }
+        if (this.styleProps) {
+            Object.entries(this.styleProps).forEach(([key, value]) => {
+                if (value !== undefined && value !== null && value !== '') {
+                    this.renderer.setStyle(svg, key, String(value));
+                }
+            });
+        }
+        Object.entries(this.a11yProps).forEach(([key, value]) => {
+            this.renderer.setAttribute(svg, key, value);
+        });
+        if (this.ariaHidden && Object.keys(this.a11yProps).length === 0) {
+            this.renderer.setAttribute(svg, 'aria-hidden', 'true');
+        }
+        appendIconChildren(this.renderer, svg, this.iconNode);
+        this.renderer.appendChild(el, svg);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SvgIconComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: SvgIconComponent, isStandalone: true, selector: "rulecms-svg-icon", inputs: { iconNode: "iconNode", width: "width", height: "height", className: "className", styleProps: "styleProps", ariaHidden: "ariaHidden", a11yProps: "a11yProps" }, host: { styleAttribute: "display: contents" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SvgIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rulecms-svg-icon',
+                    standalone: true,
+                    template: '',
+                    host: { style: 'display: contents' },
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { iconNode: [{
+                type: Input,
+                args: [{ required: true }]
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], styleProps: [{
+                type: Input
+            }], ariaHidden: [{
+                type: Input
+            }], a11yProps: [{
+                type: Input
+            }] } });
+
+const A11Y_ATTR_KEYS = [
+    'aria-label',
+    'aria-labelledby',
+    'aria-describedby',
+    'role',
+    'title',
+];
+class RIconComponent {
+    get iconNode() {
+        const value = this.componentAttributes?.['icon-name-3-resolutions'];
+        return value == null ? PLACEHOLDER_ICON_NODE : resolveIconAttributeValue(value);
+    }
+    get a11yProps() {
+        if (!this.componentAttributes)
+            return {};
+        const a11yProps = {};
+        for (const key of A11Y_ATTR_KEYS) {
+            const value = this.componentAttributes[key];
+            if (typeof value === 'string' && value.length > 0) {
+                a11yProps[key] = value;
+            }
+        }
+        return a11yProps;
+    }
+    get hasA11yProp() {
+        return Object.keys(this.a11yProps).length > 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: RIconComponent, isStandalone: true, selector: "rulecms-r-icon", inputs: { componentAttributes: "componentAttributes", styleProps: "styleProps", className: "className" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
+    @if (iconNode) {
+      <rulecms-svg-icon
+        [iconNode]="iconNode"
+        [className]="className"
+        [styleProps]="styleProps"
+        [a11yProps]="a11yProps"
+        [ariaHidden]="!hasA11yProp"
+      />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: SvgIconComponent, selector: "rulecms-svg-icon", inputs: ["iconNode", "width", "height", "className", "styleProps", "ariaHidden", "a11yProps"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rulecms-r-icon',
+                    standalone: true,
+                    imports: [SvgIconComponent],
+                    template: `
+    @if (iconNode) {
+      <rulecms-svg-icon
+        [iconNode]="iconNode"
+        [className]="className"
+        [styleProps]="styleProps"
+        [a11yProps]="a11yProps"
+        [ariaHidden]="!hasA11yProp"
+      />
+    }
+  `,
+                    host: { style: 'display: contents' },
+                }]
+        }], propDecorators: { componentAttributes: [{
+                type: Input
+            }], styleProps: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }] } });
+
+/**
+ * Always renders an `<svg>`, a replaced element that honours sizing, margin
+ * and colour (via currentColor) directly, so a wrapper div would only add a
+ * redundant element. No configuration changes that.
+ */
+const resolveNoContainer$5 = () => false;
+
+/**
+ * The `<svg>` carries the className. An unresolvable attribute renders no
+ * element at all, but that is a data error rather than a different root type,
+ * so the configured happy path is what this answers for.
+ */
+const resolveRendersOwnElement$5 = () => true;
+
+const defaultAttributeValues$5 = [
+    {
+        // Holds `{ name, iconNode }`, not a bare name: the composer stamps the
+        // geometry when the author picks the icon so the render path never needs
+        // the icon registry.
+        name: 'icon-name-3-resolutions',
+        defaultValues: {
+            all: PLACEHOLDER_ICON,
+        },
+    },
+];
+
+const attributeEditModeConfigs$5 = [
+    {
+        name: 'icon-name-3-resolutions',
+        heading: 'Icon',
+        subHeading: 'Search by name or by what the icon depicts (e.g. "launch" finds the rocket), for 3 different device resolutions',
+        defaultValues: {
+            all: PLACEHOLDER_ICON,
+        },
+    },
+];
+
+const displayCardEntry$5 = {
+    id: ComponentIdentifiers.rIcon,
+    resolveNoContainer: resolveNoContainer$5,
+    resolveRendersOwnElement: resolveRendersOwnElement$5,
+    card: RIconComponent,
+    defaultAttributeValues: defaultAttributeValues$5,
+    attributeEditModeConfigs: attributeEditModeConfigs$5,
+};
+
+/**
+ * @deprecated Use `parseInlineMarkers` from `shared/inline-markup`.
+ *
+ * The link-only view of the grammar, kept because it is public API. Markers now
+ * also carry marks (`{b|word}`) and line breaks (`{br|}`), which this shape
+ * cannot express, so anything that is not a linked span is flattened into text:
+ * marked spans contribute their words without the marks, and a break
+ * contributes a newline. That is exactly what a caller stripping markers out of
+ * a string wants — `resolveAccordionSummary` is the one in this package — and
+ * it is wrong for anything that means to render them.
+ *
+ * Adjacent text is merged, so text with no linked spans is still one run.
+ */
+function parseInlineLinkMarkers(value) {
+    const runs = [];
+    let pendingText = '';
+    const flushPendingText = () => {
+        if (pendingText !== '') {
+            runs.push({ kind: 'text', text: pendingText });
+            pendingText = '';
+        }
+    };
+    for (const run of parseInlineMarkers(value)) {
+        if (run.kind === 'span' && run.index !== undefined) {
+            flushPendingText();
+            runs.push({ kind: 'link', index: run.index, text: run.text });
+            continue;
+        }
+        pendingText += run.kind === 'break' ? '\n' : run.text;
+    }
+    flushPendingText();
+    return runs;
+}
+
+/**
+ * The preset vocabulary for `r-button`.
+ *
+ * Three independent axes rather than one flat list of named buttons: five
+ * variants times four tones times five sizes is a hundred looks from three
+ * short tables, and an author picks each axis without us having to have
+ * anticipated the combination.
+ *
+ * Every preset name here is persisted customer data, exactly like an icon
+ * name. A name that has shipped is never deleted or repurposed — add a new
+ * one and alias the old one, or published pages change appearance on upgrade.
+ */
+/** How the button is filled and bordered. */
+const BUTTON_VARIANTS = ['solid', 'soft', 'outline', 'ghost', 'link'];
+/** Which colour family the variant draws from. */
+const BUTTON_TONES = ['brand', 'neutral', 'danger', 'success'];
+/** Type scale, padding and control height, smallest to largest. */
+const BUTTON_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'];
+/**
+ * What an unconfigured button looks like. Dropping the component on a canvas
+ * and touching nothing must already produce something shippable.
+ */
+const DEFAULT_BUTTON_PRESET = {
+    variant: 'solid',
+    tone: 'brand',
+    size: 'md',
+};
+const isButtonVariant = (value) => BUTTON_VARIANTS.includes(value);
+const isButtonTone = (value) => BUTTON_TONES.includes(value);
+const isButtonSize = (value) => BUTTON_SIZES.includes(value);
+/**
+ * Defaults only. Every one of these reaches the page as the fallback half of a
+ * `var(--rulecms-button-…, default)`, so a customer rebrands every button on
+ * their site by defining the custom property once, with no per-button edits
+ * and no composer access. See `button-css-variables.ts`.
+ */
+const TONE_PALETTES = {
+    brand: {
+        base: '#2563eb',
+        hover: '#1d4ed8',
+        active: '#1e40af',
+        contrast: '#ffffff',
+        border: '#2563eb',
+        soft: '#eff6ff',
+        softHover: '#dbeafe',
+        softContrast: '#1d4ed8',
+    },
+    neutral: {
+        base: '#334155',
+        hover: '#1e293b',
+        active: '#0f172a',
+        contrast: '#ffffff',
+        // Deliberately lighter than `base`: a secondary button whose border matches
+        // its dark label text reads as heavy as a primary one.
+        border: '#cbd5e1',
+        soft: '#f1f5f9',
+        softHover: '#e2e8f0',
+        softContrast: '#334155',
+    },
+    danger: {
+        base: '#dc2626',
+        hover: '#b91c1c',
+        active: '#991b1b',
+        contrast: '#ffffff',
+        border: '#dc2626',
+        soft: '#fef2f2',
+        softHover: '#fee2e2',
+        softContrast: '#b91c1c',
+    },
+    success: {
+        base: '#16a34a',
+        hover: '#15803d',
+        active: '#166534',
+        contrast: '#ffffff',
+        border: '#16a34a',
+        soft: '#f0fdf4',
+        softHover: '#dcfce7',
+        softContrast: '#15803d',
+    },
+};
+const SIZE_SCALES = {
+    xs: {
+        fontSize: '12px',
+        minHeight: '28px',
+        paddingInline: '10px',
+        paddingBlock: '4px',
+        borderRadius: '4px',
+        gap: '4px',
+    },
+    sm: {
+        fontSize: '14px',
+        minHeight: '34px',
+        paddingInline: '12px',
+        paddingBlock: '6px',
+        borderRadius: '6px',
+        gap: '6px',
+    },
+    md: {
+        fontSize: '16px',
+        minHeight: '40px',
+        paddingInline: '16px',
+        paddingBlock: '8px',
+        borderRadius: '8px',
+        gap: '8px',
+    },
+    lg: {
+        fontSize: '18px',
+        minHeight: '48px',
+        paddingInline: '20px',
+        paddingBlock: '10px',
+        borderRadius: '10px',
+        gap: '8px',
+    },
+    xl: {
+        fontSize: '20px',
+        minHeight: '56px',
+        paddingInline: '24px',
+        paddingBlock: '12px',
+        borderRadius: '12px',
+        gap: '10px',
+    },
+};
+
+/**
+ * Every colour a preset emits goes out as `var(--rulecms-button-…, default)`.
+ *
+ * This is the whole white-label story for buttons. A customer who sets
+ *
+ *   :root { --rulecms-button-brand: #c8102e; }
+ *
+ * once in their own stylesheet rebrands every RuleCMS button on the site,
+ * without touching a widget, without composer access, and without us shipping
+ * a theme provider or a design system to their page. Authors who want one
+ * button to differ still override it per column, as before.
+ */
+const BUTTON_CSS_VARIABLE_PREFIX = '--rulecms-button';
+const toneCssVariable = (tone, slot = '') => slot === ''
+    ? `${BUTTON_CSS_VARIABLE_PREFIX}-${tone}`
+    : `${BUTTON_CSS_VARIABLE_PREFIX}-${tone}-${slot}`;
+/**
+ * A `var()` reference carrying our default as the fallback, so the button is
+ * fully styled whether or not the host defines anything.
+ */
+const cssVarWithFallback = (variableName, fallback) => `var(${variableName}, ${fallback})`;
+/** Shorthand for the common case: one tone slot with its palette default. */
+const toneColor = (tone, slot, fallback) => cssVarWithFallback(toneCssVariable(tone, slot), fallback);
+
+/**
+ * The rules that stop a native `<button>` looking like a native `<button>`.
+ *
+ * Two of these do most of the work. `appearance: none` removes the platform
+ * chrome iOS Safari still paints on form controls, and `fontFamily: inherit`
+ * opts out of the browser's refusal to inherit typography into form controls —
+ * which is the single biggest reason an unstyled button looks foreign on a
+ * designed page. Inheriting means the button picks up the customer's brand
+ * typeface with no configuration at all.
+ */
+const structuralStyles = {
+    appearance: 'none',
+    WebkitAppearance: 'none',
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+    textDecoration: 'none',
+    cursor: 'pointer',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+    verticalAlign: 'middle',
+    borderStyle: 'solid',
+    fontFamily: 'inherit',
+    fontWeight: 600,
+    lineHeight: 1.25,
+    // Inert until something changes state. Kept because the host's own `:hover`
+    // rule — the only hover mechanism available to a widget today — then eases
+    // for free instead of snapping.
+    transition: 'background-color 150ms ease, border-color 150ms ease, color 150ms ease',
+};
+const sizeStyles = (preset) => {
+    const scale = SIZE_SCALES[preset.size];
+    return {
+        fontSize: scale.fontSize,
+        minHeight: scale.minHeight,
+        // Logical properties so a right-to-left page mirrors correctly.
+        paddingInline: scale.paddingInline,
+        paddingBlock: scale.paddingBlock,
+        borderRadius: scale.borderRadius,
+        gap: scale.gap,
+    };
+};
+/**
+ * Every variant keeps a 1px border, transparent where it is not wanted, so
+ * switching preset never changes the button's box and never nudges the layout
+ * around it.
+ */
+const variantStyles = (preset) => {
+    const palette = TONE_PALETTES[preset.tone];
+    const tone = preset.tone;
+    switch (preset.variant) {
+        case 'solid':
+            return {
+                borderWidth: '1px',
+                backgroundColor: toneColor(tone, '', palette.base),
+                borderColor: toneColor(tone, '', palette.base),
+                color: toneColor(tone, 'contrast', palette.contrast),
+            };
+        case 'soft':
+            return {
+                borderWidth: '1px',
+                backgroundColor: toneColor(tone, 'soft', palette.soft),
+                borderColor: 'transparent',
+                color: toneColor(tone, 'soft-contrast', palette.softContrast),
+            };
+        case 'outline':
+            return {
+                borderWidth: '1px',
+                backgroundColor: 'transparent',
+                borderColor: toneColor(tone, 'border', palette.border),
+                color: toneColor(tone, '', palette.base),
+            };
+        case 'ghost':
+            return {
+                borderWidth: '1px',
+                backgroundColor: 'transparent',
+                borderColor: 'transparent',
+                color: toneColor(tone, '', palette.base),
+            };
+        case 'link':
+        default:
+            // Reads as prose, not as a control: the size scale's box is stripped
+            // back off so it can sit in a sentence without a padded hit area.
+            return {
+                borderWidth: 0,
+                backgroundColor: 'transparent',
+                borderColor: 'transparent',
+                color: toneColor(tone, '', palette.base),
+                minHeight: 0,
+                paddingInline: 0,
+                paddingBlock: 0,
+                borderRadius: 0,
+                textDecoration: 'underline',
+                textUnderlineOffset: '0.2em',
+            };
+    }
+};
+/**
+ * The preset's contribution to the button's inline style.
+ *
+ * Callers spread column `styleProps` *after* this, which is what makes the
+ * preset a set of defaults rather than a set of rules: anything the author
+ * touched in Column Styles lands later in the object and wins.
+ */
+function buildButtonPresetStyles(preset) {
+    return {
+        ...structuralStyles,
+        ...sizeStyles(preset),
+        ...variantStyles(preset),
+    };
+}
+/** Applied on top when the button is disabled, before column styles. */
+const disabledStyles = {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+};
+
+/** The only key `r-button` reads out of the host's per-instance props. */
+const BUTTON_CLICK_HANDLER_PROP = 'onClick';
+/**
+ * The host's click handler for this instance, or `undefined` when there is
+ * nothing to attach.
+ *
+ * Two reasons to answer `undefined` even when the host supplied something:
+ *
+ * - **Disabled wins.** A disabled plain `<button>` is inert natively, but a
+ *   disabled *linked* button renders `<a role="link" aria-disabled="true">`,
+ *   which has no native inertness at all — a handler left on it would fire on
+ *   every click and make "disabled" a lie.
+ * - **The bag is untyped.** It crosses a package boundary as
+ *   `{ [key: string]: any }`, so a host that passes a string here should get a
+ *   button that does nothing rather than a React crash on the customer's page.
+ */
+const resolveButtonClickHandler = ({ widgetInstanceProps, disabled, }) => {
+    if (disabled) {
+        return undefined;
+    }
+    const handler = widgetInstanceProps?.[BUTTON_CLICK_HANDLER_PROP];
+    return typeof handler === 'function' ? handler : undefined;
+};
+
+/**
+ * Turns whatever the composer stored into a complete preset.
+ *
+ * Tolerant on every axis independently: a value saved by a newer composer, a
+ * half-written object, or an outright wrong type costs that one axis and
+ * nothing else. A published page must never fail to render a button because
+ * one field went stale.
+ */
+function resolveButtonPreset(value) {
+    if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+        return DEFAULT_BUTTON_PRESET;
+    }
+    const candidate = value;
+    return {
+        variant: isButtonVariant(candidate.variant)
+            ? candidate.variant
+            : DEFAULT_BUTTON_PRESET.variant,
+        tone: isButtonTone(candidate.tone) ? candidate.tone : DEFAULT_BUTTON_PRESET.tone,
+        size: isButtonSize(candidate.size) ? candidate.size : DEFAULT_BUTTON_PRESET.size,
+    };
+}
+
+/**
+ * The attribute names `r-button` reads.
+ *
+ * Every one is button-specific, including the label and the icon, which are
+ * conceptually the same thing `r-text` and `r-icon` already offer. Sharing
+ * their attribute names would have saved two lines of editor wiring and cost
+ * the documentation contract: RuleCMS publishes one page per component-scope
+ * attribute and requires exactly one owning component, so a shared name has
+ * no single page to link to from the drawer.
+ *
+ * Reuse happens a level down instead. The composer resolves an attribute to
+ * an *editor* by name, and several names already share one editor, so these
+ * point at the existing text field and the existing Lucide picker without
+ * either component having to give up ownership of its own settings.
+ *
+ * Nothing here duplicates a column style attribute. Colour, border, radius,
+ * spacing and width already have editors that write into the same bag, and a
+ * second way to set the same CSS property would only create a question about
+ * which one wins.
+ */
+const BUTTON_PRESET_ATTRIBUTE = 'button-preset-3-resolutions';
+const BUTTON_LABEL_ATTRIBUTE = 'button-label-3-resolutions';
+const BUTTON_LINK_ATTRIBUTE = 'button-link-3-resolutions';
+const BUTTON_DISABLED_ATTRIBUTE = 'button-disabled-3-resolutions';
+const BUTTON_ICON_ATTRIBUTE = 'button-icon-3-resolutions';
+const BUTTON_ICON_POSITION_ATTRIBUTE = 'button-icon-position-3-resolutions';
+const BUTTON_ARIA_LABEL_ATTRIBUTE = 'aria-label';
+/** What a freshly dropped button says before the author types anything. */
+const DEFAULT_BUTTON_LABEL = 'Button';
+const ICON_POSITIONS = ['leading', 'trailing'];
+const DEFAULT_ICON_POSITION = 'leading';
+/**
+ * An unset label falls back to the placeholder, but a label the author
+ * deliberately cleared stays cleared — that is how an icon-only button is
+ * made, so an empty string cannot be treated as "nothing set".
+ */
+const resolveButtonLabel = (componentAttributes) => {
+    const value = componentAttributes?.[BUTTON_LABEL_ATTRIBUTE];
+    if (value === undefined || value === null) {
+        return DEFAULT_BUTTON_LABEL;
+    }
+    return typeof value === 'string' ? value : String(value);
+};
+/**
+ * Select editors in the composer store `'true'` / `'false'` as strings, while
+ * a hand-written or migrated config may carry a real boolean. Both mean the
+ * same thing here.
+ */
+const resolveButtonDisabled = (componentAttributes) => {
+    const value = componentAttributes?.[BUTTON_DISABLED_ATTRIBUTE];
+    if (typeof value === 'boolean') {
+        return value;
+    }
+    return typeof value === 'string' && value.trim().toLowerCase() === 'true';
+};
+const resolveIconPosition = (componentAttributes) => {
+    const value = componentAttributes?.[BUTTON_ICON_POSITION_ATTRIBUTE];
+    return value === 'trailing' ? 'trailing' : DEFAULT_ICON_POSITION;
+};
+const resolveButtonAriaLabel = (componentAttributes) => {
+    const value = componentAttributes?.[BUTTON_ARIA_LABEL_ATTRIBUTE];
+    if (typeof value !== 'string') {
+        return undefined;
+    }
+    const trimmed = value.trim();
+    return trimmed === '' ? undefined : trimmed;
+};
+
+class RButtonComponent {
+    get preset() {
+        return resolveButtonPreset(this.componentAttributes?.[BUTTON_PRESET_ATTRIBUTE]);
+    }
+    get disabled() {
+        return resolveButtonDisabled(this.componentAttributes);
+    }
+    get style() {
+        return {
+            ...buildButtonPresetStyles(this.preset),
+            ...(this.disabled ? disabledStyles : {}),
+            ...this.styleProps,
+        };
+    }
+    get label() {
+        return resolveButtonLabel(this.componentAttributes);
+    }
+    get ariaLabel() {
+        return resolveButtonAriaLabel(this.componentAttributes);
+    }
+    get link() {
+        return resolveLinkAttributes(this.componentAttributes?.[BUTTON_LINK_ATTRIBUTE]);
+    }
+    get iconNode() {
+        return resolveIconAttributeValue(this.componentAttributes?.[BUTTON_ICON_ATTRIBUTE]);
+    }
+    get iconPosition() {
+        return resolveIconPosition(this.componentAttributes);
+    }
+    handleClick(event) {
+        const onClick = resolveButtonClickHandler({
+            widgetInstanceProps: this.widgetInstanceProps,
+            disabled: this.disabled,
+        });
+        onClick?.(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: RButtonComponent, isStandalone: true, selector: "rulecms-r-button", inputs: { componentAttributes: "componentAttributes", styleProps: "styleProps", className: "className", widgetInstanceProps: "widgetInstanceProps" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
+    @if (link && disabled) {
+      <a [ngStyle]="style" [class]="className || undefined" role="link" aria-disabled="true" [attr.aria-label]="ariaLabel">
+        @if (iconNode && iconPosition !== 'trailing') {
+          <rulecms-svg-icon [iconNode]="iconNode" width="1em" height="1em" [styleProps]="{ flexShrink: 0 }" />
+        }
+        {{ label }}
+        @if (iconNode && iconPosition === 'trailing') {
+          <rulecms-svg-icon [iconNode]="iconNode" width="1em" height="1em" [styleProps]="{ flexShrink: 0 }" />
+        }
+      </a>
+    } @else if (link) {
+      <a
+        [attr.href]="link.href"
+        [attr.target]="link.target"
+        [attr.rel]="link.rel"
+        [attr.title]="link.title"
+        [attr.aria-label]="link['aria-label'] ?? ariaLabel"
+        [attr.download]="link.download === true ? '' : link.download"
+        [attr.hreflang]="link.hrefLang"
+        [attr.referrerpolicy]="link.referrerPolicy"
+        [ngStyle]="style"
+        [class]="className || undefined"
+        (click)="handleClick($event)"
+      >
+        @if (iconNode && iconPosition !== 'trailing') {
+          <rulecms-svg-icon [iconNode]="iconNode" width="1em" height="1em" [styleProps]="{ flexShrink: 0 }" />
+        }
+        {{ label }}
+        @if (iconNode && iconPosition === 'trailing') {
+          <rulecms-svg-icon [iconNode]="iconNode" width="1em" height="1em" [styleProps]="{ flexShrink: 0 }" />
+        }
+      </a>
+    } @else {
+      <button
+        type="button"
+        [disabled]="disabled"
+        [ngStyle]="style"
+        [class]="className || undefined"
+        [attr.aria-label]="ariaLabel"
+        (click)="handleClick($event)"
+      >
+        @if (iconNode && iconPosition !== 'trailing') {
+          <rulecms-svg-icon [iconNode]="iconNode" width="1em" height="1em" [styleProps]="{ flexShrink: 0 }" />
+        }
+        {{ label }}
+        @if (iconNode && iconPosition === 'trailing') {
+          <rulecms-svg-icon [iconNode]="iconNode" width="1em" height="1em" [styleProps]="{ flexShrink: 0 }" />
+        }
+      </button>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SvgIconComponent, selector: "rulecms-svg-icon", inputs: ["iconNode", "width", "height", "className", "styleProps", "ariaHidden", "a11yProps"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rulecms-r-button',
+                    standalone: true,
+                    imports: [NgStyle, SvgIconComponent],
+                    template: `
+    @if (link && disabled) {
+      <a [ngStyle]="style" [class]="className || undefined" role="link" aria-disabled="true" [attr.aria-label]="ariaLabel">
+        @if (iconNode && iconPosition !== 'trailing') {
+          <rulecms-svg-icon [iconNode]="iconNode" width="1em" height="1em" [styleProps]="{ flexShrink: 0 }" />
+        }
+        {{ label }}
+        @if (iconNode && iconPosition === 'trailing') {
+          <rulecms-svg-icon [iconNode]="iconNode" width="1em" height="1em" [styleProps]="{ flexShrink: 0 }" />
+        }
+      </a>
+    } @else if (link) {
+      <a
+        [attr.href]="link.href"
+        [attr.target]="link.target"
+        [attr.rel]="link.rel"
+        [attr.title]="link.title"
+        [attr.aria-label]="link['aria-label'] ?? ariaLabel"
+        [attr.download]="link.download === true ? '' : link.download"
+        [attr.hreflang]="link.hrefLang"
+        [attr.referrerpolicy]="link.referrerPolicy"
+        [ngStyle]="style"
+        [class]="className || undefined"
+        (click)="handleClick($event)"
+      >
+        @if (iconNode && iconPosition !== 'trailing') {
+          <rulecms-svg-icon [iconNode]="iconNode" width="1em" height="1em" [styleProps]="{ flexShrink: 0 }" />
+        }
+        {{ label }}
+        @if (iconNode && iconPosition === 'trailing') {
+          <rulecms-svg-icon [iconNode]="iconNode" width="1em" height="1em" [styleProps]="{ flexShrink: 0 }" />
+        }
+      </a>
+    } @else {
+      <button
+        type="button"
+        [disabled]="disabled"
+        [ngStyle]="style"
+        [class]="className || undefined"
+        [attr.aria-label]="ariaLabel"
+        (click)="handleClick($event)"
+      >
+        @if (iconNode && iconPosition !== 'trailing') {
+          <rulecms-svg-icon [iconNode]="iconNode" width="1em" height="1em" [styleProps]="{ flexShrink: 0 }" />
+        }
+        {{ label }}
+        @if (iconNode && iconPosition === 'trailing') {
+          <rulecms-svg-icon [iconNode]="iconNode" width="1em" height="1em" [styleProps]="{ flexShrink: 0 }" />
+        }
+      </button>
+    }
+  `,
+                    host: { style: 'display: contents' },
+                }]
+        }], propDecorators: { componentAttributes: [{
+                type: Input
+            }], styleProps: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], widgetInstanceProps: [{
+                type: Input
+            }] } });
+
+/**
+ * Always renders a `<button>` or an `<a>`, both of which take padding, border,
+ * background and sizing directly. A wrapper div would add an element that does
+ * nothing, and would put the column's background behind the button rather than
+ * on it. No configuration changes that.
+ */
+const resolveNoContainer$4 = () => false;
+
+/**
+ * There is always a root element to carry the class: the button is the
+ * component, so no configuration leaves it without one.
+ */
+const resolveRendersOwnElement$4 = () => true;
+
+/**
+ * Seeds the button's own semantics only.
+ *
+ * No style attribute may be seeded here, and the omission is load-bearing
+ * rather than an oversight. Defaults are merged into the column's attribute
+ * bag before styles are computed, so a seeded `border-radius-3-resolutions`
+ * would be present on every button and would override the preset's radius
+ * forever — the preset would appear to have no effect on anything a default
+ * happened to cover. Leaving the bag empty is what lets "unset means preset"
+ * be true.
+ */
+const defaultAttributeValues$4 = [
+    {
+        name: BUTTON_PRESET_ATTRIBUTE,
+        defaultValues: {
+            all: DEFAULT_BUTTON_PRESET,
+        },
+    },
+    {
+        name: BUTTON_LABEL_ATTRIBUTE,
+        defaultValues: {
+            all: DEFAULT_BUTTON_LABEL,
+        },
+    },
+];
+
+/**
+ * Every setting the button offers, in the order the Modify drawer shows them:
+ * how it looks, what it says, where it goes, then the two refinements most
+ * buttons never need.
+ *
+ * Order is not cosmetic. The drawer renders these top to bottom and the
+ * documentation registry asserts its pages match that sequence, so moving an
+ * entry here moves it in both places at once.
+ */
+const attributeEditModeConfigs$4 = [
+    {
+        name: BUTTON_PRESET_ATTRIBUTE,
+        heading: 'Button Style',
+        subHeading: 'Variant, tone and size. Sets how the button looks when Column Styles leave it alone — anything set there wins, for 3 different device resolutions',
+        defaultValues: { all: DEFAULT_BUTTON_PRESET },
+    },
+    {
+        name: BUTTON_LABEL_ATTRIBUTE,
+        heading: 'Label',
+        subHeading: 'Text shown on the button. Clear it for an icon-only button',
+        defaultValues: {},
+    },
+    {
+        name: BUTTON_LINK_ATTRIBUTE,
+        heading: 'Link',
+        subHeading: 'Where the button goes. Setting it renders an anchor styled as a button; leaving it empty renders a plain button, for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: BUTTON_ICON_ATTRIBUTE,
+        heading: 'Icon',
+        subHeading: 'Optional icon shown beside the label. Search by name or by what the icon depicts (e.g. "launch" finds the rocket), for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: BUTTON_ICON_POSITION_ATTRIBUTE,
+        heading: 'Icon Position',
+        subHeading: 'Whether the icon sits before or after the label',
+        defaultValues: { all: DEFAULT_ICON_POSITION },
+    },
+    {
+        name: BUTTON_DISABLED_ATTRIBUTE,
+        heading: 'Disabled',
+        subHeading: 'Renders the button dimmed and non-interactive',
+        defaultValues: {},
+    },
+];
+
+const displayCardEntry$4 = {
+    id: ComponentIdentifiers.rButton,
+    resolveNoContainer: resolveNoContainer$4,
+    resolveRendersOwnElement: resolveRendersOwnElement$4,
+    card: RButtonComponent,
+    defaultAttributeValues: defaultAttributeValues$4,
+    attributeEditModeConfigs: attributeEditModeConfigs$4,
+};
+
+/**
+ * The attribute names `r-divider` reads.
+ *
+ * There are two, and the list is short on purpose. A divider is a line, and a
+ * line has four things about it worth setting: how thick it is, whether it is
+ * broken up, what colour it is, and how far across the column it runs. Only
+ * the first two are here.
+ *
+ * Colour and width are missing because they already exist. The line is drawn
+ * in `currentColor`, so Text Color on the column sets it the same way it sets
+ * the colour of an icon, and the element is the column's own box, so Width on
+ * the column shortens it. Offering a second control for either would only
+ * raise the question of which one wins — the same reasoning that keeps colour
+ * and border off `r-button`.
+ *
+ * Both remaining attributes are closed sets rather than free text, which is
+ * what lets them go through the composer's shared select and lets the render
+ * path treat anything unrecognised as unset. A stored value reaches a CSS
+ * property here, so an allowlist is the boundary that keeps it from being
+ * whatever a request happened to write.
+ */
+const DIVIDER_STYLE_ATTRIBUTE = 'divider-style-3-resolutions';
+const DIVIDER_THICKNESS_ATTRIBUTE = 'divider-thickness-3-resolutions';
+const DIVIDER_STYLES = ['solid', 'dashed', 'dotted'];
+const DEFAULT_DIVIDER_STYLE = 'solid';
+/**
+ * Weights rather than a free measurement. Anything under a pixel disappears on
+ * a low-density screen and anything much over eight reads as a band rather
+ * than a rule, so the useful range is small enough to offer whole.
+ */
+const DIVIDER_THICKNESSES = ['1px', '2px', '3px', '4px', '8px'];
+const DEFAULT_DIVIDER_THICKNESS = '1px';
+const resolveDividerStyle = (componentAttributes) => {
+    const value = componentAttributes?.[DIVIDER_STYLE_ATTRIBUTE];
+    return DIVIDER_STYLES.includes(value) ? value : DEFAULT_DIVIDER_STYLE;
+};
+const resolveDividerThickness = (componentAttributes) => {
+    const value = componentAttributes?.[DIVIDER_THICKNESS_ATTRIBUTE];
+    return DIVIDER_THICKNESSES.includes(value) ? value : DEFAULT_DIVIDER_THICKNESS;
+};
+
+/**
+ * The rules that stop a host page's CSS reset having an opinion about the line.
+ *
+ * Every popular reset has already decided what an `<hr>` looks like, and they
+ * disagree: Bootstrap draws one at a quarter opacity, older versions paint it
+ * as a background bar with no border at all, browsers with no reset at all
+ * still paint the inset 3D groove from the days of Netscape. A widget is
+ * dropped into a page whose stylesheet it has never seen, so the only line
+ * that renders the same everywhere is one whose box is stated outright.
+ *
+ * These are inline styles, so they win against anything the host declares —
+ * and column styles are spread over them afterwards, so they lose to anything
+ * the author sets.
+ */
+const hostResetStyles = {
+    boxSizing: 'border-box',
+    // The line is the top border. The element itself has no content, and the
+    // other three sides are what the browser's own inset groove is made of.
+    height: 0,
+    borderRightStyle: 'none',
+    borderBottomStyle: 'none',
+    borderLeftStyle: 'none',
+    backgroundColor: 'transparent',
+    opacity: 1,
+    // Spacing around a divider belongs to the row's gap and the column's margin,
+    // the same as it does for every other component. Zero here is a decision,
+    // not an omission: the alternative is spacing that depends on which reset
+    // the host page happens to load.
+    marginBlock: 0,
+    // Only visible once the author narrows the column: an inset rule centres
+    // rather than hugging the left edge, which is what a shortened divider is
+    // almost always for.
+    marginInline: 'auto',
+};
+/**
+ * The divider's contribution to its own inline style.
+ *
+ * Written entirely in per-side longhands. Column styles arrive as the
+ * all-sides `borderWidth` / `borderStyle` / `borderColor` — different keys,
+ * which is what matters: spread later they are appended after these rather
+ * than replacing them in place, so an author who sets Border on the column
+ * gets a border and not a silent no-op.
+ */
+function buildDividerStyles(componentAttributes) {
+    return {
+        ...hostResetStyles,
+        borderTopStyle: resolveDividerStyle(componentAttributes),
+        borderTopWidth: resolveDividerThickness(componentAttributes),
+        // Inherited, so Text Color on the column colours the line — and a column
+        // that says nothing gets a rule in the same ink as the words around it.
+        borderTopColor: 'currentColor',
+    };
+}
+
+class RDividerComponent {
+    get style() {
+        return {
+            ...buildDividerStyles(this.componentAttributes),
+            ...this.styleProps,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: RDividerComponent, isStandalone: true, selector: "rulecms-r-divider", inputs: { componentAttributes: "componentAttributes", styleProps: "styleProps", className: "className" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `<hr [ngStyle]="style" [class]="className || undefined" />`, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RDividerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rulecms-r-divider',
+                    standalone: true,
+                    imports: [NgStyle],
+                    template: `<hr [ngStyle]="style" [class]="className || undefined" />`,
+                    host: { style: 'display: contents' },
+                }]
+        }], propDecorators: { componentAttributes: [{
+                type: Input
+            }], styleProps: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }] } });
+
+/**
+ * Always renders an `<hr>`, a block-level element that holds margin, padding,
+ * width and border on itself, so a wrapper div would only add a redundant
+ * element. No configuration changes that.
+ */
+const resolveNoContainer$3 = () => false;
+
+/**
+ * The `<hr>` carries the className. There is always exactly one element and it
+ * is always the root, so there is nothing for this to depend on.
+ */
+const resolveRendersOwnElement$3 = () => true;
+
+/**
+ * Seeds the divider's own two settings so the drawer opens on the values a
+ * fresh divider is already drawn with, rather than on two empty pickers.
+ *
+ * Seeding them is safe here in a way it would not be for `r-button`: these
+ * names are the divider's own, so nothing in Column Styles writes to them and
+ * a seeded value can never shadow a style the author set.
+ */
+const defaultAttributeValues$3 = [
+    {
+        name: DIVIDER_STYLE_ATTRIBUTE,
+        defaultValues: {
+            all: DEFAULT_DIVIDER_STYLE,
+        },
+    },
+    {
+        name: DIVIDER_THICKNESS_ATTRIBUTE,
+        defaultValues: {
+            all: DEFAULT_DIVIDER_THICKNESS,
+        },
+    },
+];
+
+/**
+ * Both settings the divider offers, in the order the Modify drawer shows them.
+ *
+ * Order is not cosmetic. The drawer renders these top to bottom and the
+ * documentation registry asserts its pages match that sequence, so moving an
+ * entry here moves it in both places at once.
+ */
+const attributeEditModeConfigs$3 = [
+    {
+        name: DIVIDER_STYLE_ATTRIBUTE,
+        heading: 'Line Style',
+        subHeading: 'Whether the rule is unbroken or broken up. Colour comes from Text Color on the column, for 3 different device resolutions',
+        defaultValues: { all: DEFAULT_DIVIDER_STYLE },
+    },
+    {
+        name: DIVIDER_THICKNESS_ATTRIBUTE,
+        heading: 'Thickness',
+        subHeading: 'How heavy the rule is, from a hairline to a band',
+        defaultValues: { all: DEFAULT_DIVIDER_THICKNESS },
+    },
+];
+
+const displayCardEntry$3 = {
+    id: ComponentIdentifiers.rDivider,
+    resolveNoContainer: resolveNoContainer$3,
+    resolveRendersOwnElement: resolveRendersOwnElement$3,
+    card: RDividerComponent,
+    defaultAttributeValues: defaultAttributeValues$3,
+    attributeEditModeConfigs: attributeEditModeConfigs$3,
+};
+
+/**
+ * The attribute names `r-embed` reads.
+ *
+ * Four, and the shortest list that still produces a usable embed: what to
+ * frame, what to call it, what shape it is, and whether it loads before the
+ * visitor scrolls to it.
+ *
+ * There is no provider attribute. The provider is derived from the URL, so
+ * pasting is the whole interaction and an author cannot pick YouTube and then
+ * paste a Vimeo link. There is no width, colour, border or radius either —
+ * those are column settings, and a second route to the same CSS property only
+ * raises the question of which one is in force.
+ *
+ * Nothing here can influence the frame's privileges. `sandbox`, `allow` and
+ * `referrerpolicy` are fixed per provider in `embed-providers.ts` and are not
+ * attributes at all, which is also why this component deliberately has no
+ * `pass-through-embed-attributes-*` convention.
+ */
+const EMBED_URL_ATTRIBUTE = 'embed-url-3-resolutions';
+const EMBED_TITLE_ATTRIBUTE = 'embed-title-3-resolutions';
+const EMBED_ASPECT_RATIO_ATTRIBUTE = 'embed-aspect-ratio-3-resolutions';
+const EMBED_LOADING_ATTRIBUTE = 'embed-loading-3-resolutions';
+/**
+ * Shapes rather than dimensions. An iframe has no intrinsic size to preserve,
+ * so something has to state the proportion or the box collapses to the
+ * browser's 300×150 default — and a ratio does it without the author having to
+ * work out a height for every screen width.
+ *
+ * `none` is the escape hatch for content that has no natural shape, a booking
+ * form being the obvious one. It is the only value that hands sizing back to
+ * the column's Height setting.
+ */
+const EMBED_ASPECT_RATIOS = ['16:9', '4:3', '1:1', '9:16', '21:9', 'none'];
+/**
+ * What an unshaped embed is tall by default. Applied by the component rather
+ * than seeded onto the column, so the column's Height still overrides it and
+ * clearing that returns the embed to a height that works — the same
+ * "unset means the component's default" arrangement `r-button` uses for its
+ * preset. Sized for a Calendly month view, which is the content that needs it.
+ */
+const EMBED_UNSHAPED_HEIGHT = '700px';
+const EMBED_LOADING_VALUES = ['lazy', 'eager'];
+/**
+ * Lazy by default. An embed is a whole third-party document — for YouTube,
+ * comfortably more than the rest of the page around it — and most of them sit
+ * below the fold. `eager` exists for the ones that do not.
+ */
+const DEFAULT_EMBED_LOADING = 'lazy';
+/**
+ * The aspect ratio, or `undefined` when the author has not chosen one and the
+ * provider's own default should apply. Anything unrecognised is treated as
+ * unset rather than passed through: this value reaches a CSS property.
+ */
+const resolveEmbedAspectRatio = (componentAttributes) => {
+    const value = componentAttributes?.[EMBED_ASPECT_RATIO_ATTRIBUTE];
+    return EMBED_ASPECT_RATIOS.includes(value) ? value : undefined;
+};
+const resolveEmbedLoading = (componentAttributes) => {
+    const value = componentAttributes?.[EMBED_LOADING_ATTRIBUTE];
+    return value === 'eager' ? 'eager' : DEFAULT_EMBED_LOADING;
+};
+/**
+ * An iframe's accessible name. A screen reader reaching an untitled frame
+ * announces it as "frame" and nothing else, so this never returns empty — an
+ * author who clears the field gets the provider's name back rather than a
+ * silent frame.
+ */
+const resolveEmbedTitle = (componentAttributes, fallback) => {
+    const value = componentAttributes?.[EMBED_TITLE_ATTRIBUTE];
+    if (typeof value !== 'string') {
+        return fallback;
+    }
+    const trimmed = value.trim();
+    return trimmed === '' ? fallback : trimmed;
+};
+/** CSS `aspect-ratio` wants `16 / 9`; the attribute stores the familiar `16:9`. */
+const toCssAspectRatio = (ratio) => ratio === 'none' ? undefined : ratio.replace(':', ' / ');
+
+/**
+ * `allow-scripts` with `allow-same-origin` looks like it cancels the sandbox,
+ * and for a same-origin frame it would. Here the framed document is
+ * cross-origin, so "same origin" means youtube.com's own origin, not ours: the
+ * frame gets its own storage and cookies and still cannot reach into the
+ * embedding page. Dropping `allow-same-origin` does not harden anything — it
+ * gives the frame an opaque origin, which breaks every one of these providers
+ * outright.
+ */
+const FRAMED_APP_SANDBOX = ['allow-scripts', 'allow-same-origin'];
+const YOUTUBE_ID = /^[A-Za-z0-9_-]{11}$/;
+const VIMEO_ID = /^[0-9]+$/;
+const VIMEO_PRIVACY_HASH = /^[A-Za-z0-9]+$/;
+const CALENDLY_SEGMENT = /^[A-Za-z0-9_-]+$/;
+const GOOGLE_MAPS_PB = /^[A-Za-z0-9!*'().~_-]+$/;
+/**
+ * Calendly paths that are the scheduling app rather than someone's booking
+ * page. Framing one gets a login screen, so they fail closed here instead.
+ */
+const CALENDLY_RESERVED_SEGMENTS = new Set([
+    'app',
+    'event_types',
+    'login',
+    'signup',
+    'pages',
+    'api',
+    'help',
+    'blog',
+    'pricing',
+]);
+/**
+ * Calendly's own appearance and prefill options, which authors legitimately
+ * copy along with the booking URL. Anything else in the query is dropped
+ * rather than forwarded — the point of rebuilding the URL is that only things
+ * on a list get through.
+ */
+const CALENDLY_ALLOWED_PARAMS = [
+    'hide_gdpr_banner',
+    'hide_event_type_details',
+    'hide_landing_page_details',
+    'primary_color',
+    'background_color',
+    'text_color',
+    'month',
+    'date',
+];
+/** Lowercase and drop a leading `www.`, so host matching is not a trick question. */
+const normaliseHost = (hostname) => hostname.toLowerCase().replace(/^www\./, '');
+const pathSegments = (url) => url.pathname.split('/').filter((segment) => segment !== '');
+/**
+ * Every YouTube URL an author is likely to have in the clipboard — the watch
+ * page, the share link, a Short, a live stream, and an embed URL someone
+ * copied out of another site's markup — reduced to the video id.
+ */
+const youTubeVideoId = (url) => {
+    const segments = pathSegments(url);
+    const host = normaliseHost(url.hostname);
+    if (host === 'youtu.be') {
+        return segments[0] ?? null;
+    }
+    if (segments[0] === 'watch') {
+        return url.searchParams.get('v');
+    }
+    if (segments.length === 2 && ['embed', 'shorts', 'live', 'v'].includes(segments[0])) {
+        return segments[1];
+    }
+    return null;
+};
+const EMBED_PROVIDERS = [
+    {
+        id: 'youtube',
+        label: 'YouTube',
+        inputHosts: ['youtube.com', 'm.youtube.com', 'youtu.be', 'youtube-nocookie.com'],
+        toEmbedUrl: (url) => {
+            const videoId = youTubeVideoId(url);
+            if (!videoId || !YOUTUBE_ID.test(videoId)) {
+                return null;
+            }
+            // youtube-nocookie.com is the same player without the tracking cookies
+            // it would otherwise set on a visitor who never pressed play. Nothing
+            // about the embed needs them, and a widget that quietly adds third-party
+            // cookies to a customer's site is a consent problem we would be handing
+            // them.
+            return `https://www.youtube-nocookie.com/embed/${videoId}`;
+        },
+        sandbox: [...FRAMED_APP_SANDBOX, 'allow-presentation', 'allow-popups', 'allow-popups-to-escape-sandbox'],
+        allow: ['accelerometer', 'clipboard-write', 'encrypted-media', 'gyroscope', 'picture-in-picture'],
+        allowFullScreen: true,
+        defaultAspectRatio: '16:9',
+        defaultTitle: 'YouTube video player',
+    },
+    {
+        id: 'vimeo',
+        label: 'Vimeo',
+        inputHosts: ['vimeo.com', 'player.vimeo.com'],
+        toEmbedUrl: (url) => {
+            const segments = pathSegments(url);
+            // player.vimeo.com/video/123, vimeo.com/123, vimeo.com/channels/staffpicks/123
+            const withoutPrefix = segments[0] === 'video' ? segments.slice(1) : segments;
+            const numeric = withoutPrefix.filter((segment) => VIMEO_ID.test(segment));
+            const videoId = numeric[0];
+            if (!videoId) {
+                return null;
+            }
+            // An unlisted video carries a hash, either as a trailing path segment
+            // (vimeo.com/123/abc123) or as ?h=. Without it the player refuses to
+            // load, so it is the one piece of the input besides the id that is
+            // carried across.
+            const trailing = withoutPrefix[withoutPrefix.indexOf(videoId) + 1];
+            const hash = url.searchParams.get('h') ?? trailing;
+            const privacyHash = hash && VIMEO_PRIVACY_HASH.test(hash) ? hash : null;
+            return privacyHash
+                ? `https://player.vimeo.com/video/${videoId}?h=${privacyHash}`
+                : `https://player.vimeo.com/video/${videoId}`;
+        },
+        sandbox: [...FRAMED_APP_SANDBOX, 'allow-presentation', 'allow-popups', 'allow-popups-to-escape-sandbox'],
+        allow: ['autoplay', 'clipboard-write', 'encrypted-media', 'picture-in-picture'],
+        allowFullScreen: true,
+        defaultAspectRatio: '16:9',
+        defaultTitle: 'Vimeo video player',
+    },
+    {
+        id: 'google-maps',
+        label: 'Google Maps',
+        inputHosts: ['google.com', 'maps.google.com'],
+        toEmbedUrl: (url) => {
+            // Only the URL from "Share → Embed a map" is accepted, because it is the
+            // only one that can be framed at all: Google serves an ordinary maps
+            // link with X-Frame-Options and the visitor gets a blank box. Failing
+            // here means the author is told to copy the other URL, rather than
+            // shipping a page with a hole in it.
+            if (pathSegments(url).join('/') !== 'maps/embed') {
+                return null;
+            }
+            const pb = url.searchParams.get('pb');
+            // `pb` is Google's own opaque camera-and-place blob. It is carried
+            // across verbatim rather than re-encoded, because it is the one input
+            // this file cannot regenerate from an id — so instead it is held to a
+            // charset with no way out of a query string. Everything that could end
+            // one, or start an attribute, is absent from this list.
+            if (!pb || !GOOGLE_MAPS_PB.test(pb)) {
+                return null;
+            }
+            return `https://www.google.com/maps/embed?pb=${pb}`;
+        },
+        sandbox: [...FRAMED_APP_SANDBOX, 'allow-popups', 'allow-popups-to-escape-sandbox'],
+        allow: [],
+        allowFullScreen: true,
+        defaultAspectRatio: '4:3',
+        defaultTitle: 'Map',
+    },
+    {
+        id: 'calendly',
+        label: 'Calendly',
+        inputHosts: ['calendly.com'],
+        toEmbedUrl: (url) => {
+            const segments = pathSegments(url);
+            if (segments.length === 0 || segments.length > 2) {
+                return null;
+            }
+            if (!segments.every((segment) => CALENDLY_SEGMENT.test(segment))) {
+                return null;
+            }
+            if (CALENDLY_RESERVED_SEGMENTS.has(segments[0].toLowerCase())) {
+                return null;
+            }
+            const options = new URLSearchParams();
+            for (const parameter of CALENDLY_ALLOWED_PARAMS) {
+                const value = url.searchParams.get(parameter);
+                if (value !== null) {
+                    options.set(parameter, value);
+                }
+            }
+            const query = options.toString();
+            const path = segments.join('/');
+            return query ? `https://calendly.com/${path}?${query}` : `https://calendly.com/${path}`;
+        },
+        sandbox: [...FRAMED_APP_SANDBOX, 'allow-forms', 'allow-popups', 'allow-popups-to-escape-sandbox'],
+        allow: [],
+        allowFullScreen: false,
+        // A booking widget is a form of unpredictable length, not a picture with a
+        // shape. It gets a height instead of a ratio; see `embed-attributes.ts`.
+        defaultAspectRatio: 'none',
+        defaultTitle: 'Booking calendar',
+    },
+];
+/**
+ * The single place an embed URL is checked against the allowlist.
+ *
+ * Every caller — the component, both container resolvers, and the composer's
+ * URL editor through the package's public exports — comes through here rather
+ * than reading `EMBED_PROVIDERS` and matching for itself. That is what keeps
+ * a per-app allowlist a change to one function's argument later on, instead of
+ * a hunt for call sites: see
+ * `rulecms/__docs__/__TODO__/__COMPONENTS__/TODO_PLATFORM_EMBED_ALLOWLIST_PER_APP.md`.
+ *
+ * Returns `null` for anything it cannot vouch for, which is the fail-closed
+ * behaviour the component depends on. It never throws: a malformed URL in a
+ * stored widget must not take down the page it was published to.
+ */
+function resolveEmbedUrl(value, providers = EMBED_PROVIDERS) {
+    if (typeof value !== 'string' || value.trim() === '') {
+        return null;
+    }
+    let url;
+    try {
+        url = new URL(value.trim());
+    }
+    catch {
+        return null;
+    }
+    // https only. Every provider here serves it, and requiring it disposes of
+    // javascript:, data:, blob: and file: as a class rather than one at a time.
+    if (url.protocol !== 'https:') {
+        return null;
+    }
+    // `https://youtube.com@evil.example/` parses with `evil.example` as the host
+    // and the rest as credentials. The host check below is not fooled by it, but
+    // a URL carrying credentials at all is not one an author pasted from a
+    // provider, so it is refused outright.
+    if (url.username !== '' || url.password !== '') {
+        return null;
+    }
+    const host = normaliseHost(url.hostname);
+    const provider = providers.find((candidate) => candidate.inputHosts.includes(host));
+    if (!provider) {
+        return null;
+    }
+    const src = provider.toEmbedUrl(url);
+    return src ? { provider, src } : null;
+}
+/** Whether a URL would render. The composer's editor uses this for its hint. */
+const isAllowedEmbedUrl = (value, providers = EMBED_PROVIDERS) => resolveEmbedUrl(value, providers) !== null;
+
+/**
+ * The single resolution path, shared by `REmbed` and by both container
+ * resolvers, in the way `r-text` shares `resolveEnclosingTag`.
+ *
+ * Sharing it is not tidiness. `resolveNoContainer` and
+ * `resolveRendersOwnElement` both answer questions about an element that only
+ * exists when a URL passed the allowlist, so if they decided that
+ * independently of the component, a rejected URL would have the renderer
+ * either handing column styles to an element that was never rendered or
+ * wrapping nothing in a styled div. Neither would look wrong in the drawer, in
+ * Redux, or in the stored JSON.
+ *
+ * `null` means nothing will be rendered: no URL, or one the allowlist refused.
+ */
+function resolveEmbed(componentAttributes) {
+    const resolved = resolveEmbedUrl(componentAttributes?.[EMBED_URL_ATTRIBUTE]);
+    if (!resolved) {
+        return null;
+    }
+    const { provider, src } = resolved;
+    return {
+        provider,
+        src,
+        title: resolveEmbedTitle(componentAttributes, provider.defaultTitle),
+        // An author's choice wins; otherwise the provider's own shape, which is
+        // what makes a pasted map 4:3 and a pasted video 16:9 without anyone
+        // having to know that is what they wanted.
+        aspectRatio: resolveEmbedAspectRatio(componentAttributes) ?? provider.defaultAspectRatio,
+        loading: resolveEmbedLoading(componentAttributes),
+    };
+}
+/**
+ * The frame's own appearance, before column styles are laid over it.
+ *
+ * `display: block` removes the descender gap an inline replaced element leaves
+ * under itself, and the zero border removes the 2px inset ridge every browser
+ * still draws around an iframe by default.
+ */
+const buildEmbedStyles = (aspectRatio) => ({
+    display: 'block',
+    width: '100%',
+    border: 0,
+    ...(aspectRatio === 'none'
+        ? { height: EMBED_UNSHAPED_HEIGHT }
+        : { aspectRatio: toCssAspectRatio(aspectRatio) }),
+});
+
+class REmbedComponent {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    get embed() {
+        return resolveEmbed(this.componentAttributes);
+    }
+    get safeSrc() {
+        const embed = this.embed;
+        return embed ? this.sanitizer.bypassSecurityTrustResourceUrl(embed.src) : null;
+    }
+    get style() {
+        const embed = this.embed;
+        if (!embed) {
+            return this.styleProps;
+        }
+        return { ...buildEmbedStyles(embed.aspectRatio), ...this.styleProps };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: REmbedComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: REmbedComponent, isStandalone: true, selector: "rulecms-r-embed", inputs: { componentAttributes: "componentAttributes", styleProps: "styleProps", className: "className" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
+    @if (embed) {
+      <iframe
+        [src]="safeSrc"
+        [title]="embed.title"
+        [ngStyle]="style"
+        [attr.sandbox]="embed.provider.sandbox.join(' ')"
+        [attr.allow]="embed.provider.allow.length > 0 ? embed.provider.allow.join('; ') : null"
+        [attr.allowfullscreen]="embed.provider.allowFullScreen ? true : null"
+        referrerpolicy="strict-origin-when-cross-origin"
+        [attr.loading]="embed.loading"
+        [class]="className || undefined"
+      ></iframe>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: REmbedComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rulecms-r-embed',
+                    standalone: true,
+                    imports: [NgStyle],
+                    template: `
+    @if (embed) {
+      <iframe
+        [src]="safeSrc"
+        [title]="embed.title"
+        [ngStyle]="style"
+        [attr.sandbox]="embed.provider.sandbox.join(' ')"
+        [attr.allow]="embed.provider.allow.length > 0 ? embed.provider.allow.join('; ') : null"
+        [attr.allowfullscreen]="embed.provider.allowFullScreen ? true : null"
+        referrerpolicy="strict-origin-when-cross-origin"
+        [attr.loading]="embed.loading"
+        [class]="className || undefined"
+      ></iframe>
+    }
+  `,
+                    host: { style: 'display: contents' },
+                }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { componentAttributes: [{
+                type: Input
+            }], styleProps: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }] } });
+
+/**
+ * `false` whenever an iframe is rendered: it is a replaced element that holds
+ * margin, padding, width and height on itself, so a wrapper div would only add
+ * an element that does nothing.
+ *
+ * `true` when the URL is missing or the allowlist refused it, because then
+ * there is no element at all — the same answer `r-text` gives for bare text.
+ * Deciding this from `resolveEmbed`, rather than from the fact that this
+ * component "is an iframe component", is what keeps the two in step.
+ */
+const resolveNoContainer$2 = ({ componentAttributes }) => resolveEmbed(componentAttributes) === null;
+
+/**
+ * The iframe carries the className — when there is one. A rejected or unset
+ * URL renders nothing, and a class handed to a component that renders nothing
+ * disappears without trace, so this answers from the same resolution the
+ * component uses.
+ */
+const resolveRendersOwnElement$2 = ({ componentAttributes, }) => resolveEmbed(componentAttributes) !== null;
+
+/**
+ * Nothing is seeded, including the URL.
+ *
+ * A freshly dropped embed renders nothing until an author pastes something,
+ * which is the honest result: the alternative is shipping a placeholder video
+ * that a customer's page would publish if anyone forgot to replace it. The
+ * palette card and the empty drawer say what to do instead.
+ *
+ * Aspect ratio is left unset on purpose too, so it resolves from the provider
+ * — a map is 4:3 and a video is 16:9 without either being written down here.
+ */
+const defaultAttributeValues$2 = [
+    {
+        name: 'embed-url-3-resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'embed-title-3-resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'embed-aspect-ratio-3-resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'embed-loading-3-resolutions',
+        defaultValues: {},
+    },
+];
+
+/**
+ * Drawer order, which is also the order the documentation pages are listed in:
+ * the URL first because nothing renders without it, then the three settings
+ * that only matter once something does.
+ */
+const attributeEditModeConfigs$2 = [
+    {
+        name: 'embed-url-3-resolutions',
+        heading: 'Embed URL',
+        subHeading: 'Paste the address of a YouTube or Vimeo video, a Google Maps "Embed a map" link, or a Calendly booking page, for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'embed-title-3-resolutions',
+        heading: 'Embed Title',
+        subHeading: 'Describe what is being embedded, for screen readers; defaults to the provider name, for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'embed-aspect-ratio-3-resolutions',
+        heading: 'Embed Aspect Ratio',
+        subHeading: 'The shape of the embed — "16:9" for video, "4:3" for maps, or "none" to set the height on the column instead, for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: 'embed-loading-3-resolutions',
+        heading: 'Embed Loading',
+        subHeading: 'Whether the embed loads with the page ("eager") or waits until the visitor scrolls near it ("lazy", the default), for 3 different device resolutions',
+        defaultValues: {},
+    },
+];
+
+const displayCardEntry$2 = {
+    id: ComponentIdentifiers.rEmbed,
+    resolveNoContainer: resolveNoContainer$2,
+    resolveRendersOwnElement: resolveRendersOwnElement$2,
+    card: REmbedComponent,
+    defaultAttributeValues: defaultAttributeValues$2,
+    attributeEditModeConfigs: attributeEditModeConfigs$2,
+};
+
+/**
+ * The attribute names `r-list` reads.
+ *
+ * Every one is list-specific, including the links, which are conceptually the
+ * same numbered list `r-text` already offers. Sharing that attribute name
+ * would have saved one line of editor wiring and cost the documentation
+ * contract: RuleCMS publishes one page per component-scope attribute and
+ * requires exactly one owning component, so a shared name has no single page
+ * to link to from the drawer. Reuse happens a level down instead — the
+ * composer resolves an attribute to an *editor* by name, and `list-links`
+ * points at the editor `links-3-resolutions` already resolves to.
+ *
+ * Nothing here duplicates a column style attribute. Spacing, colour and
+ * typography come from Column Styles on the root element and inherit into
+ * the items; the attributes below are only what is specific to a list —
+ * which element it is, what the markers look like, and where numbering
+ * starts. Kind and marker are closed sets rather than free text, which is
+ * what lets them go through the composer's shared select and lets the render
+ * path treat anything unrecognised as unset.
+ */
+const LIST_ITEMS_ATTRIBUTE = 'list-items-3-resolutions';
+const LIST_KIND_ATTRIBUTE = 'list-kind-3-resolutions';
+const LIST_MARKER_ATTRIBUTE = 'list-marker-3-resolutions';
+const LIST_START_ATTRIBUTE = 'list-start-3-resolutions';
+const LIST_REVERSED_ATTRIBUTE = 'list-reversed-3-resolutions';
+const LIST_LINKS_ATTRIBUTE = 'list-links-3-resolutions';
+/** What a freshly dropped list shows before the author types anything. */
+const DEFAULT_LIST_ITEMS = 'First item\nSecond item\nThird item';
+const LIST_KINDS = ['unordered', 'ordered'];
+const DEFAULT_LIST_KIND = 'unordered';
+/**
+ * `list-style-type` values worth offering. Every entry is valid CSS on both
+ * `<ul>` and `<ol>`, so the marker survives the author switching kind rather
+ * than resetting. Unset means the browser default — disc for unordered,
+ * decimal for ordered — which is why there is no default constant here: not
+ * setting the property at all is the default.
+ */
+const LIST_MARKERS = [
+    'disc',
+    'circle',
+    'square',
+    'decimal',
+    'lower-alpha',
+    'upper-alpha',
+    'lower-roman',
+    'upper-roman',
+    'none',
+];
+const resolveListKind = (componentAttributes) => {
+    const value = componentAttributes?.[LIST_KIND_ATTRIBUTE];
+    return LIST_KINDS.includes(value) ? value : DEFAULT_LIST_KIND;
+};
+/**
+ * A stored value reaches a CSS property here, so the allowlist is the
+ * boundary that keeps it from being whatever a request happened to write.
+ * Unrecognised values mean "unset" and the browser default applies.
+ */
+const resolveListMarker = (componentAttributes) => {
+    const value = componentAttributes?.[LIST_MARKER_ATTRIBUTE];
+    return LIST_MARKERS.includes(value) ? value : undefined;
+};
+/**
+ * One item per line of the authored text, blank lines dropped. An unset
+ * attribute falls back to the placeholder items, but text the author
+ * deliberately cleared stays cleared — an empty list element still carries
+ * the column's styles and stays selectable in the composer.
+ */
+const resolveListItems = (componentAttributes) => {
+    const value = componentAttributes?.[LIST_ITEMS_ATTRIBUTE];
+    const text = value === undefined || value === null
+        ? DEFAULT_LIST_ITEMS
+        : typeof value === 'string'
+            ? value
+            : String(value);
+    return text
+        .split(/\r?\n/)
+        .map((line) => line.trim())
+        .filter((line) => line !== '');
+};
+/**
+ * HTML's `start` takes any integer, including negative ones. The editor
+ * stores a number, but a hand-written or migrated config may carry a numeric
+ * string; both mean the same thing here. Anything else is unset, and only an
+ * ordered list ever reads it.
+ */
+const resolveListStart = (componentAttributes) => {
+    const value = componentAttributes?.[LIST_START_ATTRIBUTE];
+    if (typeof value === 'number' && Number.isInteger(value)) {
+        return value;
+    }
+    if (typeof value === 'string' && value.trim() !== '') {
+        const parsed = Number(value.trim());
+        if (Number.isInteger(parsed)) {
+            return parsed;
+        }
+    }
+    return undefined;
+};
+/**
+ * Select editors in the composer store `'true'` / `'false'` as strings, while
+ * a hand-written or migrated config may carry a real boolean. Both mean the
+ * same thing here. Only an ordered list ever reads it.
+ */
+const resolveListReversed = (componentAttributes) => {
+    const value = componentAttributes?.[LIST_REVERSED_ATTRIBUTE];
+    if (typeof value === 'boolean') {
+        return value;
+    }
+    return typeof value === 'string' && value.trim().toLowerCase() === 'true';
+};
+
+class RListComponent {
+    get marker() {
+        return resolveListMarker(this.componentAttributes);
+    }
+    get links() {
+        return this.componentAttributes?.[LIST_LINKS_ATTRIBUTE];
+    }
+    get style() {
+        return {
+            ...(this.marker !== undefined ? { listStyleType: this.marker } : {}),
+            ...this.styleProps,
+        };
+    }
+    get items() {
+        return resolveListItems(this.componentAttributes);
+    }
+    get kind() {
+        return resolveListKind(this.componentAttributes);
+    }
+    get start() {
+        return resolveListStart(this.componentAttributes);
+    }
+    get reversed() {
+        return resolveListReversed(this.componentAttributes);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: RListComponent, isStandalone: true, selector: "rulecms-r-list", inputs: { componentAttributes: "componentAttributes", styleProps: "styleProps", className: "className" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
+    @if (kind === 'ordered') {
+      <ol [ngStyle]="style" [class]="className || undefined" [attr.start]="start" [attr.reversed]="reversed ? true : null">
+        @for (item of items; track $index) {
+          <li>
+            <rulecms-inline-markup [text]="item" [links]="links" />
+          </li>
+        }
+      </ol>
+    } @else {
+      <ul [ngStyle]="style" [class]="className || undefined">
+        @for (item of items; track $index) {
+          <li>
+            <rulecms-inline-markup [text]="item" [links]="links" />
+          </li>
+        }
+      </ul>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: InlineMarkupComponent, selector: "rulecms-inline-markup", inputs: ["text", "links"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rulecms-r-list',
+                    standalone: true,
+                    imports: [NgStyle, InlineMarkupComponent],
+                    template: `
+    @if (kind === 'ordered') {
+      <ol [ngStyle]="style" [class]="className || undefined" [attr.start]="start" [attr.reversed]="reversed ? true : null">
+        @for (item of items; track $index) {
+          <li>
+            <rulecms-inline-markup [text]="item" [links]="links" />
+          </li>
+        }
+      </ol>
+    } @else {
+      <ul [ngStyle]="style" [class]="className || undefined">
+        @for (item of items; track $index) {
+          <li>
+            <rulecms-inline-markup [text]="item" [links]="links" />
+          </li>
+        }
+      </ul>
+    }
+  `,
+                    host: { style: 'display: contents' },
+                }]
+        }], propDecorators: { componentAttributes: [{
+                type: Input
+            }], styleProps: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }] } });
+
+/**
+ * RList always renders a `<ul>` or `<ol>` — both block-level elements that
+ * hold margin, padding, width and border as authored — and puts styleProps on
+ * that element itself. No configuration changes the answer, so no wrapper
+ * div, ever.
+ */
+const resolveNoContainer$1 = () => false;
+
+/**
+ * RList's root is always a real element — `<ul>` or `<ol>` — so it can always
+ * carry the column's className, and the component applies the one it
+ * receives.
+ */
+const resolveRendersOwnElement$1 = () => true;
+
+const defaultAttributeValues$1 = [
+    {
+        name: LIST_ITEMS_ATTRIBUTE,
+        defaultValues: {
+            all: DEFAULT_LIST_ITEMS,
+        },
+    },
+    {
+        name: LIST_KIND_ATTRIBUTE,
+        defaultValues: {
+            all: DEFAULT_LIST_KIND,
+        },
+    },
+    // Marker, start and reversed default to unset on purpose: the browser
+    // already renders disc for unordered and 1, 2, 3 for ordered, and an
+    // attribute that is not set is one the render path does not emit.
+    {
+        name: LIST_MARKER_ATTRIBUTE,
+        defaultValues: {},
+    },
+    {
+        name: LIST_START_ATTRIBUTE,
+        defaultValues: {},
+    },
+    {
+        name: LIST_REVERSED_ATTRIBUTE,
+        defaultValues: {},
+    },
+    {
+        name: LIST_LINKS_ATTRIBUTE,
+        defaultValues: {},
+    },
+];
+
+/**
+ * Every setting the list offers, in the order the Modify drawer shows them.
+ *
+ * Order is not cosmetic. The drawer renders these top to bottom and the
+ * documentation registry asserts its pages match that sequence, so moving an
+ * entry here moves it in both places at once.
+ */
+const attributeEditModeConfigs$1 = [
+    {
+        name: LIST_ITEMS_ATTRIBUTE,
+        heading: 'List Items',
+        subHeading: 'The items, one per line — each line becomes its own entry in the list. Blank lines are skipped, for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: LIST_KIND_ATTRIBUTE,
+        heading: 'List Kind',
+        subHeading: 'Bulleted (unordered) or numbered (ordered). Numbered lists can also set where counting starts and whether it counts down, for 3 different device resolutions',
+        defaultValues: { all: DEFAULT_LIST_KIND },
+    },
+    {
+        name: LIST_MARKER_ATTRIBUTE,
+        heading: 'Marker Style',
+        subHeading: 'What sits in front of each item: a disc, circle or square for bullets; numbers, letters or Roman numerals for numbering; or none to hide the markers. Unset uses the browser default for the list kind, for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: LIST_START_ATTRIBUTE,
+        heading: 'Numbering Start',
+        subHeading: 'The number the first item counts from. Only a numbered list reads this; leave unset to count from 1, for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: LIST_REVERSED_ATTRIBUTE,
+        heading: 'Reversed Numbering',
+        subHeading: 'Whether a numbered list counts down instead of up, e.g. a top-10 countdown. Only a numbered list reads this, for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: LIST_LINKS_ATTRIBUTE,
+        heading: 'Links',
+        subHeading: 'Links the items can point at. To link part of an item, wrap those words in {1|linked text}, where the number is the position of the entry in this list counting from 1; clearing an entry leaves its position in place so the other numbers keep pointing where they did, for 3 different device resolutions',
+        defaultValues: {},
+    },
+];
+
+const displayCardEntry$1 = {
+    id: ComponentIdentifiers.rList,
+    resolveNoContainer: resolveNoContainer$1,
+    resolveRendersOwnElement: resolveRendersOwnElement$1,
+    card: RListComponent,
+    defaultAttributeValues: defaultAttributeValues$1,
+    attributeEditModeConfigs: attributeEditModeConfigs$1,
+};
+
+/**
+ * The attribute names `r-accordion` reads.
+ *
+ * The component is a disclosure and nothing more specific than that: a summary
+ * a reader clicks and the detail it expands to. An FAQ is one thing to build
+ * out of it, a shipping policy or a "show more" under a truncated bio are
+ * others, and the settings are named after the two halves of the element —
+ * `<summary>` and the detail inside `<details>` — rather than after any one of
+ * those uses.
+ *
+ * One accordion is one disclosure, rather than a component holding N
+ * collapsible sections. A repeating-group attribute would need an editor this
+ * library does not have, and several sections in one component leave the
+ * nested-content slot with no single detail to belong to (see
+ * `rulecms/__docs__/__ARCHITECTURE__/ACCORDION_COMPONENT_ARCHITECTURE.md`).
+ * Several of these in a column is the multi-section case, which is also how an
+ * author reorders one.
+ *
+ * Every name is accordion-specific, including the links, which are the same
+ * numbered list `r-text` already offers. Sharing that attribute name would
+ * have saved a line of editor wiring and cost the documentation contract:
+ * RuleCMS publishes one page per component-scope attribute and requires
+ * exactly one owning component. Reuse happens a level down, where the composer
+ * resolves an attribute to an *editor* by name — the same arrangement `r-list`
+ * uses.
+ *
+ * Nothing here duplicates a column style attribute. Spacing, colour and
+ * typography come from Column Styles on the `<details>` element and inherit
+ * into the summary and the detail; the attributes below are only what is
+ * specific to a disclosure — what it says closed, what it says open, whether
+ * it starts open, and whether the summary also belongs in the page outline.
+ */
+const ACCORDION_SUMMARY_ATTRIBUTE = 'accordion-summary-3-resolutions';
+const ACCORDION_DETAIL_ATTRIBUTE = 'accordion-detail-3-resolutions';
+const ACCORDION_LINKS_ATTRIBUTE = 'accordion-links-3-resolutions';
+const ACCORDION_OPEN_ATTRIBUTE = 'accordion-open-3-resolutions';
+const ACCORDION_HEADING_LEVEL_ATTRIBUTE = 'accordion-heading-level-3-resolutions';
+/** What a freshly dropped accordion shows before the author types anything. */
+const DEFAULT_ACCORDION_SUMMARY = 'Summary';
+const DEFAULT_ACCORDION_DETAIL = 'The detail this summary expands to. Each line becomes its own paragraph.';
+/**
+ * Heading levels the summary can be given, plus `none` for the common case.
+ *
+ * `h1` is deliberately absent: the page already has one, and ten disclosures
+ * down the page would otherwise offer ten ways to compete with it. Levels
+ * start at `h2` because a summary sits under whatever heading introduces the
+ * section it is in.
+ *
+ * `none` is a real option rather than an unset value so the picker always has
+ * a definite selection — there is no way to clear a select back to nothing —
+ * and it is the default because a disclosure is not automatically part of the
+ * document outline.
+ */
+const ACCORDION_HEADING_LEVELS = ['none', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const DEFAULT_ACCORDION_HEADING_LEVEL = 'none';
+/**
+ * The summary, on one line. An unset attribute falls back to the placeholder,
+ * but text the author deliberately cleared stays cleared: an empty `<summary>`
+ * still draws its marker and still toggles, and the composer needs the element
+ * to stay selectable on the canvas. Same distinction `r-list` draws for its
+ * items and `r-button` for its label.
+ *
+ * Authored newlines collapse to single spaces. The editor behind this
+ * attribute is the shared multi-line text field, and `<summary>` is a single
+ * line of prose — HTML would collapse the whitespace anyway, so the resolved
+ * value says so rather than leaving it to the browser.
+ *
+ * `{n|…}` markers contribute their inner text and nothing else. The summary
+ * takes no links — inside a `<summary>` a click both follows the anchor and
+ * toggles the disclosure — but the editor behind it is the same field that
+ * offers the marker grammar for the detail, so an author will type one here.
+ * Degrading it to prose is what the rest of the library does with a marker it
+ * cannot resolve; leaving the braces on screen is the one outcome nobody wants.
+ */
+const resolveAccordionSummary = (componentAttributes) => {
+    const value = componentAttributes?.[ACCORDION_SUMMARY_ATTRIBUTE];
+    const text = value === undefined || value === null
+        ? DEFAULT_ACCORDION_SUMMARY
+        : typeof value === 'string'
+            ? value
+            : String(value);
+    return parseInlineLinkMarkers(text)
+        .map((run) => run.text)
+        .join('')
+        .replace(/\s+/g, ' ')
+        .trim();
+};
+/**
+ * The detail, as one paragraph per authored line with blank lines dropped —
+ * the same grammar `r-list` uses for its items, so an author who has met one
+ * has met both. An unset attribute falls back to the placeholder; text the
+ * author deliberately cleared stays cleared and the disclosure opens onto
+ * whatever else is in it, or onto nothing.
+ */
+const resolveAccordionDetail = (componentAttributes) => {
+    const value = componentAttributes?.[ACCORDION_DETAIL_ATTRIBUTE];
+    const text = value === undefined || value === null
+        ? DEFAULT_ACCORDION_DETAIL
+        : typeof value === 'string'
+            ? value
+            : String(value);
+    return text
+        .split(/\r?\n/)
+        .map((line) => line.trim())
+        .filter((line) => line !== '');
+};
+/**
+ * Whether the disclosure renders already open. Select editors in the composer
+ * store `'true'` / `'false'` as strings, while a hand-written or migrated
+ * config may carry a real boolean; both mean the same thing here.
+ *
+ * This is an attribute rather than runtime state on purpose: `open` has to be
+ * right in the server's HTML, because a disclosure a search engine or a
+ * no-JavaScript reader should see expanded cannot wait for hydration.
+ */
+const resolveAccordionOpen = (componentAttributes) => {
+    const value = componentAttributes?.[ACCORDION_OPEN_ATTRIBUTE];
+    if (typeof value === 'boolean') {
+        return value;
+    }
+    return typeof value === 'string' && value.trim().toLowerCase() === 'true';
+};
+/**
+ * The heading tag to wrap the summary in, or `undefined` for no heading.
+ *
+ * A stored value reaches an element name here, so the allowlist is the
+ * boundary that keeps it from being whatever a request happened to write.
+ * `none` and anything unrecognised both mean "no heading", which is also the
+ * safe answer: a plain `<summary>` is a valid disclosure, while an invented
+ * tag inside one is not.
+ */
+const resolveAccordionHeadingLevel = (componentAttributes) => {
+    const value = componentAttributes?.[ACCORDION_HEADING_LEVEL_ATTRIBUTE];
+    if (value === 'none' || !ACCORDION_HEADING_LEVELS.includes(value)) {
+        return undefined;
+    }
+    return value;
+};
+
+const SUMMARY_LAYOUT_STYLE = {
+    display: 'list-item',
+    width: '100%',
+    boxSizing: 'border-box',
+};
+const SUMMARY_HEADING_STYLE = {
+    display: 'inline',
+    margin: 0,
+};
+class RAccordionComponent {
+    constructor() {
+        this.summaryLayoutStyle = SUMMARY_LAYOUT_STYLE;
+        this.summaryHeadingStyle = SUMMARY_HEADING_STYLE;
+    }
+    get summary() {
+        return resolveAccordionSummary(this.componentAttributes);
+    }
+    get headingLevel() {
+        return resolveAccordionHeadingLevel(this.componentAttributes);
+    }
+    get links() {
+        return this.componentAttributes?.[ACCORDION_LINKS_ATTRIBUTE];
+    }
+    get open() {
+        return resolveAccordionOpen(this.componentAttributes);
+    }
+    get detail() {
+        return resolveAccordionDetail(this.componentAttributes);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: RAccordionComponent, isStandalone: true, selector: "rulecms-r-accordion", inputs: { componentAttributes: "componentAttributes", styleProps: "styleProps", className: "className" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
+    <details [ngStyle]="styleProps" [class]="className || undefined" [attr.open]="open ? true : null">
+      <summary [ngStyle]="summaryLayoutStyle">
+        @if (headingLevel) {
+          <rulecms-html-tag [tag]="headingLevel" [styleProps]="summaryHeadingStyle">
+            {{ summary }}
+          </rulecms-html-tag>
+        } @else {
+          {{ summary }}
+        }
+      </summary>
+      @for (paragraph of detail; track $index) {
+        <p>
+          <rulecms-inline-markup [text]="paragraph" [links]="links" />
+        </p>
+      }
+      <ng-content />
+    </details>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: InlineMarkupComponent, selector: "rulecms-inline-markup", inputs: ["text", "links"] }, { kind: "component", type: HtmlTagComponent, selector: "rulecms-html-tag", inputs: ["tag", "styleProps", "className"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RAccordionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rulecms-r-accordion',
+                    standalone: true,
+                    imports: [NgStyle, InlineMarkupComponent, HtmlTagComponent],
+                    template: `
+    <details [ngStyle]="styleProps" [class]="className || undefined" [attr.open]="open ? true : null">
+      <summary [ngStyle]="summaryLayoutStyle">
+        @if (headingLevel) {
+          <rulecms-html-tag [tag]="headingLevel" [styleProps]="summaryHeadingStyle">
+            {{ summary }}
+          </rulecms-html-tag>
+        } @else {
+          {{ summary }}
+        }
+      </summary>
+      @for (paragraph of detail; track $index) {
+        <p>
+          <rulecms-inline-markup [text]="paragraph" [links]="links" />
+        </p>
+      }
+      <ng-content />
+    </details>
+  `,
+                    host: { style: 'display: contents' },
+                }]
+        }], propDecorators: { componentAttributes: [{
+                type: Input
+            }], styleProps: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }] } });
+
+/**
+ * RAccordion always renders a `<details>` — a block-level element that holds
+ * margin, padding, width and border as authored — and puts styleProps on that
+ * element itself. No configuration changes the answer, so no wrapper div,
+ * ever.
+ */
+const resolveNoContainer = () => false;
+
+/**
+ * RAccordion's root is always a real element — `<details>` — so it can always
+ * carry the column's className, and the component applies the one it receives.
+ */
+const resolveRendersOwnElement = () => true;
+
+const defaultAttributeValues = [
+    {
+        name: ACCORDION_SUMMARY_ATTRIBUTE,
+        defaultValues: {
+            all: DEFAULT_ACCORDION_SUMMARY,
+        },
+    },
+    {
+        name: ACCORDION_DETAIL_ATTRIBUTE,
+        defaultValues: {
+            all: DEFAULT_ACCORDION_DETAIL,
+        },
+    },
+    // Closed by default, and unset rather than 'false': a disclosure the author
+    // has not thought about should start collapsed, which is what an absent
+    // `open` attribute already means in HTML.
+    {
+        name: ACCORDION_OPEN_ATTRIBUTE,
+        defaultValues: {},
+    },
+    {
+        name: ACCORDION_HEADING_LEVEL_ATTRIBUTE,
+        defaultValues: {
+            all: DEFAULT_ACCORDION_HEADING_LEVEL,
+        },
+    },
+    {
+        name: ACCORDION_LINKS_ATTRIBUTE,
+        defaultValues: {},
+    },
+];
+
+/**
+ * Every setting the accordion offers, in the order the Modify drawer shows
+ * them.
+ *
+ * Headings name the two halves of the element — Summary and Detail — not one
+ * use of it. An author building an FAQ reads "Summary" as the question without
+ * being told to; an author building a "show more" would have had to translate
+ * "Question" into something it is not.
+ *
+ * Order is not cosmetic. The drawer renders these top to bottom and the
+ * documentation registry asserts its pages match that sequence, so moving an
+ * entry here moves it in both places at once.
+ */
+const attributeEditModeConfigs = [
+    {
+        name: ACCORDION_SUMMARY_ATTRIBUTE,
+        heading: 'Summary',
+        subHeading: 'The line a reader sees closed and clicks to expand. One line — extra lines collapse into it, for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: ACCORDION_DETAIL_ATTRIBUTE,
+        heading: 'Detail',
+        subHeading: 'What the summary expands to, one paragraph per line. Blank lines are skipped, for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: ACCORDION_OPEN_ATTRIBUTE,
+        heading: 'Open by Default',
+        subHeading: 'Whether the detail is already expanded when the page loads. A reader can still collapse it, for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: ACCORDION_HEADING_LEVEL_ATTRIBUTE,
+        heading: 'Summary Heading Level',
+        subHeading: 'Whether the summary also counts as a heading in the page outline, and at which level. Leave it at none unless these summaries are the structure of the page, for 3 different device resolutions',
+        defaultValues: { all: DEFAULT_ACCORDION_HEADING_LEVEL },
+    },
+    {
+        name: ACCORDION_LINKS_ATTRIBUTE,
+        heading: 'Links',
+        subHeading: 'Links the detail can point at. To link part of the detail, wrap those words in {1|linked text}, where the number is the position of the entry in this list counting from 1; clearing an entry leaves its position in place so the other numbers keep pointing where they did, for 3 different device resolutions',
+        defaultValues: {},
+    },
+];
+
+const displayCardEntry = {
+    id: ComponentIdentifiers.rAccordion,
+    resolveNoContainer,
+    resolveRendersOwnElement,
+    card: RAccordionComponent,
+    defaultAttributeValues,
+    attributeEditModeConfigs,
+};
+
+const cardEntries$1 = [
+    displayCardEntry$8,
+    displayCardEntry$7,
+    displayCardEntry$6,
+    displayCardEntry$5,
+    displayCardEntry$4,
+    displayCardEntry$3,
+    displayCardEntry$2,
+    displayCardEntry$1,
+    displayCardEntry,
+];
+
+const cardGroups$1 = [
+    { title: 'Cards', cards: [{ title: 'Cards', entries: cardEntries$1 }] },
+];
+
+let cachedSourceComponentsPlugin;
+const getComponentsFromRenderCardGroups = (group) => {
+    const entries = group.reduce((all, current) => all.concat(current.cards.reduce((cards, card) => cards.concat(card.entries), [])), []);
+    return entries.reduce((acc, entry) => {
+        acc[entry.id] = {
+            id: entry.id,
+            card: entry.card,
+            defaultAttributeValues: entry.defaultAttributeValues,
+            ...(entry.resolveNoContainer !== undefined ? { resolveNoContainer: entry.resolveNoContainer } : {}),
+            ...(entry.noContainer !== undefined ? { noContainer: entry.noContainer } : {}),
+            ...(entry.resolveRendersOwnElement !== undefined
+                ? { resolveRendersOwnElement: entry.resolveRendersOwnElement }
+                : {}),
+        };
+        return acc;
+    }, {});
+};
+/**
+ * Returns the source components plugin with a lookup map of render components.
+ * Results are cached after the first call.
+ */
+const getSourceComponentsPlugin = () => {
+    if (cachedSourceComponentsPlugin) {
+        return cachedSourceComponentsPlugin;
+    }
+    const components = getComponentsFromRenderCardGroups(cardGroups$1);
+    cachedSourceComponentsPlugin = {
+        components,
+    };
+    return cachedSourceComponentsPlugin;
+};
+
+/**
+ * Mapping of attribute names to their corresponding editor components.
+ *
+ * The RuleCMS editor dynamically loads the appropriate editor component for each attribute
+ * that users can edit. This mapping ensures that the correct component is loaded when
+ * editing a given attribute.
+ *
+ * The attributes defined here are shared across all source components available for user modification.
+ */
+const componentNameToModifyAttribute = {
+    'icon-name-3-resolutions': 'icon-name-3-resolutions',
+    'content-text-3-resolutions': 'content-text-3-resolutions',
+    // r-button owns its own label and icon attributes — one component per
+    // documented setting — but reuses the editors those names already resolve
+    // to, so no new editor component is needed for either.
+    'button-label-3-resolutions': 'content-text-3-resolutions',
+    'button-icon-3-resolutions': 'icon-name-3-resolutions',
+    // The preset is an object of three axes rather than one scalar, and the
+    // button takes a single link rather than the numbered list rich text uses,
+    // so neither fits an existing editor. Position and disabled are plain
+    // two-value choices and go through the shared select.
+    'button-preset-3-resolutions': 'button-preset-3-resolutions',
+    'button-link-3-resolutions': 'button-link-3-resolutions',
+    'button-icon-position-3-resolutions': 'button-icon-position-3-resolutions',
+    'button-disabled-3-resolutions': 'button-disabled-3-resolutions',
+    // Both of the divider's settings are closed sets of a handful of values, so
+    // both go through the shared select and neither needs an editor built for it.
+    'divider-style-3-resolutions': 'divider-style-3-resolutions',
+    'divider-thickness-3-resolutions': 'divider-thickness-3-resolutions',
+    // The embed URL is the one field in the library whose value is accepted or
+    // refused rather than merely stored, so it gets an editor that can say which
+    // it was while the author is still looking at the field. Its title is plain
+    // text, and the other two are closed sets.
+    'embed-url-3-resolutions': 'embed-url-3-resolutions',
+    'embed-title-3-resolutions': 'image-text-3-resolutions',
+    'embed-aspect-ratio-3-resolutions': 'embed-aspect-ratio-3-resolutions',
+    'embed-loading-3-resolutions': 'embed-loading-3-resolutions',
+    'enclosing-tag-3-resolutions': 'enclosing-tag-3-resolutions',
+    'links-3-resolutions': 'links-3-resolutions',
+    // r-list owns its own attribute names — one component per documented
+    // setting — but reuses existing editors wherever one fits: the multi-line
+    // text field for its items, the numbered link list for its links, and the
+    // plain text field for where numbering starts (the number editor is
+    // pixel-specific, and a numbering start is not a length). Kind, marker and
+    // reversed are closed sets and go through the shared select.
+    'list-items-3-resolutions': 'content-text-3-resolutions',
+    'list-kind-3-resolutions': 'list-kind-3-resolutions',
+    'list-marker-3-resolutions': 'list-marker-3-resolutions',
+    'list-start-3-resolutions': 'image-text-3-resolutions',
+    'list-reversed-3-resolutions': 'list-reversed-3-resolutions',
+    'list-links-3-resolutions': 'links-3-resolutions',
+    // r-accordion owns its own attribute names — one component per documented
+    // setting — and reuses existing editors for everything that fits: the
+    // multi-line text field for the summary and the detail, and the numbered
+    // link list for the detail's links. Whether it starts open and whether the
+    // summary is a heading are closed sets and go through the shared select.
+    'accordion-summary-3-resolutions': 'content-text-3-resolutions',
+    'accordion-detail-3-resolutions': 'content-text-3-resolutions',
+    'accordion-open-3-resolutions': 'accordion-open-3-resolutions',
+    'accordion-heading-level-3-resolutions': 'accordion-heading-level-3-resolutions',
+    'accordion-links-3-resolutions': 'links-3-resolutions',
+    'content-title-3-resolutions': 'content-title-3-resolutions',
+    'media-selector-3-resolutions': 'media-selector-3-resolutions',
+    'pass-through-image-attributes-alt-3-resolutions': 'image-alt-text-3-resolutions',
+    'pass-through-image-attributes-width-3-resolutions': 'image-intrinsic-width-3-resolutions',
+    'pass-through-image-attributes-height-3-resolutions': 'image-intrinsic-height-3-resolutions',
+    'pass-through-image-attributes-sizes-3-resolutions': 'image-sizes-3-resolutions',
+    'pass-through-image-attributes-loading-3-resolutions': 'image-loading-3-resolutions',
+    'pass-through-image-attributes-fetchpriority-3-resolutions': 'image-fetchpriority-3-resolutions',
+    'cloudinary-transformations-3-resolutions': 'cloudinary-transformations-3-resolutions',
+    'video-selector-3-resolutions': 'video-selector-3-resolutions',
+    'video-poster-selector-3-resolutions': 'video-poster-selector-3-resolutions',
+    'pass-through-video-attributes-controls-3-resolutions': 'video-controls-3-resolutions',
+    'pass-through-video-attributes-autoplay-3-resolutions': 'video-autoplay-3-resolutions',
+    'pass-through-video-attributes-loop-3-resolutions': 'video-loop-3-resolutions',
+    'pass-through-video-attributes-muted-3-resolutions': 'video-muted-3-resolutions',
+    'pass-through-video-attributes-playsinline-3-resolutions': 'video-playsinline-3-resolutions',
+    'pass-through-video-attributes-preload-3-resolutions': 'video-preload-3-resolutions',
+    'pass-through-video-attributes-width-3-resolutions': 'video-intrinsic-width-3-resolutions',
+    'pass-through-video-attributes-height-3-resolutions': 'video-intrinsic-height-3-resolutions',
+    'video-transformations-3-resolutions': 'video-transformations-3-resolutions',
+};
+
+/**
+ * Mapping of component IDs to their supported modifiable attributes.
+ *
+ * Each component type can have a specific list of attributes that users are allowed to modify
+ * in the editor. This mapping defines which attributes are available for each component type.
+ *
+ * Note: This defines which attributes each component supports, while component-name-to-modify-attribute.ts
+ * defines which editor component should be used to modify each attribute type.
+ * todo: this is a little confusing and might require a deeper look into how RuleCMS uses this.
+ */
+/**
+ * Empty on purpose. Every component this library ships declares its editable
+ * attributes through its own `attribute-edit-mode-configs.ts`, which is the
+ * path the composer's Modify drawer reads. Listing an attribute here as well
+ * shows it twice — once through the legacy shared-attribute editor, which has
+ * no entry for modern `-3-resolutions` names and renders an empty section.
+ */
+const attributeListForComponentTypes = {};
+
+let returnValue;
+// Flatten nested card groups and cards into a flat array of entries, then converts to a lookup map by entry ID
+const getComponentMetadataForEditing = () => {
+    if (returnValue) {
+        return returnValue;
+    }
+    const entries = cardGroups$1.reduce((all, current) => all.concat(current.cards.reduce((cards, card) => cards.concat(card.entries), [])), []);
+    const componentMetadata = entries.reduce((acc, entry) => {
+        acc[entry.id] = {
+            defaultAttributeValues: entry.defaultAttributeValues,
+            attributeEditModeConfigs: entry.attributeEditModeConfigs,
+        };
+        return acc;
+    }, {});
+    returnValue = {
+        attributeListForComponentTypes,
+        componentNameToModifyAttribute,
+        componentMetadata,
+    };
+    return returnValue;
+};
+
+const cardEntries = [
+    { id: ComponentIdentifiers.rText, icon: 'T', label: 'Text' },
+    { id: ComponentIdentifiers.cloudinaryAdvancedImage, icon: '🖼️', label: 'Image' },
+    { id: ComponentIdentifiers.rVideo, icon: '🎬', label: 'Video' },
+    { id: ComponentIdentifiers.rIcon, icon: '◆', label: 'Icon' },
+    { id: ComponentIdentifiers.rButton, icon: '⬭', label: 'Button' },
+    { id: ComponentIdentifiers.rDivider, icon: '━', label: 'Divider' },
+    { id: ComponentIdentifiers.rEmbed, icon: '⧉', label: 'Embed' },
+    { id: ComponentIdentifiers.rList, icon: '☰', label: 'List' },
+    { id: ComponentIdentifiers.rAccordion, icon: '▸', label: 'Accordion' },
+];
+
+const cardGroups = [
+    {
+        title: 'Elements',
+        showInitially: true,
+        cards: [{ title: 'Base Elements', entries: cardEntries }],
+    },
+];
+
+let cachedPreviewComponents;
+/**
+ * Returns the preview card groups for drag and drop functionality.
+ * This replaces the dragDropPreviewCardGroups export.
+ */
+const getPreviewCardGroups = () => {
+    return cardGroups;
+};
+/**
+ * Returns a lookup map of preview components by entry ID.
+ * Results are cached after the first call.
+ */
+const getPreviewComponents = () => {
+    if (cachedPreviewComponents) {
+        return cachedPreviewComponents;
+    }
+    // Flatten nested card groups and cards into a flat array of entries
+    const entries = [];
+    for (const group of cardGroups) {
+        for (const card of group.cards) {
+            entries.push(...card.entries);
+        }
+    }
+    // Convert to a lookup map by entry ID
+    cachedPreviewComponents = entries.reduce((acc, entry) => {
+        acc[entry.id] = entry;
+        return acc;
+    }, {});
+    return cachedPreviewComponents;
+};
+
+/**
+ * ComponentLibraryModule conformance (the @rulecms/widget-angular contract).
+ *
+ * This package is the DEFAULT component library. It conforms to the contract
+ * STRUCTURALLY — it has no runtime dependency on @rulecms/widget-angular.
+ * Consumers register it, e.g.:
+ *
+ *   libraries: { default: () => import('@rulecms/source-components-angular') }
+ *
+ * or statically import the module for SSR pages.
+ */
+const manifest = {
+    id: 'default',
+    version: '0.1.0',
+    angularPeerRange: '>=17.0.0',
+};
+/** The render surface: component type → renderable entry. */
+const components = getSourceComponentsPlugin().components;
+/** The editor surface: palette + attribute metadata for the RuleCMS composer. */
+const editor = {
+    previewComponents: getPreviewComponents(),
+    previewCardGroups: getPreviewCardGroups(),
+    componentMetadata: getComponentMetadataForEditing(),
+};
+
+/**
+ * Canonical letter order, so the same span always serializes the same way and
+ * a source-mode author sees `{bi1|…}` rather than whichever order an editor
+ * happened to apply the marks in.
+ */
+const MARK_LETTERS = [
+    ['bold', 'b'],
+    ['italic', 'i'],
+    ['strike', 's'],
+];
+const markLetters = (marks) => MARK_LETTERS.filter(([mark]) => marks[mark])
+    .map(([, letter]) => letter)
+    .join('');
+/**
+ * A span back to its marker. Text that carries neither marks nor an index is
+ * emitted bare: a marker with nothing to say would only be noise an author has
+ * to read past, and it round-trips to the same runs either way.
+ */
+const formatSpan = (run) => {
+    const letters = markLetters(run.marks);
+    const index = run.index === undefined ? '' : `${run.index}`;
+    if (letters === '' && index === '') {
+        return run.text;
+    }
+    return `{${letters}${index}|${run.text}}`;
+};
+/** One run as authored text. */
+function formatInlineMarker(run) {
+    switch (run.kind) {
+        case 'text':
+            return run.text;
+        case 'break':
+            return '{br|}';
+        default:
+            return formatSpan(run);
+    }
+}
+/**
+ * Runs back to the string they were parsed from.
+ *
+ * This is the writer half of the grammar, and it lives beside the parser so
+ * that an editor never hand-assembles marker syntax. `parseInlineMarkers` and
+ * this function are inverses for anything the parser produces, which is what
+ * lets a rich editor round-trip through source mode without rewriting content
+ * the author did not touch.
+ */
+function serializeInlineMarkers(runs) {
+    return runs.map(formatInlineMarker).join('');
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ACCORDION_HEADING_LEVELS, BLOCK_ENCLOSING_TAGS, BUTTON_CLICK_HANDLER_PROP, BUTTON_CSS_VARIABLE_PREFIX, BUTTON_SIZES, BUTTON_TONES, BUTTON_VARIANTS, ComponentIdentifiers, DEFAULT_ACCORDION_HEADING_LEVEL, DEFAULT_BUTTON_LABEL, DEFAULT_BUTTON_PRESET, DEFAULT_EMBED_LOADING, DEFAULT_ICON_POSITION, DEFAULT_LIST_KIND, EMBED_ASPECT_RATIOS, EMBED_LOADING_VALUES, EMBED_PROVIDERS, EMBED_UNSHAPED_HEIGHT, ENCLOSING_TAGS, ICON_POSITIONS, INLINE_ENCLOSING_TAGS, InlineMarkupComponent, LIST_KINDS, LIST_MARKERS, REJECTED_HREF_SCHEMES, SIZE_SCALES, TONE_PALETTES, buildButtonPresetStyles, disabledStyles as buttonDisabledStyles, cardGroups$1 as cardGroups, components, editor, formatInlineMarker, getComponentMetadataForEditing, getPreviewCardGroups, getPreviewComponents, getSourceComponentsPlugin, isAllowedEmbedUrl, isBlockEnclosingTag, isButtonSize, isButtonTone, isButtonVariant, isEnclosingTag, isSafeHref, manifest, normaliseHost, parseInlineLinkMarkers, parseInlineMarkers, resolveButtonPreset, resolveEmbedUrl, resolveLinkAttributes, serializeInlineMarkers, toneCssVariable };
+//# sourceMappingURL=rulecms-source-components-angular.mjs.map