@devvit/ui-renderer 0.8.10 → 0.9.0

package/client/devvit-custom-post.js

@@ -0,0 +1,147 @@
+var _DevvitCustomPost_instances, _DevvitCustomPost_postData, _DevvitCustomPost_appState, _DevvitCustomPost_customPostActor, _DevvitCustomPost_uiEventHandlerActor, _DevvitCustomPost_rpcQueue, _DevvitCustomPost_rerenderTimeout, _DevvitCustomPost_state_get, _DevvitCustomPost_handleUIEvent, _DevvitCustomPost_renderRequest, _DevvitCustomPost_initialRender, _DevvitCustomPost_userActionRender, _DevvitCustomPost_effectEventRender, _DevvitCustomPost_renderPost, _DevvitCustomPost_handleEffects;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate, __metadata } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import PQueue from 'p-queue';
+import '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import { emptyState } from '@reddit/faceplate-ui/templates/empty-state.js';
+import { customEvent } from '@reddit/faceplate/lib/custom-event.js';
+import tailwind from '@reddit/shreddit.styles';
+import { Block, BlockRenderEventType, BlockStackDirection, BlockType, CustomPostDefinition, EffectType, RenderPostResponse, UIEventHandlerDefinition, } from '@devvit/protos';
+import { renderBlocks } from '../blocks/index.js';
+import { snooBlocks } from './assets/snooBlocks.js';
+import './devvit-animation-player.js';
+let DevvitCustomPost = class DevvitCustomPost extends LitElement {
+    constructor() {
+        super(...arguments);
+        _DevvitCustomPost_instances.add(this);
+        _DevvitCustomPost_postData.set(this, void 0);
+        _DevvitCustomPost_appState.set(this, {});
+        _DevvitCustomPost_customPostActor.set(this, void 0);
+        _DevvitCustomPost_uiEventHandlerActor.set(this, void 0);
+        _DevvitCustomPost_rpcQueue.set(this, new PQueue({ concurrency: 1 }));
+        _DevvitCustomPost_rerenderTimeout.set(this, void 0);
+        _DevvitCustomPost_handleUIEvent.set(this, (event) => {
+            void __classPrivateFieldGet(this, _DevvitCustomPost_rpcQueue, "f").add(async () => {
+                const req = {
+                    event,
+                    state: __classPrivateFieldGet(this, _DevvitCustomPost_instances, "a", _DevvitCustomPost_state_get),
+                };
+                const call = __classPrivateFieldGet(this, _DevvitCustomPost_uiEventHandlerActor, "f")?.HandleUIEvent(req, this.metadata);
+                if (call) {
+                    const res = await call;
+                    __classPrivateFieldSet(this, _DevvitCustomPost_appState, res.state ?? {}, "f");
+                    await __classPrivateFieldGet(this, _DevvitCustomPost_instances, "m", _DevvitCustomPost_handleEffects).call(this, res.effects);
+                }
+            });
+        });
+        _DevvitCustomPost_renderRequest.set(this, (type, id, data = {}) => ({
+            blocks: { type, id, data },
+            state: __classPrivateFieldGet(this, _DevvitCustomPost_instances, "a", _DevvitCustomPost_state_get),
+        }));
+    }
+    static get styles() {
+        return [tailwind];
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (__classPrivateFieldGet(this, _DevvitCustomPost_rerenderTimeout, "f") !== undefined) {
+            window.clearTimeout(__classPrivateFieldGet(this, _DevvitCustomPost_rerenderTimeout, "f"));
+        }
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('actorRef')) {
+            __classPrivateFieldSet(this, _DevvitCustomPost_customPostActor, this.actorRef?.As(CustomPostDefinition), "f");
+            __classPrivateFieldSet(this, _DevvitCustomPost_uiEventHandlerActor, this.actorRef?.As(UIEventHandlerDefinition), "f");
+            __classPrivateFieldGet(this, _DevvitCustomPost_instances, "m", _DevvitCustomPost_initialRender).call(this);
+        }
+        if (changedProperties.has('postId')) {
+            __classPrivateFieldSet(this, _DevvitCustomPost_postData, this.postId !== undefined ? { __postData: { thingId: this.postId } } : undefined, "f");
+        }
+    }
+    render() {
+        if (!this.renderResponse) {
+            return html `<slot></slot>`;
+        }
+        if (this.rootBlock && this.rootBlock.type === BlockType.BLOCK_ROOT) {
+            return renderBlocks(this.rootBlock, {
+                blockRender: this.renderResponse.blocks,
+                state: __classPrivateFieldGet(this, _DevvitCustomPost_instances, "a", _DevvitCustomPost_state_get),
+                stackDirection: BlockStackDirection.UNRECOGNIZED,
+                onAction: (action) => {
+                    __classPrivateFieldGet(this, _DevvitCustomPost_instances, "m", _DevvitCustomPost_userActionRender).call(this, action.id, action.data);
+                },
+            });
+        }
+        return html `${emptyState({
+            creative: html `<div class="w-lg h-lg">${snooBlocks}</div>`,
+            title: 'Whoops!',
+            description: 'Something went wrong while attempting to display this content.',
+        })}`;
+    }
+};
+_DevvitCustomPost_postData = new WeakMap(), _DevvitCustomPost_appState = new WeakMap(), _DevvitCustomPost_customPostActor = new WeakMap(), _DevvitCustomPost_uiEventHandlerActor = new WeakMap(), _DevvitCustomPost_rpcQueue = new WeakMap(), _DevvitCustomPost_rerenderTimeout = new WeakMap(), _DevvitCustomPost_handleUIEvent = new WeakMap(), _DevvitCustomPost_renderRequest = new WeakMap(), _DevvitCustomPost_instances = new WeakSet(), _DevvitCustomPost_state_get = function _DevvitCustomPost_state_get() {
+    return Object.assign({}, __classPrivateFieldGet(this, _DevvitCustomPost_postData, "f"), __classPrivateFieldGet(this, _DevvitCustomPost_appState, "f"));
+}, _DevvitCustomPost_initialRender = function _DevvitCustomPost_initialRender() {
+    __classPrivateFieldGet(this, _DevvitCustomPost_instances, "m", _DevvitCustomPost_renderPost).call(this, __classPrivateFieldGet(this, _DevvitCustomPost_renderRequest, "f").call(this, BlockRenderEventType.RENDER_INITIAL));
+}, _DevvitCustomPost_userActionRender = function _DevvitCustomPost_userActionRender(actionId, data = {}) {
+    __classPrivateFieldGet(this, _DevvitCustomPost_instances, "m", _DevvitCustomPost_renderPost).call(this, __classPrivateFieldGet(this, _DevvitCustomPost_renderRequest, "f").call(this, BlockRenderEventType.RENDER_USER_ACTION, actionId, data));
+}, _DevvitCustomPost_effectEventRender = function _DevvitCustomPost_effectEventRender(effectType, effectData) {
+    __classPrivateFieldGet(this, _DevvitCustomPost_instances, "m", _DevvitCustomPost_renderPost).call(this, __classPrivateFieldGet(this, _DevvitCustomPost_renderRequest, "f").call(this, BlockRenderEventType.RENDER_EFFECT_EVENT, effectType, effectData));
+}, _DevvitCustomPost_renderPost = function _DevvitCustomPost_renderPost(req) {
+    void __classPrivateFieldGet(this, _DevvitCustomPost_rpcQueue, "f").add(async () => {
+        const call = await __classPrivateFieldGet(this, _DevvitCustomPost_customPostActor, "f")?.RenderPost(req, this.metadata);
+        if (call) {
+            this.renderResponse = await call;
+            if (this.renderResponse.state) {
+                __classPrivateFieldSet(this, _DevvitCustomPost_appState, this.renderResponse.state, "f");
+            }
+            if (this.renderResponse?.blocks?.ui) {
+                this.rootBlock = this.renderResponse.blocks.ui;
+            }
+            await __classPrivateFieldGet(this, _DevvitCustomPost_instances, "m", _DevvitCustomPost_handleEffects).call(this, this.renderResponse.effects);
+        }
+    });
+}, _DevvitCustomPost_handleEffects = async function _DevvitCustomPost_handleEffects(effects) {
+    effects.forEach((effect) => {
+        if (effect.type === EffectType.EFFECT_RERENDER_UI) {
+            if (__classPrivateFieldGet(this, _DevvitCustomPost_rerenderTimeout, "f") !== undefined) {
+                window.clearTimeout(__classPrivateFieldGet(this, _DevvitCustomPost_rerenderTimeout, "f"));
+            }
+            __classPrivateFieldSet(this, _DevvitCustomPost_rerenderTimeout, window.setTimeout(() => {
+                __classPrivateFieldGet(this, _DevvitCustomPost_instances, "m", _DevvitCustomPost_effectEventRender).call(this, 'rerender-effect', {});
+            }, (effect.rerenderUi?.delaySeconds ?? 0) * 1000), "f");
+        }
+        else {
+            this.dispatchEvent(customEvent('devvit-ui-effect', { effect, onEvent: __classPrivateFieldGet(this, _DevvitCustomPost_handleUIEvent, "f") }));
+        }
+    });
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], DevvitCustomPost.prototype, "actorRef", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], DevvitCustomPost.prototype, "metadata", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", String)
+], DevvitCustomPost.prototype, "postId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], DevvitCustomPost.prototype, "renderResponse", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], DevvitCustomPost.prototype, "rootBlock", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], DevvitCustomPost.prototype, "alphaRootBlock", void 0);
+DevvitCustomPost = __decorate([
+    customElement('devvit-custom-post')
+], DevvitCustomPost);
+export { DevvitCustomPost };

