@devvit/ui-renderer 0.9.0 → 0.9.2

package/blocks/attributes.d.ts

@@ -1,9 +1,11 @@
 import { ClassInfo } from 'lit/directives/class-map.js';
 import { StyleInfo } from 'lit/directives/style-map.js';
 import { ButtonAppearance, ButtonSize } from '@reddit/faceplate-ui/templates/button.js';
-import { Block, BlockAlignment, BlockAvatarFacing, BlockAvatarSize, BlockBorder, BlockButtonAppearance, BlockButtonSize, BlockFullSnooSize, BlockGap, BlockIconSize, BlockImageResizeMode, BlockPadding, BlockRadius, BlockSize, BlockSpacerSize, BlockStackDirection, BlockTextOutline, BlockTextSize, BlockTextWeight } from '@devvit/protos';
+import { Block, BlockAlignment, BlockAvatarFacing, BlockAvatarSize, BlockBorder, BlockButtonAppearance, BlockButtonSize, BlockFullSnooSize, BlockGap, BlockIconSize, BlockImageResizeMode, BlockPadding, BlockRadius, BlockSize, BlockSpacerSize, BlockStackDirection, BlockTextOutline, BlockTextSize, BlockTextWeight, BlockType } from '@devvit/protos';
 import { RenderContext } from './templates/index.js';
+export declare function defaultClasses(type: BlockType): ClassInfo;
 export declare function stackDirectionClass(direction: BlockStackDirection, reverse: boolean | undefined): ClassInfo;
+export declare function stackChildClass(parentDirection: BlockStackDirection): ClassInfo;
 export declare function sizingClass(sizing: BlockSize | undefined): ClassInfo;
 export declare function sizingStyle(sizing: BlockSize | undefined): StyleInfo;
 export declare function paddingClass(padding: BlockPadding | undefined): ClassInfo;

