@streamplace/components 0.7.9 → 0.7.13

package/dist/components/chat/chat-box.js

@@ -190,6 +190,14 @@ function ChatBox({ isPopout, chatBoxStyle, emojiData, setIsChatVisible, }) {
             reply: replyTo || undefined,
         });
         setSubmitting(false);
+        // if we press "send" button, we want the same action as pressing "Enter"
+        // if we're already focused no need to do extra work
+        if (textAreaRef.current && !textAreaRef.current.isFocused()) {
+            textAreaRef.current.focus();
+            requestAnimationFrame(() => {
+                textAreaRef.current?.focus();
+            });
+        }
     };
     (0, react_2.useEffect)(() => {
         if (replyTo && textAreaRef.current) {
@@ -227,7 +235,10 @@ function ChatBox({ isPopout, chatBoxStyle, emojiData, setIsChatVisible, }) {
                             bottom: "100%",
                             left: 0,
                             zIndex: 2001,
-                        }, children: (0, jsx_runtime_1.jsx)(react_1.default, { data: emojiData, onEmojiSelect: (e) => setMessage(message + e.native) }) })] })), (0, jsx_runtime_1.jsxs)(__1.View, { style: [atoms_1.layout.flex.row, atoms_1.layout.flex.alignCenter, atoms_1.gap.all[2]], children: [(0, jsx_runtime_1.jsx)(textarea_1.Textarea, { ref: textAreaRef, numberOfLines: 1, value: message, enterKeyHint: "send", onSubmitEditing: submit, multiline: false, onChangeText: (text) => {
+                        }, children: (0, jsx_runtime_1.jsx)(react_1.default, { data: emojiData, onEmojiSelect: (e) => setMessage(message + e.native) }) })] })), (0, jsx_runtime_1.jsxs)(__1.View, { style: [atoms_1.layout.flex.row, atoms_1.layout.flex.alignCenter, atoms_1.gap.all[2]], children: [(0, jsx_runtime_1.jsx)(textarea_1.Textarea, { ref: textAreaRef, numberOfLines: 1, value: message, enterKeyHint: "send", onSubmitEditing: (e) => {
+                            e.preventDefault();
+                            submit();
+                        }, multiline: false, onChangeText: (text) => {
                             setMessage(text);
                             updateSuggestions(text);
                         }, onKeyPress: (k) => {
@@ -245,6 +256,10 @@ function ChatBox({ isPopout, chatBoxStyle, emojiData, setIsChatVisible, }) {
                                         handleEmojiSelect(filteredEmojis[highlightedIndex]);
                                     }
                                 }
+                                else {
+                                    k.preventDefault();
+                                    submit();
+                                }
                             }
                             else if (k.nativeEvent.key === "ArrowUp") {
                                 if (showSuggestions || showEmojiSuggestions) {
@@ -269,7 +284,9 @@ function ChatBox({ isPopout, chatBoxStyle, emojiData, setIsChatVisible, }) {
                                     setShowEmojiSuggestions(false);
                                 }
                             }
-                        }, style: [chatBoxStyle] }), (0, jsx_runtime_1.jsx)(__1.Button, { disabled: submitting, variant: "secondary", style: { borderRadius: 16, height: 36, minWidth: 80 }, onPress: submit, children: submitting ? (0, jsx_runtime_1.jsx)(__1.Loader, {}) : "Send" })] }), showSuggestions && ((0, jsx_runtime_1.jsx)(mention_suggestions_1.MentionSuggestions, { authors: filteredAuthors || new Map(), highlightedIndex: highlightedIndex, onSelect: handleMentionSelect })), showEmojiSuggestions && ((0, jsx_runtime_1.jsx)(emoji_suggestions_1.EmojiSuggestions, { emojis: filteredEmojis, highlightedIndex: highlightedIndex, onSelect: handleEmojiSelect })), react_native_1.Platform.OS === "web" && ((0, jsx_runtime_1.jsxs)(__1.View, { style: [
+                        }, style: [chatBoxStyle], 
+                        // "submit" won't blur on enter
+                        submitBehavior: "submit", placeholder: "Type a message..." }), (0, jsx_runtime_1.jsx)(__1.Button, { disabled: submitting, variant: "secondary", style: { borderRadius: 16, height: 36, minWidth: 80 }, onPress: submit, children: submitting ? (0, jsx_runtime_1.jsx)(__1.Loader, {}) : "Send" })] }), showSuggestions && ((0, jsx_runtime_1.jsx)(mention_suggestions_1.MentionSuggestions, { authors: filteredAuthors || new Map(), highlightedIndex: highlightedIndex, onSelect: handleMentionSelect })), showEmojiSuggestions && ((0, jsx_runtime_1.jsx)(emoji_suggestions_1.EmojiSuggestions, { emojis: filteredEmojis, highlightedIndex: highlightedIndex, onSelect: handleEmojiSelect })), react_native_1.Platform.OS === "web" && ((0, jsx_runtime_1.jsxs)(__1.View, { style: [
                     atoms_1.layout.flex.row,
                     atoms_1.mb[2],
                     atoms_1.gap.all[2],

package/dist/components/chat/chat-message.js

@@ -51,22 +51,30 @@ exports.RenderChatMessage = (0, react_1.memo)(function RenderChatMessage({ item,
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.replyTo && showReply && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                     atoms_1.gap.all[2],
                     ui_1.layout.flex.row,
-                    atoms_1.w.percent[100],
+                    { minWidth: 0, maxWidth: "100%" },
                     atoms_1.borders.left.width.medium,
                     atoms_1.borders.left.color.gray[700],
                     atoms_1.ml[4],
                     atoms_1.pl[4],
                     atoms_1.opacity[80],
-                ], children: (0, jsx_runtime_1.jsxs)(text_1.Text, { numberOfLines: 1, style: [atoms_1.flex.shrink[1], atoms_1.mr[4]], children: [(0, jsx_runtime_1.jsxs)(text_1.Text, { style: {
+                ], children: (0, jsx_runtime_1.jsxs)(text_1.Text, { numberOfLines: 1, style: [
+                        atoms_1.flex.shrink[1],
+                        atoms_1.mr[4],
+                        { minWidth: 0, overflow: "hidden" },
+                    ], children: [(0, jsx_runtime_1.jsxs)(text_1.Text, { style: {
                                 color: getRgbColor(item.replyTo.chatProfile.color),
                                 fontWeight: "thin",
                             }, children: ["@", item.replyTo.author.handle] }), " ", (0, jsx_runtime_1.jsx)(text_1.Text, { style: {
                                 color: ui_1.colors.gray[300],
                                 fontStyle: "italic",
-                            }, children: item.replyTo.record.text })] }) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [atoms_1.gap.all[2], ui_1.layout.flex.row, atoms_1.w.percent[100]], children: [showTime && ((0, jsx_runtime_1.jsx)(text_1.Text, { style: {
+                            }, children: item.replyTo.record.text })] }) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                    atoms_1.gap.all[2],
+                    ui_1.layout.flex.row,
+                    { minWidth: 0, maxWidth: "100%" },
+                ], children: [showTime && ((0, jsx_runtime_1.jsx)(text_1.Text, { style: {
                             fontVariant: ["tabular-nums"],
                             color: ui_1.colors.gray[400],
-                        }, children: formatTime(item.record.createdAt) })), (0, jsx_runtime_1.jsxs)(text_1.Text, { weight: "bold", color: "default", style: [atoms_1.flex.shrink[1]], children: [(0, jsx_runtime_1.jsxs)(text_1.Text, { style: [
+                        }, children: formatTime(item.record.createdAt) })), (0, jsx_runtime_1.jsxs)(text_1.Text, { weight: "bold", color: "default", style: [atoms_1.flex.shrink[1], { minWidth: 0, overflow: "hidden" }], children: [(0, jsx_runtime_1.jsxs)(text_1.Text, { style: [
                                     {
                                         cursor: "pointer",
                                         color: getRgbColor(item.chatProfile?.color),

package/dist/components/chat/chat.js

@@ -51,6 +51,8 @@ const ActionsBar = (0, react_1.memo)(({ item, visible, hoverTimeoutRef, }) => {
                 padding: 1,
                 gap: 4,
                 zIndex: 10,
+                maxWidth: 120,
+                flexShrink: 0,
             },
         ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => setReply(item), style: [
                     {
@@ -110,9 +112,14 @@ const ChatLine = (0, react_1.memo)(({ item, canModerate, }) => {
         return ((0, jsx_runtime_1.jsxs)(__1.View, { style: [
                 atoms_1.py[1],
                 atoms_1.px[2],
-                { position: "relative", borderRadius: 8 },
+                {
+                    position: "relative",
+                    borderRadius: 8,
+                    minWidth: 0,
+                    maxWidth: "100%",
+                },
                 isHovered && atoms_1.bg.gray[950],
-            ], onPointerEnter: handleHoverIn, onPointerLeave: handleHoverOut, children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { children: (0, jsx_runtime_1.jsx)(chat_message_1.RenderChatMessage, { item: item }) }), (0, jsx_runtime_1.jsx)(ActionsBar, { item: item, visible: isHovered, hoverTimeoutRef: hoverTimeoutRef })] }));
+            ], onPointerEnter: handleHoverIn, onPointerLeave: handleHoverOut, children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [{ minWidth: 0, maxWidth: "100%" }], children: (0, jsx_runtime_1.jsx)(chat_message_1.RenderChatMessage, { item: item }) }), (0, jsx_runtime_1.jsx)(ActionsBar, { item: item, visible: isHovered, hoverTimeoutRef: hoverTimeoutRef })] }));
     }
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ReanimatedSwipeable_1.default, { containerStyle: [atoms_1.py[1]], friction: 2, enableTrackpadTwoFingerGesture: true, rightThreshold: 40, leftThreshold: 40, renderRightActions: react_native_1.Platform.OS === "android" ? undefined : RightAction, renderLeftActions: react_native_1.Platform.OS === "android" ? undefined : LeftAction, overshootFriction: 9, ref: (ref) => {
                 swipeableRef.current = ref;
@@ -133,6 +140,10 @@ const ChatLine = (0, react_1.memo)(({ item, canModerate, }) => {
 function Chat({ shownMessages = SHOWN_MSGS, style: propsStyle, canModerate = false, ...props }) {
     const chat = (0, __1.useChat)();
     if (!chat)
-        return ((0, jsx_runtime_1.jsx)(__1.View, { style: [atoms_1.flex.shrink[1]], children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Loading chaat..." }) }));
-    return ((0, jsx_runtime_1.jsxs)(__1.View, { style: [atoms_1.flex.shrink[1]].concat(propsStyle || []), children: [(0, jsx_runtime_1.jsx)(react_native_1.FlatList, { style: [atoms_1.flex.grow[1], atoms_1.flex.shrink[1], atoms_1.w.percent[100]], data: chat.slice(0, shownMessages), inverted: true, keyExtractor: keyExtractor, renderItem: ({ item, index }) => ((0, jsx_runtime_1.jsx)(ChatLine, { item: item, canModerate: canModerate })), removeClippedSubviews: true, maxToRenderPerBatch: 10, initialNumToRender: 10, updateCellsBatchingPeriod: 50 }), (0, jsx_runtime_1.jsx)(mod_view_1.ModView, {})] }));
+        return ((0, jsx_runtime_1.jsx)(__1.View, { style: [atoms_1.flex.shrink[1], { minWidth: 0, maxWidth: "100%" }], children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Loading chaat..." }) }));
+    return ((0, jsx_runtime_1.jsxs)(__1.View, { style: [atoms_1.flex.shrink[1], { minWidth: 0, maxWidth: "100%" }].concat(propsStyle || []), children: [(0, jsx_runtime_1.jsx)(react_native_1.FlatList, { style: [
+                    atoms_1.flex.grow[1],
+                    atoms_1.flex.shrink[1],
+                    { minWidth: 0, maxWidth: "100%" },
+                ], data: chat.slice(0, shownMessages), inverted: true, keyExtractor: keyExtractor, renderItem: ({ item, index }) => ((0, jsx_runtime_1.jsx)(ChatLine, { item: item, canModerate: canModerate })), removeClippedSubviews: true, maxToRenderPerBatch: 10, initialNumToRender: 10, updateCellsBatchingPeriod: 50 }), (0, jsx_runtime_1.jsx)(mod_view_1.ModView, {})] }));
 }

package/dist/components/chat/mod-view.js

@@ -20,6 +20,9 @@ exports.ModView = (0, react_1.forwardRef)(() => {
     let [messageRemoved, setMessageRemoved] = (0, react_1.useState)(false);
     let { createBlock, isLoading: isBlockLoading } = (0, block_1.useCreateBlockRecord)();
     let { createHideChat, isLoading: isHideLoading } = (0, block_1.useCreateHideChatRecord)();
+    const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
+    const setReportSubject = (0, player_store_1.usePlayerStore)((x) => x.setReportSubject);
+    const setModMessage = (0, player_store_1.usePlayerStore)((x) => x.setModMessage);
     // get the channel did
     const channelId = (0, player_store_1.usePlayerStore)((state) => state.src);
     // get the logged in user's identity
@@ -27,18 +30,23 @@ exports.ModView = (0, react_1.forwardRef)(() => {
     if (!agent?.did) {
         (0, jsx_runtime_1.jsx)(ui_1.View, { style: [ui_1.layout.flex.row, ui_1.layout.flex.alignCenter, atoms_1.gap.all[2]], children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Log in to submit mod actions" }) });
     }
+    const cleanup = () => {
+        setModMessage(null);
+    };
     (0, react_1.useEffect)(() => {
         if (message) {
-            console.log("opening mod view");
             setMessageRemoved(false);
             triggerRef.current?.open();
         }
         else {
-            console.log("closing mod view");
             triggerRef.current?.close();
         }
     }, [message]);
-    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { style: [ui_1.layout.flex.row, ui_1.layout.flex.alignCenter, atoms_1.gap.all[2], atoms_1.w[80]], children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { ref: triggerRef, children: (0, jsx_runtime_1.jsx)(ui_1.View, {}) }), (0, jsx_runtime_1.jsx)(ui_1.ResponsiveDropdownMenuContent, { children: message && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { children: (0, jsx_runtime_1.jsx)(ui_1.View, { style: [
+    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { style: [ui_1.layout.flex.row, ui_1.layout.flex.alignCenter, atoms_1.gap.all[2], atoms_1.w[80]], onOpenChange: (isOpen) => {
+            if (!isOpen) {
+                cleanup();
+            }
+        }, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { ref: triggerRef, children: (0, jsx_runtime_1.jsx)(ui_1.View, {}) }), (0, jsx_runtime_1.jsx)(ui_1.ResponsiveDropdownMenuContent, { children: message && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { children: (0, jsx_runtime_1.jsx)(ui_1.View, { style: [
                                         ui_1.layout.flex.column,
                                         atoms_1.mr[5],
                                         { gap: 6, maxWidth: "100%" },
@@ -66,12 +74,10 @@ exports.ModView = (0, react_1.forwardRef)(() => {
                                     }, children: message.author.did === agent?.did ? ((0, jsx_runtime_1.jsx)(ui_1.Text, { color: "muted", children: "Block yourself (you can't block yourself)" })) : ((0, jsx_runtime_1.jsx)(ui_1.Text, { color: "destructive", children: isBlockLoading
                                             ? "Blocking..."
                                             : `Block user @${message.author.handle} from this channel` })) })] })), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuGroup, { title: `User actions`, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
-                                        react_native_1.Linking.openURL(`https://${BSKY_FRONTEND_DOMAIN}/profile/${channelId}`);
-                                    }, children: (0, jsx_runtime_1.jsxs)(ui_1.Text, { color: "primary", children: ["View user on ", BSKY_FRONTEND_DOMAIN] }) }), (0, jsx_runtime_1.jsx)(ReportButton, { message: message })] })] })) })] }));
+                                        react_native_1.Linking.openURL(`https://${BSKY_FRONTEND_DOMAIN}/profile/${message.author.handle}`);
+                                    }, children: (0, jsx_runtime_1.jsxs)(ui_1.Text, { color: "primary", children: ["View user on ", BSKY_FRONTEND_DOMAIN] }) }), (0, jsx_runtime_1.jsx)(ReportButton, { message: message, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject })] })] })) })] }));
 });
-function ReportButton({ message, }) {
-    const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
-    const setReportSubject = (0, player_store_1.usePlayerStore)((x) => x.setReportSubject);
+function ReportButton({ message, setReportModalOpen, setReportSubject, }) {
     const { onOpenChange } = (0, dropdown_menu_1.useRootContext)();
     return ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
             if (!message)
@@ -82,6 +88,7 @@ function ReportButton({ message, }) {
                 $type: "com.atproto.repo.strongRef",
                 uri: message.uri,
                 cid: message.cid,
+                context: message,
             });
         }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { color: "warning", children: "Report chat..." }) }));
 }