package/client/effects/devvit-effect-handler.d.ts

@@ -0,0 +1,18 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+import { Effect, Form, RealtimeSubscriptionsEffect, ReloadPartEffect, Toast, UIEvent } from '@devvit/protos';
+export declare abstract class DevvitEffectHandler implements ReactiveController {
+    #private;
+    protected host: ReactiveElement;
+    constructor(host: ReactiveElement);
+    protected onShowToast(_toast: Toast, _onEvent: (event: UIEvent) => void): void;
+    protected onShowForm(_form: Form, _onEvent: (event: UIEvent) => void): void;
+    protected onReloadPart(_parts: ReloadPartEffect, _onEvent: (event: UIEvent) => void): void;
+    protected onViewThing(_thingId: string, _onEvent: (event: UIEvent) => void): void;
+    protected onRealtimeSubscriptions(_subscriptions: RealtimeSubscriptionsEffect, _onEvent: (event: UIEvent) => void): void;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdate(): void;
+    hostUpdated(): void;
+    handle: (effect: Effect, onEvent: (event: UIEvent) => void) => void;
+}
+//# sourceMappingURL=devvit-effect-handler.d.ts.map

package/client/effects/devvit-effect-handler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devvit-effect-handler.d.ts","sourceRoot":"","sources":["../../../src/client/effects/devvit-effect-handler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EACL,MAAM,EAEN,IAAI,EACJ,2BAA2B,EAC3B,gBAAgB,EAChB,KAAK,EACL,OAAO,EACR,MAAM,gBAAgB,CAAC;AAExB,8BAAsB,mBAAoB,YAAW,kBAAkB;;IACrE,SAAS,CAAC,IAAI,EAAE,eAAe,CAAC;gBAEpB,IAAI,EAAE,eAAe;IAKjC,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI;IAEvE,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI;IAEpE,SAAS,CAAC,YAAY,CAAC,MAAM,EAAE,gBAAgB,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI;IAEnF,SAAS,CAAC,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI;IAE1E,SAAS,CAAC,uBAAuB,CAC/B,cAAc,EAAE,2BAA2B,EAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI;IAGpC,aAAa;IAIb,gBAAgB;IAIhB,UAAU;IAEV,WAAW;IAOX,MAAM,WAAY,MAAM,mBAAmB,OAAO,KAAK,IAAI,UA8BzD;CACH"}

