urnovl-web-components 0.0.260 → 0.0.261

package/dist/esm/ur-post-card.entry.js

@@ -0,0 +1,309 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DvddpEp7.js';
+import './ur-avatar-DXF3lVCQ.js';
+import './ur-icon.entry.js';
+import './ur-button.entry.js';
+import './ur-time-ago.entry.js';
+import './ur-tooltip-CTvIaeKz.js';
+import './index-DZdO-mMi.js';
+import './component-style-zh2SzAzp.js';
+import './directive-Cdjto-xB.js';
+import './extend-CivLoY3b.js';
+import './get-Bo_xHyoL.js';
+import './has-slot-BUAeIuVe.js';
+import './index-hBNOs3uJ.js';
+import './ref-Bz3X8sIV.js';
+import './attr-x5F1K2Wv.js';
+import './template-Dv4lqTb2.js';
+import './button-base-Ch4mNZf9.js';
+import './if-defined-BYHxg-DB.js';
+import './anchor-BI6JNVb4.js';
+import './form-BgKWWIji.js';
+import './ripple-mixin-B-KYfpV5.js';
+import './children-C1xUAMVf.js';
+import './state-VNaKC22C.js';
+import './class-map-DhnCnSWX.js';
+import './appendTo-Bs3lgi94.js';
+import './index-Co79ZtG7.js';
+
+const urPostCardCss = ":host {\n    --post-width: 100%;\n    --post-border-radius: 8px;\n    --ur-color-on-background: var(--mdui-color-on-background);\n    --ur-color-background: var(--mdui-color-background);\n    --ur-color-primary: var(--mdui-color-primary);\n    --ur-color-surface-variant: var(--mdui-color-surface-variant);\n    --ur-color-on-surface-variant: var(--mdui-color-on-surface-variant);\n}\n\n@keyframes placeholderAnimate {\n    0% { background-position: -650px 0; }\n    100% { background-position: 650px 0; }\n}\n\n:host {\n    display: flex;\n    flex-direction: column;\n    box-sizing: content-box;\n    container-type: inline-size;\n    container-name: post;\n}\n\n:host .post {\n    overflow: hidden;\n    width: var(--post-width);\n    border-radius: var(--post-border-radius);\n    cursor: pointer;\n    display: block;\n    text-decoration: none;\n    color: inherit;\n    padding: 12px;\n    box-sizing: border-box;\n}\n\n:host .post:hover {\n    background: rgba(var(--ur-color-on-background), 0.12);\n}\n\n:host .post.loading {\n    cursor: default;\n}\n\n:host .post.loading:hover {\n    background: transparent;\n}\n\n/* Header */\n:host .header {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: 8px;\n    margin-bottom: 8px;\n}\n\n:host .owner-info {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    flex: 1;\n    min-width: 0;\n}\n\n:host .header-text {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n}\n\n:host .owner-name {\n    font-size: 14px;\n    font-weight: 600;\n    color: rgb(var(--ur-color-on-background));\n    line-height: 1.3;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n:host .meta-row {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    flex-wrap: wrap;\n}\n\n:host .timestamp {\n    font-size: 12px;\n    font-weight: 400;\n    color: rgba(var(--ur-color-on-background), 0.6);\n}\n\n:host .meta-separator {\n    font-size: 12px;\n    color: rgba(var(--ur-color-on-background), 0.4);\n    margin: 0 4px;\n}\n\n:host .meta-row ur-tooltip {\n    position: relative;\n    top: 2px;\n}\n\n:host .audience-icon {\n    color: rgba(var(--ur-color-on-background), 0.6);\n}\n\n/* Menu */\n:host .menu-container {\n    position: relative;\n    flex-shrink: 0;\n}\n\n:host .menu-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: transparent;\n    border-radius: 50%;\n    cursor: pointer;\n    color: rgba(var(--ur-color-on-background), 0.6);\n    transition: background-color 0.2s;\n}\n\n:host .menu-button:hover {\n    background: rgba(var(--ur-color-on-background), 0.08);\n}\n\n:host .menu-dropdown {\n    position: absolute;\n    top: 100%;\n    right: 0;\n    min-width: 120px;\n    background: rgb(var(--ur-color-background));\n    border-radius: 8px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    overflow: hidden;\n    z-index: 10;\n}\n\n:host .menu-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 10px 12px;\n    border: none;\n    background: transparent;\n    font-size: 13px;\n    color: rgb(var(--ur-color-on-background));\n    cursor: pointer;\n    transition: background-color 0.2s;\n    text-align: left;\n}\n\n:host .menu-item:hover {\n    background: rgba(var(--ur-color-on-background), 0.08);\n}\n\n:host .menu-item.delete {\n    color: rgb(var(--mdui-color-error));\n}\n\n/* Content */\n:host .content {\n    position: relative;\n}\n\n:host .content.blurred > *:not(.spoiler-overlay):not(.locked-overlay) {\n    filter: blur(8px);\n    pointer-events: none;\n    user-select: none;\n}\n\n/* Content type wrappers */\n:host .text-content,\n:host .link-content,\n:host .media-content,\n:host .poll-content {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n:host .post-title {\n    margin: 0;\n    font-size: 15px;\n    font-weight: 700;\n    line-height: 1.4;\n    color: rgb(var(--ur-color-on-background));\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n:host .post-body {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 1.5;\n    color: rgba(var(--ur-color-on-background), 0.8);\n    white-space: pre-wrap;\n    word-break: break-word;\n    display: -webkit-box;\n    -webkit-line-clamp: 4;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n/* Spoiler overlay */\n:host .spoiler-overlay {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(var(--ur-color-background), 0.5);\n    backdrop-filter: blur(4px);\n    border-radius: 8px;\n}\n\n:host .spoiler-content {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    text-align: center;\n    padding: 16px;\n}\n\n:host .spoiler-content ur-icon {\n    color: rgba(var(--ur-color-on-background), 0.6);\n}\n\n:host .spoiler-warning {\n    font-size: 13px;\n    font-weight: 500;\n    color: rgb(var(--ur-color-on-background));\n}\n\n/* Locked overlay */\n:host .locked-overlay {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(var(--ur-color-background), 0.5);\n    backdrop-filter: blur(4px);\n    border-radius: 8px;\n}\n\n:host .locked-content {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    text-align: center;\n    padding: 16px;\n}\n\n:host .locked-content ur-icon {\n    color: rgba(var(--ur-color-on-background), 0.6);\n}\n\n:host .locked-message {\n    font-size: 13px;\n    font-weight: 500;\n    color: rgb(var(--ur-color-on-background));\n    max-width: 200px;\n}\n\n/* Locked placeholder content */\n:host .locked-placeholder {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    min-height: 80px;\n}\n\n:host .locked-placeholder-body {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n:host .placeholder-line {\n    height: 12px;\n    background: rgba(var(--ur-color-on-background), 0.1);\n    border-radius: 4px;\n    width: 100%;\n}\n\n:host .placeholder-line.short {\n    width: 60%;\n}\n\n/* Link content */\n:host .link-preview {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 12px;\n    background: rgba(var(--ur-color-surface-variant), 0.3);\n    border: 1px solid transparent;\n    border-radius: 8px;\n    text-decoration: none;\n    color: rgb(var(--ur-color-primary));\n    cursor: pointer;\n    transition: background-color 0.2s, border-color 0.2s;\n}\n\n:host .link-preview:hover {\n    background: rgba(var(--ur-color-primary), 0.08);\n    border-color: rgba(var(--ur-color-primary), 0.3);\n}\n\n:host .link-url {\n    flex: 1;\n    font-size: 12px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n/* Media content */\n:host .media-grid {\n    display: grid;\n    gap: 2px;\n    border-radius: 12px;\n    overflow: hidden;\n}\n\n:host .media-grid:has(.media-item:nth-child(2)) {\n    grid-template-columns: 1fr 1fr;\n}\n\n:host .media-item {\n    position: relative;\n    aspect-ratio: 1;\n    overflow: hidden;\n    background: rgba(var(--ur-color-surface-variant), 0.3);\n}\n\n/* Single image: natural height, full width */\n:host .media-item.single {\n    aspect-ratio: auto;\n    grid-column: 1 / -1;\n}\n\n:host .media-item.single img {\n    width: 100%;\n    height: auto;\n    max-height: 70vh;\n    object-fit: contain;\n}\n\n/* 3 images: 3rd item spans full width */\n:host .media-grid:has(.media-item:nth-child(3):last-child) .media-item:nth-child(3) {\n    grid-column: 1 / -1;\n    aspect-ratio: 2/1;\n}\n\n:host .media-item img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n:host .video-thumbnail {\n    position: relative;\n    width: 100%;\n    height: 100%;\n}\n\n:host .video-thumbnail img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n:host .play-icon {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(0, 0, 0, 0.3);\n    color: white;\n}\n\n:host .media-more {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(0, 0, 0, 0.6);\n    font-size: 20px;\n    font-weight: 600;\n    color: white;\n}\n\n:host .image-hover-overlay {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    background: rgba(0, 0, 0, 0.5);\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    cursor: pointer;\n}\n\n:host .image-hover-overlay span {\n    font-size: 12px;\n    font-weight: 500;\n    color: white;\n}\n\n:host .image-hover-overlay ur-icon {\n    color: white;\n}\n\n:host .media-item:hover .image-hover-overlay {\n    opacity: 1;\n}\n\n/* Poll content */\n:host .poll-options {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n:host .poll-option {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 12px;\n    border: 1px solid rgba(var(--ur-color-on-background), 0.15);\n    background: transparent;\n    border-radius: 8px;\n    font-size: 13px;\n    text-align: left;\n    cursor: pointer;\n    transition: all 0.2s;\n    overflow: hidden;\n}\n\n:host .poll-option:not(.voted):hover {\n    border-color: rgb(var(--ur-color-primary));\n    background: rgba(var(--ur-color-primary), 0.05);\n}\n\n:host .poll-option.voted {\n    cursor: default;\n}\n\n:host .poll-option.selected {\n    border-color: rgb(var(--ur-color-primary));\n}\n\n:host .poll-bar {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    background: rgba(var(--ur-color-primary), 0.12);\n    border-radius: 7px;\n    transition: width 0.3s ease;\n}\n\n:host .poll-option.selected .poll-bar {\n    background: rgba(var(--ur-color-primary), 0.2);\n}\n\n:host .poll-text {\n    position: relative;\n    flex: 1;\n    color: rgb(var(--ur-color-on-background));\n    z-index: 1;\n}\n\n:host .poll-percentage {\n    position: relative;\n    font-weight: 600;\n    font-size: 12px;\n    color: rgb(var(--ur-color-on-background));\n    z-index: 1;\n}\n\n:host .poll-check {\n    position: relative;\n    color: rgb(var(--ur-color-primary));\n    z-index: 1;\n}\n\n:host .poll-meta {\n    font-size: 12px;\n    font-weight: 400;\n    color: rgba(var(--ur-color-on-background), 0.6);\n}\n\n/* Actions */\n:host .actions {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    margin-top: 8px;\n}\n\n:host .action-group {\n    display: flex;\n    align-items: center;\n}\n\n:host .action-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 34px;\n    height: 34px;\n    padding: 0;\n    border: none;\n    background: transparent;\n    border-radius: 50%;\n    color: rgba(var(--ur-color-on-background), 0.6);\n    cursor: pointer;\n    transition: background-color 0.15s ease;\n    overflow: hidden;\n}\n\n:host .action-button ur-icon {\n    flex-shrink: 0;\n}\n\n:host .action-button:hover {\n    background: rgba(var(--ur-color-on-background), 0.08);\n}\n\n:host .action-button.active {\n    color: rgb(var(--ur-color-primary));\n}\n\n:host .action-count {\n    font-size: 12px;\n    font-weight: 500;\n    color: rgba(var(--ur-color-on-background), 0.6);\n    padding: 0 4px;\n    margin-right: 8px;\n}\n\n/* Skeleton loading */\n:host .loading-el {\n    animation-duration: 1.7s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-timing-function: linear;\n    animation-name: placeholderAnimate;\n    background: linear-gradient(\n        to right,\n        rgba(var(--ur-color-on-background), 0.04) 2%,\n        rgba(var(--ur-color-on-background), 0.12) 18%,\n        rgba(var(--ur-color-on-background), 0.04) 33%\n    );\n    background-size: 1000px;\n}\n\n:host .avatar-skeleton {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n\n:host .name-skeleton {\n    width: 100px;\n    height: 14px;\n    border-radius: 4px;\n}\n\n:host .timestamp-skeleton {\n    width: 60px;\n    height: 12px;\n    border-radius: 4px;\n}\n\n:host .title-skeleton {\n    width: 85%;\n    height: 16px;\n    border-radius: 4px;\n    margin-bottom: 8px;\n}\n\n:host .body-skeleton {\n    width: 100%;\n    height: 14px;\n    border-radius: 4px;\n    margin-bottom: 6px;\n}\n\n:host .body-skeleton.short {\n    width: 65%;\n}\n\n:host .actions-skeleton {\n    display: flex;\n    gap: 8px;\n    margin-top: 10px;\n}\n\n:host .action-skeleton {\n    width: 50px;\n    height: 28px;\n    border-radius: 14px;\n}\n\n/* Container queries for responsive */\n@container post (max-width: 350px) {\n    :host .post {\n        padding: 10px;\n    }\n\n    :host .post-title {\n        font-size: 14px;\n    }\n\n    :host .post-body {\n        font-size: 13px;\n    }\n\n    :host .owner-name {\n        font-size: 13px;\n    }\n\n    :host .poll-option {\n        padding: 8px 10px;\n        font-size: 12px;\n    }\n}\n";
+
+const UrPostCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.postCardEvent = createEvent(this, "postCardEvent");
+        this.ownerType = 'user';
+        this.isOwner = false;
+        this.liked = false;
+        this.likeCount = 0;
+        this.commentCount = 0;
+        this.skeleton = false;
+        this.userPollVote = -1; // Index of option user voted for, -1 if not voted
+        this.totalPollVotes = 0;
+        this.mobile = false;
+        // Text props for i18n
+        this.spoilerWarningText = 'Spoiler warning';
+        this.showSpoilerText = 'Show anyway';
+        this.editText = 'Edit';
+        this.deleteText = 'Delete';
+        this.reportText = 'Report';
+        this.likeText = 'Like';
+        this.commentText = 'Comment';
+        this.publicText = 'Public';
+        this.privateText = 'Private';
+        this.followersOnlyText = 'Followers only';
+        this.subscribersOnlyText = 'Subscribers only';
+        this.votesText = 'votes';
+        // Locked post text props for i18n
+        this.lockedLoginText = 'Sign in to view this post';
+        this.lockedFollowText = 'Follow to view this post';
+        this.lockedSubscribeText = 'Subscribe to view this post';
+        this.lockedTierText = 'Join {tiers} to view this post';
+        this.loginBtnText = 'Sign in';
+        this.followBtnText = 'Follow';
+        this.subscribeBtnText = 'Subscribe';
+        this.viewImageText = 'View image';
+        this.spoilerRevealed = false;
+        this.menuOpen = false;
+        this.handlePostClick = () => {
+            this.emitEvent('post_click');
+        };
+        this.handleLikeClick = (e) => {
+            e.stopPropagation();
+            this.emitEvent('like');
+        };
+        this.handleCommentClick = (e) => {
+            e.stopPropagation();
+            this.emitEvent('comment');
+        };
+        this.handleOwnerClick = (_e) => {
+            // TODO: Navigate to owner profile
+            // For now, let click bubble up to open post
+        };
+        this.handleLinkClick = (e) => {
+            e.stopPropagation();
+            // Let the link open naturally in new tab (target="_blank")
+            this.emitEvent('link_click');
+        };
+        this.handlePollVote = (e, optionIndex) => {
+            e.stopPropagation();
+            if (this.userPollVote === -1) {
+                this.emitEvent('poll_vote', { pollOptionIndex: optionIndex });
+            }
+        };
+        this.handleImageClick = (e, index) => {
+            e.stopPropagation();
+            this.emitEvent('image_click', { mediaIndex: index });
+        };
+        this.handleSpoilerReveal = (e) => {
+            e.stopPropagation();
+            this.spoilerRevealed = true;
+            this.emitEvent('spoiler_reveal');
+        };
+        this.handleUnlockClick = (e) => {
+            var _a;
+            e.stopPropagation();
+            const lockReason = (_a = this.post) === null || _a === void 0 ? void 0 : _a.lockReason;
+            if (lockReason === 'login') {
+                this.emitEvent('unlock_login');
+            }
+            else if (lockReason === 'followers') {
+                this.emitEvent('unlock_follow');
+            }
+            else {
+                // 'subscribers' or 'tier'
+                this.emitEvent('unlock_subscribe');
+            }
+        };
+        this.handleMenuAction = (e, action) => {
+            e.stopPropagation();
+            this.menuOpen = false;
+            this.emitEvent(action);
+        };
+        this.toggleMenu = (e) => {
+            e.stopPropagation();
+            if (this.mobile) {
+                const menuActions = [];
+                if (this.isOwner) {
+                    menuActions.push({ id: 'edit', label: this.editText, icon: 'edit' }, { id: 'delete', label: this.deleteText, icon: 'delete' });
+                }
+                else {
+                    menuActions.push({ id: 'report', label: this.reportText, icon: 'flag' });
+                }
+                this.postCardEvent.emit({
+                    type: 'menu_open',
+                    post: this.post,
+                    menuActions,
+                });
+            }
+            else {
+                this.menuOpen = !this.menuOpen;
+            }
+        };
+    }
+    handleWindowClick(event) {
+        var _a;
+        if (!this.menuOpen)
+            return;
+        const path = event.composedPath();
+        const menuContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.menu-container');
+        if (menuContainer && !path.includes(menuContainer)) {
+            this.menuOpen = false;
+        }
+    }
+    emitEvent(type, options) {
+        this.postCardEvent.emit({
+            type,
+            post: this.post,
+            pollOptionIndex: options === null || options === void 0 ? void 0 : options.pollOptionIndex,
+            mediaIndex: options === null || options === void 0 ? void 0 : options.mediaIndex,
+        });
+    }
+    formatCount(count) {
+        if (count >= 1000000) {
+            return `${(count / 1000000).toFixed(1)}M`;
+        }
+        if (count >= 1000) {
+            return `${(count / 1000).toFixed(1)}K`;
+        }
+        return count.toString();
+    }
+    getAudienceIcon() {
+        var _a;
+        switch ((_a = this.post) === null || _a === void 0 ? void 0 : _a.audience) {
+            case 'public':
+                return 'public';
+            case 'private':
+                return 'lock';
+            case 'followers':
+                return 'group';
+            case 'subscribers':
+                return 'loyalty';
+            default:
+                return 'public';
+        }
+    }
+    getAudienceTooltip() {
+        var _a, _b, _c;
+        switch ((_a = this.post) === null || _a === void 0 ? void 0 : _a.audience) {
+            case 'public':
+                return this.publicText;
+            case 'private':
+                return this.privateText;
+            case 'followers':
+                return this.followersOnlyText;
+            case 'subscribers':
+                // Show tier names for owner only
+                if (this.isOwner && ((_c = (_b = this.post) === null || _b === void 0 ? void 0 : _b.audienceTierNames) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+                    return `${this.subscribersOnlyText} (${this.post.audienceTierNames.join(', ')})`;
+                }
+                return this.subscribersOnlyText;
+            default:
+                return this.publicText;
+        }
+    }
+    renderSkeleton() {
+        return (h(Host, null, h("div", { class: "post loading" }, h("div", { class: "header" }, h("div", { class: "owner-info" }, h("div", { class: "avatar-skeleton loading-el" }), h("div", { class: "header-text" }, h("div", { class: "name-skeleton loading-el" }), h("div", { class: "timestamp-skeleton loading-el" })))), h("div", { class: "content" }, h("div", { class: "title-skeleton loading-el" }), h("div", { class: "body-skeleton loading-el" }), h("div", { class: "body-skeleton short loading-el" })), h("div", { class: "actions-skeleton" }, h("div", { class: "action-skeleton loading-el" }), h("div", { class: "action-skeleton loading-el" })))));
+    }
+    renderHeader() {
+        return (h("div", { class: "header" }, h("div", { class: "owner-info", onClick: this.handleOwnerClick }, h("ur-avatar", { class: "avatar clickable", src: this.ownerImage, name: this.ownerName, size: "40px", variant: this.ownerType }), h("div", { class: "header-text" }, h("span", { class: "owner-name clickable" }, this.ownerName), h("div", { class: "meta-row" }, h("ur-time-ago", { class: "timestamp", date: this.timestamp }), h("span", { class: "meta-separator" }, "\u00B7"), h("ur-tooltip", { content: this.getAudienceTooltip(), placement: "bottom" }, h("ur-icon", { class: "audience-icon", name: this.getAudienceIcon(), size: "14px" }))))), h("div", { class: "menu-container" }, h("button", { class: "menu-button", onClick: this.toggleMenu }, h("ur-icon", { name: "more_vert", size: "20px" })), this.menuOpen && (h("div", { class: "menu-dropdown" }, this.isOwner ? ([
+            h("button", { class: "menu-item", onClick: (e) => this.handleMenuAction(e, 'edit') }, h("ur-icon", { name: "edit", size: "16px" }), this.editText),
+            h("button", { class: "menu-item delete", onClick: (e) => this.handleMenuAction(e, 'delete') }, h("ur-icon", { name: "delete", size: "16px" }), this.deleteText)
+        ]) : (h("button", { class: "menu-item", onClick: (e) => this.handleMenuAction(e, 'report') }, h("ur-icon", { name: "flag", size: "16px" }), this.reportText)))))));
+    }
+    renderSpoilerOverlay() {
+        return (h("div", { class: "spoiler-overlay" }, h("div", { class: "spoiler-content" }, h("ur-icon", { name: "visibility_off", size: "32px" }), h("span", { class: "spoiler-warning" }, this.spoilerWarningText), h("ur-button", { variant: "outlined", onClick: this.handleSpoilerReveal }, this.showSpoilerText))));
+    }
+    getLockedMessage() {
+        var _a, _b, _c;
+        const lockReason = (_a = this.post) === null || _a === void 0 ? void 0 : _a.lockReason;
+        if (lockReason === 'login') {
+            return this.lockedLoginText;
+        }
+        if (lockReason === 'followers') {
+            return this.lockedFollowText;
+        }
+        if (lockReason === 'tier' && ((_c = (_b = this.post) === null || _b === void 0 ? void 0 : _b.requiredTierNames) === null || _c === void 0 ? void 0 : _c.length)) {
+            return this.lockedTierText.replace('{tiers}', this.post.requiredTierNames.join(' or '));
+        }
+        return this.lockedSubscribeText;
+    }
+    getUnlockButtonText() {
+        var _a;
+        const lockReason = (_a = this.post) === null || _a === void 0 ? void 0 : _a.lockReason;
+        if (lockReason === 'login') {
+            return this.loginBtnText;
+        }
+        if (lockReason === 'followers') {
+            return this.followBtnText;
+        }
+        return this.subscribeBtnText;
+    }
+    renderLockedOverlay() {
+        return (h("div", { class: "locked-overlay" }, h("div", { class: "locked-content" }, h("ur-icon", { name: "lock", size: "32px" }), h("span", { class: "locked-message" }, this.getLockedMessage()), h("ur-button", { variant: "filled", onClick: this.handleUnlockClick }, this.getUnlockButtonText()))));
+    }
+    renderTextContent() {
+        return (h("div", { class: "text-content" }, h("h3", { class: "post-title" }, this.post.title), this.post.body && (h("p", { class: "post-body" }, this.post.body))));
+    }
+    renderLinkContent() {
+        return (h("div", { class: "link-content" }, h("h3", { class: "post-title" }, this.post.title), this.post.body && (h("p", { class: "post-body" }, this.post.body)), h("a", { class: "link-preview", href: this.post.linkUrl, target: "_blank", rel: "noopener noreferrer", onClick: this.handleLinkClick }, h("ur-icon", { name: "link", size: "16px" }), h("span", { class: "link-url" }, this.post.linkUrl), h("ur-icon", { name: "open_in_new", size: "14px" }))));
+    }
+    renderMediaContent() {
+        const hasMedia = this.post.media && this.post.media.length > 0;
+        return (h("div", { class: "media-content" }, h("h3", { class: "post-title" }, this.post.title), hasMedia && (h("div", { class: "media-grid" }, this.post.media.slice(0, 4).map((media, index) => (h("div", { class: `media-item ${this.post.media.length === 1 ? 'single' : ''}`, key: index, onClick: (e) => this.handleImageClick(e, index) }, media.type === 'image' ? (h("img", { src: media.url, alt: "", loading: "lazy" })) : (h("div", { class: "video-thumbnail" }, h("img", { src: media.thumbnailUrl || media.url, alt: "", loading: "lazy" }), h("div", { class: "play-icon" }, h("ur-icon", { name: "play_circle", size: "48px" })))), index === 3 && this.post.media.length > 4 && (h("div", { class: "media-more" }, "+", this.post.media.length - 4)), media.type === 'image' && (h("div", { class: "image-hover-overlay" }, h("ur-icon", { name: "visibility", size: "20px" }), h("span", null, this.viewImageText)))))))), this.post.body && (h("p", { class: "post-body" }, this.post.body))));
+    }
+    renderPollContent() {
+        var _a;
+        const hasVoted = this.userPollVote !== -1;
+        const hasPollResults = this.post.pollResults && this.post.pollResults.length > 0;
+        // Calculate total votes from pollResults if available, otherwise use prop
+        const totalVotes = hasPollResults
+            ? this.post.pollResults.reduce((sum, r) => sum + r.count, 0)
+            : this.totalPollVotes;
+        return (h("div", { class: "poll-content" }, h("h3", { class: "post-title" }, this.post.title), h("div", { class: "poll-options" }, (_a = this.post.pollOptions) === null || _a === void 0 ? void 0 : _a.map((option, index) => {
+            // Use pollResults if available, otherwise fall back to option.votes
+            const result = hasPollResults
+                ? this.post.pollResults.find(r => r.index === index)
+                : null;
+            const votes = result ? result.count : (option.votes || 0);
+            const percentage = result
+                ? result.percentage
+                : (totalVotes > 0 ? Math.round((votes / totalVotes) * 100) : 0);
+            const isSelected = this.userPollVote === index;
+            return (h("button", { class: {
+                    'poll-option': true,
+                    'voted': hasVoted,
+                    'selected': isSelected,
+                }, onClick: (e) => this.handlePollVote(e, index), disabled: hasVoted, key: index }, hasVoted && (h("div", { class: "poll-bar", style: { width: `${percentage}%` } })), h("span", { class: "poll-text" }, option.text), hasVoted && (h("span", { class: "poll-percentage" }, percentage, "%")), isSelected && (h("ur-icon", { name: "check_circle", size: "16px", class: "poll-check" }))));
+        })), h("div", { class: "poll-meta" }, h("span", null, totalVotes, " ", this.votesText))));
+    }
+    renderLockedContent() {
+        // For locked posts, show placeholder content to blur
+        return (h("div", { class: "locked-placeholder" }, h("h3", { class: "post-title" }, this.post.title), h("div", { class: "locked-placeholder-body" }, h("div", { class: "placeholder-line" }), h("div", { class: "placeholder-line" }), h("div", { class: "placeholder-line short" }))));
+    }
+    renderContent() {
+        var _a, _b, _c, _d, _f, _g;
+        const showSpoiler = ((_a = this.post) === null || _a === void 0 ? void 0 : _a.isSpoiler) && !this.spoilerRevealed;
+        const isLocked = ((_b = this.post) === null || _b === void 0 ? void 0 : _b.locked) === true;
+        // Locked state takes precedence
+        if (isLocked) {
+            return (h("div", { class: "content blurred" }, this.renderLockedContent(), this.renderLockedOverlay()));
+        }
+        return (h("div", { class: { 'content': true, 'blurred': showSpoiler } }, ((_c = this.post) === null || _c === void 0 ? void 0 : _c.type) === 'text' && this.renderTextContent(), ((_d = this.post) === null || _d === void 0 ? void 0 : _d.type) === 'link' && this.renderLinkContent(), ((_f = this.post) === null || _f === void 0 ? void 0 : _f.type) === 'media' && this.renderMediaContent(), ((_g = this.post) === null || _g === void 0 ? void 0 : _g.type) === 'poll' && this.renderPollContent(), showSpoiler && this.renderSpoilerOverlay()));
+    }
+    renderActions() {
+        return (h("div", { class: "actions" }, h("div", { class: "action-group" }, h("button", { class: { 'action-button': true, 'active': this.liked }, onClick: this.handleLikeClick }, h("ur-icon", { name: this.liked ? 'thumb_up' : 'thumb_up_outline', size: "18px" })), this.likeCount > 0 && (h("span", { class: "action-count" }, this.formatCount(this.likeCount)))), h("div", { class: "action-group" }, h("button", { class: "action-button", onClick: this.handleCommentClick }, h("ur-icon", { name: "comment--outlined", size: "18px" })), this.commentCount > 0 && (h("span", { class: "action-count" }, this.formatCount(this.commentCount))))));
+    }
+    render() {
+        if (this.skeleton) {
+            return this.renderSkeleton();
+        }
+        if (!this.post) {
+            return null;
+        }
+        return (h(Host, null, h("div", { class: "post", onClick: this.handlePostClick }, this.renderHeader(), this.renderContent(), this.renderActions())));
+    }
+    get el() { return getElement(this); }
+};
+UrPostCard.style = urPostCardCss;
+
+export { UrPostCard as ur_post_card };