package/blocks/attributes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"attributes.d.ts","sourceRoot":"","sources":["../../src/blocks/attributes.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"attributes.d.ts","sourceRoot":"","sources":["../../src/blocks/attributes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAExF,OAAO,EACL,KAAK,EAEL,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,WAAW,EAEX,qBAAqB,EACrB,eAAe,EACf,iBAAiB,EACjB,QAAQ,EAER,aAAa,EACb,oBAAoB,EACpB,YAAY,EACZ,WAAW,EACX,SAAS,EACT,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,SAAS,EAEV,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAQrD,wBAAgB,cAAc,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,CAKzD;AAED,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,mBAAmB,EAC9B,OAAO,EAAE,OAAO,GAAG,SAAS,GAC3B,SAAS,CAaX;AAED,wBAAgB,eAAe,CAAC,eAAe,EAAE,mBAAmB,GAAG,SAAS,CAM/E;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,CAKpE;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,CAKpE;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,YAAY,GAAG,SAAS,GAAG,SAAS,CAQzE;AAED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAOjE;AAED,wBAAgB,cAAc,CAC5B,SAAS,EAAE,mBAAmB,EAC9B,KAAK,EAAE,cAAc,GAAG,SAAS,GAChC,SAAS,CAgCX;AAED,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAIzE;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS,CAYtE;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS,CAItE;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS,CAQtE;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,GAAG,SAAS,CASxE;AAED,wBAAgB,cAAc,CAAC,SAAS,EAAE,cAAc,GAAG,SAAS,GAAG,SAAS,CAS/E;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,eAAe,GAAG,SAAS,GAAG,SAAS,CAK9E;AAED,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,gBAAgB,EACzB,UAAU,EAAE,MAAM,GAAG,SAAS,GAC7B,SAAS,CAQX;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAI/D;AAED,wBAAgB,eAAe,CAC7B,IAAI,EAAE,eAAe,GAAG,SAAS,EACjC,cAAc,EAAE,mBAAmB,GAClC,SAAS,CAiBX;AAED,wBAAgB,eAAe,CAAC,UAAU,EAAE,oBAAoB,GAAG,SAAS,GAAG,SAAS,CASvF;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,GAAG,SAAS,CAOxE;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,eAAe,GAAG,SAAS,GAAG,SAAS,CAY5E;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAK5E;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAgBhF;AAED,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,qBAAqB,GAAG,SAAS,GAAG,gBAAgB,CA2BhG;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,eAAe,GAAG,SAAS,GAAG,UAAU,CAexE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CASxF"}

package/blocks/attributes.js

@@ -1,10 +1,16 @@
 import { ButtonSize } from '@reddit/faceplate-ui/templates/button.js';
-import { BlockActionType, BlockAvatarFacing, BlockAvatarSize, BlockBorderWidth, BlockButtonAppearance, BlockButtonSize, BlockFullSnooSize, BlockGap, BlockHorizontalAlignment, BlockIconSize, BlockImageResizeMode, BlockPadding, BlockRadius, BlockSpacerSize, BlockStackDirection, BlockTextOutline, BlockTextSize, BlockTextWeight, BlockVerticalAlignment, } from '@devvit/protos';
+import { BlockActionType, BlockAvatarFacing, BlockAvatarSize, BlockBorderWidth, BlockButtonAppearance, BlockButtonSize, BlockFullSnooSize, BlockGap, BlockHorizontalAlignment, BlockIconSize, BlockImageResizeMode, BlockPadding, BlockRadius, BlockSpacerSize, BlockStackDirection, BlockTextOutline, BlockTextSize, BlockTextWeight, BlockType, BlockVerticalAlignment, } from '@devvit/protos';
 function findColor(color) {
     // TODO: check CSS for color var and wrap in var(--color-${background}-background)
     //       - will need access to shadow root
     return color;
 }
+export function defaultClasses(type) {
+    return {
+        'overflow-hidden': type === BlockType.BLOCK_ROOT || type === BlockType.BLOCK_STACK,
+        'm-0': type === BlockType.BLOCK_IMAGE,
+    };
+}
 export function stackDirectionClass(direction, reverse) {
     const vstack = direction === BlockStackDirection.STACK_VERTICAL;
     const hstack = direction === BlockStackDirection.STACK_HORIZONTAL;
@@ -15,12 +21,21 @@ export function stackDirectionClass(direction, reverse) {
         'flex-row-reverse': hstack && reverse === true,
         'flex-col': vstack,
         'flex-col-reverse': vstack && reverse === true,
-        'devvit-depth': zstack,
+        grid: zstack,
+        'grid-cols-1': zstack,
+    };
+}
+export function stackChildClass(parentDirection) {
+    const zstack = parentDirection === BlockStackDirection.STACK_DEPTH;
+    return {
+        'col-start-1': zstack,
+        'row-start-1': zstack,
     };
 }
 export function sizingClass(sizing) {
     return {
-        grow: sizing?.grow === true,
+        'col-start-1': sizing?.grow === true,
+        'row-start-1': sizing?.grow === true,
     };
 }
 export function sizingStyle(sizing) {
@@ -68,14 +83,10 @@ export function alignmentClass(direction, align) {
         'justify-items-center': center && zstack,
         'justify-items-end': end && zstack,
         // Cross-axis alignment
-        'items-start': (top && hstack) || (start && vstack),
-        'items-center': (middle && hstack) || (center && vstack),
-        'items-stretch': (vnone && hstack) || (hnone && vstack),
-        'items-end': (bottom && hstack) || (end && vstack),
-        // Alternate for ZStack
-        'content-start': top && zstack,
-        'content-center': middle && zstack,
-        'content-end': bottom && zstack,
+        'items-start': (top && (hstack || zstack)) || (start && vstack),
+        'items-center': (middle && (hstack || zstack)) || (center && vstack),
+        'items-stretch': (vnone && (hstack || zstack)) || (hnone && vstack),
+        'items-end': (bottom && (hstack || zstack)) || (end && vstack),
     };
 }
 export function backgroundStyle(background) {
@@ -84,15 +95,16 @@ export function backgroundStyle(background) {
     };
 }
 export function borderClass(border) {
-    const hasBorder = border !== undefined && border.width !== BlockBorderWidth.BORDER_WIDTH_NONE;
+    const thin = border?.width === BlockBorderWidth.BORDER_WIDTH_THIN;
+    const thick = border?.width === BlockBorderWidth.BORDER_WIDTH_THICK;
+    const none = !thin && !thick;
+    const hasBorder = border !== undefined && !none;
     return {
         'border-0': !hasBorder,
         'border-solid': hasBorder,
-        'border-dx-thin': border?.width === BlockBorderWidth.BORDER_WIDTH_THIN,
-        'border-dx-thick': border?.width === BlockBorderWidth.BORDER_WIDTH_THICK,
-        'border-neutral-border': border !== undefined &&
-            border.width !== BlockBorderWidth.BORDER_WIDTH_NONE &&
-            border.color === undefined,
+        'border-dx-thin': thin,
+        'border-dx-thick': thick,
+        'border-neutral-border': hasBorder && border.color === undefined,
     };
 }
 export function borderStyle(border) {

package/blocks/components/devvit-blocks-webview.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=devvit-blocks-webview.d.ts.map

package/blocks/components/devvit-blocks-webview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devvit-blocks-webview.d.ts","sourceRoot":"","sources":["../../../src/blocks/components/devvit-blocks-webview.ts"],"names":[],"mappings":""}

package/blocks/components/devvit-blocks-webview.js

@@ -0,0 +1,81 @@
+var _DevvitBlocksWebview_iframe, _DevvitBlocksWebview_handleMessage, _DevvitBlocksWebview_onLoad;
+import { __classPrivateFieldGet, __decorate, __metadata } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { ifDefined } from '@reddit/baseplate/html.js';
+import { customEvent } from '@reddit/faceplate/lib/custom-event.js';
+import { BlockActionType } from '@devvit/protos';
+/**
+ * Wraps an iframe to capture messages sent from within to be handled by the app rendering the Blocks
+ */
+let DevvitBlocksWebview = class DevvitBlocksWebview extends LitElement {
+    constructor() {
+        super(...arguments);
+        _DevvitBlocksWebview_iframe.set(this, createRef());
+        _DevvitBlocksWebview_handleMessage.set(this, (event) => {
+            if (event.source === __classPrivateFieldGet(this, _DevvitBlocksWebview_iframe, "f").value?.contentWindow) {
+                event.stopImmediatePropagation();
+                const action = {
+                    type: BlockActionType.ACTION_WEBVIEW,
+                    id: event.data.id,
+                    data: event.data.data,
+                };
+                this.dispatchEvent(customEvent('devvit-user-action', { action }));
+            }
+        });
+        _DevvitBlocksWebview_onLoad.set(this, () => {
+            __classPrivateFieldGet(this, _DevvitBlocksWebview_iframe, "f")?.value?.contentWindow?.postMessage({
+                event: this.request,
+                state: this.state,
+            }, '*');
+        });
+    }
+    static get styles() {
+        return [
+            css `
+        :host {
+          display: flex;
+          flex-direction: row;
+        }
+
+        iframe {
+          flex-grow: 1;
+          border: 0;
+        }
+      `,
+        ];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('message', __classPrivateFieldGet(this, _DevvitBlocksWebview_handleMessage, "f"));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('message', __classPrivateFieldGet(this, _DevvitBlocksWebview_handleMessage, "f"));
+    }
+    render() {
+        return html `<iframe
+      src="${ifDefined(this.src)}"
+      sandbox="allow-scripts"
+      @load="${__classPrivateFieldGet(this, _DevvitBlocksWebview_onLoad, "f")}"
+      ${ref(__classPrivateFieldGet(this, _DevvitBlocksWebview_iframe, "f"))}
+    ></iframe>`;
+    }
+};
+_DevvitBlocksWebview_iframe = new WeakMap(), _DevvitBlocksWebview_handleMessage = new WeakMap(), _DevvitBlocksWebview_onLoad = new WeakMap();
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], DevvitBlocksWebview.prototype, "src", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], DevvitBlocksWebview.prototype, "request", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], DevvitBlocksWebview.prototype, "state", void 0);
+DevvitBlocksWebview = __decorate([
+    customElement('devvit-blocks-webview')
+], DevvitBlocksWebview);