package/client/effects/devvit-effect-handler.js

@@ -0,0 +1,58 @@
+var _DevvitEffectHandler_handleEvent;
+import { __classPrivateFieldGet } from "tslib";
+import { EffectType, } from '@devvit/protos';
+export class DevvitEffectHandler {
+    constructor(host) {
+        _DevvitEffectHandler_handleEvent.set(this, (event) => {
+            const { effect, onEvent } = event.detail;
+            this.handle(effect, onEvent);
+        });
+        this.handle = (effect, onEvent) => {
+            switch (effect.type) {
+                case EffectType.EFFECT_SHOW_TOAST:
+                    if (effect.showToast?.toast) {
+                        this.onShowToast(effect.showToast.toast, onEvent);
+                    }
+                    break;
+                case EffectType.EFFECT_SHOW_FORM:
+                    if (effect.showForm?.form) {
+                        this.onShowForm(effect.showForm.form, onEvent);
+                    }
+                    break;
+                case EffectType.EFFECT_REALTIME_SUB:
+                    if (effect.realtimeSubscriptions) {
+                        this.onRealtimeSubscriptions(effect.realtimeSubscriptions, onEvent);
+                    }
+                    break;
+                case EffectType.EFFECT_RELOAD_PART:
+                    if (effect.reloadPart) {
+                        this.onReloadPart(effect.reloadPart, onEvent);
+                    }
+                    break;
+                case EffectType.EFFECT_VIEW_THING:
+                    if (effect.viewThing?.thingId) {
+                        this.onViewThing(effect.viewThing.thingId, onEvent);
+                    }
+                    break;
+                default:
+                    return;
+            }
+        };
+        this.host = host;
+        this.host.addController(this);
+    }
+    onShowToast(_toast, _onEvent) { }
+    onShowForm(_form, _onEvent) { }
+    onReloadPart(_parts, _onEvent) { }
+    onViewThing(_thingId, _onEvent) { }
+    onRealtimeSubscriptions(_subscriptions, _onEvent) { }
+    hostConnected() {
+        this.host.addEventListener('devvit-ui-effect', __classPrivateFieldGet(this, _DevvitEffectHandler_handleEvent, "f"));
+    }
+    hostDisconnected() {
+        this.host.removeEventListener('devvit-ui-effect', __classPrivateFieldGet(this, _DevvitEffectHandler_handleEvent, "f"));
+    }
+    hostUpdate() { }
+    hostUpdated() { }
+}
+_DevvitEffectHandler_handleEvent = new WeakMap();