package/dist/esm/ur-post-detail.entry.js

@@ -0,0 +1,284 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DvddpEp7.js';
+import './ur-avatar-DXF3lVCQ.js';
+import './ur-icon.entry.js';
+import './ur-button.entry.js';
+import './ur-time-ago.entry.js';
+import './ur-tooltip-CTvIaeKz.js';
+import './index-DZdO-mMi.js';
+import './component-style-zh2SzAzp.js';
+import './directive-Cdjto-xB.js';
+import './extend-CivLoY3b.js';
+import './get-Bo_xHyoL.js';
+import './has-slot-BUAeIuVe.js';
+import './index-hBNOs3uJ.js';
+import './ref-Bz3X8sIV.js';
+import './attr-x5F1K2Wv.js';
+import './template-Dv4lqTb2.js';
+import './button-base-Ch4mNZf9.js';
+import './if-defined-BYHxg-DB.js';
+import './anchor-BI6JNVb4.js';
+import './form-BgKWWIji.js';
+import './ripple-mixin-B-KYfpV5.js';
+import './children-C1xUAMVf.js';
+import './state-VNaKC22C.js';
+import './class-map-DhnCnSWX.js';
+import './appendTo-Bs3lgi94.js';
+import './index-Co79ZtG7.js';
+
+const urPostDetailCss = ":host{--ur-color-on-background:var(--mdui-color-on-background);--ur-color-background:var(--mdui-color-background);--ur-color-primary:var(--mdui-color-primary);--ur-color-surface-variant:var(--mdui-color-surface-variant);--ur-color-on-surface-variant:var(--mdui-color-on-surface-variant);--ur-color-border:var(--mdui-color-outline-variant);display:block}.post-detail{display:flex;flex-direction:column}.header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:16px}.owner-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0;cursor:pointer}.header-text{display:flex;flex-direction:column;gap:2px;min-width:0}.owner-name{font-size:15px;font-weight:600;color:rgb(var(--ur-color-on-background));line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.owner-name.clickable:hover{text-decoration:underline}.meta-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.timestamp{font-size:13px;font-weight:400;color:rgba(var(--ur-color-on-background), 0.6)}.meta-separator{font-size:12px;color:rgba(var(--ur-color-on-background), 0.4)}.meta-row ur-tooltip{position:relative;top:2px}.audience-icon{color:rgba(var(--ur-color-on-background), 0.6)}.content{position:relative}.content.blurred>*:not(.spoiler-overlay):not(.locked-overlay){filter:blur(8px);pointer-events:none;user-select:none}.text-content,.link-content,.media-content,.poll-content{display:flex;flex-direction:column;gap:12px}.text-content,.link-content,.poll-content{padding:0 16px}.post-title{margin:0;font-size:16px;font-weight:700;line-height:1.4;color:rgb(var(--ur-color-on-background))}.post-body{margin:0;font-size:15px;font-weight:400;line-height:1.6;color:rgba(var(--ur-color-on-background), 0.9);white-space:pre-wrap;word-break:break-word}.media-content .post-title,.media-content .post-body{padding:0 16px}.spoiler-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--ur-color-background), 0.5);backdrop-filter:blur(4px);border-radius:8px}.spoiler-content{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:16px}.spoiler-content ur-icon{color:rgba(var(--ur-color-on-background), 0.6)}.spoiler-warning{font-size:14px;font-weight:500;color:rgb(var(--ur-color-on-background))}.locked-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--ur-color-background), 0.5);backdrop-filter:blur(4px);border-radius:8px}.locked-content{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:16px}.locked-content ur-icon{color:rgba(var(--ur-color-on-background), 0.6)}.locked-message{font-size:14px;font-weight:500;color:rgb(var(--ur-color-on-background));max-width:200px}.locked-placeholder{display:flex;flex-direction:column;gap:8px;min-height:80px;padding:0 16px}.locked-placeholder-body{display:flex;flex-direction:column;gap:6px}.placeholder-line{height:14px;background:rgba(var(--ur-color-on-background), 0.1);border-radius:4px;width:100%}.placeholder-line.short{width:60%}.link-preview{display:flex;align-items:center;gap:8px;padding:12px 14px;background:rgba(var(--ur-color-surface-variant), 0.3);border:1px solid transparent;border-radius:8px;text-decoration:none;color:rgb(var(--ur-color-primary));cursor:pointer;transition:background-color 0.2s, border-color 0.2s}.link-preview:hover{background:rgba(var(--ur-color-primary), 0.08);border-color:rgba(var(--ur-color-primary), 0.3)}.link-url{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-carousel-container{position:relative;background:rgb(var(--ur-color-surface-variant))}swiper-container{width:100%}swiper-slide{display:flex;align-items:center;justify-content:center}.media-slide{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:rgb(var(--ur-color-surface-variant))}.media-slide img{width:100%;height:100%;object-fit:cover}.media-slide .video-player{width:100%;height:100%;object-fit:cover}.media-navigation{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:space-between;padding:0 8px}.nav-button{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:50%;background:rgba(0, 0, 0, 0.5);color:white;cursor:pointer;transition:background-color 0.2s, opacity 0.2s}.nav-button:hover:not(:disabled){background:rgba(0, 0, 0, 0.7)}.nav-button:disabled{opacity:0.3;cursor:not-allowed}.poll-options{display:flex;flex-direction:column;gap:8px}.poll-option{position:relative;display:flex;align-items:center;gap:8px;padding:12px 14px;border:1px solid rgba(var(--ur-color-on-background), 0.15);background:transparent;border-radius:8px;font-size:14px;text-align:left;cursor:pointer;transition:all 0.2s;overflow:hidden}.poll-option:not(.voted):hover{border-color:rgb(var(--ur-color-primary));background:rgba(var(--ur-color-primary), 0.05)}.poll-option.voted{cursor:default}.poll-option.selected{border-color:rgb(var(--ur-color-primary))}.poll-bar{position:absolute;left:0;top:0;bottom:0;background:rgba(var(--ur-color-primary), 0.12);border-radius:7px;transition:width 0.3s ease}.poll-option.selected .poll-bar{background:rgba(var(--ur-color-primary), 0.2)}.poll-text{position:relative;flex:1;color:rgb(var(--ur-color-on-background));z-index:1}.poll-percentage{position:relative;font-weight:600;font-size:13px;color:rgb(var(--ur-color-on-background));z-index:1}.poll-check{position:relative;color:rgb(var(--ur-color-primary));z-index:1}.poll-meta{font-size:13px;font-weight:400;color:rgba(var(--ur-color-on-background), 0.6)}.stats{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:14px;color:rgba(var(--ur-color-on-background), 0.6)}.stat-item{display:flex;align-items:center;gap:6px}.stat-item.clickable{cursor:pointer}.stat-item.clickable:hover{text-decoration:underline}.divider{height:1px;background:rgb(var(--ur-color-border));margin:0 16px}.actions{display:flex;align-items:center;padding:8px 12px;gap:8px}.clickable{cursor:pointer}";
+
+const UrPostDetail = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.postDetailEvent = createEvent(this, "postDetailEvent");
+        this.ownerType = 'user';
+        this.liked = false;
+        this.likeCount = 0;
+        this.commentCount = 0;
+        this.userPollVote = -1;
+        this.totalPollVotes = 0;
+        this.initialMediaIndex = 0;
+        // Text props for i18n
+        this.spoilerWarningText = 'Spoiler warning';
+        this.showSpoilerText = 'Show anyway';
+        this.likeText = 'Like';
+        this.likedText = 'Liked';
+        this.commentText = 'Comment';
+        this.publicText = 'Public';
+        this.privateText = 'Private';
+        this.followersOnlyText = 'Followers only';
+        this.subscribersOnlyText = 'Subscribers only';
+        this.votesText = 'votes';
+        this.lockedLoginText = 'Sign in to view this post';
+        this.lockedFollowText = 'Follow to view this post';
+        this.lockedSubscribeText = 'Subscribe to view this post';
+        this.lockedTierText = 'Join {tiers} to view this post';
+        this.loginBtnText = 'Sign in';
+        this.followBtnText = 'Follow';
+        this.subscribeBtnText = 'Subscribe';
+        this.spoilerRevealed = false;
+        this.currentMediaIndex = 0;
+        this.handleLikeClick = (e) => {
+            e.stopPropagation();
+            this.emitEvent('like');
+        };
+        this.handleCommentClick = (e) => {
+            e.stopPropagation();
+            this.emitEvent('comment');
+        };
+        this.handleOwnerClick = (e) => {
+            e.stopPropagation();
+            this.emitEvent('owner_click');
+        };
+        this.handleLinkClick = (e) => {
+            e.stopPropagation();
+            this.emitEvent('link_click');
+        };
+        this.handlePollVote = (e, optionIndex) => {
+            e.stopPropagation();
+            if (this.userPollVote === -1) {
+                this.emitEvent('poll_vote', { pollOptionIndex: optionIndex });
+            }
+        };
+        this.handleSpoilerReveal = (e) => {
+            e.stopPropagation();
+            this.spoilerRevealed = true;
+            this.emitEvent('spoiler_reveal');
+        };
+        this.handleUnlockClick = (e) => {
+            var _a;
+            e.stopPropagation();
+            const lockReason = (_a = this.post) === null || _a === void 0 ? void 0 : _a.lockReason;
+            if (lockReason === 'login') {
+                this.emitEvent('unlock_login');
+            }
+            else if (lockReason === 'followers') {
+                this.emitEvent('unlock_follow');
+            }
+            else {
+                this.emitEvent('unlock_subscribe');
+            }
+        };
+        this.handlePrevMedia = () => {
+            var _a;
+            if ((_a = this.swiperContainer) === null || _a === void 0 ? void 0 : _a.swiper) {
+                this.swiperContainer.swiper.slidePrev();
+            }
+        };
+        this.handleNextMedia = () => {
+            var _a;
+            if ((_a = this.swiperContainer) === null || _a === void 0 ? void 0 : _a.swiper) {
+                this.swiperContainer.swiper.slideNext();
+            }
+        };
+    }
+    onInitialMediaIndexChange(newValue) {
+        var _a;
+        this.currentMediaIndex = newValue;
+        if ((_a = this.swiperContainer) === null || _a === void 0 ? void 0 : _a.swiper) {
+            this.swiperContainer.swiper.slideTo(newValue, 0);
+        }
+    }
+    componentDidLoad() {
+        this.currentMediaIndex = this.initialMediaIndex || 0;
+        this.initSwiper();
+    }
+    initSwiper() {
+        var _a, _b, _c;
+        if (!((_b = (_a = this.post) === null || _a === void 0 ? void 0 : _a.media) === null || _b === void 0 ? void 0 : _b.length))
+            return;
+        this.swiperContainer = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('swiper-container');
+        if (!this.swiperContainer)
+            return;
+        // Wait for swiper to initialize
+        customElements.whenDefined('swiper-container').then(() => {
+            setTimeout(() => {
+                var _a;
+                if ((_a = this.swiperContainer) === null || _a === void 0 ? void 0 : _a.swiper) {
+                    this.swiperContainer.swiper.on('slideChange', () => {
+                        this.currentMediaIndex = this.swiperContainer.swiper.activeIndex;
+                        this.emitEvent('media_change', { mediaIndex: this.currentMediaIndex });
+                    });
+                    // Go to initial slide
+                    if (this.initialMediaIndex > 0) {
+                        this.swiperContainer.swiper.slideTo(this.initialMediaIndex, 0);
+                    }
+                }
+            }, 100);
+        });
+    }
+    emitEvent(type, options) {
+        this.postDetailEvent.emit({
+            type,
+            post: this.post,
+            pollOptionIndex: options === null || options === void 0 ? void 0 : options.pollOptionIndex,
+            mediaIndex: options === null || options === void 0 ? void 0 : options.mediaIndex,
+        });
+    }
+    formatCount(count) {
+        if (count >= 1000000) {
+            return `${(count / 1000000).toFixed(1)}M`;
+        }
+        if (count >= 1000) {
+            return `${(count / 1000).toFixed(1)}K`;
+        }
+        return count.toString();
+    }
+    getAudienceIcon() {
+        var _a;
+        switch ((_a = this.post) === null || _a === void 0 ? void 0 : _a.audience) {
+            case 'public': return 'public';
+            case 'private': return 'lock';
+            case 'followers': return 'group';
+            case 'subscribers': return 'loyalty';
+            default: return 'public';
+        }
+    }
+    getAudienceTooltip() {
+        var _a;
+        switch ((_a = this.post) === null || _a === void 0 ? void 0 : _a.audience) {
+            case 'public': return this.publicText;
+            case 'private': return this.privateText;
+            case 'followers': return this.followersOnlyText;
+            case 'subscribers': return this.subscribersOnlyText;
+            default: return this.publicText;
+        }
+    }
+    renderHeader() {
+        return (h("div", { class: "header" }, h("div", { class: "owner-info", onClick: this.handleOwnerClick }, h("ur-avatar", { class: "avatar clickable", src: this.ownerImage, name: this.ownerName, size: "40px", variant: this.ownerType }), h("div", { class: "header-text" }, h("span", { class: "owner-name clickable" }, this.ownerName), h("div", { class: "meta-row" }, h("ur-time-ago", { class: "timestamp", date: this.timestamp }), h("span", { class: "meta-separator" }, "\u00B7"), h("ur-tooltip", { content: this.getAudienceTooltip(), placement: "bottom" }, h("ur-icon", { class: "audience-icon", name: this.getAudienceIcon(), size: "14px" })))))));
+    }
+    renderSpoilerOverlay() {
+        return (h("div", { class: "spoiler-overlay" }, h("div", { class: "spoiler-content" }, h("ur-icon", { name: "visibility_off", size: "32px" }), h("span", { class: "spoiler-warning" }, this.spoilerWarningText), h("ur-button", { variant: "outlined", onClick: this.handleSpoilerReveal }, this.showSpoilerText))));
+    }
+    getLockedMessage() {
+        var _a, _b, _c;
+        const lockReason = (_a = this.post) === null || _a === void 0 ? void 0 : _a.lockReason;
+        if (lockReason === 'login')
+            return this.lockedLoginText;
+        if (lockReason === 'followers')
+            return this.lockedFollowText;
+        if (lockReason === 'tier' && ((_c = (_b = this.post) === null || _b === void 0 ? void 0 : _b.requiredTierNames) === null || _c === void 0 ? void 0 : _c.length)) {
+            return this.lockedTierText.replace('{tiers}', this.post.requiredTierNames.join(' or '));
+        }
+        return this.lockedSubscribeText;
+    }
+    getUnlockButtonText() {
+        var _a;
+        const lockReason = (_a = this.post) === null || _a === void 0 ? void 0 : _a.lockReason;
+        if (lockReason === 'login')
+            return this.loginBtnText;
+        if (lockReason === 'followers')
+            return this.followBtnText;
+        return this.subscribeBtnText;
+    }
+    renderLockedOverlay() {
+        return (h("div", { class: "locked-overlay" }, h("div", { class: "locked-content" }, h("ur-icon", { name: "lock", size: "32px" }), h("span", { class: "locked-message" }, this.getLockedMessage()), h("ur-button", { variant: "filled", onClick: this.handleUnlockClick }, this.getUnlockButtonText()))));
+    }
+    renderTextContent() {
+        return (h("div", { class: "text-content" }, this.post.title && h("h3", { class: "post-title" }, this.post.title), this.post.body && h("p", { class: "post-body" }, this.post.body)));
+    }
+    renderLinkContent() {
+        return (h("div", { class: "link-content" }, this.post.title && h("h3", { class: "post-title" }, this.post.title), this.post.body && h("p", { class: "post-body" }, this.post.body), h("a", { class: "link-preview", href: this.post.linkUrl, target: "_blank", rel: "noopener noreferrer", onClick: this.handleLinkClick }, h("ur-icon", { name: "link", size: "16px" }), h("span", { class: "link-url" }, this.post.linkUrl), h("ur-icon", { name: "open_in_new", size: "14px" }))));
+    }
+    renderMediaContent() {
+        const hasMedia = this.post.media && this.post.media.length > 0;
+        const hasMultipleMedia = this.post.media && this.post.media.length > 1;
+        return (h("div", { class: "media-content" }, this.post.title && h("h3", { class: "post-title" }, this.post.title), hasMedia && (h("div", { class: "media-carousel-container" }, h("swiper-container", { init: true, "slides-per-view": 1, "space-between": 0, pagination: true, "pagination-clickable": true }, this.post.media.map((media, index) => (h("swiper-slide", { key: index }, h("div", { class: "media-slide" }, media.type === 'image' ? (h("img", { src: media.url, alt: "", loading: "lazy" })) : (h("video", { src: media.url, controls: true, class: "video-player" }))))))), hasMultipleMedia && (h("div", { class: "media-navigation" }, h("button", { class: "nav-button prev", onClick: this.handlePrevMedia, disabled: this.currentMediaIndex === 0 }, h("ur-icon", { name: "chevron_left", size: "24px" })), h("button", { class: "nav-button next", onClick: this.handleNextMedia, disabled: this.currentMediaIndex === this.post.media.length - 1 }, h("ur-icon", { name: "chevron_right", size: "24px" })))))), this.post.body && h("p", { class: "post-body" }, this.post.body)));
+    }
+    renderPollContent() {
+        var _a;
+        const hasVoted = this.userPollVote !== -1;
+        const hasPollResults = this.post.pollResults && this.post.pollResults.length > 0;
+        const totalVotes = hasPollResults
+            ? this.post.pollResults.reduce((sum, r) => sum + r.count, 0)
+            : this.totalPollVotes;
+        return (h("div", { class: "poll-content" }, this.post.title && h("h3", { class: "post-title" }, this.post.title), h("div", { class: "poll-options" }, (_a = this.post.pollOptions) === null || _a === void 0 ? void 0 : _a.map((option, index) => {
+            const result = hasPollResults
+                ? this.post.pollResults.find(r => r.index === index)
+                : null;
+            const votes = result ? result.count : (option.votes || 0);
+            const percentage = result
+                ? result.percentage
+                : (totalVotes > 0 ? Math.round((votes / totalVotes) * 100) : 0);
+            const isSelected = this.userPollVote === index;
+            return (h("button", { class: {
+                    'poll-option': true,
+                    'voted': hasVoted,
+                    'selected': isSelected,
+                }, onClick: (e) => this.handlePollVote(e, index), disabled: hasVoted, key: index }, hasVoted && (h("div", { class: "poll-bar", style: { width: `${percentage}%` } })), h("span", { class: "poll-text" }, option.text), hasVoted && (h("span", { class: "poll-percentage" }, percentage, "%")), isSelected && (h("ur-icon", { name: "check_circle", size: "16px", class: "poll-check" }))));
+        })), h("div", { class: "poll-meta" }, h("span", null, totalVotes, " ", this.votesText))));
+    }
+    renderLockedContent() {
+        return (h("div", { class: "locked-placeholder" }, this.post.title && h("h3", { class: "post-title" }, this.post.title), h("div", { class: "locked-placeholder-body" }, h("div", { class: "placeholder-line" }), h("div", { class: "placeholder-line" }), h("div", { class: "placeholder-line short" }))));
+    }
+    renderContent() {
+        var _a, _b, _c, _d, _e, _f;
+        const showSpoiler = ((_a = this.post) === null || _a === void 0 ? void 0 : _a.isSpoiler) && !this.spoilerRevealed;
+        const isLocked = ((_b = this.post) === null || _b === void 0 ? void 0 : _b.locked) === true;
+        if (isLocked) {
+            return (h("div", { class: "content blurred" }, this.renderLockedContent(), this.renderLockedOverlay()));
+        }
+        return (h("div", { class: { 'content': true, 'blurred': showSpoiler } }, ((_c = this.post) === null || _c === void 0 ? void 0 : _c.type) === 'text' && this.renderTextContent(), ((_d = this.post) === null || _d === void 0 ? void 0 : _d.type) === 'link' && this.renderLinkContent(), ((_e = this.post) === null || _e === void 0 ? void 0 : _e.type) === 'media' && this.renderMediaContent(), ((_f = this.post) === null || _f === void 0 ? void 0 : _f.type) === 'poll' && this.renderPollContent(), showSpoiler && this.renderSpoilerOverlay()));
+    }
+    renderStats() {
+        return (h("div", { class: "stats" }, this.likeCount > 0 && (h("span", { class: "stat-item" }, h("ur-icon", { name: "thumb_up", size: "16px" }), this.formatCount(this.likeCount))), this.commentCount > 0 && (h("span", { class: "stat-item clickable", onClick: this.handleCommentClick }, this.formatCount(this.commentCount), " comments"))));
+    }
+    renderActions() {
+        const defaultColor = 'rgba(var(--ur-color-on-background), 0.7)';
+        const activeColor = 'rgb(var(--ur-color-primary))';
+        return (h("div", { class: "actions" }, h("ur-button", { variant: "text", icon: this.liked ? 'thumb_up' : 'thumb_up--outlined', color: this.liked ? activeColor : defaultColor, fullWidth: true, onClick: this.handleLikeClick }, this.liked ? this.likedText : this.likeText), h("ur-button", { variant: "text", icon: "comment--outlined", color: defaultColor, fullWidth: true, onClick: this.handleCommentClick }, this.commentText)));
+    }
+    render() {
+        if (!this.post) {
+            return null;
+        }
+        return (h(Host, null, h("div", { class: "post-detail" }, this.renderHeader(), this.renderContent(), this.renderStats(), h("div", { class: "divider" }), this.renderActions(), h("div", { class: "divider" }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "initialMediaIndex": ["onInitialMediaIndexChange"]
+    }; }
+};
+UrPostDetail.style = urPostDetailCss;
+
+export { UrPostDetail as ur_post_detail };