@devvit/ui-renderer 0.9.4 → 0.9.6

package/blocks/attributes.d.ts

@@ -3,6 +3,7 @@ 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, BlockType } from '@devvit/protos';
 import { RenderContext } from './templates/renderContext.js';
+import { ref as clientRef } from 'lit/directives/ref.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;
@@ -29,4 +30,5 @@ export declare function fullSnooSizeClass(size: BlockFullSnooSize | undefined):
 export declare function buttonAppearance(appearance: BlockButtonAppearance | undefined): ButtonAppearance;
 export declare function buttonSize(size: BlockButtonSize | undefined): ButtonSize;
 export declare function onClickAction(block: Block, ctx: RenderContext): (() => void) | undefined;
+export declare function setTextOutline(thickness: BlockTextOutline | undefined): ReturnType<typeof clientRef>;
 //# sourceMappingURL=attributes.d.ts.map

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":["../../library/src/blocks/attributes.ts"],"names":[],"mappings":"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"}

package/blocks/attributes.js

@@ -1,10 +1,7 @@
 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, 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;
-}
+import { nothing } from '@reddit/baseplate/html.js';
+import { brightnessByColor, isHTMLElement, ref } from './templates/util.js';
 export function defaultClasses(type) {
     return {
         'overflow-hidden': type === BlockType.BLOCK_ROOT || type === BlockType.BLOCK_STACK,
@@ -91,7 +88,7 @@ export function alignmentClass(direction, align) {
 }
 export function backgroundStyle(background) {
     return {
-        backgroundColor: findColor(background),
+        backgroundColor: background ?? '',
     };
 }
 export function borderClass(border) {
@@ -109,7 +106,7 @@ export function borderClass(border) {
 }
 export function borderStyle(border) {
     return {
-        borderColor: border?.color, // TODO: check CSS for color var and wrap in var(--color-${border.color}-background)
+        borderColor: border?.color ?? '',
     };
 }
 export function radiusClass(radius) {
@@ -149,7 +146,6 @@ export function textWeightClass(weight) {
 export function textOutlineClass(outline, _textColor) {
     const thin = outline === BlockTextOutline.TEXT_OUTLINE_THIN;
     const thick = outline === BlockTextOutline.TEXT_OUTLINE_THICK;
-    // TODO: hook into host lit element to determine final color and apply bright/dark outline
     return {
         'text-outline-thin-bright': thin,
         'text-outline-thick-bright': thick,
@@ -157,7 +153,7 @@ export function textOutlineClass(outline, _textColor) {
 }
 export function colorStyle(color) {
     return {
-        color: findColor(color),
+        color: color ?? '',
     };
 }
 export function spacerSizeClass(size, stackDirection) {
@@ -285,3 +281,40 @@ export function onClickAction(block, ctx) {
         };
     }
 }
+export function setTextOutline(thickness) {
+    let thicknessClass;
+    switch (thickness) {
+        case BlockTextOutline.TEXT_OUTLINE_THIN:
+            thicknessClass = 'thin';
+            break;
+        case BlockTextOutline.TEXT_OUTLINE_THICK:
+            thicknessClass = 'thick';
+            break;
+        default:
+            return nothing;
+    }
+    return ref((el) => {
+        if (isHTMLElement(el)) {
+            let retry = true;
+            const apply = () => {
+                const color = window.getComputedStyle(el).color;
+                if (!color && retry) {
+                    retry = false;
+                    window.setTimeout(() => apply(), 0);
+                    return;
+                }
+                const brightness = 
+                // eslint-disable-next-line @reddit/i18n-shreddit/no-unwrapped-strings
+                brightnessByColor(color) > 127 ? 'bright' : 'dark';
+                el.classList.forEach((name) => {
+                    if (name.startsWith('text-outline-')) {
+                        el.classList.remove(name);
+                    }
+                });
+                el.classList.add(`text-outline-${thicknessClass}-${brightness}`);
+            };
+            apply();
+            window.matchMedia('(prefers-color-scheme: dark)').onchange = () => apply();
+        }
+    });
+}

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

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+import { Block } from '@devvit/protos';
+import type { RenderContext } from '../templates/renderContext.js';
+export declare class DevvitBlocksRenderer extends LitElement {
+    block: Block | undefined;
+    renderContext: () => RenderContext;
+    static get styles(): import("lit").CSSResult[];
+    render(): import("@reddit/baseplate/html.js").TemplateLike;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'devvit-blocks-renderer': DevvitBlocksRenderer;
+    }
+}
+//# sourceMappingURL=devvit-blocks-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"devvit-blocks-renderer.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/components/devvit-blocks-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC,OAAO,EAAE,KAAK,EAAkC,MAAM,gBAAgB,CAAC;AAGvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAInE,qBAEa,oBAAqB,SAAQ,UAAU;IAElD,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC;IAGzB,aAAa,EAAE,MAAM,aAAa,CAAgE;IAElG,WAAoB,MAAM,8BAEzB;IAEQ,MAAM;CAahB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,oBAAoB,CAAC;KAChD;CACF"}

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

@@ -0,0 +1,42 @@
+import { __decorate, __metadata } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { localized, msg } from '@lit/localize';
+import { emptyState } from '@reddit/faceplate-ui/templates/empty-state.js';
+import { BlockStackDirection, BlockType } from '@devvit/protos';
+import { renderBlocks } from '../templates/index.js';
+import { styles } from '../../styles.js';
+let DevvitBlocksRenderer = class DevvitBlocksRenderer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.renderContext = () => ({ stackDirection: BlockStackDirection.UNRECOGNIZED });
+    }
+    static get styles() {
+        return [styles];
+    }
+    render() {
+        if (this.block && this.block.type === BlockType.BLOCK_ROOT) {
+            return renderBlocks(this.block, this.renderContext());
+        }
+        return html `${emptyState({
+            creative: html `<slot name="empty-state-image"></slot>`,
+            title: msg('Whoops!', { desc: 'Header for message to display when rendering fails' }),
+            description: msg('Something went wrong while attempting to display this content.', {
+                desc: 'Message for users to display when rendering fails',
+            }),
+        })}`;
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], DevvitBlocksRenderer.prototype, "block", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], DevvitBlocksRenderer.prototype, "renderContext", void 0);
+DevvitBlocksRenderer = __decorate([
+    localized(),
+    customElement('devvit-blocks-renderer')
+], DevvitBlocksRenderer);
+export { DevvitBlocksRenderer };

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

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

package/blocks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/blocks/index.ts"],"names":[],"mappings":";AAEA,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../library/src/blocks/index.ts"],"names":[],"mappings":";AAEA,cAAc,sBAAsB,CAAC"}

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,YAAY,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC"}

package/blocks/templates/renderAnimationBlock.d.ts

@@ -1,5 +1,6 @@
 import { Block } from '@devvit/protos';
 import { TemplateLike } from '@reddit/baseplate/html.js';
+import '../../client/devvit-animation-player.js';
 import { RenderContext } from './renderContext.js';
 export declare function renderAnimationBlock(block: Block, ctx: RenderContext): TemplateLike;
 //# sourceMappingURL=renderAnimationBlock.d.ts.map

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;AAUlE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA6BnF"}
+{"version":3,"file":"renderAnimationBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderAnimationBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,yCAAyC,CAAC;AASjD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA6BnF"}

package/blocks/templates/renderAnimationBlock.js

@@ -1,5 +1,6 @@
 import { nothing } from '@reddit/baseplate/html.js';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
+import '../../client/devvit-animation-player.js';
 import { defaultClasses, onClickAction, sizingClass, sizingStyle, stackChildClass, } from '../attributes.js';
 import { classMap } from './util.js';
 export function renderAnimationBlock(block, ctx) {

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;AAYlE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA6BhF"}
+{"version":3,"file":"renderAvatarBlock.d.ts","sourceRoot":"","sources":["../../../library/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,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA6BhF"}

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;AAGlE,OAAO,EAAE,KAAK,EAAkC,MAAM,gBAAgB,CAAC;AAYvE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,GAAE,OAAO,CAAC,aAAa,CAAM,GAAG,YAAY,CAsB7F;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA+C1E"}
+{"version":3,"file":"renderBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAkC,MAAM,gBAAgB,CAAC;AAYvE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,GAAE,OAAO,CAAC,aAAa,CAAM,GAAG,YAAY,CAsB7F;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA+C1E"}

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,EAAgB,MAAM,2BAA2B,CAAC;AAKvE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAYvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAkChF"}
+{"version":3,"file":"renderButtonBlock.d.ts","sourceRoot":"","sources":["../../../library/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,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAuChF"}

package/blocks/templates/renderButtonBlock.js

@@ -1,11 +1,11 @@
 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 { buttonAppearance, buttonSize, colorStyle, defaultClasses, onClickAction, sizingClass, stackChildClass, } from '../attributes.js';
-import { classMap } from './util.js';
+import { buttonAppearance, buttonSize, colorStyle, defaultClasses, onClickAction, sizingClass, sizingStyle, stackChildClass, } from '../attributes.js';
+import { classMap, resolveIcon } from './util.js';
 export function renderButtonBlock(block, ctx) {
     const { html, ifDefined } = getTemplateRenderingStrategy();
-    // let buttonIcon = block.config?.buttonConfig?.icon;
+    const buttonIcon = block.config?.buttonConfig?.icon;
     const disabled = block.config?.buttonConfig?.disabled === true;
     const classes = {
         ...defaultClasses(block.type),
@@ -14,14 +14,18 @@ export function renderButtonBlock(block, ctx) {
     };
     const styles = {
         ...colorStyle(block.config?.buttonConfig?.textColor),
+        ...sizingStyle(block.size),
         // not available in all platforms yet
         // ...backgroundStyle(block.config?.buttonConfig?.backgroundColor),
     };
     const onClick = onClickAction(block, ctx);
+    const iconSvg = buttonIcon ? resolveIcon(buttonIcon) : undefined;
+    const icon = iconSvg ? { leadingIcon: iconSvg } : {};
+    // TODO: correctColor
     return html `${button({
         size: buttonSize(block.config?.buttonConfig?.buttonSize),
         appearance: buttonAppearance(block.config?.buttonConfig?.buttonAppearance),
-        // leadingIcon: findIcon(buttonIcon),
+        ...icon,
         children: ifDefined(block.config?.buttonConfig?.text),
         attributes: {
             disabled,

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

@@ -1 +1 @@
-{"version":3,"file":"renderContext.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAEtF,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"}
+{"version":3,"file":"renderContext.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAEtF,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"}

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;AAWvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA6BlF"}
+{"version":3,"file":"renderFullSnooBlock.d.ts","sourceRoot":"","sources":["../../../library/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,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA6BlF"}

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;AASvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAsB9E"}
+{"version":3,"file":"renderIconBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderIconBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAWvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAiC9E"}

package/blocks/templates/renderIconBlock.js

@@ -1,15 +1,18 @@
 import { nothing } from '@reddit/baseplate/html.js';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
-import { defaultClasses, iconSizeClass, onClickAction, sizingClass, stackChildClass, } from '../attributes.js';
-import { classMap } from './util.js';
+import { colorStyle, defaultClasses, iconSizeClass, onClickAction, sizingClass, sizingStyle, stackChildClass, } from '../attributes.js';
+import { classMap, correctColor, resolveIcon } from './util.js';
 export function renderIconBlock(block, ctx) {
-    const { html } = getTemplateRenderingStrategy();
+    const { html, styleMap, ifDefined } = getTemplateRenderingStrategy();
     if (!block.config?.iconConfig) {
         console.error('Invalid block: Icon missing IconConfig');
         return nothing;
     }
     const { icon, size, color } = block.config.iconConfig;
-    // adopt `icons-all.ts` from faceplate-ui storybook
+    const styles = {
+        ...colorStyle(color),
+        ...sizingStyle(block.size),
+    };
     const classes = {
         ...defaultClasses(block.type),
         ...stackChildClass(ctx.stackDirection),
@@ -17,5 +20,13 @@ export function renderIconBlock(block, ctx) {
         ...iconSizeClass(size),
     };
     const onClick = onClickAction(block, ctx);
-    return html `<div class="${classMap(classes)}" data-debug-block-type="icon"></div>`;
+    return html `<div
+    class="${classMap(classes)}"
+    style="${styleMap(styles)}"
+    @click="${ifDefined(onClick)}"
+    data-debug-block-type="icon"
+    ${correctColor(color, 'color')}
+  >
+    ${resolveIcon(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;AAUvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAkC/E"}
+{"version":3,"file":"renderImageBlock.d.ts","sourceRoot":"","sources":["../../../library/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,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAkC/E"}

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;AASvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAmBhF"}
+{"version":3,"file":"renderSpacerBlock.d.ts","sourceRoot":"","sources":["../../../library/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,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAmBhF"}

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;AAiB5D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,GAAG,2BAAsE,EACzE,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,KAAK,YAAY,GAC9D,YAAY,CAoEd"}
+{"version":3,"file":"renderStackBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderStackBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAuB,MAAM,gBAAgB,CAAC;AAiB5D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,GAAG,2BAAsE,EACzE,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,KAAK,YAAY,GAC9D,YAAY,CAsEd"}

package/blocks/templates/renderStackBlock.js

@@ -2,7 +2,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, defaultClasses, gapClass, onClickAction, paddingClass, radiusClass, sizingClass, sizingStyle, stackChildClass, stackDirectionClass, } from '../attributes.js';
-import { classMap } from './util.js';
+import { classMap, correctColor } from './util.js';
 export function renderStackBlock(block, ctx = { stackDirection: BlockStackDirection.UNRECOGNIZED }, renderBlock) {
     const { html, repeat, styleMap, ifDefined } = getTemplateRenderingStrategy();
     if (block.config?.stackConfig === undefined) {
@@ -49,6 +49,8 @@ export function renderStackBlock(block, ctx = { stackDirection: BlockStackDirect
       style="${styleMap(styles)}"
       @click="${ifDefined(onClick)}"
       data-debug-block-type="${blockType}"
+      ${correctColor(backgroundColor, 'backgroundColor')}
+      ${correctColor(border?.color, 'borderColor')}
     >
       ${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;AAavF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA8D9E"}
+{"version":3,"file":"renderTextBlock.d.ts","sourceRoot":"","sources":["../../../library/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,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA6D9E"}

package/blocks/templates/renderTextBlock.js

@@ -1,8 +1,8 @@
 import { nothing } from '@reddit/baseplate/html.js';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
 import { BlockTextSize, BlockTextStyle, BlockTextWeight } from '@devvit/protos';
-import { colorStyle, defaultClasses, onClickAction, sizingClass, stackChildClass, textAlignClass, textOutlineClass, textSizeClass, textWeightClass, } from '../attributes.js';
-import { classMap } from './util.js';
+import { colorStyle, defaultClasses, onClickAction, setTextOutline, sizingClass, sizingStyle, stackChildClass, textAlignClass, textSizeClass, textWeightClass, } from '../attributes.js';
+import { classMap, correctColor } from './util.js';
 export function renderTextBlock(block, ctx) {
     const { html, styleMap, ifDefined } = getTemplateRenderingStrategy();
     if (!block.config?.textConfig) {
@@ -37,6 +37,7 @@ export function renderTextBlock(block, ctx) {
     textWeight = weight ?? textWeight;
     const styles = {
         ...colorStyle(textColor),
+        ...sizingStyle(block.size),
     };
     const classes = {
         ...defaultClasses(block.type),
@@ -46,15 +47,14 @@ export function renderTextBlock(block, ctx) {
         ...textAlignClass(alignment),
         ...textWeightClass(textWeight),
     };
-    if (outline !== undefined) {
-        Object.assign(classes, textOutlineClass(outline, textColor));
-    }
     const onClick = onClickAction(block, ctx);
     return html `<span
     class="${classMap(classes)}"
     style="${styleMap(styles)}"
     @click="${ifDefined(onClick)}"
     data-debug-block-type="text"
+    ${correctColor(textColor, 'color')}
+    ${setTextOutline(outline)}
     >${text}</span
   >`;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"renderWebViewBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderWebViewBlock.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,oBAAoB,CAAC;AAGnD,OAAO,wCAAwC,CAAC;AAEhD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA2BjF"}
+{"version":3,"file":"renderWebViewBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderWebViewBlock.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,oBAAoB,CAAC;AAGnD,OAAO,wCAAwC,CAAC;AAEhD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA2BjF"}

package/blocks/templates/util.d.ts

@@ -1,4 +1,25 @@
 import { ClassInfo, classMap as clientClassMap } from 'lit/directives/class-map.js';
+import { RefOrCallback, ref as clientRef } from 'lit/directives/ref.js';
+import { TemplateResult } from 'lit';
 import { UnsafeString } from '@reddit/baseplate/html.js';
 export declare function classMap(classInfo: ClassInfo, forceString?: boolean): UnsafeString | ReturnType<typeof clientClassMap>;
+export declare function unsafeHTML(input: string): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/unsafe-html.js").UnsafeHTMLDirective>;
+export declare function ref(ref: RefOrCallback): ReturnType<typeof clientRef> | string;
+/**
+ * Attach a ref callback to an element that ensures the assigned color is set and
+ * attempts to use CSS variables for colors as a fallback
+ *
+ * @param color The desired color
+ * @param attr The attribute name to validate
+ */
+export declare function correctColor(color: string | undefined, attr: string): ReturnType<typeof clientRef> | string;
+/**
+ * Borrowed from: https://gist.github.com/w3core/e3d9b5b6d69a3ba8671cc84714cca8a4?permalink_comment_id=3125287#gistcomment-3125287
+ * Calculate brightness value by RGB or HEX color.
+ * @param color (String) The color value in RGB or HEX (for example: #000000 || #000 || rgb(0,0,0) || rgba(0,0,0,0))
+ * @returns (Number) The brightness value (dark) 0 ... 255 (light)
+ */
+export declare function brightnessByColor(color: string): number;
+export declare function isHTMLElement(el: HTMLElement | Element | undefined): el is HTMLElement;
+export declare function resolveIcon(name: string): TemplateResult;
 //# sourceMappingURL=util.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACpF,OAAO,EAAU,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGjE,wBAAgB,QAAQ,CACtB,SAAS,EAAE,SAAS,EACpB,WAAW,CAAC,EAAE,OAAO,GACpB,YAAY,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAgBlD"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAEpF,OAAO,EAAE,aAAa,EAAE,GAAG,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAErC,OAAO,EAA2C,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAKlG,wBAAgB,QAAQ,CACtB,SAAS,EAAE,SAAS,EACpB,WAAW,CAAC,EAAE,OAAO,GACpB,YAAY,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAWlD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,4HAMvC;AAED,wBAAgB,GAAG,CAAC,GAAG,EAAE,aAAa,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,GAAG,MAAM,CAM7E;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,IAAI,EAAE,MAAM,GACX,UAAU,CAAC,OAAO,SAAS,CAAC,GAAG,MAAM,CAevC;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CA4BvD;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,EAAE,IAAI,WAAW,CAEtF;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,cAAc,CAYxD"}

package/blocks/templates/util.js

@@ -1,17 +1,106 @@
 import { classMap as clientClassMap } from 'lit/directives/class-map.js';
-import { unsafe } from '@reddit/baseplate/html.js';
+import { unsafeHTML as clientUnsafeHTML } from 'lit/directives/unsafe-html.js';
+import { ref as clientRef } from 'lit/directives/ref.js';
+import { unsafeHTML as serverUnsafeHTML } from '@reddit/baseplate/html.js';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
+import faceplateIcons from '@reddit/faceplate-ui/svgs/svg-manifest.js';
 export function classMap(classInfo, forceString) {
     const { getType } = getTemplateRenderingStrategy();
     if (getType() === 'client' && forceString !== true) {
         return clientClassMap(classInfo);
     }
-    let result = '';
-    for (const name in classInfo) {
-        if (classInfo[name]) {
-            result += `${name} `;
+    const result = Object.keys(classInfo)
+        .filter((className) => classInfo[className])
+        .join(' ');
+    return serverUnsafeHTML(result);
+}
+export function unsafeHTML(input) {
+    const { getType } = getTemplateRenderingStrategy();
+    if (getType() === 'client') {
+        return clientUnsafeHTML(input);
+    }
+    return serverUnsafeHTML(input);
+}
+export function ref(ref) {
+    const { getType } = getTemplateRenderingStrategy();
+    if (getType() === 'client') {
+        return clientRef(ref);
+    }
+    return '';
+}
+/**
+ * Attach a ref callback to an element that ensures the assigned color is set and
+ * attempts to use CSS variables for colors as a fallback
+ *
+ * @param color The desired color
+ * @param attr The attribute name to validate
+ */
+export function correctColor(color, attr) {
+    return ref((el) => {
+        if (isHTMLElement(el)) {
+            if (color && el.style.getPropertyValue(attr) !== color) {
+                // try to fall back on a color variable if setting it outright didn't work
+                el.style.setProperty(attr, `var(--color-${color})`);
+                if (el.style.getPropertyValue(attr) === '') {
+                    // unset to ensure an old color doesn't stick around if the element was reused
+                    el.style.setProperty(attr, '');
+                }
+            }
+            else {
+                el.style.setProperty(attr, '');
+            }
+        }
+    });
+}
+/**
+ * Borrowed from: https://gist.github.com/w3core/e3d9b5b6d69a3ba8671cc84714cca8a4?permalink_comment_id=3125287#gistcomment-3125287
+ * Calculate brightness value by RGB or HEX color.
+ * @param color (String) The color value in RGB or HEX (for example: #000000 || #000 || rgb(0,0,0) || rgba(0,0,0,0))
+ * @returns (Number) The brightness value (dark) 0 ... 255 (light)
+ */
+export function brightnessByColor(color) {
+    const isHEX = color.indexOf('#') === 0;
+    const isRGB = color.indexOf('rgb') === 0;
+    let r;
+    let g;
+    let b;
+    if (isHEX) {
+        const hasFullSpec = color.length == 7;
+        const m = color.substring(1).match(hasFullSpec ? /(\S{2})/g : /(\S)/g);
+        if (m) {
+            r = parseInt(m[0] + (hasFullSpec ? '' : m[0]), 16);
+            g = parseInt(m[1] + (hasFullSpec ? '' : m[1]), 16);
+            b = parseInt(m[2] + (hasFullSpec ? '' : m[2]), 16);
+        }
+    }
+    if (isRGB) {
+        // eslint-disable-next-line security/detect-unsafe-regex
+        const m = color.match(/(\d+){3}/g);
+        if (m) {
+            r = parseInt(m[0]);
+            g = parseInt(m[1]);
+            b = parseInt(m[2]);
         }
     }
-    // eslint-disable-next-line @reddit/no-unsafe/no-unsafe-function-usage
-    return unsafe(result);
+    if (r !== undefined && g !== undefined && b !== undefined) {
+        return (r * 299 + g * 587 + b * 114) / 1000;
+    }
+    return 0;
+}
+export function isHTMLElement(el) {
+    return el?.style !== undefined;
+}
+export function resolveIcon(name) {
+    const { html } = getTemplateRenderingStrategy();
+    const fill = name.match(/-fill$/) !== null;
+    // clean up icon name
+    const iconName = name.replace(/^icon-/, '').replace(/-(fill|outline)$/, '');
+    // eslint-disable-next-line @reddit/i18n-shreddit/no-unwrapped-strings
+    const icon = faceplateIcons[iconName][fill ? 'fill' : 'outline'];
+    if (icon) {
+        return html `${unsafeHTML(icon)}`;
+    }
+    else {
+        return html ``;
+    }
 }

package/client/blocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../../src/client/blocks.ts"],"names":[],"mappings":"AAAA,OAAO,kEAAkE,CAAC;AAC1E,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../../library/src/client/blocks.ts"],"names":[],"mappings":"AAAA,OAAO,kEAAkE,CAAC;AAC1E,cAAc,oBAAoB,CAAC"}

package/client/devvit-animation-player.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"devvit-animation-player.d.ts","sourceRoot":"","sources":["../../src/client/devvit-animation-player.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,4BAA4B,CAAC;AAEpC;;GAEG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACvB,GAAG,EAAE,MAAM,CAAM;IACjB,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAE7C,MAAM;CAQhB"}
+{"version":3,"file":"devvit-animation-player.d.ts","sourceRoot":"","sources":["../../library/src/client/devvit-animation-player.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,4BAA4B,CAAC;AAEpC;;GAEG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACvB,GAAG,EAAE,MAAM,CAAM;IACjB,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAE7C,MAAM;CAQhB"}

package/client/devvit-custom-post.d.ts

@@ -4,6 +4,7 @@ import type { Metadata } from '@devvit/protos';
 import { Block, RenderPostResponse } from '@devvit/protos';
 import type { ActorRef } from '@devvit/runtimes/common/runtime/ActorRef.js';
 import './devvit-animation-player.js';
+import '../blocks/components/devvit-blocks-renderer.js';
 declare global {
     interface HTMLElementTagNameMap {
         'devvit-custom-post': DevvitCustomPost;
@@ -16,10 +17,14 @@ export declare class DevvitCustomPost extends LitElement {
     postId?: string;
     renderResponse?: RenderPostResponse;
     rootBlock?: Block;
-    static get styles(): import("lit").CSSResult[];
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues): void;
-    render(): import("@reddit/baseplate/html.js").TemplateLike;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'devvit-custom-post': DevvitCustomPost;
+    }
 }
 //# sourceMappingURL=devvit-custom-post.d.ts.map

package/client/devvit-custom-post.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"devvit-custom-post.d.ts","sourceRoot":"","sources":["../../src/client/devvit-custom-post.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKvD,OAAO,kEAAkE,CAAC;AAI1E,OAAO,KAAK,EAMV,QAAQ,EAIT,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,KAAK,EAML,kBAAkB,EAEnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AAM5E,OAAO,8BAA8B,CAAC;AAEtC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF;AASD,qBAEa,gBAAiB,SAAQ,UAAU;;IAE9C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAGpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAGpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IAGpC,SAAS,CAAC,EAAE,KAAK,CAAC;IAalB,WAAoB,MAAM,8BAEzB;IAMQ,iBAAiB;IAKjB,oBAAoB;cAQV,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAatD,MAAM;CAqGhB"}
+{"version":3,"file":"devvit-custom-post.d.ts","sourceRoot":"","sources":["../../library/src/client/devvit-custom-post.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvD,OAAO,kEAAkE,CAAC;AAG1E,OAAO,KAAK,EAMV,QAAQ,EAIT,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,KAAK,EAKL,kBAAkB,EAEnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AAI5E,OAAO,8BAA8B,CAAC;AACtC,OAAO,gDAAgD,CAAC;AAExD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF;AASD,qBACa,gBAAiB,SAAQ,UAAU;;IAE9C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAGpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAGpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IAGpC,SAAS,CAAC,EAAE,KAAK,CAAC;IAiBT,iBAAiB;IAKjB,oBAAoB;cAQV,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAatD,MAAM;CAkGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}