package/client/effects/form-effect-handler.d.ts

@@ -0,0 +1,9 @@
+import { DevvitEffectHandler } from './devvit-effect-handler.js';
+import { Form, UIEvent } from '@devvit/protos';
+import { ReactiveElement } from 'lit';
+export declare class FormEffectHandler extends DevvitEffectHandler {
+    #private;
+    constructor(host: ReactiveElement, queryString: string);
+    protected onShowForm(form: Form, onEvent: (event: UIEvent) => void): void;
+}
+//# sourceMappingURL=form-effect-handler.d.ts.map

package/client/effects/form-effect-handler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-effect-handler.d.ts","sourceRoot":"","sources":["../../../src/client/effects/form-effect-handler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAGtC,qBAAa,iBAAkB,SAAQ,mBAAmB;;gBAG5C,IAAI,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM;cAKnC,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI;CAG5E"}

package/client/effects/form-effect-handler.js

@@ -0,0 +1,15 @@
+var _FormEffectHandler_queryString;
+import { __classPrivateFieldSet } from "tslib";
+import { DevvitEffectHandler } from './devvit-effect-handler.js';
+import { customEvent } from '@reddit/faceplate/lib/custom-event.js';
+export class FormEffectHandler extends DevvitEffectHandler {
+    constructor(host, queryString) {
+        super(host);
+        _FormEffectHandler_queryString.set(this, void 0);
+        __classPrivateFieldSet(this, _FormEffectHandler_queryString, queryString, "f");
+    }
+    onShowForm(form, onEvent) {
+        this.host.dispatchEvent(customEvent('devvit-show-form', { form, onEvent }));
+    }
+}
+_FormEffectHandler_queryString = new WeakMap();

package/client/effects/toast-effect-handler.d.ts

