@nascentdigital/funnel-core 4.4.4

package/dist/ui/Placement.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Placement = void 0;
+// extension
+var Placement;
+(function (Placement) {
+    function getComponents(placement) {
+        var _a;
+        // parse
+        const [side, anchor] = placement.split('-');
+        // convert/return
+        return {
+            side: side,
+            anchor: (_a = anchor) !== null && _a !== void 0 ? _a : undefined
+        };
+    }
+    Placement.getComponents = getComponents;
+    function forContent({ containerRect, containerPadding = 0, anchorRect, anchorOffset = 0, placement, contentSize }) {
+        const containerInsets = typeof containerPadding === 'number'
+            ? { left: containerPadding, right: containerPadding, top: containerPadding, bottom: containerPadding }
+            : containerPadding;
+        // horizontal layout if left/right
+        const { width: contentWidth, height: contentHeight } = contentSize;
+        const { side: anchorSide, anchor: anchorPlacement } = getComponents(placement);
+        const popupFrame = {};
+        if (anchorSide === 'left' || anchorSide === 'right') {
+            // determine space to left/right
+            const spaceLeft = Math.max(0, anchorRect.left - containerRect.left - anchorOffset - containerInsets.left);
+            const spaceRight = Math.max(0, containerRect.right - anchorRect.right - anchorOffset - containerInsets.right);
+            // place left if it fits or if it fits better than on the right
+            if ((anchorSide === 'left' && (spaceLeft >= contentWidth || spaceLeft > spaceRight))
+                || (anchorSide === 'right' && spaceRight < contentWidth && spaceRight < spaceLeft)) {
+                // force over anchor if there's no room
+                if (spaceLeft < contentWidth) {
+                    popupFrame.left = containerRect.left + containerInsets.left;
+                    popupFrame.right = Math.min(popupFrame.left + contentWidth, containerRect.right - containerInsets.right);
+                }
+                // or squeeze left
+                else {
+                    popupFrame.right = containerRect.right - anchorRect.left + anchorOffset;
+                }
+            }
+            // or place right
+            else {
+                // force over anchor if there's no room
+                if (spaceRight < contentWidth) {
+                    popupFrame.right = containerRect.right - containerInsets.right;
+                    popupFrame.left = Math.max(popupFrame.right - contentWidth, containerRect.left + containerInsets.left);
+                }
+                // or squeeze right
+                else {
+                    popupFrame.left = anchorRect.right + anchorOffset;
+                }
+            }
+            // top-align on start
+            if (anchorPlacement === 'start') {
+                popupFrame.top = anchorRect.top + containerInsets.top;
+            }
+            // bottom-align on end
+            else if (anchorPlacement === 'end') {
+                popupFrame.bottom = containerRect.bottom - containerInsets.bottom;
+            }
+            // match height
+            else if (anchorPlacement === 'match') {
+                popupFrame.top = anchorRect.top + containerInsets.top;
+                popupFrame.height = anchorRect.height;
+            }
+            // or center against anchor
+            else {
+                // set top bounds so it's centered
+                popupFrame.top = Math.max(anchorRect.top + (anchorRect.height - contentHeight) / 2, containerRect.top + containerInsets.top);
+                // offset if the bottom is bleeding over
+                if (popupFrame.top + contentHeight > containerRect.bottom + containerInsets.bottom) {
+                    popupFrame.top -= popupFrame.top + contentHeight - containerRect.bottom - containerInsets.bottom;
+                }
+            }
+        }
+        // or standard vertical layout
+        else {
+            // determine space to top/bottom
+            const spaceTop = Math.max(0, anchorRect.top - containerRect.top - anchorOffset - containerInsets.top);
+            const spaceBottom = Math.max(0, containerRect.bottom - anchorRect.bottom - anchorOffset - containerInsets.bottom);
+            // place above if it fits or if it fits better than on the right
+            if ((anchorSide === 'top' && (spaceTop >= contentHeight || spaceBottom < spaceTop))
+                || (anchorSide === 'bottom' && spaceBottom < contentHeight && spaceBottom < spaceTop)) {
+                // force over anchor if there's no room
+                if (spaceTop < contentHeight) {
+                    popupFrame.top = containerRect.top + containerInsets.top;
+                    popupFrame.bottom = Math.min(popupFrame.top + contentHeight, containerRect.bottom - containerInsets.bottom);
+                }
+                // or squeeze above
+                else {
+                    popupFrame.bottom = containerRect.bottom - anchorRect.top + anchorOffset;
+                }
+            }
+            // or place below
+            else {
+                // force over anchor if there's no room
+                if (spaceBottom < contentHeight) {
+                    popupFrame.bottom = containerRect.bottom - containerInsets.bottom;
+                    popupFrame.top = Math.max(popupFrame.bottom - contentHeight, containerRect.top + containerInsets.top);
+                }
+                // or squeeze right
+                else {
+                    popupFrame.top = anchorRect.bottom + anchorOffset;
+                }
+            }
+            // left-align on start
+            if (anchorPlacement === 'start') {
+                popupFrame.left = anchorRect.left;
+            }
+            // right-align on end
+            else if (anchorPlacement === 'end') {
+                popupFrame.right = containerRect.right - anchorRect.right;
+            }
+            // match width
+            else if (anchorPlacement === 'match') {
+                popupFrame.left = anchorRect.left;
+                popupFrame.width = anchorRect.width;
+            }
+            // or center against anchor
+            else {
+                // set left bounds so it's centered
+                popupFrame.left = Math.max(anchorRect.left + (anchorRect.width - contentWidth) / 2, containerRect.left);
+                // offset if the right is bleeding over
+                if (popupFrame.left + contentWidth > containerRect.right) {
+                    popupFrame.left -= popupFrame.left + contentWidth - containerRect.right;
+                }
+            }
+        }
+        // return position insets
+        return popupFrame;
+    }
+    Placement.forContent = forContent;
+})(Placement || (exports.Placement = Placement = {}));