package/blocks/templates/index.d.ts

@@ -1,13 +1,12 @@
-import { classMap as clientClassMap } from 'lit/directives/class-map.js';
+import { ClassInfo, classMap as clientClassMap } from 'lit/directives/class-map.js';
 import { TemplateLike, UnsafeString } from '@reddit/baseplate/html.js';
-import { Block, BlockAction, BlockRenderResponse, BlockStackDirection } from '@devvit/protos';
-import { ClassInfo } from 'lit/directives/class-map.js';
+import { Block, BlockAction, BlockRenderRequest, BlockStackDirection } from '@devvit/protos';
 export interface RenderContext {
-    blockRender?: BlockRenderResponse | undefined;
+    request?: BlockRenderRequest | undefined;
     state?: unknown | undefined;
     stackDirection: BlockStackDirection;
     onAction?: ((action: BlockAction) => void) | undefined;
 }
 export declare function renderBlocks(block: Block, context?: Partial<RenderContext>): TemplateLike;
-export declare function classMap(classInfo: ClassInfo): UnsafeString | ReturnType<typeof clientClassMap>;
+export declare function classMap(classInfo: ClassInfo, forceString?: boolean): UnsafeString | ReturnType<typeof clientClassMap>;
 //# sourceMappingURL=index.d.ts.map