@@ -0,0 +1,6 @@
+import { Toast } from '@devvit/protos';
+import { DevvitEffectHandler } from './devvit-effect-handler.js';
+export declare class ToastEffectHandler extends DevvitEffectHandler {
+    onShowToast(toast: Toast): void;
+}
+//# sourceMappingURL=toast-effect-handler.d.ts.map

package/client/effects/toast-effect-handler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-effect-handler.d.ts","sourceRoot":"","sources":["../../../src/client/effects/toast-effect-handler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAmB,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAIjE,qBAAa,kBAAmB,SAAQ,mBAAmB;IAChD,WAAW,CAAC,KAAK,EAAE,KAAK;CAQlC"}

package/client/effects/toast-effect-handler.js

@@ -0,0 +1,12 @@
+import { ToastAppearance } from '@devvit/protos';
+import { DevvitEffectHandler } from './devvit-effect-handler.js';
+import { customEvent } from '@reddit/faceplate/lib/custom-event.js';
+import { Severity } from '@reddit/faceplate/types.js';
+export class ToastEffectHandler extends DevvitEffectHandler {
+    onShowToast(toast) {
+        this.host.dispatchEvent(customEvent('faceplate-alert', {
+            message: toast.text,
+            level: toast.appearance === ToastAppearance.SUCCESS ? Severity.success : Severity.info,
+        }));
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devvit/ui-renderer",
-  "version": "0.8.10",
+  "version": "0.9.0",
   "license": "BSD-3-Clause",
   "repository": {
     "type": "git",
@@ -17,7 +17,7 @@
     "lint:fix": "yarn lint --fix",
     "prepublishOnly": "publish-package-json",
     "styles:clean": "rm -f dist/styles.css",
-    "styles:copy": "yarn styles:clean && cp styles.css dist/styles.css",
+    "styles:copy": "yarn styles:clean && cp styles.css dist/styles.css && cp tailwind.devvit.cjs dist/tailwind.devvit.cjs",
     "styles:dev": "echo 'todo make a filewatcher for styles.css or build it in less and use the preprocessor watch mode'",
     "test": "yarn test:unit && yarn test:types && yarn lint",
     "test:types": "tsc --noEmit",
@@ -26,9 +26,10 @@
   },
   "types": "./index.d.ts",
   "dependencies": {
-    "@devvit/protos": "0.8.10",
-    "@devvit/runtimes": "0.8.10",
+    "@devvit/protos": "0.9.0",
+    "@devvit/runtimes": "0.9.0",
     "@lottiefiles/lottie-player": "1.7.1",
+    "p-queue": "7.3.4",
     "rxjs": "7.5.7"
   },
   "peerDependencies": {
@@ -55,14 +56,14 @@
     "lit": "^2.0.0"
   },
   "devDependencies": {
-    "@devvit/eslint-config": "0.8.10",
-    "@devvit/public-api": "0.8.10",
-    "@devvit/repo-tools": "0.8.10",
-    "@devvit/tsconfig": "0.8.10",
+    "@devvit/eslint-config": "0.9.0",
+    "@devvit/public-api": "0.9.0",
+    "@devvit/repo-tools": "0.9.0",
+    "@devvit/tsconfig": "0.9.0",
     "@reddit/baseplate": "0.14.0",
     "@reddit/eslint-plugin-i18n-shreddit": "0.1.0",
     "@reddit/faceplate": "2.0.0",
-    "@reddit/faceplate-ui": "1.0.5-6",
+    "@reddit/faceplate-ui": "2.0.0",
     "eslint": "8.9.0",
     "lit": "^2.0.0",
     "typescript": "4.9.3",
@@ -72,5 +73,5 @@
     "directory": "dist"
   },
   "source": "./src/index.ts",
-  "gitHead": "a2b207299e9777334ab97c8960a0a43844257ece"
+  "gitHead": "199c828f2632d9c09e6dc4182988cd7693704848"
 }

package/server/{renderer.d.ts → blocks.d.ts}

@@ -1,3 +1,3 @@
 import '@reddit/faceplate-ui/templateRenderingStrategy/serverStrategy.js';
-export * from '../render-core.js';
-//# sourceMappingURL=renderer.d.ts.map
+export * from '../blocks/index.js';
+//# sourceMappingURL=blocks.d.ts.map

package/server/blocks.d.ts.map

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

package/server/{renderer.js → blocks.js}

@@ -1,4 +1,4 @@
 import '@reddit/faceplate-ui/templateRenderingStrategy/serverStrategy.js';
-export * from '../render-core.js';
+export * from '../blocks/index.js';
 // TODO (schwers): In the future WebViews (and others) will probably need
 // a different server-side render method to avoid hydration issues

package/styles.css

@@ -15,7 +15,48 @@
   grid-template-columns: 1fr;
 }
 