package/dist/ui/Position.d.ts

@@ -0,0 +1,6 @@
+export type Position = 'center' | 'top-left' | 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left';
+export declare namespace Position {
+    const values: ReadonlyArray<Position>;
+    function getName(position: Position): string;
+    function getClassName(position?: Position): string;
+}

package/dist/ui/Position.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Position = void 0;
+const StringUtils_1 = require("../utils/StringUtils");
+// extension
+var Position;
+(function (Position) {
+    // constants
+    Position.values = [
+        'center', 'top-left', 'top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left'
+    ];
+    // helpers
+    function getName(position) {
+        return StringUtils_1.StringUtils.capitalize(position);
+    }
+    Position.getName = getName;
+    function getClassName(position) {
+        switch (position) {
+            case 'top-left':
+                return 'object-left-top';
+            case 'top':
+                return 'object-top';
+            case 'top-right':
+                return 'object-right-top';
+            case 'right':
+                return 'object-right';
+            case 'bottom-right':
+                return 'object-right-bottom';
+            case 'bottom':
+                return 'object-bottom';
+            case 'bottom-left':
+                return 'object-left-bottom';
+            case 'left':
+                return 'object-left';
+            case 'center':
+                return 'object-center';
+            default:
+                return '';
+        }
+    }
+    Position.getClassName = getClassName;
+})(Position || (exports.Position = Position = {}));

package/dist/ui/Selector.d.ts

@@ -0,0 +1,6 @@
+export declare namespace Selector {
+    /**
+     * Matches all tabbable elements whose `tabIndex` is still in play.
+     */
+    const tabbable: ReadonlyArray<string>;
+}

package/dist/ui/Selector.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Selector = void 0;
+var Selector;
+(function (Selector) {
+    /**
+     * Matches all tabbable elements whose `tabIndex` is still in play.
+     */
+    Selector.tabbable = [
+        'a[href]:not([tabindex^="-"])',
+        'area[href]:not([tabindex^="-"])',
+        'input:not([type="hidden"]):not([type="radio"]):not([disabled]):not([tabindex^="-"])',
+        'input[type="radio"]:not([disabled]):not([tabindex^="-"])',
+        'select:not([disabled]):not([tabindex^="-"])',
+        'textarea:not([disabled]):not([tabindex^="-"])',
+        'button:not([disabled]):not([tabindex^="-"])',
+        'iframe:not([tabindex^="-"])',
+        'audio[controls]:not([tabindex^="-"])',
+        'video[controls]:not([tabindex^="-"])',
+        '[contenteditable]:not([tabindex^="-"])',
+        '[tabindex]:not([tabindex^="-"])'
+    ];
+})(Selector || (exports.Selector = Selector = {}));

