@streamplace/components 0.7.34 → 0.7.35

package/dist/components/dashboard/header.js

@@ -59,7 +59,7 @@ function StatusIndicator({ status, isLive }) {
                     !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", }) {
+function Header({ isLive, streamTitle = "Live Stream", viewers = 0, uptime = "00:00:00", bitrate = "0 mbps", timeBetweenSegments = 0, connectionStatus = "offline", problemsCount = 0, onProblemsPress, }) {
     const getConnectionQuality = () => {
         if (timeBetweenSegments <= 1500)
             return "good";
@@ -76,5 +76,19 @@ function Header({ isLive, streamTitle = "Live Stream", viewers = 0, uptime = "00
             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" })] }))] })] }));
+        ], 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.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[3]], children: [(0, jsx_runtime_1.jsx)(StatusIndicator, { status: connectionStatus, isLive: isLive }), problemsCount > 0 && ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onProblemsPress, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                            layout.flex.row,
+                                            layout.flex.alignCenter,
+                                            gap.all[1],
+                                            px[2],
+                                            py[1],
+                                            r.md,
+                                            bg.orange[900],
+                                            borders.width.thin,
+                                            borders.color.orange[700],
+                                            { marginVertical: -8 },
+                                        ], children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.AlertCircle, { size: 14, color: "#fb923c" }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [
+                                                    text.orange[400],
+                                                    { fontSize: 11, fontWeight: "600" },
+                                                ], children: [problemsCount, " ", problemsCount === 1 ? "Issue" : "Issues"] })] }) }))] })] }) }), (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/problems.js

@@ -8,47 +8,49 @@ const react_1 = require("react");
 const react_native_1 = require("react-native");
 const livestream_store_1 = require("../../livestream-store");
 const zero = tslib_1.__importStar(require("../../ui"));
+const ui_1 = require("../ui");
 const { bg, r, borders, p, text, layout, gap } = zero;
+const getIcon = (severity) => {
+    switch (severity) {
+        case "error":
+            return (0, jsx_runtime_1.jsx)(lucide_react_native_1.CircleX, { size: 24, color: "white" });
+        case "warning":
+            return (0, jsx_runtime_1.jsx)(lucide_react_native_1.CircleAlert, { size: 24, color: "white" });
+        case "info":
+            return (0, jsx_runtime_1.jsx)(lucide_react_native_1.Info, { size: 24, color: "white" });
+        default:
+            return (0, jsx_runtime_1.jsx)(lucide_react_native_1.Sparkle, { size: 24, color: "white" });
+    }
+};
 const Problems = ({ probs, onIgnore, }) => {
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[3]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontSize: 24, fontWeight: "bold" }], children: "Optimize Your Stream" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[300]], children: "We've found a few things that could improve your stream's reliability." })] }), probs.map((p) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[4]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[2]], children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { size: "2xl", style: [text.white, { fontWeight: "600" }], children: "Optimize Your Stream" }), (0, jsx_runtime_1.jsx)(ui_1.Text, { style: [text.gray[300]], children: "We've found a few things that could improve your stream's reliability." })] }), probs.map((p) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                         gap.all[2],
                         layout.flex.row,
                         layout.flex.alignCenter,
                         { gap: 8, alignItems: "flex-start" },
-                    ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
-                                r.sm,
-                                p[2],
+                    ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                zero.r.full,
+                                zero.p[1],
                                 {
-                                    width: 82,
-                                    textAlign: "center",
                                     backgroundColor: p.severity === "error"
                                         ? "#7f1d1d"
                                         : p.severity === "warning"
                                             ? "#7c2d12"
                                             : "#1e3a8a",
-                                    color: "white",
-                                    fontSize: 12,
                                 },
-                            ], children: p.severity }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [{ flex: 1 }, gap.all[1]], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontWeight: "600" }], children: p.code }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[400], { fontSize: 14 }], children: p.message }), p.link && ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => p.link && react_native_1.Linking.openURL(p.link), children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                            ], children: getIcon(p.severity) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [{ flex: 1 }, gap.all[1]], children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { style: [text.white, { fontWeight: "600" }], children: p.code }), (0, jsx_runtime_1.jsx)(ui_1.Text, { style: [text.gray[400], { fontSize: 14 }], children: p.message }), p.link && ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => p.link && react_native_1.Linking.openURL(p.link), children: (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: [{ color: "#3b82f6", fontSize: 14 }], children: "Learn More" }), (0, jsx_runtime_1.jsx)(lucide_react_native_1.ExternalLink, { size: 12, color: "#3b82f6" })] }) }))] })] }) }, p.message))), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onIgnore, style: [
-                    bg.blue[600],
-                    r.md,
-                    p[3],
-                    layout.flex.center,
-                    { marginTop: 16 },
-                ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontWeight: "600" }], children: "Ignore" }) })] }));
+                                        ], children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { style: [{ color: "#3b82f6", fontSize: 14 }], children: "Learn More" }), (0, jsx_runtime_1.jsx)(lucide_react_native_1.ExternalLink, { size: 12, color: "#3b82f6" })] }) }))] })] }) }, p.message))), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [layout.flex.row, layout.flex.justify.end], children: (0, jsx_runtime_1.jsx)(ui_1.Button, { onPress: onIgnore, variant: "secondary", children: (0, jsx_runtime_1.jsx)(ui_1.Text, { style: [text.white, { fontWeight: "600" }], children: "Acknowledge" }) }) })] }));
 };