-.devvit-depth > div {
+.devvit-depth > * {
   grid-row-start: 1;
   grid-column-start: 1;
 }
+
+.grid.grid-cols-1 > * {
+  grid-column-start: 1;
+  grid-row-start: 1;
+}
+
+@supports (-webkit-text-stroke: 1px black) {
+  .text-outline-thin-bright {
+    -webkit-text-stroke: 1px black;
+  }
+
+  .text-outline-thick-bright {
+    -webkit-text-stroke: 2px black;
+  }
+
+  .text-outline-thin-dark {
+    -webkit-text-stroke: 1px white;
+  }
+
+  .text-outline-thick-dark {
+    -webkit-text-stroke: 2px white;
+  }
+}
+
+@supports not (-webkit-text-stroke: 1px black) {
+  .text-outline-thin-bright {
+    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
+  }
+
+  .text-outline-thick-bright {
+    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
+  }
+
+  .text-outline-thin-dark {
+    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
+  }
+
+  .text-outline-thick-dark {
+    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
+  }
+}

package/tailwind.devvit.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+  theme: {
+    extend: {
+      borderWidth: {
+        'dx-thin': '1px',
+        'dx-thick': '2px',
+      },
+      borderRadius: {
+        'dx-sm': '0.5rem',
+        'dx-md': '1rem',
+        'dx-lg': '1.5rem',
+      },
+    },
+  },
+};

package/client/devvit-ui-interactive.d.ts

@@ -1,34 +0,0 @@
-/**
- * Component that renders wraps a rendering of devvit ui and makes it interactive.
- *
- * Needs to handle
- * 1 - not getting slotted content and IT triggers the first render
- * 2 - getting slotted content from SSR and then replacing it when interactivity happens
- */
-/// <reference lib="dom" />
-import { LitElement, PropertyValues } from 'lit';
-import type { Metadata, Realtime } from '@devvit/protos';
-import { RenderPostResponse } from '@devvit/protos';
-import type { ActorRef } from '@devvit/runtimes/common/runtime/ActorRef.js';
-import './devvit-animation-player.js';
-type RenderStateChange = (state: RenderPostResponse) => void;
-declare global {
-    interface HTMLElementTagNameMap {
-        'devvit-ui-interactive': DevvitInteractiveUI;
-    }
-}
-export declare class DevvitInteractiveUI extends LitElement {
-    #private;
-    actorRef?: ActorRef;
-    realtime?: Realtime;
-    metadata?: Metadata;
-    onRender?: RenderStateChange;
-    renderResponse?: RenderPostResponse;
-    static get styles(): import("lit").CSSResult[];
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected willUpdate(changedProperties: PropertyValues): void;
-    render(): import("lit-html").TemplateResult<1>;
-}
-export {};
-//# sourceMappingURL=devvit-ui-interactive.d.ts.map

package/client/devvit-ui-interactive.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"devvit-ui-interactive.d.ts","sourceRoot":"","sources":["../../src/client/devvit-ui-interactive.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;;AAGH,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5D,OAAO,KAAK,EAGV,QAAQ,EACR,QAAQ,EAMT,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAKL,kBAAkB,EAGnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AAO5E,OAAO,8BAA8B,CAAC;AAItC,KAAK,iBAAiB,GAAG,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;AAK7D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF;AAED,qBACa,mBAAoB,SAAQ,UAAU;;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAG7D,cAAc,CAAC,EAAE,kBAAkB,CAAC;IAQpC,WAAoB,MAAM,8BAMzB;IAEQ,iBAAiB;IAOjB,oBAAoB;cAOV,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAwKtD,MAAM;CAiBhB"}