package/dist/ui/SemanticColor.d.ts

@@ -0,0 +1,8 @@
+export type SemanticColor = 'background' | 'onBackground' | 'onBackgroundVariant' | 'surface' | 'surfaceVariant' | 'surface1' | 'surface2' | 'surface3' | 'surface4' | 'onSurface' | 'onSurfaceVariant' | 'outline' | 'outlineVariant' | 'error' | 'errorOverlay' | 'onError' | 'errorContainer' | 'onErrorContainer' | 'success' | 'onSuccess' | 'successContainer' | 'onSuccessContainer';
+export declare namespace SemanticColor {
+    const values: ReadonlyArray<SemanticColor>;
+    function forText(color?: SemanticColor): "text-background" | "text-onBackground" | "text-onBackgroundVariant" | "text-surface" | "text-surfaceVariant" | "text-surface1" | "text-surface2" | "text-surface3" | "text-surface4" | "text-onSurface" | "text-onSurfaceVariant" | "text-outline" | "text-outlineVariant" | "text-error" | "text-errorOverlay" | "text-onError" | "text-errorContainer" | "text-onErrorContainer" | "text-success" | "text-onSuccess" | "text-successContainer" | "text-onSuccessContainer" | "text-inherit";
+    function forBg(color?: SemanticColor): "bg-background" | "bg-onBackground" | "bg-onBackgroundVariant" | "bg-surface" | "bg-surfaceVariant" | "bg-surface1" | "bg-surface2" | "bg-surface3" | "bg-surface4" | "bg-onSurface" | "bg-onSurfaceVariant" | "bg-outline" | "bg-outlineVariant" | "bg-error" | "bg-errorOverlay" | "bg-onError" | "bg-errorContainer" | "bg-onErrorContainer" | "bg-success" | "bg-onSuccess" | "bg-successContainer" | "bg-onSuccessContainer" | "bg-inherit";
+    function forStroke(color?: SemanticColor): "stroke-background" | "stroke-onBackground" | "stroke-onBackgroundVariant" | "stroke-surface" | "stroke-surfaceVariant" | "stroke-surface1" | "stroke-surface2" | "stroke-surface3" | "stroke-surface4" | "stroke-onSurface" | "stroke-onSurfaceVariant" | "stroke-outline" | "stroke-outlineVariant" | "stroke-error" | "stroke-errorOverlay" | "stroke-onError" | "stroke-errorContainer" | "stroke-onErrorContainer" | "stroke-success" | "stroke-onSuccess" | "stroke-successContainer" | "stroke-onSuccessContainer" | "stroke-inherit";
+    function forFill(color?: SemanticColor): "fill-background" | "fill-onBackground" | "fill-onBackgroundVariant" | "fill-surface" | "fill-surfaceVariant" | "fill-surface1" | "fill-surface2" | "fill-surface3" | "fill-surface4" | "fill-onSurface" | "fill-onSurfaceVariant" | "fill-outline" | "fill-outlineVariant" | "fill-error" | "fill-errorOverlay" | "fill-onError" | "fill-errorContainer" | "fill-onErrorContainer" | "fill-success" | "fill-onSuccess" | "fill-successContainer" | "fill-onSuccessContainer" | "fill-inherit";
+}

package/dist/ui/SemanticColor.js