package/blocks/templates/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAEzE,OAAO,EAAW,YAAY,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEhF,OAAO,EACL,KAAK,EACL,WAAW,EACX,mBAAmB,EACnB,mBAAmB,EAEpB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAGxD,MAAM,WAAW,aAAa;IAC5B,WAAW,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC9C,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,cAAc,EAAE,mBAAmB,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CACxD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,GAAE,OAAO,CAAC,aAAa,CAAM,GAAG,YAAY,CAsB7F;AAED,wBAAgB,QAAQ,CAAC,SAAS,EAAE,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAe/F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAEpF,OAAO,EAAW,YAAY,EAAU,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAExF,OAAO,EACL,KAAK,EACL,WAAW,EACX,kBAAkB,EAClB,mBAAmB,EAEpB,MAAM,gBAAgB,CAAC;AAKxB,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAC;IACzC,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,cAAc,EAAE,mBAAmB,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CACxD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,GAAE,OAAO,CAAC,aAAa,CAAM,GAAG,YAAY,CAsB7F;AAED,wBAAgB,QAAQ,CACtB,SAAS,EAAE,SAAS,EACpB,WAAW,CAAC,EAAE,OAAO,GACpB,YAAY,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAgBlD"}

package/blocks/templates/index.js

@@ -1,5 +1,5 @@
 import { classMap as clientClassMap } from 'lit/directives/class-map.js';
-import { nothing } from '@reddit/baseplate/html.js';
+import { nothing, unsafe } from '@reddit/baseplate/html.js';
 import { BlockStackDirection, BlockType, } from '@devvit/protos';
 import { renderBlock } from './renderBlock.js';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
@@ -22,9 +22,9 @@ export function renderBlocks(block, context = {}) {
         stackDirection: BlockStackDirection.UNRECOGNIZED,
     });
 }