package/dist/components/dashboard/chat-panel.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ChatPanel;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const emoji_data_json_1 = tslib_1.__importDefault(require("../../assets/emoji-data.json"));
+const zero = tslib_1.__importStar(require("../../ui"));
+const chat_1 = require("../chat/chat");
+const chat_box_1 = require("../chat/chat-box");
+const { flex, bg, r, borders, p, px, py, text, layout } = zero;
+function ChatPanel({ isLive, isConnected, messagesPerMinute = 0, canModerate = false, shownMessages = 50, }) {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+            flex.values[1],
+            bg.neutral[900],
+            borders.width.thin,
+            borders.color.neutral[700],
+            layout.flex.column,
+            r.lg,
+        ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                    layout.flex.row,
+                    layout.flex.spaceBetween,
+                    layout.flex.alignCenter,
+                    borders.bottom.width.thin,
+                    borders.bottom.color.neutral[700],
+                    p[4],
+                ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontSize: 18, fontWeight: "600" }], children: "Chat" }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                    { width: 6, height: 6, borderRadius: 3 },
+                                    isLive && isConnected ? bg.green[500] : bg.gray[500],
+                                ] }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [text.gray[400], { fontSize: 12, marginLeft: 8 }], children: [messagesPerMinute, " msg/min"] })] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [flex.values[1], px[2], { minHeight: 0 }], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [flex.values[1], { minHeight: 0 }], children: (0, jsx_runtime_1.jsx)(chat_1.Chat, { canModerate: canModerate, shownMessages: shownMessages }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [{ flexShrink: 0 }], children: (0, jsx_runtime_1.jsx)(chat_box_1.ChatBox, { emojiData: emoji_data_json_1.default, chatBoxStyle: [
+                                bg.gray[700],
+                                borders.width.thin,
+                                borders.color.gray[600],
+                                r.md,
+                                p[3],
+                                !isConnected && { opacity: 0.6 },
+                            ] }) })] })] }));
+}