@@ -0,0 +1,237 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SemanticColor = void 0;
+// extension
+var SemanticColor;
+(function (SemanticColor) {
+    // constants
+    SemanticColor.values = [
+        'background',
+        'onBackground',
+        'onBackgroundVariant',
+        'surface',
+        'surfaceVariant',
+        'surface1',
+        'surface2',
+        'surface3',
+        'surface4',
+        'onSurface',
+        'onSurfaceVariant',
+        'outline',
+        'outlineVariant',
+        'error',
+        'errorOverlay',
+        'onError',
+        'errorContainer',
+        'onErrorContainer',
+        'success',
+        'onSuccess',
+        'successContainer',
+        'onSuccessContainer'
+    ];
+    // helpers
+    function forText(color) {
+        switch (color) {
+            case 'background':
+                return 'text-background';
+            case 'onBackground':
+                return 'text-onBackground';
+            case 'onBackgroundVariant':
+                return 'text-onBackgroundVariant';
+            case 'surface':
+                return 'text-surface';
+            case 'surfaceVariant':
+                return 'text-surfaceVariant';
+            case 'surface1':
+                return 'text-surface1';
+            case 'surface2':
+                return 'text-surface2';
+            case 'surface3':
+                return 'text-surface3';
+            case 'surface4':
+                return 'text-surface4';
+            case 'onSurface':
+                return 'text-onSurface';
+            case 'onSurfaceVariant':
+                return 'text-onSurfaceVariant';
+            case 'outline':
+                return 'text-outline';
+            case 'outlineVariant':
+                return 'text-outlineVariant';
+            case 'error':
+                return 'text-error';
+            case 'errorOverlay':
+                return 'text-errorOverlay';
+            case 'onError':
+                return 'text-onError';
+            case 'errorContainer':
+                return 'text-errorContainer';
+            case 'onErrorContainer':
+                return 'text-onErrorContainer';
+            case 'success':
+                return 'text-success';
+            case 'onSuccess':
+                return 'text-onSuccess';
+            case 'successContainer':
+                return 'text-successContainer';
+            case 'onSuccessContainer':
+                return 'text-onSuccessContainer';
+            default:
+                return 'text-inherit';
+        }
+    }
+    SemanticColor.forText = forText;
+    function forBg(color) {
+        switch (color) {
+            case 'background':
+                return 'bg-background';
+            case 'onBackground':
+                return 'bg-onBackground';
+            case 'onBackgroundVariant':
+                return 'bg-onBackgroundVariant';
+            case 'surface':
+                return 'bg-surface';
+            case 'surfaceVariant':
+                return 'bg-surfaceVariant';
+            case 'surface1':
+                return 'bg-surface1';
+            case 'surface2':
+                return 'bg-surface2';
+            case 'surface3':
+                return 'bg-surface3';
+            case 'surface4':
+                return 'bg-surface4';
+            case 'onSurface':
+                return 'bg-onSurface';
+            case 'onSurfaceVariant':
+                return 'bg-onSurfaceVariant';
+            case 'outline':
+                return 'bg-outline';
+            case 'outlineVariant':
+                return 'bg-outlineVariant';
+            case 'error':
+                return 'bg-error';
+            case 'errorOverlay':
+                return 'bg-errorOverlay';
+            case 'onError':
+                return 'bg-onError';
+            case 'errorContainer':
+                return 'bg-errorContainer';
+            case 'onErrorContainer':
+                return 'bg-onErrorContainer';
+            case 'success':
+                return 'bg-success';
+            case 'onSuccess':
+                return 'bg-onSuccess';
+            case 'successContainer':
+                return 'bg-successContainer';
+            case 'onSuccessContainer':
+                return 'bg-onSuccessContainer';
+            default:
+                return 'bg-inherit';
+        }
+    }
+    SemanticColor.forBg = forBg;
+    function forStroke(color) {
+        switch (color) {
+            case 'background':
+                return 'stroke-background';
+            case 'onBackground':
+                return 'stroke-onBackground';
+            case 'onBackgroundVariant':
+                return 'stroke-onBackgroundVariant';
+            case 'surface':
+                return 'stroke-surface';
+            case 'surfaceVariant':
+                return 'stroke-surfaceVariant';
+            case 'surface1':
+                return 'stroke-surface1';
+            case 'surface2':
+                return 'stroke-surface2';
+            case 'surface3':
+                return 'stroke-surface3';
+            case 'surface4':
+                return 'stroke-surface4';
+            case 'onSurface':
+                return 'stroke-onSurface';
+            case 'onSurfaceVariant':
+                return 'stroke-onSurfaceVariant';
+            case 'outline':
+                return 'stroke-outline';
+            case 'outlineVariant':
+                return 'stroke-outlineVariant';
+            case 'error':
+                return 'stroke-error';
+            case 'errorOverlay':
+                return 'stroke-errorOverlay';
+            case 'onError':
+                return 'stroke-onError';
+            case 'errorContainer':
+                return 'stroke-errorContainer';
+            case 'onErrorContainer':
+                return 'stroke-onErrorContainer';
+            case 'success':
+                return 'stroke-success';
+            case 'onSuccess':
+                return 'stroke-onSuccess';
+            case 'successContainer':
+                return 'stroke-successContainer';
+            case 'onSuccessContainer':
+                return 'stroke-onSuccessContainer';
+            default:
+                return 'stroke-inherit';
+        }
+    }
+    SemanticColor.forStroke = forStroke;
+    function forFill(color) {
+        switch (color) {
+            case 'background':
+                return 'fill-background';
+            case 'onBackground':
+                return 'fill-onBackground';
+            case 'onBackgroundVariant':
+                return 'fill-onBackgroundVariant';
+            case 'surface':
+                return 'fill-surface';
+            case 'surfaceVariant':
+                return 'fill-surfaceVariant';
+            case 'surface1':
+                return 'fill-surface1';
+            case 'surface2':
+                return 'fill-surface2';
+            case 'surface3':
+                return 'fill-surface3';
+            case 'surface4':
+                return 'fill-surface4';
+            case 'onSurface':
+                return 'fill-onSurface';
+            case 'onSurfaceVariant':
+                return 'fill-onSurfaceVariant';
+            case 'outline':
+                return 'fill-outline';
+            case 'outlineVariant':
+                return 'fill-outlineVariant';
+            case 'error':
+                return 'fill-error';
+            case 'errorOverlay':
+                return 'fill-errorOverlay';
+            case 'onError':
+                return 'fill-onError';
+            case 'errorContainer':
+                return 'fill-errorContainer';
+            case 'onErrorContainer':
+                return 'fill-onErrorContainer';
+            case 'success':
+                return 'fill-success';
+            case 'onSuccess':
+                return 'fill-onSuccess';
+            case 'successContainer':
+                return 'fill-successContainer';
+            case 'onSuccessContainer':
+                return 'fill-onSuccessContainer';
+            default:
+                return 'fill-inherit';
+        }
+    }
+    SemanticColor.forFill = forFill;
+})(SemanticColor || (exports.SemanticColor = SemanticColor = {}));