-const ProblemsWrapper = ({ children, }) => {
+exports.ProblemsWrapper = (0, react_1.forwardRef)(({ children }, ref) => {
     const problems = (0, livestream_store_1.useLivestreamStore)((x) => x.problems);
     const [dismiss, setDismiss] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
-            { position: "relative", flex: 1 },
-            layout.flex.center,
-            { flexBasis: 0 },
-        ], children: [children, problems.length > 0 && !dismiss && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        setDismiss,
+    }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, problems.length > 0 && !dismiss && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                     {
                         position: "absolute",
                         top: 0,
@@ -60,15 +62,14 @@ const ProblemsWrapper = ({ children, }) => {
                     },
                     layout.flex.center,
                     { justifyContent: "flex-start" },
-                    p[8],
+                    p[12],
                 ], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
-                        bg.gray[900],
-                        borders.color.gray[700],
+                        bg.neutral[900],
+                        borders.color.neutral[700],
                         borders.width.thin,
                         r.lg,
-                        p[4],
+                        p[8],
                         { maxWidth: 700, width: "100%" },
                     ], children: (0, jsx_runtime_1.jsx)(Problems, { probs: problems, onIgnore: () => setDismiss(true) }) }) }))] }));
-};
-exports.ProblemsWrapper = ProblemsWrapper;
+});
 exports.default = Problems;

package/dist/components/mobile-player/ui/viewer-context-menu.js

@@ -6,9 +6,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const dropdown_menu_1 = require("@rn-primitives/dropdown-menu");
 const lucide_react_native_1 = require("lucide-react-native");
 const react_native_1 = require("react-native");
+const __1 = require("../../..");
 const theme_1 = require("../../../lib/theme");
 const livestream_store_1 = require("../../../livestream-store");
 const player_store_1 = require("../../../player-store/");