package/dist/components/dashboard/header.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Header;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_native_1 = require("lucide-react-native");
+const react_native_1 = require("react-native");
+const zero = tslib_1.__importStar(require("../../ui"));
+const { bg, r, borders, px, py, text, layout, gap } = zero;
+function MetricItem({ icon: Icon, label, value, status }) {
+    const statusColors = {
+        good: text.green[400],
+        warning: text.yellow[400],
+        error: text.red[400],
+    };
+    const statusColor = status ? statusColors[status] : text.gray[300];
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[2]], children: [(0, jsx_runtime_1.jsx)(Icon, { size: 16, color: "#9ca3af" }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.column], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[400], { fontSize: 11, fontWeight: "500" }], children: label }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [statusColor, { fontSize: 13, fontWeight: "600" }], children: value })] })] }));
+}
+function StatusIndicator({ status, isLive }) {
+    const getStatusColor = () => {
+        if (!isLive)
+            return bg.gray[500];
+        switch (status) {
+            case "excellent":
+                return bg.green[500];
+            case "good":
+                return bg.yellow[500];
+            case "poor":
+                return bg.orange[500];
+            case "offline":
+                return bg.red[500];
+            default:
+                return bg.gray[500];
+        }
+    };
+    const getStatusText = () => {
+        if (!isLive)
+            return "OFFLINE";
+        switch (status) {
+            case "excellent":
+                return "EXCELLENT";
+            case "good":
+                return "GOOD";
+            case "poor":
+                return "POOR";
+            case "offline":
+                return "OFFLINE";
+            default:
+                return "UNKNOWN";
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[2]], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                    { width: 8, height: 8, borderRadius: 4 },
+                    getStatusColor(),
+                    !isLive && { opacity: 0.6 },
+                ] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                    text.white,
+                    { fontSize: 12, fontWeight: "700", letterSpacing: 0.5 },
+                    !isLive && text.gray[400],
+                ], children: getStatusText() })] }));
+}
+function Header({ isLive, streamTitle = "Live Stream", viewers = 0, uptime = "00:00:00", bitrate = "0 mbps", timeBetweenSegments = 0, connectionStatus = "offline", }) {
+    const getConnectionQuality = () => {
+        if (timeBetweenSegments <= 1500)
+            return "good";
+        if (timeBetweenSegments <= 3000)
+            return "warning";
+        return "error";
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+            px[4],
+            py[3],
+            r.lg,
+            layout.flex.row,
+            layout.flex.spaceBetween,
+            bg.neutral[900],
+            borders.width.thin,
+            borders.color.neutral[700],
+        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[4]], children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontSize: 18, fontWeight: "600" }], children: streamTitle }), (0, jsx_runtime_1.jsx)(StatusIndicator, { status: connectionStatus, isLive: isLive })] }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[6]], children: [isLive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MetricItem, { icon: lucide_react_native_1.Users, label: "Viewers", value: viewers.toLocaleString() }), (0, jsx_runtime_1.jsx)(MetricItem, { icon: lucide_react_native_1.Car, label: "Bitrate", value: bitrate })] })), !isLive && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[2]], children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.Radio, { size: 16, color: "#6b7280" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[400], { fontSize: 13 }], children: "Stream offline" })] }))] })] }));
+}