package/dist/ui/Visual.d.ts

@@ -0,0 +1,24 @@
+import { AssetField } from '../schema';
+import { ImageSource } from './ImageSource';
+import { Position } from './Position';
+export type Visual = Visual.Image | Visual.Video;
+export declare namespace Visual {
+    type Image = {
+        image: ImageSource;
+        alt: string;
+        position?: Position;
+        blurHash?: string;
+    };
+    namespace Image {
+        function filter(value: any): value is Image;
+    }
+    type Video = {
+        video: string;
+        position?: Position;
+        accessible: boolean;
+    };
+    namespace Video {
+        function filter(value: any): value is Video;
+    }
+    function coerce(value: Image | Visual | AssetField.VisualData | AssetField.LinkedValue.Visual): Visual;
+}

package/dist/ui/Visual.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Visual = void 0;
+const schema_1 = require("../schema");
+// extension
+var Visual;
+(function (Visual) {
+    let Image;
+    (function (Image) {
+        // helpers
+        function filter(value) {
+            return value
+                && typeof value === 'object'
+                && 'image' in value
+                && (typeof value.image === 'string' || typeof value.image === 'object');
+        }
+        Image.filter = filter;
+    })(Image = Visual.Image || (Visual.Image = {}));
+    let Video;
+    (function (Video) {
+        // helpers
+        function filter(value) {
+            return value
+                && typeof value === 'object'
+                && 'video' in value
+                && typeof value.video === 'string';
+        }
+        Video.filter = filter;
+    })(Video = Visual.Video || (Visual.Video = {}));
+    // methods
+    function coerce(value) {
+        var _a, _b;
+        // handle legacy/direct visual
+        if (Image.filter(value) || Video.filter(value)) {
+            return value;
+        }
+        // handle visual image
+        const visual = schema_1.AssetField.LinkedValue.Visual.filter(value)
+            ? value
+            : value.value;
+        if (schema_1.AssetField.LinkedValue.Image.filter(visual)) {
+            const { url, description, metadata } = visual;
+            return {
+                image: {
+                    src: url,
+                    width: (_a = metadata.dimensions) === null || _a === void 0 ? void 0 : _a.width,
+                    height: (_b = metadata.dimensions) === null || _b === void 0 ? void 0 : _b.height
+                },
+                position: metadata.crop,
+                alt: description !== null && description !== void 0 ? description : ''
+            };
+        }
+        // or handle visual video
+        else {
+            const { url, metadata } = visual;
+            return {
+                video: url,
+                position: metadata.crop,
+                accessible: metadata.accessible === 'system'
+                    ? true
+                    : metadata.accessible
+            };
+        }
+    }
+    Visual.coerce = coerce;
+})(Visual || (exports.Visual = Visual = {}));