+const graph_1 = require("../../../streamplace-store/graph");
 const ui_1 = require("../../ui");
 function ContextMenu({ dropdownPortalContainer, }) {
     const quality = (0, player_store_1.usePlayerStore)((x) => x.selectedRendition);
@@ -21,6 +23,10 @@ function ContextMenu({ dropdownPortalContainer, }) {
     const livestream = (0, livestream_store_1.useLivestreamStore)((x) => x.livestream);
     const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
     const setReportSubject = (0, player_store_1.usePlayerStore)((x) => x.setReportSubject);
+    const { profile } = (0, __1.useLivestreamInfo)();
+    const avatars = (0, __1.useAvatars)(profile?.did ? [profile?.did] : []);
+    const ls = (0, livestream_store_1.useLivestreamStore)((x) => x.livestream);
+    let graphManager = (0, graph_1.useGraphManager)(profile?.did);
     const lowLatency = protocol === "webrtc";
     const setLowLatency = (value) => {
         setProtocol(value ? player_store_1.PlayerProtocol.WEBRTC : player_store_1.PlayerProtocol.HLS);
@@ -33,7 +39,44 @@ function ContextMenu({ dropdownPortalContainer, }) {
     const DropdownMenuContent = isMobile
         ? ui_1.ResponsiveDropdownMenuContent
         : ui_1.DropdownMenuContentWithoutPortal;
-    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Menu, { color: theme_1.colors.gray[200] }) }), (0, jsx_runtime_1.jsx)(Portal, { container: dropdownPortalContainer, children: (0, jsx_runtime_1.jsxs)(DropdownMenuContent, { side: "top", align: "end", children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Resolution", children: (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuRadioGroup, { value: quality, onValueChange: setQuality, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: "source", children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Source (Original Quality)" }) }), qualities.map((r) => ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: r.name, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: r.name }) })))] }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Advanced", children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: lowLatency, onCheckedChange: () => setLowLatency(!lowLatency), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Low Latency" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuInfo, { description: "Reduces the delay between video and chat for a more real-time experience." }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: debugInfo, onCheckedChange: () => setShowDebugInfo(!debugInfo), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Show Debug Info" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Report", children: (0, jsx_runtime_1.jsx)(ReportButton, { livestream: livestream, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject }) })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Menu, { color: theme_1.colors.gray[200] }) }), (0, jsx_runtime_1.jsx)(Portal, { container: dropdownPortalContainer, children: (0, jsx_runtime_1.jsxs)(DropdownMenuContent, { side: "top", align: "end", children: [react_native_1.Platform.OS !== "web" && ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuGroup, { title: "Streamer", children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                        __1.zero.layout.flex.row,
+                                        __1.zero.layout.flex.center,
+                                        __1.zero.gap.all[3],
+                                        { flex: 1, minWidth: 0 },
+                                    ], children: [profile?.did && avatars[profile?.did]?.avatar && ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: {
+                                                uri: avatars[profile?.did]?.avatar,
+                                            }, style: { width: 42, height: 42, borderRadius: 999 }, resizeMode: "cover" }, "avatar")), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1, minWidth: 0 }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                                        __1.zero.layout.flex.row,
+                                                        __1.zero.layout.flex.alignCenter,
+                                                        __1.zero.gap.all[2],
+                                                    ], children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => {
+                                                            if (profile?.handle) {
+                                                                const url = `https://bsky.app/profile/${profile.handle}`;
+                                                                react_native_1.Linking.openURL(url);
+                                                            }
+                                                        }, children: (0, jsx_runtime_1.jsxs)(ui_1.Text, { children: ["@", profile?.handle || "user"] }) }) }), (0, jsx_runtime_1.jsx)(ui_1.Text, { color: "muted", size: "sm", numberOfLines: 2, ellipsizeMode: "tail", children: ls?.record.title || "Stream Title" })] })] }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { disabled: graphManager.isLoading || !profile?.did, onPress: async () => {
+                                        try {
+                                            if (graphManager.isFollowing) {
+                                                await graphManager.unfollow();
+                                            }
+                                            else {
+                                                await graphManager.follow();
+                                            }
+                                        }
+                                        catch (err) {
+                                            console.error("Follow/unfollow error:", err);
+                                        }
+                                    }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { color: graphManager.isFollowing ? "destructive" : "default", children: graphManager.isLoading
+                                            ? "Loading..."
+                                            : graphManager.isFollowing
+                                                ? "Unfollow"
+                                                : "Follow" }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
+                                        if (profile?.handle) {
+                                            const url = `https://bsky.app/profile/${profile.handle}`;
+                                            react_native_1.Linking.openURL(url);
+                                        }
+                                    }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "View Profile on Bluesky" }) })] })), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Resolution", children: (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuRadioGroup, { value: quality, onValueChange: setQuality, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: "source", children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Source (Original Quality)" }) }), qualities.map((r) => ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: r.name, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: r.name }) })))] }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Advanced", children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: lowLatency, onCheckedChange: () => setLowLatency(!lowLatency), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Low Latency" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuInfo, { description: "Reduces the delay between video and chat for a more real-time experience." }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: debugInfo, onCheckedChange: () => setShowDebugInfo(!debugInfo), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Show Debug Info" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Report", children: (0, jsx_runtime_1.jsx)(ReportButton, { livestream: livestream, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject }) })] }) })] }));
 }
 function ReportButton({ livestream, setReportModalOpen, setReportSubject, }) {
     const { onOpenChange } = (0, dropdown_menu_1.useRootContext)();

package/dist/components/ui/button.js

@@ -85,7 +85,7 @@ exports.Button = (0, react_1.forwardRef)(({ variant = "primary", size = "md", ch
                         { borderRadius: zero.borderRadius.md },
                     ],
                     inner: { gap: 4 },
-                    text: zt.text.sm,
+                    text: zero.typography.universal.sm,
                 };
             case "lg":
                 return {
@@ -94,8 +94,8 @@ exports.Button = (0, react_1.forwardRef)(({ variant = "primary", size = "md", ch
                         zero.py[3],
                         { borderRadius: zero.borderRadius.md },
                     ],
-                    inner: { gap: 8 },
-                    text: zt.text.lg,
+                    inner: { gap: 12 },
+                    text: zero.typography.universal.lg,
                 };
             case "xl":
                 return {
@@ -105,17 +105,17 @@ exports.Button = (0, react_1.forwardRef)(({ variant = "primary", size = "md", ch
                         { borderRadius: zero.borderRadius.lg },
                     ],
                     inner: { gap: 12 },
-                    text: zt.text.xl,
+                    text: zero.typography.universal.xl,
                 };
             case "pill":
                 return {
                     button: [
-                        zero.px[4],
-                        zero.py[2],
+                        zero.px[2],
+                        zero.py[1],
                         { borderRadius: zero.borderRadius.full },
                     ],
                     inner: { gap: 4 },
-                    text: zt.text.sm,
+                    text: zero.typography.universal.xs,
                 };
             case "md":
             default:
@@ -126,7 +126,7 @@ exports.Button = (0, react_1.forwardRef)(({ variant = "primary", size = "md", ch
                         { borderRadius: zero.borderRadius.md },
                     ],
                     inner: { gap: 6 },
-                    text: zt.text.md,
+                    text: zero.typography.universal.sm,
                 };
         }
     }, [size, zt]);
@@ -170,6 +170,6 @@ exports.Button = (0, react_1.forwardRef)(({ variant = "primary", size = "md", ch
                 return icons.color.default;
         }
     }, [variant, icons]);
-    return ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Root, { ref: ref, disabled: disabled || loading, style: [buttonStyle, sizeStyles.button, style], ...props, children: (0, jsx_runtime_1.jsxs)(button_1.ButtonPrimitive.Content, { style: sizeStyles.inner, children: [loading && !leftIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "left", children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : leftIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "left", style: { width: iconSize, height: iconSize }, children: leftIcon })) : null, (0, jsx_runtime_1.jsx)(text_1.TextPrimitive.Root, { style: [textStyle, sizeStyles.text], children: loading && loadingText ? loadingText : children }), loading && rightIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "right", children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : rightIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "right", style: { width: iconSize, height: iconSize }, children: rightIcon })) : null] }) }));
+    return ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Root, { ref: ref, disabled: disabled || loading, style: [buttonStyle, sizeStyles.button, style], ...props, children: (0, jsx_runtime_1.jsxs)(button_1.ButtonPrimitive.Content, { style: sizeStyles.inner, children: [loading && !leftIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "left", children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : leftIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "left", children: leftIcon })) : null, (0, jsx_runtime_1.jsx)(text_1.TextPrimitive.Root, { style: [textStyle, sizeStyles.text], children: loading && loadingText ? loadingText : children }), loading && rightIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "right", children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : rightIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "right", style: { width: iconSize, height: iconSize }, children: rightIcon })) : null] }) }));
 });
 exports.Button.displayName = "Button";