package/dist/components/dashboard/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Problems = exports.ModActions = exports.InformationWidget = exports.Header = exports.ChatPanel = void 0;
+const tslib_1 = require("tslib");
+var chat_panel_1 = require("./chat-panel");
+Object.defineProperty(exports, "ChatPanel", { enumerable: true, get: function () { return tslib_1.__importDefault(chat_panel_1).default; } });
+var header_1 = require("./header");
+Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return tslib_1.__importDefault(header_1).default; } });
+var information_widget_1 = require("./information-widget");
+Object.defineProperty(exports, "InformationWidget", { enumerable: true, get: function () { return tslib_1.__importDefault(information_widget_1).default; } });
+var mod_actions_1 = require("./mod-actions");
+Object.defineProperty(exports, "ModActions", { enumerable: true, get: function () { return tslib_1.__importDefault(mod_actions_1).default; } });
+var problems_1 = require("./problems");
+Object.defineProperty(exports, "Problems", { enumerable: true, get: function () { return tslib_1.__importDefault(problems_1).default; } });

package/dist/components/dashboard/information-widget.js

@@ -0,0 +1,234 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = InformationWidget;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_native_1 = require("lucide-react-native");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_svg_1 = tslib_1.__importStar(require("react-native-svg"));
+const livestream_store_1 = require("../../livestream-store");
+const zero = tslib_1.__importStar(require("../../ui"));
+const ui_1 = require("../ui");
+const BITRATE_HISTORY_LENGTH = 30;
+const { bg, r, borders, px, py, text, layout, gap, flex, p } = zero;
+function InformationWidget({ embedMode = false, wideMode, // Optional override
+showChart = true, }) {
+    const [bitrateHistory, setBitrateHistory] = (0, react_1.useState)(Array.from({ length: BITRATE_HISTORY_LENGTH }, () => 0));
+    const [showViewers, setShowViewers] = (0, react_1.useState)(false);
+    const [componentWidth, setComponentWidth] = (0, react_1.useState)(220);
+    const [componentHeight, setComponentHeight] = (0, react_1.useState)(400);
+    const [streamStartTime, setStreamStartTime] = (0, react_1.useState)(null);
+    const [layoutMeasured, setLayoutMeasured] = (0, react_1.useState)(false);
+    const isWideMode = wideMode !== undefined ? wideMode : layoutMeasured && componentWidth > 400;
+    const isCompactHeight = layoutMeasured && componentHeight < 350;
+    const seg = (0, livestream_store_1.useSegment)();
+    const livestream = (0, livestream_store_1.useLivestreamStore)((x) => x.livestream);
+    const viewers = (0, livestream_store_1.useViewers)();
+    const getBitrate = (0, react_1.useCallback)(() => {
+        if (!seg?.size || !seg?.duration)
+            return 0;
+        const kbps = (seg.size * 8) / ((seg.duration || 1000000000) / 1000000000) / 1000;
+        return kbps;
+    }, [seg?.size, seg?.duration]);
+    const getMediaInfo = (0, react_1.useMemo)(() => {
+        const videoTrack = seg?.video?.[0];
+        const audioTrack = seg?.audio?.[0];
+        return {
+            resolution: videoTrack?.width && videoTrack?.height
+                ? `${videoTrack.width}x${videoTrack.height}`
+                : "Unknown",
+            fps: videoTrack?.framerate
+                ? `${(videoTrack.framerate.num / videoTrack.framerate.den).toFixed(2)} FPS`
+                : "Unknown",
+            videoCodec: videoTrack?.codec
+                ? videoTrack.codec.toUpperCase()
+                : "Unknown",
+        };
+    }, [seg?.video, seg?.audio]);
+    const currentBitrate = getBitrate();
+    (0, react_1.useEffect)(() => {
+        setBitrateHistory((prev) => [...prev.slice(1), currentBitrate]);
+    }, [currentBitrate]);
+    (0, react_1.useEffect)(() => {
+        if (seg?.startTime && !streamStartTime) {
+            setStreamStartTime(new Date(seg.startTime));
+        }
+    }, [seg?.startTime, streamStartTime]);
+    const getBitrateStatus = () => {
+        if (currentBitrate > 2000)
+            return "good";
+        if (currentBitrate > 1000)
+            return "warning";
+        if (currentBitrate > 0)
+            return "error";
+        return "neutral";
+    };
+    const getConnectionStatus = () => {
+        if (!seg)
+            return "error";
+        if (currentBitrate > 1500)
+            return "good";
+        if (currentBitrate > 500)
+            return "warning";
+        return "error";
+    };
+    const avgBitrate = bitrateHistory.length > 0
+        ? bitrateHistory.reduce((a, b) => a + b, 0) / bitrateHistory.length
+        : 0;
+    const peakBitrate = Math.max(...bitrateHistory, 0);
+    const uptimeMinutes = streamStartTime
+        ? Math.floor((Date.now() - streamStartTime.getTime()) / 60000)
+        : 0;
+    const estimatedLatency = seg?.duration
+        ? Math.floor((seg.duration / 1000000000) * 2)
+        : 0;
+    const displayBitrate = `${(currentBitrate / 1000).toFixed(2)} Mbps`;
+    const displayResolution = getMediaInfo.resolution;
+    const displayFps = getMediaInfo.fps;
+    const streamTitle = livestream?.record?.title || "Untitled Stream";
+    const viewerCount = viewers ?? 0;
+    const handleLayout = (0, react_1.useCallback)((event) => {
+        const { width, height } = event.nativeEvent.layout;
+        console.log("InformationWidget onLayout - size:", `${width}x${height}`);
+        if (width > 0 && height > 0) {
+            setComponentWidth(width);
+            setComponentHeight(height);
+            setLayoutMeasured(true);
+        }
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { onLayout: handleLayout, style: [
+            embedMode
+                ? { backgroundColor: "rgba(23, 23, 23, 0.9)" }
+                : bg.neutral[900],
+            embedMode ? undefined : borders.width.thin,
+            embedMode ? undefined : borders.color.neutral[700],
+            r.lg,
+            px[4],
+            py[4],
+            gap.all[6],
+            flex.values[1],
+            {
+                minWidth: isWideMode ? 500 : 220,
+                width: "100%",
+            },
+        ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                    layout.flex.row,
+                    layout.flex.spaceBetween,
+                    layout.flex.alignCenter,
+                ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[1]], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontSize: 18, fontWeight: "700" }], numberOfLines: 1, children: "Stream Health" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                    {
+                                        width: 8,
+                                        height: 8,
+                                        borderRadius: 4,
+                                        backgroundColor: getConnectionStatus() === "good"
+                                            ? "#22c55e"
+                                            : getConnectionStatus() === "warning"
+                                                ? "#f59e0b"
+                                                : "#ef4444",
+                                    },
+                                ] })] }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: () => setShowViewers(!showViewers), style: [
+                            layout.flex.column,
+                            layout.flex.alignCenter,
+                            gap.all[1],
+                            { minWidth: 120 },
+                        ], children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[2]], children: [showViewers ? ((0, jsx_runtime_1.jsx)(lucide_react_native_1.Eye, { size: 14, color: "#9ca3af" })) : ((0, jsx_runtime_1.jsx)(lucide_react_native_1.EyeClosed, { size: 14, color: "#9ca3af" })), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [
+                                        text.white,
+                                        { fontSize: 16, fontWeight: "600", textAlign: "center" },
+                                    ], children: [showViewers ? `${viewerCount}` : "...", " viewer", showViewers && viewerCount !== 1 ? "s" : ""] })] }) })] }), isWideMode ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[3]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, gap.all[2]], children: [(0, jsx_runtime_1.jsx)(ui_1.InfoBox, { icon: lucide_react_native_1.Car, label: "Bitrate", value: displayBitrate, status: getBitrateStatus() }), (0, jsx_runtime_1.jsx)(ui_1.InfoBox, { icon: lucide_react_native_1.Monitor, label: "Resolution", value: displayResolution }), (0, jsx_runtime_1.jsx)(ui_1.InfoBox, { icon: lucide_react_native_1.Video, label: "FPS", value: displayFps })] }), showChart && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[2]], children: [!isCompactHeight && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                    layout.flex.row,
+                                    layout.flex.spaceBetween,
+                                    layout.flex.alignCenter,
+                                ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                            text.gray[200],
+                                            { fontSize: 14, fontWeight: "600" },
+                                        ], children: "Live Performance" }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, gap.all[4]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.alignCenter], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                                            text.gray[400],
+                                                            { fontSize: 11, fontWeight: "500" },
+                                                        ], children: "AVG" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                                            text.white,
+                                                            { fontSize: 13, fontWeight: "600" },
+                                                        ], children: avgBitrate > 0
+                                                            ? `${(avgBitrate / 1000).toFixed(1)}M`
+                                                            : "0M" })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.alignCenter], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                                            text.gray[400],
+                                                            { fontSize: 11, fontWeight: "500" },
+                                                        ], children: "PEAK" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                                            text.white,
+                                                            { fontSize: 13, fontWeight: "600" },
+                                                        ], children: peakBitrate > 0
+                                                            ? `${(peakBitrate / 1000).toFixed(1)}M`
+                                                            : "0M" })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.alignCenter], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                                            text.gray[400],
+                                                            { fontSize: 11, fontWeight: "500" },
+                                                        ], children: "CAPTURED" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                                            text.white,
+                                                            { fontSize: 13, fontWeight: "600" },
+                                                        ], children: uptimeMinutes > 60
+                                                            ? `${Math.floor(uptimeMinutes / 60)}h ${uptimeMinutes % 60}m`
+                                                            : `${uptimeMinutes}m` })] })] })] })), (0, jsx_runtime_1.jsx)(BitrateChart, { data: bitrateHistory, width: componentWidth - 40, height: 120 })] }))] })) : ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[3]], children: [!isCompactHeight && ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { onPress: () => setShowViewers(!showViewers), style: [
+                            layout.flex.row,
+                            layout.flex.spaceBetween,
+                            layout.flex.alignCenter,
+                            py[2],
+                        ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[3]], children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.Eye, { size: 16, color: "#9ca3af" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[300], { fontSize: 13, fontWeight: "500" }], children: "Viewers" })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[2]], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                            showViewers ? text.green[400] : text.white,
+                                            { fontSize: 13, fontWeight: "600" },
+                                        ], children: showViewers ? `${viewerCount} watching` : "•••" }), showViewers ? ((0, jsx_runtime_1.jsx)(lucide_react_native_1.ChevronUp, { size: 14, color: "#9ca3af" })) : ((0, jsx_runtime_1.jsx)(lucide_react_native_1.ChevronDown, { size: 14, color: "#9ca3af" }))] })] })), showChart && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[2]], children: [!isCompactHeight && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                    layout.flex.row,
+                                    layout.flex.spaceBetween,
+                                    layout.flex.alignCenter,
+                                ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                            text.gray[200],
+                                            { fontSize: 14, fontWeight: "600" },
+                                        ], children: "Performance" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                            text.gray[400],
+                                            { fontSize: 11, fontWeight: "500" },
+                                        ], children: avgBitrate > 0
+                                            ? `AVG ${(avgBitrate / 1000).toFixed(1)}M`
+                                            : "No data" })] })), (0, jsx_runtime_1.jsx)(BitrateChart, { data: bitrateHistory, width: componentWidth - 40, height: isCompactHeight ? 80 : 120 })] })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[1]], children: [(0, jsx_runtime_1.jsx)(ui_1.InfoRow, { icon: lucide_react_native_1.Signal, label: "Connection", value: getConnectionStatus() === "good"
+                                    ? "Excellent"
+                                    : getConnectionStatus() === "warning"
+                                        ? "Good"
+                                        : "Poor", status: getConnectionStatus() }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[1], layout.flex.row], children: [(0, jsx_runtime_1.jsx)(ui_1.InfoBox, { icon: lucide_react_native_1.Zap, label: "Bitrate", value: displayBitrate, status: getBitrateStatus() }), (0, jsx_runtime_1.jsx)(ui_1.InfoBox, { icon: lucide_react_native_1.Video, label: "FPS", value: displayFps })] })] })] }))] }));
+}
+function BitrateChart({ data, width, height, }) {
+    const maxDataValue = Math.max(...data, 1);
+    const minDataValue = Math.min(...data);
+    const getSmartRange = (max) => {
+        if (max <= 1000)
+            return { min: 0, max: 1000, step: 500 };
+        if (max <= 2000)
+            return { min: 1000, max: 2000, step: 1000 };
+        if (max <= 7000)
+            return { min: 4000, max: 7000, step: 1500 };
+        if (max <= 10000)
+            return { min: 4000, max: 10000, step: 5000 };
+        const roundedMax = Math.ceil(max / 5000) * 5000;
+        return { min: 0, max: roundedMax, step: roundedMax / 2 };
+    };
+    const { min: minValue, max: maxValue, step } = getSmartRange(maxDataValue);
+    const range = maxValue - minValue;
+    const chartWidth = width - 40;
+    const chartStartX = 40;
+    const verticalPadding = 10;
+    const chartHeight = height - verticalPadding * 2;
+    const points = data
+        .map((value, index) => {
+        const x = chartStartX + (index / (data.length - 1)) * chartWidth;
+        // Clamp value to chart range and plot against the smart scale
+        const clampedValue = Math.max(minValue, Math.min(maxValue, value));
+        const y = verticalPadding +
+            chartHeight -
+            ((clampedValue - minValue) / range) * chartHeight;
+        return `${x},${y}`;
+    })
+        .join(" ");
+    const pathData = `M ${points.replace(/ /g, " L ")}`;
+    const ticks = [
+        { value: minValue, y: height - verticalPadding },
+        { value: minValue + step, y: height / 2 },
+        { value: maxValue, y: verticalPadding },
+    ];
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { height, width, marginVertical: 8 }, children: (0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { width: width, height: height, children: [ticks.map((tick, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Line, { x1: chartStartX, y1: tick.y, x2: width, y2: tick.y, stroke: "rgba(255,255,255,0.1)", strokeWidth: "1" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Text, { x: "35", y: tick.y + 4, fontSize: 10, fontFamily: "sans-serif", fill: "#9ca3af", textAnchor: "end", children: (tick.value / 1000).toLocaleString() })] }, index))), (0, jsx_runtime_1.jsx)(react_native_svg_1.Text, { x: 12, y: height / 2, transform: `rotate(-90, 12, ${height / 2})`, fontSize: 10, fontFamily: "sans-serif", fill: "#9ca3af", textAnchor: "middle", children: "mbits/s" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: pathData, stroke: "#22c55e", strokeWidth: "2", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" })] }) }));
+}

package/dist/components/dashboard/mod-actions.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ModActions;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_native_1 = require("lucide-react-native");
+const react_native_1 = require("react-native");
+const zero = tslib_1.__importStar(require("../../ui"));
+const { flex, bg, r, borders, p, text, layout, gap, mb } = zero;
+const defaultActions = [
+    {
+        icon: lucide_react_native_1.Shield,
+        label: "Ban User",
+        color: "red",
+        action: () => console.log("Ban user action"),
+    },
+    {
+        icon: lucide_react_native_1.MessageCircle,
+        label: "Timeout",
+        color: "yellow",
+        action: () => console.log("Timeout user action"),
+    },
+    {
+        icon: lucide_react_native_1.Eye,
+        label: "Monitor",
+        color: "blue",
+        action: () => console.log("Monitor stream action"),
+    },
+    {
+        icon: lucide_react_native_1.AlertTriangle,
+        label: "Report",
+        color: "orange",
+        action: () => console.log("Report content action"),
+    },
+];
+function ModActions({ isLive, isConnected, messageCount = 0, actions = defaultActions, }) {
+    const canModerate = isLive && isConnected;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+            flex.values[1],
+            bg.gray[800],
+            r[3],
+            borders.width.thin,
+            borders.color.gray[700],
+            p[4],
+        ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                    layout.flex.row,
+                    layout.flex.spaceBetween,
+                    layout.flex.alignCenter,
+                    mb[4],
+                ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontSize: 18, fontWeight: "600" }], children: "Moderation" }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [text.gray[400], { fontSize: 12 }], children: [messageCount, " messages"] })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [layout.flex.row, gap.all[3]], children: actions.map((action, index) => ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: [
+                        flex.grow[1],
+                        bg.gray[700],
+                        r[2],
+                        p[3],
+                        layout.flex.row,
+                        layout.flex.alignCenter,
+                        gap.all[2],
+                        borders.width.thin,
+                        borders.color.gray[600],
+                    ], disabled: !canModerate, onPress: action.action, children: [(0, jsx_runtime_1.jsx)(action.icon, { size: 20, color: canModerate ? "#ffffff" : "#6b7280" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                canModerate ? text.white : text.gray[400],
+                                { fontSize: 14, fontWeight: "500" },
+                            ], children: action.label })] }, index))) }), !canModerate && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                    text.gray[500],
+                    { fontSize: 12, textAlign: "center", marginTop: 16 },
+                ], children: !isLive
+                    ? "Moderation tools available when live"
+                    : !isConnected
+                        ? "Waiting for stream connection..."
+                        : "Moderation tools unavailable" }))] }));
+}