package/dist/ui/block-layout/BlockLayout.d.ts

@@ -0,0 +1,99 @@
+export type BlockLayout = {
+    name: string;
+    root: BlockLayout.Root;
+    fullbleed: boolean;
+};
+export declare namespace BlockLayout {
+    type Root = Row | Column | Stack;
+    type Container = Row | Row.Nested | Column | Column.Nested | Stack | Stack.Nested;
+    type Row = {
+        type: 'row';
+        items: ReadonlyArray<Column.Nested | Stack.Nested | Panel>;
+        alignX?: Alignment;
+        alignY?: Alignment;
+    };
+    namespace Row {
+        type Nested = Omit<Row, 'items'> & {
+            items: ReadonlyArray<Panel>;
+        };
+    }
+    type Column = {
+        type: 'column';
+        items: ReadonlyArray<Row.Nested | Stack.Nested | Panel>;
+        alignX?: Alignment;
+        alignY?: Alignment;
+    };
+    namespace Column {
+        type Nested = Omit<Column, 'items'> & {
+            items: ReadonlyArray<Panel>;
+        };
+    }
+    type Stack = {
+        type: 'stack';
+        items: ReadonlyArray<Row.Nested | Column.Nested | Panel>;
+        alignX?: Alignment;
+        alignY?: Alignment;
+    };
+    namespace Stack {
+        type Nested = Omit<Stack, 'items'> & {
+            items: ReadonlyArray<Panel>;
+        };
+    }
+    type NestedItem = Row.Nested | Column.Nested | Stack.Nested | Panel;
+    type Panel = Message | Visual | List;
+    namespace Panel {
+        type Key = Panel['type'] | string;
+        type Base = {
+            key: Key;
+            mobileOrder?: MobileOrder;
+            alignX: Alignment;
+            alignY: Alignment;
+            size: Size;
+        };
+    }
+    type Message = Panel.Base & {
+        type: 'message';
+        textAlign: TextAlignment;
+    };
+    type Visual = Panel.Base & {
+        type: 'visual';
+        aspectRatio: AspectRatio;
+    };
+    type List = Panel.Base & {
+        type: 'list';
+        itemType: List.ItemType;
+    };
+    namespace List {
+        type ItemType = 'message' | 'message+visual';
+        namespace ItemType {
+            const values: ReadonlyArray<ItemType>;
+            function parse(value: string, fallback?: ItemType): ItemType;
+        }
+    }
+    type MobileOrder = 'first' | 'last';
+    namespace MobileOrder {
+        const values: ReadonlyArray<MobileOrder>;
+        function parse(value: string, fallback?: MobileOrder): MobileOrder | undefined;
+    }
+    type Size = 'xs' | 'sm' | 'md' | 'lg' | 'full';
+    namespace Size {
+        const values: ReadonlyArray<Size>;
+        function parse(value: string, fallback?: Size): Size;
+    }
+    type Alignment = 'start' | 'center' | 'end';
+    namespace Alignment {
+        const values: ReadonlyArray<Alignment>;
+        function parse(value: string, fallback?: Alignment): Alignment;
+    }
+    type TextAlignment = 'left' | 'center' | 'right';
+    namespace TextAlignment {
+        const values: ReadonlyArray<TextAlignment>;
+        function parse(value: string, fallback?: TextAlignment): TextAlignment;
+    }
+    type AspectRatio = 'auto' | 'square' | 'phone' | 'tv' | 'widescreen' | 'cinema';
+    namespace AspectRatio {
+        const values: ReadonlyArray<AspectRatio>;
+        function parse(value: string, fallback?: AspectRatio): AspectRatio;
+    }
+    function parse(xml: string): BlockLayout;
+}