package/dist/components/ui/dropdown.js

@@ -12,6 +12,7 @@ const react_native_1 = require("react-native");
 const atoms_1 = require("../../lib/theme/atoms");
 const ui_1 = require("../../ui");
 const text_1 = require("./primitives/text");
+const text_2 = require("./text");
 exports.DropdownMenu = DropdownMenuPrimitive.Root;
 exports.DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 exports.DropdownMenuPortal = DropdownMenuPrimitive.Portal;
@@ -29,7 +30,7 @@ exports.DropdownMenuBottomSheet = (0, react_1.forwardRef)(function DropdownMenuB
                 atoms_1.a.sizes.width[12],
                 atoms_1.a.sizes.height[1],
                 zt.bg.mutedForeground,
-            ], children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetView, { style: [atoms_1.px[2]], children: typeof children === "function"
+            ], children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetView, { style: [atoms_1.px[4]], children: typeof children === "function"
                     ? children({ pressed: true })
                     : children }) }) }));
 });
@@ -123,9 +124,7 @@ exports.DropdownMenuItem = (0, react_1.forwardRef)(({ inset, disabled, style, ch
                     atoms_1.py[1],
                     atoms_1.pl[2],
                     atoms_1.pr[2],
-                ], children: typeof children === "function"
-                    ? children({ pressed: true })
-                    : children }) }) }));
+                ], children: typeof children === "function" ? (children({ pressed: true })) : typeof children === "string" ? ((0, jsx_runtime_1.jsx)(text_2.Text, { style: [inset && atoms_1.gap[2], disabled && { opacity: 0.5 }], children: children })) : (children) }) }) }));
 });
 exports.DropdownMenuCheckboxItem = (0, react_1.forwardRef)(({ children, checked, ...props }, ref) => {
     const { theme } = (0, ui_1.useTheme)();
@@ -152,21 +151,27 @@ exports.DropdownMenuRadioItem = (0, react_1.forwardRef)(({ children, ...props },
 });
 exports.DropdownMenuLabel = (0, react_1.forwardRef)(({ inset, ...props }, ref) => {
     const { theme } = (0, ui_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [
+    return ((0, jsx_runtime_1.jsx)(text_2.Text, { ref: ref, style: [
             atoms_1.px[2],
             atoms_1.py[2],
             { color: theme.colors.textMuted },
             atoms_1.a.fontSize.base,
-            inset && atoms_1.gap[2],
+            (inset && atoms_1.gap[2]),
         ], ...props }));
 });
 exports.DropdownMenuSeparator = (0, react_1.forwardRef)((props, ref) => {
     const { theme } = (0, ui_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [{ height: 0.5 }, { backgroundColor: theme.colors.border }], ...props }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [
+            {
+                borderBottomWidth: 1,
+                borderBottomColor: theme.colors.border,
+                marginVertical: -0.5,
+            },
+        ], ...props }));
 });
 function DropdownMenuShortcut(props) {
     const { theme } = (0, ui_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+    return ((0, jsx_runtime_1.jsx)(text_2.Text, { style: [
             atoms_1.ml.auto,
             { color: theme.colors.textMuted },
             atoms_1.a.fontSize.sm,
@@ -176,7 +181,7 @@ function DropdownMenuShortcut(props) {
 exports.DropdownMenuGroup = (0, react_1.forwardRef)((props, ref) => {
     const { theme } = (0, ui_1.useTheme)();
     const { inset, title, children, ...rest } = props;
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [atoms_1.pt[2], inset && atoms_1.gap[2]], ref: ref, ...rest, children: [title && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [{ color: theme.colors.textMuted }, atoms_1.pb[1], atoms_1.pl[2]], children: title })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [atoms_1.pt[2], inset && atoms_1.gap[2]], ref: ref, ...rest, children: [title && ((0, jsx_runtime_1.jsx)(text_2.Text, { style: [{ color: theme.colors.textMuted }, atoms_1.pb[1], atoms_1.pl[2]], children: title })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                     { backgroundColor: theme.colors.muted },
                     react_native_1.Platform.OS === "web" ? [atoms_1.px[2], atoms_1.py[1]] : atoms_1.p[2],
                     atoms_1.gap.all[1],
@@ -185,7 +190,7 @@ exports.DropdownMenuGroup = (0, react_1.forwardRef)((props, ref) => {
 });
 exports.DropdownMenuInfo = (0, react_1.forwardRef)(({ description, ...props }, ref) => {
     const { theme } = (0, ui_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+    return ((0, jsx_runtime_1.jsx)(text_2.Text, { style: [
             { color: theme.colors.textMuted },
             atoms_1.pt[1],
             atoms_1.pl[2],

package/dist/components/ui/icons.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createThemedIcon = createThemedIcon;
+exports.Icon = Icon;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const theme_1 = require("../../lib/theme");
 // Size mapping
@@ -23,3 +24,8 @@ function createThemedIcon(IconComponent) {
         return ((0, jsx_runtime_1.jsx)(IconComponent, { size: iconSize, color: iconColor, ...restProps }));
     };
 }
+// usage of createThemedIcon
+function Icon({ icon, variant = "default", size = "md", color, ...restProps }) {
+    const ThemedIcon = createThemedIcon(icon);
+    return ((0, jsx_runtime_1.jsx)(ThemedIcon, { variant: variant, size: size, color: color, ...restProps }));
+}

package/dist/components/ui/primitives/button.js

@@ -78,7 +78,6 @@ const primitiveStyles = react_native_1.StyleSheet.create({
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "center",
-        minHeight: 44, // iOS minimum touch target
     },
     disabled: {
         opacity: 0.5,
@@ -98,12 +97,6 @@ const primitiveStyles = react_native_1.StyleSheet.create({
         alignItems: "center",
         justifyContent: "center",
     },
-    iconLeft: {
-        marginRight: 8,
-    },
-    iconRight: {
-        marginLeft: 8,
-    },
     iconDisabled: {
         opacity: 0.5,
     },

package/dist/lib/theme/tokens.js

@@ -580,52 +580,61 @@ exports.typography = {
         },
     },
     // Universal typography scale
+    // Atkinson's center is weird so the marginBottom is there to correct it?
     universal: {
         xs: {
             fontSize: 12,
             lineHeight: 16,
+            marginBottom: -0.7,
             fontWeight: "400",
             fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         sm: {
             fontSize: 14,
             lineHeight: 20,
+            marginBottom: -1,
             fontWeight: "400",
             fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         base: {
             fontSize: 16,
             lineHeight: 24,
+            marginBottom: -1.2,
             fontWeight: "400",
             fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         lg: {
             fontSize: 18,
             lineHeight: 28,
+            marginBottom: -1.5,
             fontWeight: "400",
             fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         xl: {
             fontSize: 20,
             lineHeight: 28,
+            marginBottom: -1.75,
             fontWeight: "500",
             fontFamily: "AtkinsonHyperlegibleNext-Medium",
         },
         "2xl": {
             fontSize: 24,
             lineHeight: 32,
+            marginBottom: -2,
             fontWeight: "600",
             fontFamily: "AtkinsonHyperlegibleNext-SemiBold",
         },
         "3xl": {
             fontSize: 30,
             lineHeight: 36,
+            marginBottom: -2.5,
             fontWeight: "700",
             fontFamily: "AtkinsonHyperlegibleNext-Bold",
         },
         "4xl": {
             fontSize: 36,
             lineHeight: 40,
+            marginBottom: -3,
             fontWeight: "700",
             fontFamily: "AtkinsonHyperlegibleNext-ExtraBold",
         },

package/dist/streamplace-store/graph.js

@@ -0,0 +1,195 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCreateFollowRecord = useCreateFollowRecord;
+exports.useDeleteFollowRecord = useDeleteFollowRecord;
+exports.useGraphManager = useGraphManager;
+const react_1 = require("react");
+const streamplace_store_1 = require("./streamplace-store");
+const xrpc_1 = require("./xrpc");
+function useCreateFollowRecord() {
+    let agent = (0, xrpc_1.usePDSAgent)();
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const createFollow = async (subjectDID) => {
+        if (!agent) {
+            throw new Error("No PDS agent found");
+        }
+        if (!agent.did) {
+            throw new Error("No user DID found, assuming not logged in");
+        }
+        setIsLoading(true);
+        try {
+            const record = {
+                $type: "app.bsky.graph.follow",
+                subject: subjectDID,
+                createdAt: new Date().toISOString(),
+            };
+            const result = await agent.com.atproto.repo.createRecord({
+                repo: agent.did,
+                collection: "app.bsky.graph.follow",
+                record,
+            });
+            return result;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return { createFollow, isLoading };
+}
+function useDeleteFollowRecord() {
+    let agent = (0, xrpc_1.usePDSAgent)();
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const deleteFollow = async (followRecordUri) => {
+        if (!agent) {
+            throw new Error("No PDS agent found");
+        }
+        if (!agent.did) {
+            throw new Error("No user DID found, assuming not logged in");
+        }
+        setIsLoading(true);
+        try {
+            const result = await agent.com.atproto.repo.deleteRecord({
+                repo: agent.did,
+                collection: "app.bsky.graph.follow",
+                rkey: followRecordUri.split("/").pop(),
+            });
+            return result;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return { deleteFollow, isLoading };
+}
+function useGraphManager(subjectDID) {
+    const agent = (0, xrpc_1.usePDSAgent)();
+    const [isFollowing, setIsFollowing] = (0, react_1.useState)(null);
+    const [followUri, setFollowUri] = (0, react_1.useState)(null);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const userDID = agent?.did;
+    const streamplaceUrl = (0, streamplace_store_1.useStreamplaceStore)((state) => state.url);
+    const fetchFollowStatus = async () => {
+        if (!userDID || !subjectDID || !streamplaceUrl) {
+            setIsFollowing(null);
+            setFollowUri(null);
+            return;
+        }
+        setIsLoading(true);
+        setError(null);
+        try {
+            const res = await fetch(`${streamplaceUrl}/xrpc/place.stream.graph.getFollowingUser?subjectDID=${encodeURIComponent(subjectDID)}&userDID=${encodeURIComponent(userDID)}`, {
+                credentials: "include",
+            });
+            if (!res.ok) {
+                const errorText = await res.text();
+                throw new Error(`Failed to fetch follow status: ${errorText}`);
+            }
+            const data = await res.json();
+            if (data.follow) {
+                setIsFollowing(true);
+                setFollowUri(data.follow.uri);
+            }
+            else {
+                setIsFollowing(false);
+                setFollowUri(null);
+            }
+        }
+        catch (err) {
+            setError(`Could not determine follow state: ${err instanceof Error ? err.message : `Unknown error: ${err}`}`);
+            setIsFollowing(null);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (!userDID || !subjectDID) {
+            setIsFollowing(null);
+            setFollowUri(null);
+            setError(null);
+            return;
+        }
+        fetchFollowStatus();
+    }, [userDID, subjectDID, streamplaceUrl]);
+    const follow = async () => {
+        if (!agent || !subjectDID) {
+            throw new Error("Cannot follow: not logged in or no subject DID");
+        }
+        if (!agent.did) {
+            throw new Error("No user DID found, assuming not logged in");
+        }
+        setIsLoading(true);
+        setError(null);
+        const previousState = isFollowing;
+        setIsFollowing(true); // Optimistic
+        try {
+            const record = {
+                $type: "app.bsky.graph.follow",
+                subject: subjectDID,
+                createdAt: new Date().toISOString(),
+            };
+            const result = await agent.com.atproto.repo.createRecord({
+                repo: agent.did,
+                collection: "app.bsky.graph.follow",
+                record,
+            });
+            setFollowUri(result.data.uri);
+            setIsFollowing(true);
+        }
+        catch (err) {
+            setIsFollowing(previousState);
+            const errorMsg = `Failed to follow: ${err instanceof Error ? err.message : "Unknown error"}`;
+            setError(errorMsg);
+            throw new Error(errorMsg);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const unfollow = async () => {
+        if (!agent || !subjectDID) {
+            throw new Error("Cannot unfollow: not logged in or no subject DID");
+        }
+        if (!agent.did) {
+            throw new Error("No user DID found, assuming not logged in");
+        }
+        if (!followUri) {
+            throw new Error("Cannot unfollow: no follow URI found");
+        }
+        setIsLoading(true);
+        setError(null);
+        const previousState = isFollowing;
+        const previousUri = followUri;
+        setIsFollowing(false); // Optimistic
+        setFollowUri(null);
+        try {
+            await agent.com.atproto.repo.deleteRecord({
+                repo: agent.did,
+                collection: "app.bsky.graph.follow",
+                rkey: followUri.split("/").pop(),
+            });
+            setIsFollowing(false);
+            setFollowUri(null);
+        }
+        catch (err) {
+            setIsFollowing(previousState);
+            setFollowUri(previousUri);
+            const errorMsg = `Failed to unfollow: ${err instanceof Error ? err.message : "Unknown error"}`;
+            setError(errorMsg);
+            throw new Error(errorMsg);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return {
+        isFollowing,
+        followUri,
+        isLoading,
+        error,
+        follow,
+        unfollow,
+        refresh: fetchFollowStatus,
+    };
+}