-export function classMap(classInfo) {
+export function classMap(classInfo, forceString) {
     const { getType } = getTemplateRenderingStrategy();
-    if (getType() === 'client') {
+    if (getType() === 'client' && forceString !== true) {
         return clientClassMap(classInfo);
     }
     let result = '';
@@ -33,5 +33,6 @@ export function classMap(classInfo) {
             result += `${name} `;
         }
     }
-    return result;
+    // eslint-disable-next-line @reddit/no-unsafe/no-unsafe-function-usage
+    return unsafe(result);
 }

package/blocks/templates/renderAnimationBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderAnimationBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderAnimationBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAIlE,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA0BnF"}
+{"version":3,"file":"renderAnimationBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderAnimationBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAUlE,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA6BnF"}

package/blocks/templates/renderAnimationBlock.js

@@ -1,6 +1,6 @@
 import { nothing } from '@reddit/baseplate/html.js';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
-import { onClickAction, sizingClass, sizingStyle } from '../attributes.js';
+import { defaultClasses, onClickAction, sizingClass, sizingStyle, stackChildClass, } from '../attributes.js';
 import { classMap } from './index.js';
 export function renderAnimationBlock(block, ctx) {
     const { html, styleMap, ifDefined } = getTemplateRenderingStrategy();
@@ -10,6 +10,8 @@ export function renderAnimationBlock(block, ctx) {
     }
     const { url, type } = block.config.animationConfig;
     const classes = {
+        ...defaultClasses(block.type),
+        ...stackChildClass(ctx.stackDirection),
         ...sizingClass(block.size),
     };
     const styles = {
@@ -22,5 +24,6 @@ export function renderAnimationBlock(block, ctx) {
     src="${url}"
     type="${type}"
     @click="${ifDefined(onClick)}"
+    data-debug-block-type="animation"
   ></devvit-animation-player>`;
 }

package/blocks/templates/renderAvatarBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderAvatarBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderAvatarBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAUlE,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA0BhF"}
+{"version":3,"file":"renderAvatarBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderAvatarBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAYlE,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA6BhF"}

package/blocks/templates/renderAvatarBlock.js

@@ -1,6 +1,6 @@
 import { nothing } from '@reddit/baseplate/html.js';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
-import { avatarSizeClass, facingClass, onClickAction, sizingClass, sizingStyle, } from '../attributes.js';
+import { avatarSizeClass, defaultClasses, facingClass, onClickAction, sizingClass, sizingStyle, stackChildClass, } from '../attributes.js';
 import { classMap } from './index.js';
 export function renderAvatarBlock(block, ctx) {
     const { html, styleMap, ifDefined } = getTemplateRenderingStrategy();
@@ -10,6 +10,8 @@ export function renderAvatarBlock(block, ctx) {
     }
     const { thingId, facing, size, background } = block.config.avatarConfig;
     const classes = {
+        ...defaultClasses(block.type),
+        ...stackChildClass(ctx.stackDirection),
         ...sizingClass(block.size),
         ...avatarSizeClass(size),
         ...facingClass(facing),
@@ -22,5 +24,6 @@ export function renderAvatarBlock(block, ctx) {
     class="${classMap(classes)}"
     style="${styleMap(styles)}"
     @click="${ifDefined(onClick)}"
+    data-debug-block-type="avatar"
   ></div>`;
 }

package/blocks/templates/renderBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAAE,KAAK,EAAa,MAAM,gBAAgB,CAAC;AAYlD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA0B1E"}
+{"version":3,"file":"renderBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAAE,KAAK,EAAa,MAAM,gBAAgB,CAAC;AAYlD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAG3C,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA+C1E"}

package/blocks/templates/renderBlock.js

@@ -10,30 +10,51 @@ import { renderWebViewBlock } from './renderWebViewBlock.js';
 import { renderAnimationBlock } from './renderAnimationBlock.js';
 import { renderAvatarBlock } from './renderAvatarBlock.js';
 import { renderFullSnooBlock } from './renderFullSnooBlock.js';
+import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
 export function renderBlock(block, ctx) {
+    const { html } = getTemplateRenderingStrategy();
+    let render;
     switch (block.type) {
         case BlockType.BLOCK_STACK:
-            return renderStackBlock(block, ctx);
+            render = renderStackBlock(block, ctx);
+            break;
         case BlockType.BLOCK_SPACER:
-            return renderSpacerBlock(block, ctx);
+            render = renderSpacerBlock(block, ctx);
+            break;
         case BlockType.BLOCK_TEXT:
-            return renderTextBlock(block, ctx);
+            render = renderTextBlock(block, ctx);
+            break;
         case BlockType.BLOCK_IMAGE:
-            return renderImageBlock(block, ctx);
+            render = renderImageBlock(block, ctx);
+            break;
         case BlockType.BLOCK_ICON:
-            return renderIconBlock(block, ctx);
+            render = renderIconBlock(block, ctx);
+            break;
         case BlockType.BLOCK_BUTTON:
-            return renderButtonBlock(block, ctx);
+            render = renderButtonBlock(block, ctx);
+            break;
         case BlockType.BLOCK_WEBVIEW:
-            return renderWebViewBlock(block, ctx);
+            render = renderWebViewBlock(block, ctx);
+            break;
         case BlockType.BLOCK_ANIMATION:
-            return renderAnimationBlock(block, ctx);
+            render = renderAnimationBlock(block, ctx);
+            break;
         case BlockType.BLOCK_AVATAR:
-            return renderAvatarBlock(block, ctx);
+            render = renderAvatarBlock(block, ctx);
+            break;
         case BlockType.BLOCK_FULLSNOO:
-            return renderFullSnooBlock(block, ctx);
+            render = renderFullSnooBlock(block, ctx);
+            break;
         case BlockType.UNRECOGNIZED:
         default:
             return nothing;
     }
+    if (block.size?.grow == true) {
+        return html `<div class="basis-full grid grid-cols-1 items-stretch justify-stretch">
+      ${render}
+    </div>`;
+    }
+    else {
+        return render;
+    }
 }

package/blocks/templates/renderButtonBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderButtonBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderButtonBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAKzD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AASvC,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAyBhF"}
+{"version":3,"file":"renderButtonBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderButtonBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAgB,MAAM,2BAA2B,CAAC;AAKvE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAYvC,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAkChF"}

package/blocks/templates/renderButtonBlock.js

@@ -1,14 +1,21 @@
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
 import { button } from '@reddit/faceplate-ui/templates/button.js';
 import { styleMap } from '@reddit/faceplate-ui/templateUtils/styleMap.js';
-import { backgroundStyle, buttonAppearance, buttonSize, colorStyle, onClickAction, } from '../attributes.js';
+import { buttonAppearance, buttonSize, colorStyle, defaultClasses, onClickAction, sizingClass, stackChildClass, } from '../attributes.js';
+import { classMap } from './index.js';
 export function renderButtonBlock(block, ctx) {
     const { html, ifDefined } = getTemplateRenderingStrategy();
     // let buttonIcon = block.config?.buttonConfig?.icon;
     const disabled = block.config?.buttonConfig?.disabled === true;
+    const classes = {
+        ...defaultClasses(block.type),
+        ...stackChildClass(ctx.stackDirection),
+        ...sizingClass(block.size),
+    };
     const styles = {
         ...colorStyle(block.config?.buttonConfig?.textColor),
-        ...backgroundStyle(block.config?.buttonConfig?.backgroundColor),
+        // not available in all platforms yet
+        // ...backgroundStyle(block.config?.buttonConfig?.backgroundColor),
     };
     const onClick = onClickAction(block, ctx);
     return html `${button({
@@ -20,7 +27,9 @@ export function renderButtonBlock(block, ctx) {
             disabled,
             // convert from StyleInfo to CSSStyleDeclaration
             style: styleMap(styles).string,
+            className: classMap(classes, true).string,
             onclick: onClick ?? null,
+            'data-debug-block-type': 'button',
         },
     })}`;
 }

package/blocks/templates/renderFullSnooBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderFullSnooBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderFullSnooBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AASvC,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA0BlF"}
+{"version":3,"file":"renderFullSnooBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderFullSnooBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAWvC,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA6BlF"}

package/blocks/templates/renderFullSnooBlock.js

@@ -1,6 +1,6 @@
 import { nothing } from '@reddit/baseplate/html.js';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
-import { facingClass, fullSnooSizeClass, onClickAction, sizingClass, sizingStyle, } from '../attributes.js';
+import { defaultClasses, facingClass, fullSnooSizeClass, onClickAction, sizingClass, sizingStyle, stackChildClass, } from '../attributes.js';
 import { classMap } from './index.js';
 export function renderFullSnooBlock(block, ctx) {
     const { html, styleMap, ifDefined } = getTemplateRenderingStrategy();
@@ -10,6 +10,8 @@ export function renderFullSnooBlock(block, ctx) {
     }
     const { userId, size, facing } = block.config.fullsnooConfig;
     const classes = {
+        ...defaultClasses(block.type),
+        ...stackChildClass(ctx.stackDirection),
         ...sizingClass(block.size),
         ...fullSnooSizeClass(size),
         ...facingClass(facing),
@@ -22,5 +24,6 @@ export function renderFullSnooBlock(block, ctx) {
     class="${classMap(classes)}"
     style="${styleMap(styles)}"
     @click="${ifDefined(onClick)}"
+    data-debug-block-type="fullsnoo"
   ></div>`;
 }

package/blocks/templates/renderIconBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderIconBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderIconBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAmB9E"}
+{"version":3,"file":"renderIconBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderIconBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AASvC,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAsB9E"}

package/blocks/templates/renderIconBlock.js

@@ -1,6 +1,7 @@
 import { nothing } from '@reddit/baseplate/html.js';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
-import { iconSizeClass, onClickAction } from '../attributes.js';
+import { defaultClasses, iconSizeClass, onClickAction, sizingClass, stackChildClass, } from '../attributes.js';
+import { classMap } from './index.js';
 export function renderIconBlock(block, ctx) {
     const { html } = getTemplateRenderingStrategy();
     if (!block.config?.iconConfig) {
@@ -10,8 +11,11 @@ export function renderIconBlock(block, ctx) {
     const { icon, size, color } = block.config.iconConfig;
     // adopt `icons-all.ts` from faceplate-ui storybook
     const classes = {
+        ...defaultClasses(block.type),
+        ...stackChildClass(ctx.stackDirection),
+        ...sizingClass(block.size),
         ...iconSizeClass(size),
     };
     const onClick = onClickAction(block, ctx);
-    return html `<div></div>`;
+    return html `<div class="${classMap(classes)}" data-debug-block-type="icon"></div>`;
 }

package/blocks/templates/renderImageBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderImageBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderImageBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA+B/E"}
+{"version":3,"file":"renderImageBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderImageBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAUvC,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAkC/E"}

package/blocks/templates/renderImageBlock.js

@@ -1,6 +1,6 @@
 import { nothing } from '@reddit/baseplate/html.js';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
-import { onClickAction, resizeModeClass, sizingClass, sizingStyle } from '../attributes.js';
+import { defaultClasses, onClickAction, resizeModeClass, sizingClass, sizingStyle, stackChildClass, } from '../attributes.js';
 import { classMap } from './index.js';
 export function renderImageBlock(block, ctx) {
     const { html, styleMap, ifDefined } = getTemplateRenderingStrategy();
@@ -10,6 +10,8 @@ export function renderImageBlock(block, ctx) {
     }
     const { width, height, url, description, resizeMode } = block.config.imageConfig;
     const classes = {
+        ...defaultClasses(block.type),
+        ...stackChildClass(ctx.stackDirection),
         ...sizingClass(block.size),
         ...resizeModeClass(resizeMode),
     };
@@ -26,6 +28,7 @@ export function renderImageBlock(block, ctx) {
       class="${classMap(classes)}"
       style="${styleMap(styles)}"
       @click="${ifDefined(onClick)}"
+      data-debug-block-type="image"
     />
   `;
 }

package/blocks/templates/renderSpacerBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderSpacerBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderSpacerBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGzD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAahF"}
+{"version":3,"file":"renderSpacerBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderSpacerBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGzD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AASvC,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAmBhF"}

package/blocks/templates/renderSpacerBlock.js

@@ -1,14 +1,20 @@
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
-import { sizingClass, sizingStyle, spacerSizeClass } from '../attributes.js';
+import { defaultClasses, sizingClass, sizingStyle, spacerSizeClass, stackChildClass, } from '../attributes.js';
 import { classMap } from './index.js';
 export function renderSpacerBlock(block, ctx) {
     const { html, styleMap } = getTemplateRenderingStrategy();
     const classes = {
+        ...defaultClasses(block.type),
+        ...stackChildClass(ctx.stackDirection),
         ...sizingClass(block.size),
         ...spacerSizeClass(block.config?.spacerConfig?.size, ctx.stackDirection),
     };
     const styles = {
         ...sizingStyle(block.size),
     };
-    return html `<div class="${classMap(classes)}" style="${styleMap(styles)}"></div>`;
+    return html `<div
+    class="${classMap(classes)}"
+    style="${styleMap(styles)}"
+    data-debug-block-type="spacer"
+  ></div>`;
 }

package/blocks/templates/renderStackBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderStackBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderStackBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAuB,MAAM,gBAAgB,CAAC;AAgB5D,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,GAAG,GAAE,aAAoE,GACxE,YAAY,CAgDd"}
+{"version":3,"file":"renderStackBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderStackBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAuB,MAAM,gBAAgB,CAAC;AAkB5D,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,GAAG,GAAE,aAAoE,GACxE,YAAY,CAoEd"}

package/blocks/templates/renderStackBlock.js

@@ -1,7 +1,7 @@
 import { nothing } from '@reddit/baseplate/html.js';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
 import { BlockStackDirection } from '@devvit/protos';
-import { alignmentClass, backgroundStyle, borderClass, borderStyle, gapClass, onClickAction, paddingClass, radiusClass, sizingClass, sizingStyle, stackDirectionClass, } from '../attributes.js';
+import { alignmentClass, backgroundStyle, borderClass, borderStyle, defaultClasses, gapClass, onClickAction, paddingClass, radiusClass, sizingClass, sizingStyle, stackChildClass, stackDirectionClass, } from '../attributes.js';
 import { renderBlock } from './renderBlock.js';
 import { classMap } from './index.js';
 export function renderStackBlock(block, ctx = { stackDirection: BlockStackDirection.UNRECOGNIZED }) {
@@ -12,7 +12,9 @@ export function renderStackBlock(block, ctx = { stackDirection: BlockStackDirect
     }
     const { children, direction, padding, gap, alignment, reverse, backgroundColor, border, cornerRadius, } = block.config.stackConfig;
     const classes = {
+        ...defaultClasses(block.type),
         ...stackDirectionClass(direction, reverse),
+        ...stackChildClass(ctx.stackDirection),
         ...sizingClass(block.size),
         ...paddingClass(padding),
         ...gapClass(gap),
@@ -30,8 +32,25 @@ export function renderStackBlock(block, ctx = { stackDirection: BlockStackDirect
         stackDirection: direction,
     };
     const onClick = onClickAction(block, ctx);
+    let blockType = '';
+    switch (direction) {
+        case BlockStackDirection.STACK_DEPTH:
+            blockType = 'zstack';
+            break;
+        case BlockStackDirection.STACK_VERTICAL:
+            blockType = 'vstack';
+            break;
+        case BlockStackDirection.STACK_HORIZONTAL:
+            blockType = 'hstack';
+            break;
+    }
     return html `
-    <div class="${classMap(classes)}" style="${styleMap(styles)}" @click="${ifDefined(onClick)}">
+    <div
+      class="${classMap(classes)}"
+      style="${styleMap(styles)}"
+      @click="${ifDefined(onClick)}"
+      data-debug-block-type="${blockType}"
+    >
       ${repeat(children, (block) => renderBlock(block, newCtx))}
     </div>
   `;

package/blocks/templates/renderTextBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderTextBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderTextBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAkD,MAAM,gBAAgB,CAAC;AAWvF,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA4D9E"}
+{"version":3,"file":"renderTextBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderTextBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAkD,MAAM,gBAAgB,CAAC;AAavF,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA+D9E"}

package/blocks/templates/renderTextBlock.js

@@ -1,7 +1,7 @@
 import { nothing } from '@reddit/baseplate/html.js';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
 import { BlockTextSize, BlockTextStyle, BlockTextWeight } from '@devvit/protos';
-import { colorStyle, onClickAction, sizingClass, textAlignClass, textOutlineClass, textSizeClass, textWeightClass, } from '../attributes.js';
+import { colorStyle, defaultClasses, onClickAction, sizingClass, stackChildClass, textAlignClass, textOutlineClass, textSizeClass, textWeightClass, } from '../attributes.js';
 import { classMap } from './index.js';
 export function renderTextBlock(block, ctx) {
     const { html, styleMap, ifDefined } = getTemplateRenderingStrategy();
@@ -40,7 +40,9 @@ export function renderTextBlock(block, ctx) {
         ...colorStyle(textColor),
     };
     const classes = {
+        ...defaultClasses(block.type),
         ...baseStyle,
+        ...stackChildClass(ctx.stackDirection),
         ...sizingClass(block.size),
         ...textSizeClass(size),
         ...textAlignClass(alignment),
@@ -54,6 +56,7 @@ export function renderTextBlock(block, ctx) {
     class="${classMap(classes)}"
     style="${styleMap(styles)}"
     @click="${ifDefined(onClick)}"
+    data-debug-block-type="text"
     >${text}</span
   >`;
 }