From b08b87decf7837313957d598cff559b8ea3965a5 Mon Sep 17 00:00:00 2001
From: Eli Mallon <eli@stream.place>
Date: Tue, 3 Jun 2025 17:44:43 -0700
Subject: [PATCH] components: add components library (#233)

* components: init @streamplace/components

* fix build

* components: implemented chat!

* components: local chat works now!

* dump tsup, remove old code

* remove example-app for now

* build: add knip for checking missing dependencies

* fix build

* update README

* maybe lexicons postinstall?

* app: remove old chat stuff from redux

* components: migrate replyTo

* components: migrate viewers

* components: migrate livestream

* components: migrate segment

* components: migrate renditions

* components: tweak handleWebsocketMessages

* libraries: pnpm run build as postinstall

* build: perhaps make js-lexicons like this?

* app: mobile tweaks

* websocket: can't send a profile we don't have

* websocket --> websocket-consumer
---
 .vscode/settings.json                         |   6 +-
 js/app/components/chat/chat-box.tsx           |  65 +--
 js/app/components/chat/chat.tsx               |  54 +-
 js/app/components/edit-livestream.tsx         |   4 +-
 js/app/components/livestream/livestream.tsx   |  38 +-
 js/app/components/player/controls.tsx         |  11 +-
 js/app/components/player/player.tsx           |  11 +-
 js/app/components/player/provider.tsx         | 111 +---
 .../components/provider/provider.shared.tsx   |  55 +-
 js/app/features/bluesky/blueskySlice.tsx      | 179 +------
 js/app/features/bluesky/blueskyTypes.tsx      |   7 +-
 js/app/features/player/playerSlice.tsx        | 485 +-----------------
 .../features/streamplace/streamplaceSlice.tsx |   4 +-
 js/app/package.json                           |   1 +
 js/app/src/router.tsx                         |  11 +
 js/app/src/screens/live-dashboard.tsx         |  49 +-
 js/app/store/store.tsx                        |   2 +-
 .../package.json                              |   3 +-
 js/components/README.md                       |  35 ++
 js/components/package.json                    |  38 ++
 js/components/src/index.tsx                   |   4 +
 .../src/livestream-provider/index.tsx         |  37 ++
 .../src/livestream-provider/websocket.tsx     |  47 ++
 js/components/src/livestream-store/chat.tsx   | 212 ++++++++
 .../src/livestream-store/context.tsx          |  10 +
 js/components/src/livestream-store/index.tsx  |   3 +
 .../src/livestream-store/livestream-state.tsx |  18 +
 .../src/livestream-store/livestream-store.tsx |  56 ++
 .../livestream-store/websocket-consumer.tsx   |  62 +++
 .../src/streamplace-provider/context.tsx      |  10 +
 .../src/streamplace-provider/index.tsx        |  32 ++
 .../src/streamplace-provider/poller.tsx       |  38 ++
 .../src/streamplace-provider/xrpc.tsx         |   0
 js/components/src/streamplace-store/index.tsx |   2 +
 .../streamplace-store/streamplace-store.tsx   |  71 +++
 js/components/src/streamplace-store/user.tsx  |  57 ++
 js/components/src/streamplace-store/xrpc.tsx  |  15 +
 js/components/tsconfig.json                   |   9 +
 js/streamplace/package.json                   |   8 +-
 .../agent.tsx => streamplace/src/agent.ts}    |   6 +-
 js/streamplace/src/index.ts                   |   2 +
 js/streamplace/src/useful-types.ts            |  15 +
 js/streamplace/tsconfig.json                  |  12 +-
 js/streamplace/tsup.config.ts                 |  18 -
 knip.json                                     |   8 +
 package.json                                  |  10 +-
 pkg/api/websocket.go                          |  19 +
 pnpm-lock.yaml                                | 442 +++++++++++++---
 48 files changed, 1386 insertions(+), 1006 deletions(-)
 create mode 100644 js/components/README.md
 create mode 100644 js/components/package.json
 create mode 100644 js/components/src/index.tsx
 create mode 100644 js/components/src/livestream-provider/index.tsx
 create mode 100644 js/components/src/livestream-provider/websocket.tsx
 create mode 100644 js/components/src/livestream-store/chat.tsx
 create mode 100644 js/components/src/livestream-store/context.tsx
 create mode 100644 js/components/src/livestream-store/index.tsx
 create mode 100644 js/components/src/livestream-store/livestream-state.tsx
 create mode 100644 js/components/src/livestream-store/livestream-store.tsx
 create mode 100644 js/components/src/livestream-store/websocket-consumer.tsx
 create mode 100644 js/components/src/streamplace-provider/context.tsx
 create mode 100644 js/components/src/streamplace-provider/index.tsx
 create mode 100644 js/components/src/streamplace-provider/poller.tsx
 create mode 100644 js/components/src/streamplace-provider/xrpc.tsx
 create mode 100644 js/components/src/streamplace-store/index.tsx
 create mode 100644 js/components/src/streamplace-store/streamplace-store.tsx
 create mode 100644 js/components/src/streamplace-store/user.tsx
 create mode 100644 js/components/src/streamplace-store/xrpc.tsx
 create mode 100644 js/components/tsconfig.json
 rename js/{app/features/bluesky/agent.tsx => streamplace/src/agent.ts} (81%)
 create mode 100644 js/streamplace/src/useful-types.ts
 delete mode 100644 js/streamplace/tsup.config.ts
 create mode 100644 knip.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8fc95471..d459664c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -16,5 +16,9 @@
   "go.alternateTools": {
     "customFormatter": "golangci-lint"
   },
-  "go.formatFlags": ["fmt", "--stdin"]
+  "go.formatFlags": ["fmt", "--stdin"],
+  "editor.codeActionsOnSave": {
+    "source.addMissingImports": "explicit",
+    "source.organizeImports": "explicit"
+  }
 }
diff --git a/js/app/components/chat/chat-box.tsx b/js/app/components/chat/chat-box.tsx
index 822f00d2..7b4c026f 100644
--- a/js/app/components/chat/chat-box.tsx
+++ b/js/app/components/chat/chat-box.tsx
@@ -1,4 +1,11 @@
 import { useNavigation } from "@react-navigation/native";
+import {
+  useChat,
+  useCreateChatMessage,
+  useLivestream,
+  useReplyToMessage,
+  useSetReplyToMessage,
+} from "@streamplace/components";
 import {
   Palette,
   SquareArrowOutUpRight,
@@ -9,20 +16,13 @@ import { emojiEmitter } from "components/emoji-picker/emoji-emitter";
 import { EmojiPicker } from "components/emoji-picker/emoji-picker";
 import NameColorPicker from "components/name-color-picker/name-color-picker";
 import {
-  chatMessage,
   selectChatProfile,
   selectIsReady,
   selectUserProfile,
 } from "features/bluesky/blueskySlice";
 import {
-  addLocalChatMessage,
   LivestreamViewHydrated,
-  MessageViewHydrated,
-  useChat,
-  usePlayerActions,
   usePlayerId,
-  usePlayerLivestream,
-  useReplyToMessage,
 } from "features/player/playerSlice";
 import {
   chatWarn,
@@ -32,12 +32,13 @@ import { usePreloadEmoji } from "hooks/usePreloadEmoji";
 import { useEffect, useRef, useState } from "react";
 import { Keyboard } from "react-native";
 import { useAppDispatch, useAppSelector } from "store/hooks";
+import { ChatMessageViewHydrated } from "streamplace";
 import { Button, Form, Input, isWeb, Text, TextArea, View } from "tamagui";
 import EmojiSuggestions, { EmojiSuggestion } from "./emoji-suggestions";
 import MentionSuggestions, { MentionSuggestion } from "./mention-suggestions";
 
 const getParticipantSuggestions = (
-  chat: MessageViewHydrated[],
+  chat: ChatMessageViewHydrated[],
   currentUserDid?: string,
 ) => {
   const participants = new Set<string>();
@@ -76,14 +77,14 @@ export default function ChatBox({
   const chatProfile = useAppSelector(selectChatProfile);
   const chatWarned = useAppSelector(selectChatWarned);
   const loggedOut = isReady && !userProfile;
-  const livestream = useAppSelector(usePlayerLivestream());
-  const chat = useAppSelector(useChat());
+  const livestream = useLivestream();
+  const chat = useChat();
   const textAreaRef = useRef<Input>(null);
   const dispatch = useAppDispatch();
   const navigate = useNavigation();
   const playerId = usePlayerId();
-  const playerActions = usePlayerActions();
-  const replyTo = useAppSelector(useReplyToMessage());
+  const replyTo = useReplyToMessage();
+  const setReplyToMessage = useSetReplyToMessage();
   if (isWeb) usePreloadEmoji({ immediate: true });
   const [isTextAreaFocused, setIsTextAreaFocused] = useState(false);
   const [pickerState, setPickerState] = useState({
@@ -309,6 +310,8 @@ export default function ChatBox({
     }
   }, [showSuggestions]);
 
+  const createChatMessage = useCreateChatMessage();
+
   const updateSuggestions = (text: string, cursorPosition: number) => {
     const atIndex = text.lastIndexOf("@", cursorPosition);
 
@@ -385,39 +388,13 @@ export default function ChatBox({
     if (!isWeb) Keyboard.dismiss();
     if (!message.length || !livestream || !userProfile) return;
 
-    // Add local message
-    dispatch(
-      addLocalChatMessage({
-        playerId,
-        message,
-        ...(replyTo ? { replyTo } : {}),
-        author: {
-          did: userProfile.did,
-          handle: userProfile.handle,
-        },
-        chatProfile: chatProfile?.profile?.color
-          ? {
-              color: {
-                red: chatProfile.profile.color.red,
-                green: chatProfile.profile.color.green,
-                blue: chatProfile.profile.color.blue,
-              },
-            }
-          : undefined,
-      }),
-    );
-
-    // Send to server
-    dispatch(
-      chatMessage({
-        text: message,
-        livestream,
-        ...(replyTo ? { replyTo } : {}),
-      }),
-    );
+    createChatMessage({
+      text: message,
+      reply: replyTo ? replyTo : undefined,
+    });
 
     setMessage("");
-    playerActions.setReplyToMessage(null);
+    setReplyToMessage(null);
     setShowSuggestions(false);
     if (isWeb && textAreaRef.current) {
       const textarea = textAreaRef.current as unknown as HTMLTextAreaElement;
@@ -493,7 +470,7 @@ export default function ChatBox({
                 <Button
                   size="$2"
                   circular
-                  onPress={() => playerActions.setReplyToMessage(null)}
+                  onPress={() => setReplyToMessage(null)}
                   backgroundColor="transparent"
                 >
                   <XIcon size={16} />
diff --git a/js/app/components/chat/chat.tsx b/js/app/components/chat/chat.tsx
index 37855ab9..1f5b089e 100644
--- a/js/app/components/chat/chat.tsx
+++ b/js/app/components/chat/chat.tsx
@@ -1,26 +1,26 @@
+import {
+  useChat,
+  useProfile,
+  useSetReplyToMessage,
+} from "@streamplace/components";
 import { Reply, Settings, X } from "@tamagui/lucide-icons";
 import {
   createBlockRecord,
   selectUserProfile,
 } from "features/bluesky/blueskySlice";
-import {
-  MessageViewHydrated,
-  useChat,
-  usePlayerActions,
-  usePlayerLivestream,
-} from "features/player/playerSlice";
+import { MessageViewHydrated } from "features/player/playerSlice";
 import usePlatform from "hooks/usePlatform";
 import { useEffect, useRef, useState } from "react";
 import { Linking, TouchableOpacity } from "react-native";
 import { useAppDispatch, useAppSelector } from "store/hooks";
 
-import { RichText } from "@atproto/api";
+import { $Typed, RichText } from "@atproto/api";
 import {
   isMention,
   Link,
   Mention,
 } from "@atproto/api/dist/client/types/app/bsky/richtext/facet";
-import { $Typed } from "@atproto/api/src/client/util";
+import { ChatMessageViewHydrated } from "streamplace";
 import { Button, ScrollView, Sheet, Text, useMedia, View } from "tamagui";
 import { RichtextSegment, segmentize } from "../../utils/facet";
 
@@ -32,18 +32,18 @@ export default function Chat({
   setIsChatVisible: (visible: boolean) => void;
 }) {
   const [open, setOpen] = useState(false);
-  const [modMessage, setMessage] = useState<MessageViewHydrated | null>(null);
+  const [modMessage, setMessage] = useState<ChatMessageViewHydrated | null>(
+    null,
+  );
   const [isAtBottom, setIsAtBottom] = useState(true);
-  const chat = useAppSelector(useChat());
+  const chat = useChat();
   const scrollRef = useRef<ScrollView>(null);
-  const livestream = useAppSelector(usePlayerLivestream());
+  const streamerProfile = useProfile();
   const userProfile = useAppSelector(selectUserProfile);
   const myStream = !!(
     userProfile &&
-    livestream &&
     userProfile.did &&
-    livestream.author.did &&
-    userProfile.did === livestream.author.did
+    userProfile.did === streamerProfile?.did
   );
 
   const handleScroll = (event: any) => {
@@ -187,15 +187,15 @@ function ChatMessageRow({
   replyHandle: _replyHandle,
   chat,
 }: {
-  message: MessageViewHydrated;
+  message: ChatMessageViewHydrated;
   setOpen: (open: boolean) => void;
-  setMessage: (message: MessageViewHydrated) => void;
+  setMessage: (message: ChatMessageViewHydrated) => void;
   myStream: boolean;
   replyHandle?: string;
-  chat: MessageViewHydrated[];
+  chat: ChatMessageViewHydrated[];
 }): JSX.Element {
   const [hover, setHover] = useState(false);
-  const playerActions = usePlayerActions();
+  const setReplyToMessage = useSetReplyToMessage();
   const { isWeb } = usePlatform();
 
   const moderateMessage = () => {
@@ -207,10 +207,10 @@ function ChatMessageRow({
   };
 
   const handleReply = () => {
-    playerActions.setReplyToMessage(message);
+    setReplyToMessage(message);
   };
 
-  const replyTo = message.replyTo as MessageViewHydrated | undefined;
+  const replyTo = message.replyTo as ChatMessageViewHydrated | undefined;
   const hasReply = !!replyTo;
   const replyToHandle = replyTo?.author?.handle;
   const replyToText = replyTo?.record?.text;
@@ -353,8 +353,8 @@ const ChatMessageText = ({
   message,
   chat = [],
 }: {
-  message: MessageViewHydrated;
-  chat?: MessageViewHydrated[];
+  message: ChatMessageViewHydrated;
+  chat?: ChatMessageViewHydrated[];
 }) => {
   const rt = new RichText({ text: message.record.text });
   rt.detectFacetsWithoutResolution();
@@ -464,7 +464,7 @@ const segmentedObject = (
       );
     }
   } else {
-    return <Text>{obj.text}</Text>;
+    return <Text key={`text-${index}`}>{obj.text}</Text>;
   }
 };
 
@@ -475,13 +475,13 @@ const RichTextMessage = ({
 }: {
   text: string;
   facets: Facet[];
-  chat?: MessageViewHydrated[];
+  chat?: ChatMessageViewHydrated[];
 }) => {
   if (!facets?.length) return <Text>{text}</Text>;
 
   let segs = segmentize(text, facets);
 
-  console.log(segs);
-
-  return segs.map((seg, i) => segmentedObject(seg, chat, i));
+  return segs.map((seg, i) =>
+    segmentedObject(seg, chat as MessageViewHydrated[], i),
+  );
 };
diff --git a/js/app/components/edit-livestream.tsx b/js/app/components/edit-livestream.tsx
index 1690e02d..ee3b9d1e 100644
--- a/js/app/components/edit-livestream.tsx
+++ b/js/app/components/edit-livestream.tsx
@@ -1,3 +1,4 @@
+import { useLivestream } from "@streamplace/components";
 import { useToastController } from "@tamagui/toast";
 import {
   selectNewLivestream,
@@ -21,6 +22,7 @@ export default function UpdateLivestream({
   const [title, setTitle] = useState("");
   const [loading, setLoading] = useState(false);
   const profile = useAppSelector(selectUserProfile);
+  const livestream = useLivestream();
   const newLivestream = useAppSelector(selectNewLivestream);
 
   useEffect(() => {
@@ -57,7 +59,7 @@ export default function UpdateLivestream({
       await dispatch(
         updateLivestreamRecord({
           title,
-          playerId,
+          livestream,
         }),
       );
     } catch (error) {
diff --git a/js/app/components/livestream/livestream.tsx b/js/app/components/livestream/livestream.tsx
index 4b5c1794..f1637f1e 100644
--- a/js/app/components/livestream/livestream.tsx
+++ b/js/app/components/livestream/livestream.tsx
@@ -1,3 +1,9 @@
+import {
+  useLivestream,
+  useProfile,
+  useSegment,
+  useViewers,
+} from "@streamplace/components";
 import { MessageCircleMore, MessageCircleOff } from "@tamagui/lucide-icons";
 import { useToastController } from "@tamagui/toast";
 import Chat from "components/chat/chat";
@@ -51,11 +57,13 @@ export function LivestreamInner(props: Partial<PlayerProps>) {
   const player = useAppSelector(usePlayer());
   const profiles = useAppSelector(selectProfiles);
   const toast = useToastController();
+  const viewers = useViewers();
 
   const { src, ...extraProps } = props;
   const dispatch = useAppDispatch();
   const { width, height } = useWindowDimensions();
-  const video = player.segment?.video?.[0];
+  const segment = useSegment();
+  const video = segment?.video?.[0];
   const [videoWidth, setVideoWidth] = useState(0);
   const [videoHeight, setVideoHeight] = useState(0);
   const { keyboardHeight } = useKeyboard();
@@ -68,11 +76,13 @@ export function LivestreamInner(props: Partial<PlayerProps>) {
   const [currentUserDID, setCurrentUserDID] = useState<string | null>(null);
   const { fullscreen, setFullscreen } = useFullscreen();
 
-  const streamerDID = player.livestream?.author?.did;
-  const streamerProfile = streamerDID ? profiles[streamerDID] : undefined;
+  const livestream = useLivestream();
+  const streamerProfile = useProfile();
+
+  const streamerDID = livestream?.author?.did;
   const streamerHandle = streamerProfile?.handle;
-  const startTime = player.livestream?.record?.createdAt
-    ? new Date(player.livestream?.record?.createdAt)
+  const startTime = livestream?.record?.createdAt
+    ? new Date(livestream?.record?.createdAt)
     : undefined;
 
   // this would all be really easy if i had library that would give me the
@@ -112,14 +122,14 @@ export function LivestreamInner(props: Partial<PlayerProps>) {
     // 10 second cut off for segements
     const cuttOffDate = new Date(Date.now() - 10 * 1000);
     // 15 second cut off if segment start time not found
-    const startTime = player.segment?.startTime
-      ? new Date(player.segment?.startTime)
+    const startTime = segment?.startTime
+      ? new Date(segment?.startTime)
       : new Date(Date.now() - 15 * 1000);
 
     if (startTime > cuttOffDate) {
       setOffline(false);
     }
-  }, [player.segment]);
+  }, [segment]);
 
   let slideKeyboard = 0;
   if (isIOS && keyboardHeight > 0) {
@@ -178,7 +188,6 @@ export function LivestreamInner(props: Partial<PlayerProps>) {
                 zIndex: 1000,
               }}
               bubbleProps={{
-                cursor: "pointer",
                 backgroundColor: "$accentBackground",
                 gap: "$3",
                 maxWidth: 400,
@@ -265,7 +274,6 @@ export function LivestreamInner(props: Partial<PlayerProps>) {
                             )
                           }
                           aria-label={`View @${streamerHandle} on Bluesky`}
-                          style={{ cursor: "pointer" }}
                         >
                           {`@${streamerHandle}`}
                         </Text>
@@ -283,7 +291,7 @@ export function LivestreamInner(props: Partial<PlayerProps>) {
                     {startTime instanceof Date && !offline && (
                       <Timer start={startTime} />
                     )}
-                    <Viewers viewers={player.viewers ?? 0} />
+                    <Viewers viewers={viewers ?? 0} />
                     <Button
                       backgroundColor="transparent"
                       onPress={() => setIsChatVisible(!isChatVisible)}
@@ -307,7 +315,7 @@ export function LivestreamInner(props: Partial<PlayerProps>) {
                         : undefined
                     }
                   >
-                    {player.livestream?.record.title}
+                    {livestream?.record.title}
                   </H2>
                 </View>
               </View>
@@ -378,7 +386,7 @@ export function LivestreamInner(props: Partial<PlayerProps>) {
                             )
                           }
                           aria-label={`View @${streamerHandle} on Bluesky`}
-                          style={{ cursor: "pointer" }}
+                          style={{ cursor: isWeb ? "pointer" : undefined }} // iOS literally crashes otherwise idk
                           numberOfLines={1}
                           ellipsizeMode="tail"
                         >
@@ -395,7 +403,7 @@ export function LivestreamInner(props: Partial<PlayerProps>) {
                     )}
                   </View>
                   <View style={{ alignItems: "flex-end" }}>
-                    <Viewers viewers={player.viewers ?? 0} />
+                    <Viewers viewers={viewers ?? 0} />
                   </View>
                 </View>
                 <View
@@ -405,7 +413,7 @@ export function LivestreamInner(props: Partial<PlayerProps>) {
                   marginTop={-15}
                 >
                   <Text fontSize={18} numberOfLines={1} ellipsizeMode="tail">
-                    {player.livestream?.record.title}
+                    {livestream?.record.title}
                   </Text>
                 </View>
               </View>
diff --git a/js/app/components/player/controls.tsx b/js/app/components/player/controls.tsx
index 23ac8819..f8065c4b 100644
--- a/js/app/components/player/controls.tsx
+++ b/js/app/components/player/controls.tsx
@@ -1,3 +1,4 @@
+import { useRenditions, useSegment, useViewers } from "@streamplace/components";
 import {
   Antenna,
   CheckCircle,
@@ -20,8 +21,6 @@ import {
   usePlayer,
   usePlayerActions,
   usePlayerProtocol,
-  usePlayerRenditions,
-  usePlayerSegment,
   usePlayerSelectedRendition,
 } from "features/player/playerSlice";
 import { userMute } from "features/streamplace/streamplaceSlice";
@@ -278,7 +277,7 @@ export default function Controls(
     props.setPlayTime(Date.now());
   };
 
-  const player = useAppSelector(usePlayer());
+  const viewers = useViewers();
   const dispatch = useAppDispatch();
   const m = useMedia();
 
@@ -416,7 +415,7 @@ export default function Controls(
           ) : null}
         </Part>
         <Part justifyContent="flex-end">
-          <Viewers viewers={player.viewers ?? 0} />
+          <Viewers viewers={viewers ?? 0} />
         </Part>
       </Bar>
       {props.ingest && <LiveBubble />}
@@ -486,7 +485,7 @@ export default function Controls(
 export function PopoverMenu(props: PlayerProps) {
   const [open, setOpen] = useState(false);
   const media = useMedia();
-  const renditions = useAppSelector(usePlayerRenditions());
+  const renditions = useRenditions();
   const selectedRendition = useAppSelector(usePlayerSelectedRendition());
   const protocol = useAppSelector(usePlayerProtocol());
   const { setSelectedRendition, setProtocol } = usePlayerActions();
@@ -807,7 +806,7 @@ function GearMenu(
 }
 
 export function Offline() {
-  const segment = useAppSelector(usePlayerSegment());
+  const segment = useSegment();
   return (
     <View flex={1} justifyContent="center" alignItems="center">
       <View flexDirection="row">
diff --git a/js/app/components/player/player.tsx b/js/app/components/player/player.tsx
index ae901e11..ab034256 100644
--- a/js/app/components/player/player.tsx
+++ b/js/app/components/player/player.tsx
@@ -1,8 +1,5 @@
-import {
-  usePlayerRenditions,
-  usePlayerSegment,
-  usePlayerSelectedRendition,
-} from "features/player/playerSlice";
+import { useRenditions, useSegment } from "@streamplace/components";
+import { usePlayerSelectedRendition } from "features/player/playerSlice";
 import { selectUserMuted } from "features/streamplace/streamplaceSlice";
 import usePlatform from "hooks/usePlatform";
 import useStreamplaceNode from "hooks/useStreamplaceNode";
@@ -94,10 +91,10 @@ export function PlayerInner(props: Partial<PlayerProps>) {
   const [offline, setOffline] = useState(true);
   const playing = status === PlayerStatus.PLAYING;
 
-  const segment = useAppSelector(usePlayerSegment());
+  const segment = useSegment();
   const [lastCheck, setLastCheck] = useState(0);
 
-  const renditions = useAppSelector(usePlayerRenditions());
+  const renditions = useRenditions();
   const selectedRendition = useAppSelector(usePlayerSelectedRendition());
 
   useEffect(() => {
diff --git a/js/app/components/player/provider.tsx b/js/app/components/player/provider.tsx
index 92020c55..c7136a83 100644
--- a/js/app/components/player/provider.tsx
+++ b/js/app/components/player/provider.tsx
@@ -1,14 +1,10 @@
 // basically PlayerProvider that sets up our magic context,
 
-import {
-  newPlayer,
-  PlayerContext,
-  usePlayerActions,
-} from "features/player/playerSlice";
-import { selectUrl } from "features/streamplace/streamplaceSlice";
-import { useContext, useEffect, useRef, useState } from "react";
-import useWebSocket, { ReadyState } from "react-use-websocket";
-import { useAppDispatch, useAppSelector } from "store/hooks";
+import { LivestreamProvider } from "@streamplace/components";
+import { newPlayer, PlayerContext } from "features/player/playerSlice";
+import { useContext, useEffect, useState } from "react";
+import { ReadyState } from "react-use-websocket";
+import { useAppDispatch } from "store/hooks";
 import { PlayerProps } from "./props";
 
 const POLL_INTERVAL = 3000;
@@ -21,9 +17,11 @@ export default function PlayerProvider(
     return props.children;
   }
   return (
-    <PlayerContextInitializer {...props}>
-      {props.children}
-    </PlayerContextInitializer>
+    <LivestreamProvider src={props.src ?? ""}>
+      <PlayerContextInitializer {...props}>
+        {props.children}
+      </PlayerContextInitializer>
+    </LivestreamProvider>
   );
 }
 
@@ -50,7 +48,7 @@ export function PlayerContextInitializer(
   }
   return (
     <PlayerContext.Provider value={{ playerId }}>
-      <PlayerDataContext {...props} />
+      {props.children}
     </PlayerContext.Provider>
   );
 }
@@ -62,90 +60,3 @@ const readyStateNames = {
   [ReadyState.CLOSING]: "CLOSING",
   [ReadyState.UNINSTANTIATED]: "UNINSTANTIATED",
 };
-
-export function PlayerDataContext(
-  props: Partial<PlayerProps> & { children: React.ReactNode },
-) {
-  const dispatch = useAppDispatch();
-  const {
-    pollViewers,
-    pollChat,
-    pollLivestream,
-    pollSegment,
-    handleWebSocketMessages,
-  } = usePlayerActions();
-
-  const url = useAppSelector(selectUrl);
-  let wsUrl = url.replace(/^http\:/, "ws:");
-  wsUrl = wsUrl.replace(/^https\:/, "wss:");
-
-  const ref = useRef<any[]>([]);
-  const handle = useRef<NodeJS.Timeout | null>(null);
-
-  const { readyState } = useWebSocket(`${wsUrl}/api/websocket/${props.src}`, {
-    reconnectInterval: 1000,
-    shouldReconnect: () => true,
-
-    onOpen: () => {
-      ref.current = [];
-    },
-
-    onError: (e) => {
-      console.log("onError", e);
-    },
-
-    // spamming the redux store with messages causes a zillion re-renders,
-    // so we batch them up a bit
-    onMessage: (msg) => {
-      try {
-        const data = JSON.parse(msg.data);
-        ref.current.push(data);
-        if (handle.current) {
-          return;
-        }
-        handle.current = setTimeout(() => {
-          dispatch(handleWebSocketMessages(ref.current));
-          ref.current = [];
-          handle.current = null;
-        }, 250);
-      } catch (e) {
-        console.log("onMessage parse error", e);
-      }
-    },
-  });
-
-  useEffect(() => {
-    return () => {
-      if (handle.current) {
-        clearTimeout(handle.current);
-        handle.current = null;
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    console.log(`websocket ${readyStateNames[readyState]}`);
-  }, [readyState]);
-
-  useEffect(() => {
-    if (readyState === ReadyState.OPEN || !props.src) {
-      return;
-    }
-    let handle;
-    const poll = async () => {
-      if (!props.src) {
-        return;
-      }
-      await Promise.all([
-        dispatch(pollViewers(props.src)),
-        dispatch(pollChat(props.src)),
-        dispatch(pollLivestream(props.src)),
-        dispatch(pollSegment(props.src)),
-      ]);
-    };
-    handle = setInterval(poll, POLL_INTERVAL);
-    return () => clearInterval(handle);
-  }, [props.src, readyState === ReadyState.OPEN]);
-
-  return props.children;
-}
diff --git a/js/app/components/provider/provider.shared.tsx b/js/app/components/provider/provider.shared.tsx
index ad8c9e9e..573a49bf 100644
--- a/js/app/components/provider/provider.shared.tsx
+++ b/js/app/components/provider/provider.shared.tsx
@@ -3,12 +3,16 @@ import {
   LinkingOptions,
   NavigationContainer,
 } from "@react-navigation/native";
+import { StreamplaceProvider as ZustandStreamplaceProvider } from "@streamplace/components";
 import { ToastProvider, ToastViewport } from "@tamagui/toast";
 import { useFonts } from "expo-font";
 import BlueskyProvider from "features/bluesky/blueskyProvider";
+import { selectOAuthSession } from "features/bluesky/blueskySlice";
 import StreamplaceProvider from "features/streamplace/streamplaceProvider";
+import useStreamplaceNode from "hooks/useStreamplaceNode";
 import React from "react";
 import { Provider as ReduxProvider } from "react-redux";
+import { useAppSelector } from "store/hooks";
 import { store } from "store/store";
 import { PortalProvider, TamaguiProvider } from "tamagui";
 import config from "tamagui.config";
@@ -26,22 +30,24 @@ export default function Provider({
         <ReduxProvider store={store}>
           <StreamplaceProvider>
             <BlueskyProvider>
-              <PortalProvider>
-                <ToastProvider
-                  swipeDirection="vertical"
-                  duration={6000}
-                  native={
-                    [
-                      /* uncomment the next line to do native toasts on mobile. NOTE: it'll require you making a dev build and won't work with Expo Go */
-                      // 'mobile'
-                    ]
-                  }
-                >
-                  <FontProvider>{children}</FontProvider>
-                  <CurrentToast />
-                  <ToastViewport name="default" top="$8" left={0} right={0} />
-                </ToastProvider>
-              </PortalProvider>
+              <NewStreamplaceProvider>
+                <PortalProvider>
+                  <ToastProvider
+                    swipeDirection="vertical"
+                    duration={6000}
+                    native={
+                      [
+                        /* uncomment the next line to do native toasts on mobile. NOTE: it'll require you making a dev build and won't work with Expo Go */
+                        // 'mobile'
+                      ]
+                    }
+                  >
+                    <FontProvider>{children}</FontProvider>
+                    <CurrentToast />
+                    <ToastViewport name="default" top="$8" left={0} right={0} />
+                  </ToastProvider>
+                </PortalProvider>
+              </NewStreamplaceProvider>
             </BlueskyProvider>
           </StreamplaceProvider>
         </ReduxProvider>
@@ -50,6 +56,23 @@ export default function Provider({
   );
 }
 
+export const NewStreamplaceProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const { url } = useStreamplaceNode();
+  const oauthSession = useAppSelector(selectOAuthSession);
+  return (
+    <ZustandStreamplaceProvider
+      url={url}
+      oauthSession={oauthSession || undefined}
+    >
+      {children}
+    </ZustandStreamplaceProvider>
+  );
+};
+
 export const FontProvider = ({ children }: { children: React.ReactNode }) => {
   const [fontLoaded, fontError] = useFonts({
     "FiraCode-Light": require("../../assets/fonts/FiraCode-Light.ttf"),
diff --git a/js/app/features/bluesky/blueskySlice.tsx b/js/app/features/bluesky/blueskySlice.tsx
index a28a5be1..88124fc8 100644
--- a/js/app/features/bluesky/blueskySlice.tsx
+++ b/js/app/features/bluesky/blueskySlice.tsx
@@ -7,34 +7,26 @@ import {
   RichText,
 } from "@atproto/api";
 import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
-import {
-  isLink,
-  isMention,
-} from "@atproto/api/dist/client/types/app/bsky/richtext/facet";
 import { bytesToMultibase, Secp256k1Keypair } from "@atproto/crypto";
 import { OAuthSession } from "@atproto/oauth-client";
 import { DID_KEY, hydrate, STORED_KEY_KEY } from "features/base/baseSlice";
 import { openLoginLink } from "features/platform/platformSlice";
-import {
-  LivestreamViewHydrated,
-  MessageViewHydrated,
-  PlayersState,
-} from "features/player/playerSlice";
+import { PlayersState } from "features/player/playerSlice";
 import {
   setURL,
   StreamplaceState,
 } from "features/streamplace/streamplaceSlice";
 import Storage from "storage";
 import {
-  PlaceStreamChatMessage,
+  LivestreamViewHydrated,
   PlaceStreamChatProfile,
   PlaceStreamKey,
   PlaceStreamLivestream,
+  StreamplaceAgent,
 } from "streamplace";
 import { isWeb } from "tamagui";
 import { privateKeyToAccount } from "viem/accounts";
 import { createAppSlice } from "../../hooks/createSlice";
-import { StreamplaceAgent } from "./agent";
 import { BlueskyState } from "./blueskyTypes";
 import createOAuthClient from "./oauthClient";
 
@@ -543,63 +535,6 @@ export const blueskySlice = createAppSlice({
       },
     ),
 
-    chatPost: create.asyncThunk(
-      async (
-        {
-          text,
-          livestream,
-        }: { text: string; livestream: LivestreamViewHydrated },
-        thunkAPI,
-      ) => {
-        const { bluesky, streamplace } = thunkAPI.getState() as {
-          bluesky: BlueskyState;
-          streamplace: StreamplaceState;
-        };
-        if (!bluesky.pdsAgent) {
-          throw new Error("No agent");
-        }
-        const did = bluesky.oauthSession?.did;
-        if (!did) {
-          throw new Error("No DID");
-        }
-        const profile = bluesky.profiles[did];
-        if (!profile) {
-          throw new Error("No profile");
-        }
-        if (!livestream.record.post) {
-          throw new Error("No post");
-        }
-        const record: AppBskyFeedPost.Record = {
-          $type: "app.bsky.feed.post",
-          text: text,
-          createdAt: new Date().toISOString(),
-          reply: {
-            root: {
-              cid: livestream.record.post.cid,
-              uri: livestream.record.post.uri,
-            },
-            parent: {
-              cid: livestream.record.post.cid,
-              uri: livestream.record.post.uri,
-            },
-          },
-        };
-        return await bluesky.pdsAgent.post(record);
-      },
-      {
-        pending: (state) => {
-          console.log("chatPost pending");
-        },
-        fulfilled: (state, action) => {
-          console.log("chatPost fulfilled", action.payload);
-        },
-        rejected: (state, action) => {
-          console.error("chatPost rejected", action.error);
-          // state.status = "failed";
-        },
-      },
-    ),
-
     createBlockRecord: create.asyncThunk(
       async ({ subjectDID }: { subjectDID: string }, thunkAPI) => {
         const { bluesky, streamplace } = thunkAPI.getState() as {
@@ -642,105 +577,6 @@ export const blueskySlice = createAppSlice({
       },
     ),
 
-    chatMessage: create.asyncThunk(
-      async (
-        {
-          text,
-          livestream,
-          replyTo,
-        }: {
-          text: string;
-          livestream: LivestreamViewHydrated;
-          replyTo?: MessageViewHydrated;
-        },
-        thunkAPI,
-      ) => {
-        const { bluesky, streamplace } = thunkAPI.getState() as {
-          bluesky: BlueskyState;
-          streamplace: StreamplaceState;
-        };
-        if (!bluesky.pdsAgent) {
-          throw new Error("No agent");
-        }
-        const did = bluesky.oauthSession?.did;
-        if (!did) {
-          throw new Error("No DID");
-        }
-        const profile = bluesky.profiles[did];
-        if (!profile) {
-          throw new Error("No profile");
-        }
-
-        const rt = new RichText({ text });
-        rt.detectFacetsWithoutResolution();
-
-        const record: PlaceStreamChatMessage.Record = {
-          text: text,
-          createdAt: new Date().toISOString(),
-          streamer: livestream.author.did,
-          ...(replyTo
-            ? {
-                reply: {
-                  root: {
-                    cid: replyTo.cid,
-                    uri: replyTo.uri,
-                  },
-                  parent: {
-                    cid: replyTo.cid,
-                    uri: replyTo.uri,
-                  },
-                },
-              }
-            : {}),
-          ...(rt.facets && rt.facets.length > 0
-            ? {
-                facets: rt.facets.map((facet) => ({
-                  index: facet.index,
-                  features: facet.features
-                    .filter(
-                      (feature) =>
-                        feature.$type === "app.bsky.richtext.facet#link" ||
-                        feature.$type === "app.bsky.richtext.facet#mention",
-                    )
-                    .map((feature) => {
-                      if (isLink(feature)) {
-                        return {
-                          $type: "app.bsky.richtext.facet#link",
-                          uri: feature.uri,
-                        };
-                      } else if (isMention(feature)) {
-                        return {
-                          $type: "app.bsky.richtext.facet#mention",
-                          did: feature.did,
-                        };
-                      } else {
-                        throw new Error("invalid code path");
-                      }
-                    }),
-                })),
-              }
-            : {}),
-        };
-        await bluesky.pdsAgent.com.atproto.repo.createRecord({
-          repo: did,
-          collection: "place.stream.chat.message",
-          record,
-        });
-      },
-      {
-        pending: (state) => {
-          console.log("chatMessage pending");
-        },
-        fulfilled: (state, action) => {
-          console.log("chatMessage fulfilled", action.payload);
-        },
-        rejected: (state, action) => {
-          console.error("chatMessage rejected", action.error);
-          // state.status = "failed";
-        },
-      },
-    ),
-
     createStreamKeyRecord: create.asyncThunk(
       async ({ store }: { store: boolean }, thunkAPI) => {
         const { bluesky } = thunkAPI.getState() as {
@@ -991,7 +827,10 @@ export const blueskySlice = createAppSlice({
 
     updateLivestreamRecord: create.asyncThunk(
       async (
-        { title, playerId }: { title: string; playerId: string },
+        {
+          title,
+          livestream,
+        }: { title: string; livestream: LivestreamViewHydrated | null },
         thunkAPI,
       ) => {
         const now = new Date();
@@ -1013,7 +852,7 @@ export const blueskySlice = createAppSlice({
           throw new Error("No profile");
         }
 
-        let oldRecord = player[playerId].livestream;
+        let oldRecord = livestream;
         if (!oldRecord) {
           throw new Error("No latest record");
         }
@@ -1344,8 +1183,6 @@ export const {
   updateLivestreamRecord,
   createChatProfileRecord,
   getChatProfileRecordFromPDS,
-  chatPost,
-  chatMessage,
   createBlockRecord,
   followUser,
   unfollowUser,
diff --git a/js/app/features/bluesky/blueskyTypes.tsx b/js/app/features/bluesky/blueskyTypes.tsx
index e9d2a4bb..fdec6ba3 100644
--- a/js/app/features/bluesky/blueskyTypes.tsx
+++ b/js/app/features/bluesky/blueskyTypes.tsx
@@ -1,8 +1,11 @@
 import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
 import { OAuthSession } from "@streamplace/atproto-oauth-client-react-native";
 import { StreamKey } from "features/base/baseSlice";
-import { PlaceStreamChatProfile, PlaceStreamLivestream } from "streamplace";
-import { StreamplaceAgent } from "./agent";
+import {
+  PlaceStreamChatProfile,
+  PlaceStreamLivestream,
+  StreamplaceAgent,
+} from "streamplace";
 import { StreamplaceOAuthClient } from "./oauthClient";
 
 type NewLivestream = {
diff --git a/js/app/features/player/playerSlice.tsx b/js/app/features/player/playerSlice.tsx
index d78746c8..ed540efe 100644
--- a/js/app/features/player/playerSlice.tsx
+++ b/js/app/features/player/playerSlice.tsx
@@ -1,17 +1,10 @@
 import { AppBskyFeedDefs, AppBskyFeedPost } from "@atproto/api";
 import { createAction } from "@reduxjs/toolkit";
 import { PROTOCOL_HLS, PROTOCOL_WEBRTC } from "components/player/props";
-import { StreamplaceState } from "features/streamplace/streamplaceSlice";
 import { uuidv7 } from "hooks/uuid";
 import { createContext, useContext } from "react";
 import { useAppDispatch } from "store/hooks";
-import {
-  PlaceStreamChatDefs,
-  PlaceStreamChatMessage,
-  PlaceStreamDefs,
-  PlaceStreamLivestream,
-  PlaceStreamSegment,
-} from "streamplace";
+import { PlaceStreamChatMessage, PlaceStreamLivestream } from "streamplace";
 import { createAppSlice } from "../../hooks/createSlice";
 
 export interface PlayerContextType {
@@ -32,42 +25,18 @@ export interface MessageViewHydrated {
   record: PlaceStreamChatMessage.Record;
   indexedAt: string;
   chatProfile?: ChatProfile;
-  replyTo?: MessageViewHydrated;
 }
 
 export const PlayerContext = createContext<PlayerContextType>({
   playerId: null,
 });
 
-interface SegmentMediadataVideo {
-  width: number;
-  height: number;
-  framerate: string;
-}
-
-interface SegmentMediadataAudio {
-  rate: number;
-  channels: number;
-}
-
-interface SegmentMediaData {
-  video: SegmentMediadataVideo[];
-  audio: SegmentMediadataAudio[];
-}
-
 export interface PlayerState {
   ingestStarted: number | null;
   ingestStarting: boolean;
   ingestConnectionState: RTCPeerConnectionState | null;
-  viewers: number | null;
-  chat: { [key: string]: MessageViewHydrated };
-  chatList: MessageViewHydrated[];
-  livestream: LivestreamViewHydrated | null;
-  segment: PlaceStreamSegment.Record | null;
-  renditions: PlaceStreamDefs.Rendition[];
   selectedRendition: string | null;
   protocol: string;
-  replyToMessage: MessageViewHydrated | null;
 }
 
 export interface PlayersState {
@@ -97,49 +66,6 @@ interface Author {
   handle: string;
 }
 
-export const addLocalChatMessage = createAction(
-  "player/addLocalChatMessage",
-  ({
-    playerId,
-    message,
-    replyTo,
-    author,
-    chatProfile,
-  }: {
-    playerId: string;
-    message: string;
-    replyTo?: MessageViewHydrated;
-    author: Author;
-    chatProfile?: ChatProfile;
-  }) => {
-    const timestamp = Date.now();
-    const createdAt = new Date().toISOString();
-
-    const localMessage = {
-      uri: `local-${timestamp}`,
-      cid: `local-${timestamp}`,
-      indexedAt: createdAt,
-      author,
-      record: {
-        text: message,
-        createdAt,
-        ...(replyTo && {
-          reply: {
-            parent: { cid: replyTo.cid, uri: replyTo.uri },
-            root: { cid: replyTo.cid, uri: replyTo.uri },
-          },
-        }),
-      },
-      ...(replyTo && { replyTo }),
-      ...(chatProfile && { chatProfile }),
-    } as MessageViewHydrated;
-
-    return {
-      payload: { playerId, message: localMessage },
-    };
-  },
-);
-
 export const usePlayerId = () => {
   const { playerId } = useContext(PlayerContext);
   if (!playerId) {
@@ -148,90 +74,6 @@ export const usePlayerId = () => {
   return playerId;
 };
 
-const reduceChat = (
-  state: PlayerState,
-  messages: MessageViewHydrated[],
-  blocks: PlaceStreamDefs.BlockView[],
-): PlayerState => {
-  state = { ...state } as PlayerState;
-  const newChat: { [key: string]: MessageViewHydrated } = { ...state.chat };
-
-  // Add new messages
-  for (let message of messages) {
-    const date = new Date(message.record.createdAt);
-    const key = `${date.getTime()}-${message.uri}`;
-
-    // Remove existing local message matching the server one
-    if (!message.uri.startsWith("local-")) {
-      const existingLocalMessageKey = Object.keys(newChat).find((k) => {
-        const msg = newChat[k];
-        return (
-          msg.uri.startsWith("local-") &&
-          msg.record.text === message.record.text &&
-          msg.author.did === message.author.did
-        );
-      });
-
-      if (existingLocalMessageKey) {
-        delete newChat[existingLocalMessageKey];
-      }
-    }
-
-    // Handle reply information for local-first messages
-    if (message.record.reply) {
-      const reply = message.record.reply as {
-        parent?: { uri: string; cid: string };
-        root?: { uri: string; cid: string };
-      };
-
-      const parentUri = reply?.parent?.uri || reply?.root?.uri;
-
-      if (parentUri) {
-        // First try to find the parent message in our chat
-        const parentMsgKey = Object.keys(newChat).find(
-          (k) => newChat[k].uri === parentUri,
-        );
-
-        if (parentMsgKey) {
-          // Found the parent message, add its info to our message
-          const parentMsg = newChat[parentMsgKey];
-          message = {
-            ...message,
-            replyTo: {
-              cid: parentMsg.cid,
-              uri: parentMsg.uri,
-              author: parentMsg.author,
-              record: parentMsg.record,
-              chatProfile: parentMsg.chatProfile,
-              indexedAt: parentMsg.indexedAt,
-            },
-          };
-        }
-      }
-    }
-
-    newChat[key] = message;
-  }
-
-  for (const block of blocks) {
-    for (const [k, v] of Object.entries(newChat)) {
-      if (v.author.did === block.record.subject) {
-        delete newChat[k];
-      }
-    }
-  }
-
-  const newChatList = Object.keys(newChat)
-    .sort((a, b) => (a > b ? 1 : -1))
-    .map((key) => newChat[key]);
-
-  return {
-    ...state,
-    chat: newChat,
-    chatList: newChatList,
-  };
-};
-
 export const playerSlice = createAppSlice({
   name: "player",
   initialState,
@@ -247,15 +89,8 @@ export const playerSlice = createAppSlice({
           ingestStarted: null,
           ingestStarting: false,
           ingestConnectionState: null,
-          viewers: null,
           protocol: action.payload.forceProtocol ?? PROTOCOL_WEBRTC,
-          chat: {},
-          chatList: [],
-          livestream: null,
-          segment: null,
-          renditions: [],
           selectedRendition: "source",
-          replyToMessage: null,
         };
       },
     );
@@ -302,267 +137,6 @@ export const playerSlice = createAppSlice({
         },
       ),
 
-      handleWebSocketMessages: create.reducer(
-        (
-          state,
-          action: {
-            payload: { playerId: string; messages: any[] };
-            type: string;
-          },
-        ) => {
-          for (const message of action.payload.messages) {
-            if (PlaceStreamLivestream.isLivestreamView(message)) {
-              state = {
-                ...state,
-                [action.payload.playerId]: {
-                  ...state[action.payload.playerId],
-                  livestream: message as LivestreamViewHydrated,
-                },
-              };
-            } else if (PlaceStreamLivestream.isViewerCount(message)) {
-              state = {
-                ...state,
-                [action.payload.playerId]: {
-                  ...state[action.payload.playerId],
-                  viewers: message.count,
-                },
-              };
-            } else if (PlaceStreamChatDefs.isMessageView(message)) {
-              // Explicitly map MessageView to MessageViewHydrated
-              const hydrated: MessageViewHydrated = {
-                uri: message.uri,
-                cid: message.cid,
-                author: message.author,
-                record: message.record as PlaceStreamChatMessage.Record,
-                indexedAt: message.indexedAt,
-                chatProfile: (message as any).chatProfile,
-                replyTo: (message as any).replyTo,
-              };
-              state = {
-                ...state,
-                [action.payload.playerId]: reduceChat(
-                  state[action.payload.playerId] as PlayerState,
-                  [hydrated],
-                  [],
-                ),
-              };
-            } else if (PlaceStreamSegment.isRecord(message)) {
-              state = {
-                ...state,
-                [action.payload.playerId]: {
-                  ...state[action.payload.playerId],
-                  segment: message as PlaceStreamSegment.Record,
-                },
-              };
-            } else if (PlaceStreamDefs.isBlockView(message)) {
-              const block = message as PlaceStreamDefs.BlockView;
-              state = {
-                ...state,
-                [action.payload.playerId]: reduceChat(
-                  state[action.payload.playerId] as PlayerState,
-                  [],
-                  [block],
-                ),
-              };
-            } else if (PlaceStreamDefs.isRenditions(message)) {
-              state = {
-                ...state,
-                [action.payload.playerId]: {
-                  ...state[action.payload.playerId],
-                  renditions: message.renditions,
-                },
-              };
-            }
-          }
-          return state;
-        },
-      ),
-
-      addLocalChatMessage: create.reducer(
-        (
-          state,
-          action: {
-            payload: {
-              playerId: string;
-              message: MessageViewHydrated;
-            };
-            type: string;
-          },
-        ) => {
-          const { playerId, message } = action.payload;
-          if (!state[playerId]) return state;
-
-          const playerState = { ...state[playerId] } as PlayerState;
-
-          const newChat = { ...playerState.chat };
-          const date = new Date(message.record.createdAt);
-          const key = `${date.getTime()}-${message.uri}`;
-          newChat[key] = message;
-
-          const newChatList = Object.keys(newChat)
-            .sort((a, b) => (a > b ? 1 : -1))
-            .map((key) => newChat[key]);
-
-          return {
-            ...state,
-            [playerId]: {
-              ...playerState,
-              chat: newChat,
-              chatList: newChatList,
-            },
-          };
-        },
-      ),
-
-      setReplyToMessage: create.reducer(
-        (
-          state,
-          action: {
-            payload: { playerId: string; message: MessageViewHydrated | null };
-            type: string;
-          },
-        ) => {
-          return {
-            ...state,
-            [action.payload.playerId]: {
-              ...state[action.payload.playerId],
-              replyToMessage: action.payload.message,
-            },
-          };
-        },
-      ),
-
-      pollViewers: create.asyncThunk(
-        async (
-          { playerId, user }: { playerId: string; user: string },
-          { getState },
-        ) => {
-          const { streamplace } = getState() as {
-            streamplace: StreamplaceState;
-          };
-          const res = await fetch(`${streamplace.url}/api/view-count/${user}`);
-          const data = (await res.json()) as PlaceStreamLivestream.ViewerCount;
-          return { playerId, count: data.count };
-        },
-        {
-          pending: (state) => {
-            // state.status = "loading";
-          },
-          fulfilled: (state, result) => {
-            return {
-              ...state,
-              [result.payload.playerId]: {
-                ...state[result.payload.playerId],
-                viewers: result.payload.count,
-              },
-            };
-          },
-          rejected: (state, error) => {
-            console.error("pollViewers rejected", error);
-            return state;
-          },
-        },
-      ),
-
-      pollChat: create.asyncThunk(
-        async (
-          { playerId, user }: { playerId: string; user: string },
-          { getState },
-        ) => {
-          const { streamplace } = getState() as {
-            streamplace: StreamplaceState;
-          };
-          const res = await fetch(`${streamplace.url}/api/chat/${user}`);
-          const data = (await res.json()) as MessageViewHydrated[];
-          return { playerId, chat: data };
-        },
-        {
-          pending: (state) => {
-            // state.status = "loading";
-          },
-          fulfilled: (state, result) => {
-            return {
-              ...state,
-              [result.payload.playerId]: reduceChat(
-                state[result.payload.playerId] as PlayerState,
-                result.payload.chat,
-                [],
-              ),
-            };
-          },
-          rejected: (state, error) => {
-            console.error("pollViewers rejected", error);
-            return state;
-          },
-        },
-      ),
-
-      pollLivestream: create.asyncThunk(
-        async (
-          { playerId, user }: { playerId: string; user: string },
-          { getState },
-        ) => {
-          const { streamplace } = getState() as {
-            streamplace: StreamplaceState;
-          };
-          const res = await fetch(`${streamplace.url}/api/livestream/${user}`);
-          const data = (await res.json()) as LivestreamViewHydrated;
-          return { playerId, livestream: data };
-        },
-        {
-          pending: (state) => {
-            // state.status = "loading";
-          },
-          fulfilled: (state, result) => {
-            return {
-              ...state,
-              [result.payload.playerId]: {
-                ...state[result.payload.playerId],
-                livestream: result.payload.livestream,
-              },
-            };
-          },
-          rejected: (state, error) => {
-            console.error("pollViewers rejected", error);
-            return state;
-          },
-        },
-      ),
-
-      pollSegment: create.asyncThunk(
-        async (
-          { playerId, user }: { playerId: string; user: string },
-          { getState },
-        ) => {
-          const { streamplace } = getState() as {
-            streamplace: StreamplaceState;
-          };
-          const res = await fetch(
-            `${streamplace.url}/api/segment/recent/${user}`,
-          );
-          const data = (await res.json()) as PlaceStreamSegment.Record;
-          return { playerId, segment: data };
-        },
-        {
-          pending: (state) => {
-            // state.status = "loading";
-          },
-          fulfilled: (state, result) => {
-            return {
-              ...state,
-              [result.payload.playerId]: {
-                ...state[result.payload.playerId],
-                segment: result.payload.segment,
-              },
-            };
-          },
-          rejected: (state, error) => {
-            console.error("pollViewers rejected", error);
-            return state;
-          },
-        },
-      ),
-
       setSelectedRendition: create.reducer(
         (
           state,
@@ -613,18 +187,6 @@ export const playerSlice = createAppSlice({
     selectPlayer: (state, playerId: string) => {
       return state[playerId];
     },
-    selectChat: (state, playerId: string) => {
-      return state[playerId].chat;
-    },
-    selectLivestream: (state, playerId: string) => {
-      return state[playerId].livestream;
-    },
-    selectSegment: (state, playerId: string) => {
-      return state[playerId].segment;
-    },
-    selectRenditions: (state, playerId: string) => {
-      return state[playerId].renditions;
-    },
     selectSelectedRendition: (state, playerId: string) => {
       return state[playerId].selectedRendition;
     },
@@ -647,58 +209,21 @@ export const usePlayerActions = () => {
         ingestConnectionState,
       });
     },
-    pollViewers: (user: string) =>
-      playerSlice.actions.pollViewers({ playerId, user }),
-    pollChat: (user: string) =>
-      playerSlice.actions.pollChat({ playerId, user }),
-    pollLivestream: (user: string) =>
-      playerSlice.actions.pollLivestream({ playerId, user }),
-    pollSegment: (user: string) =>
-      playerSlice.actions.pollSegment({ playerId, user }),
-    handleWebSocketMessages: (messages: any[]) =>
-      playerSlice.actions.handleWebSocketMessages({ playerId, messages }),
     setSelectedRendition: (rendition: string) =>
       playerSlice.actions.setSelectedRendition({ playerId, rendition }),
     setProtocol: (protocol: string) =>
       playerSlice.actions.setProtocol({ playerId, protocol }),
-    setReplyToMessage: (message: MessageViewHydrated | null) =>
-      dispatch(playerSlice.actions.setReplyToMessage({ playerId, message })),
   };
 };
 
 // Action creators are generated for each case reducer function.
-export const { selectPlayer, selectChat, selectLivestream, selectSegment } =
-  playerSlice.selectors;
+export const { selectPlayer } = playerSlice.selectors;
 export const usePlayer = (): ((state: {
   player: PlayersState;
 }) => PlayerState) => {
   const playerId = usePlayerId();
   return (state) => state.player[playerId];
 };
-export const useChat = (): ((state: {
-  player: PlayersState;
-}) => MessageViewHydrated[] | null) => {
-  const playerId = usePlayerId();
-  return (state) => state.player[playerId].chatList;
-};
-export const usePlayerLivestream = (): ((state: {
-  player: PlayersState;
-}) => LivestreamViewHydrated | null) => {
-  const playerId = usePlayerId();
-  return (state) => state.player[playerId].livestream;
-};
-export const usePlayerSegment = (): ((state: {
-  player: PlayersState;
-}) => PlaceStreamSegment.Record | null) => {
-  const playerId = usePlayerId();
-  return (state) => state.player[playerId].segment;
-};
-export const usePlayerRenditions = (): ((state: {
-  player: PlayersState;
-}) => PlaceStreamDefs.Rendition[]) => {
-  const playerId = usePlayerId();
-  return (state) => state.player[playerId].renditions;
-};
 export const usePlayerSelectedRendition = (): ((state: {
   player: PlayersState;
 }) => string | null) => {
@@ -711,9 +236,3 @@ export const usePlayerProtocol = (): ((state: {
   const playerId = usePlayerId();
   return (state) => state.player[playerId].protocol;
 };
-export const useReplyToMessage = (): ((state: {
-  player: PlayersState;
-}) => MessageViewHydrated | null) => {
-  const playerId = usePlayerId();
-  return (state) => state.player[playerId].replyToMessage;
-};
diff --git a/js/app/features/streamplace/streamplaceSlice.tsx b/js/app/features/streamplace/streamplaceSlice.tsx
index 88ef9f48..12bb1f07 100644
--- a/js/app/features/streamplace/streamplaceSlice.tsx
+++ b/js/app/features/streamplace/streamplaceSlice.tsx
@@ -273,7 +273,7 @@ export const streamplaceSlice = createAppSlice({
           throw new Error("no oauthSession");
         }
         return await bluesky.pdsAgent.place.stream.live.getSegments({
-          userDID: bluesky.oauthSession.did,
+          userDID: bluesky.oauthSession?.did ?? "",
         });
       },
       {
@@ -289,7 +289,7 @@ export const streamplaceSlice = createAppSlice({
           };
         },
         rejected: (state, err) => {
-          console.error("pollMySegments rejected", err);
+          // console.error("pollMySegments rejected", err);
           return {
             ...state,
           };
diff --git a/js/app/package.json b/js/app/package.json
index 4b79b981..a1c4a9b7 100644
--- a/js/app/package.json
+++ b/js/app/package.json
@@ -41,6 +41,7 @@
     "@react-navigation/native-stack": "^6.11.0",
     "@reduxjs/toolkit": "^2.3.0",
     "@streamplace/atproto-oauth-client-react-native": "workspace:*",
+    "@streamplace/components": "workspace:*",
     "@tamagui/config": "^1.123.17",
     "@tamagui/lucide-icons": "^1.123.17",
     "@tamagui/toast": "^1.123.17",
diff --git a/js/app/src/router.tsx b/js/app/src/router.tsx
index e883d700..f9a6753f 100644
--- a/js/app/src/router.tsx
+++ b/js/app/src/router.tsx
@@ -80,6 +80,17 @@ import { loadStateFromStorage } from "features/base/sidebarSlice";
 import { store } from "store/store";
 import HomeScreen from "./screens/home";
 
+import {
+  configureReanimatedLogger,
+  ReanimatedLogLevel,
+} from "react-native-reanimated";
+
+// slows down the whole app
+configureReanimatedLogger({
+  level: ReanimatedLogLevel.warn,
+  strict: false,
+});
+
 store.dispatch(loadStateFromStorage());
 
 const Stack = createNativeStackNavigator();
diff --git a/js/app/src/screens/live-dashboard.tsx b/js/app/src/screens/live-dashboard.tsx
index 9d6a424b..cf9f84be 100644
--- a/js/app/src/screens/live-dashboard.tsx
+++ b/js/app/src/screens/live-dashboard.tsx
@@ -1,3 +1,4 @@
+import { LivestreamProvider } from "@streamplace/components";
 import { Camera, FerrisWheel, X } from "@tamagui/lucide-icons";
 import { Redirect } from "components/aqlink";
 import CreateLivestream from "components/create-livestream";
@@ -96,29 +97,33 @@ export default function LiveDashboard() {
     );
   }
   return (
-    <VideoElementProvider videoElement={videoElement}>
-      <View f={1} ai="stretch" jc="center">
-        <View f={1} fb={0}>
-          {topPane}
-          {closeButton}
+    <LivestreamProvider src={userProfile.did}>
+      <VideoElementProvider videoElement={videoElement}>
+        <View f={1} ai="stretch" jc="center">
+          <View f={1} fb={0}>
+            {topPane}
+            {closeButton}
+          </View>
+          <View f={1} ai="center" jc="center" fb={0}>
+            <ButtonSelector
+              values={[
+                { label: "Create", value: "create" },
+                { label: "Update", value: "update" },
+              ]}
+              disabledValues={playerId ? [] : ["update"]}
+              selectedValue={page}
+              setSelectedValue={setPage}
+              maxWidth={250}
+              width="100%"
+            />
+            {page === "update" ? (
+              <UpdateLivestream playerId={playerId} />
+            ) : null}
+            {page === "create" ? <CreateLivestream /> : null}
+          </View>
         </View>
-        <View f={1} ai="center" jc="center" fb={0}>
-          <ButtonSelector
-            values={[
-              { label: "Create", value: "create" },
-              { label: "Update", value: "update" },
-            ]}
-            disabledValues={playerId ? [] : ["update"]}
-            selectedValue={page}
-            setSelectedValue={setPage}
-            maxWidth={250}
-            width="100%"
-          />
-          {page === "update" ? <UpdateLivestream playerId={playerId} /> : null}
-          {page === "create" ? <CreateLivestream /> : null}
-        </View>
-      </View>
-    </VideoElementProvider>
+      </VideoElementProvider>
+    </LivestreamProvider>
   );
 }
 
diff --git a/js/app/store/store.tsx b/js/app/store/store.tsx
index 08d7dc6d..58c7efb4 100644
--- a/js/app/store/store.tsx
+++ b/js/app/store/store.tsx
@@ -34,7 +34,7 @@ export const makeStore = (preloadedState?: Partial<RootState>) => {
           // Ignore these field paths in all actions
           ignoredActionPaths: ["payload"],
           // Ignore these paths in the state
-          ignoredPaths: [/^bluesky\..*/],
+          ignoredPaths: [/^bluesky\..*/, /^streamplace\..*/],
         },
       }).prepend(listenerMiddleware.middleware);
     },
diff --git a/js/atproto-oauth-client-react-native/package.json b/js/atproto-oauth-client-react-native/package.json
index 49f48b98..72e7de89 100644
--- a/js/atproto-oauth-client-react-native/package.json
+++ b/js/atproto-oauth-client-react-native/package.json
@@ -25,7 +25,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
     "@atproto-labs/did-resolver": "0.1.12",
diff --git a/js/components/README.md b/js/components/README.md
new file mode 100644
index 00000000..a863d8d2
--- /dev/null
+++ b/js/components/README.md
@@ -0,0 +1,35 @@
+# @streamplace/components
+
+Heavily WIP but looks something like this:
+
+```tsx
+import {
+  StreamplaceProvider,
+  LivestreamProvider,
+} from "@streamplace/components";
+
+export function Provider() {
+  <StreamplaceProvider url="https://stream.place" oauthSession={userSession}>
+    {/* Everything inside of here can access that Streamplace node */}
+
+    <LivestreamProvider src="example.bsky.social" /* or did:plc:xxxx */>
+      {/* Everything in here has an active subscription to the livestream
+        context via Websocket; things like chat data and stream title */}
+      <App />
+    </LivestreamProvider>
+  </StreamplaceProvider>;
+}
+
+export function App() {
+  const chat = useChat();
+  return (
+    <View>
+      {chat.map((msg) => (
+        <Text>
+          @{msg.author.handle}: {msg.record.text}
+        </Text>
+      ))}
+    </View>
+  );
+}
+```
diff --git a/js/components/package.json b/js/components/package.json
new file mode 100644
index 00000000..a236fd6f
--- /dev/null
+++ b/js/components/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@streamplace/components",
+  "version": "0.0.1",
+  "description": "Streamplace React (Native) Components",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "src/index.tsx",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mjs",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "postinstall": "pnpm run build",
+    "start": "tsc --watch --preserveWatchOutput"
+  },
+  "keywords": [
+    "streamplace"
+  ],
+  "author": "Streamplace",
+  "license": "MIT",
+  "packageManager": "pnpm@10.11.0",
+  "devDependencies": {
+    "tsup": "^8.5.0"
+  },
+  "dependencies": {
+    "@atproto/api": "^0.15.7",
+    "react-native": "0.76.2",
+    "react-use-websocket": "^4.13.0",
+    "streamplace": "workspace:*",
+    "zustand": "^5.0.5"
+  },
+  "peerDependencies": {
+    "react": "*"
+  }
+}
diff --git a/js/components/src/index.tsx b/js/components/src/index.tsx
new file mode 100644
index 00000000..fa545229
--- /dev/null
+++ b/js/components/src/index.tsx
@@ -0,0 +1,4 @@
+export * from "./livestream-provider";
+export * from "./livestream-store";
+export * from "./streamplace-provider";
+export * from "./streamplace-store";
diff --git a/js/components/src/livestream-provider/index.tsx b/js/components/src/livestream-provider/index.tsx
new file mode 100644
index 00000000..0649bca3
--- /dev/null
+++ b/js/components/src/livestream-provider/index.tsx
@@ -0,0 +1,37 @@
+import React, { useContext, useRef } from "react";
+import { LivestreamContext, makeLivestreamStore } from "../livestream-store";
+import { useLivestreamWebsocket } from "./websocket";
+
+export function LivestreamProvider({
+  children,
+  src,
+}: {
+  children: React.ReactNode;
+  src: string;
+}) {
+  const context = useContext(LivestreamContext);
+  const store = useRef(makeLivestreamStore()).current;
+  if (context) {
+    // this is ok, there's use cases for having one in another
+    // like having a player component that's independently usable
+    // but can also be embedded within an entire livestream page
+    return <>{children}</>;
+  }
+  (window as any).livestreamStore = store;
+  return (
+    <LivestreamContext.Provider value={{ store: store }}>
+      <LivestreamPoller src={src}>{children}</LivestreamPoller>
+    </LivestreamContext.Provider>
+  );
+}
+
+export function LivestreamPoller({
+  children,
+  src,
+}: {
+  children: React.ReactNode;
+  src: string;
+}) {
+  useLivestreamWebsocket(src);
+  return <>{children}</>;
+}
diff --git a/js/components/src/livestream-provider/websocket.tsx b/js/components/src/livestream-provider/websocket.tsx
new file mode 100644
index 00000000..54e6fa9b
--- /dev/null
+++ b/js/components/src/livestream-provider/websocket.tsx
@@ -0,0 +1,47 @@
+import { useRef } from "react";
+import useWebSocket from "react-use-websocket";
+import { useHandleWebsocketMessages } from "../livestream-store";
+import { useUrl } from "../streamplace-store";
+
+export function useLivestreamWebsocket(src: string) {
+  const url = useUrl();
+  const handleWebSocketMessages = useHandleWebsocketMessages();
+
+  let wsUrl = url.replace(/^http\:/, "ws:");
+  wsUrl = wsUrl.replace(/^https\:/, "wss:");
+
+  const ref = useRef<any[]>([]);
+  const handle = useRef<NodeJS.Timeout | null>(null);
+
+  const { readyState } = useWebSocket(`${wsUrl}/api/websocket/${src}`, {
+    reconnectInterval: 1000,
+    shouldReconnect: () => true,
+
+    onOpen: () => {
+      ref.current = [];
+    },
+
+    onError: (e) => {
+      console.log("onError", e);
+    },
+
+    // spamming the redux store with messages causes a zillion re-renders,
+    // so we batch them up a bit
+    onMessage: (msg) => {
+      try {
+        const data = JSON.parse(msg.data);
+        ref.current.push(data);
+        if (handle.current) {
+          return;
+        }
+        handle.current = setTimeout(() => {
+          handleWebSocketMessages(ref.current);
+          ref.current = [];
+          handle.current = null;
+        }, 250);
+      } catch (e) {
+        console.log("onMessage parse error", e);
+      }
+    },
+  });
+}
diff --git a/js/components/src/livestream-store/chat.tsx b/js/components/src/livestream-store/chat.tsx
new file mode 100644
index 00000000..b1557441
--- /dev/null
+++ b/js/components/src/livestream-store/chat.tsx
@@ -0,0 +1,212 @@
+import { RichText } from "@atproto/api";
+import {
+  isLink,
+  isMention,
+} from "@atproto/api/dist/client/types/app/bsky/richtext/facet";
+import {
+  ChatMessageViewHydrated,
+  PlaceStreamChatMessage,
+  PlaceStreamDefs,
+} from "streamplace";
+import { useChatProfile, useDID, useHandle } from "../streamplace-store";
+import { usePDSAgent } from "../streamplace-store/xrpc";
+import { LivestreamState } from "./livestream-state";
+import { getStoreFromContext, useLivestreamStore } from "./livestream-store";
+
+export const useReplyToMessage = () =>
+  useLivestreamStore((state) => state.replyToMessage);
+
+export const useSetReplyToMessage = () => {
+  const store = getStoreFromContext();
+  return (message: ChatMessageViewHydrated | null) => {
+    store.setState({ replyToMessage: message });
+  };
+};
+
+export type NewChatMessage = {
+  text: string;
+  reply?: {
+    cid: string;
+    uri: string;
+  };
+};
+
+export const useCreateChatMessage = () => {
+  const pdsAgent = usePDSAgent();
+  const store = getStoreFromContext();
+  const userDID = useDID();
+  const userHandle = useHandle();
+  const chatProfile = useChatProfile();
+
+  return async (msg: NewChatMessage) => {
+    if (!pdsAgent || !userDID) {
+      throw new Error("No PDS agent or user DID found");
+    }
+
+    let state = store.getState();
+
+    const streamerProfile = state.profile;
+
+    if (!streamerProfile) {
+      throw new Error("Profile not found");
+    }
+
+    const rt = new RichText({ text: msg.text });
+    rt.detectFacetsWithoutResolution();
+
+    const record: PlaceStreamChatMessage.Record = {
+      text: msg.text,
+      createdAt: new Date().toISOString(),
+      streamer: streamerProfile.did,
+      ...(msg.reply
+        ? {
+            reply: {
+              root: {
+                cid: msg.reply.cid,
+                uri: msg.reply.uri,
+              },
+              parent: {
+                cid: msg.reply.cid,
+                uri: msg.reply.uri,
+              },
+            },
+          }
+        : {}),
+      ...(rt.facets && rt.facets.length > 0
+        ? {
+            facets: rt.facets.map((facet) => ({
+              index: facet.index,
+              features: facet.features
+                .filter(
+                  (feature) =>
+                    feature.$type === "app.bsky.richtext.facet#link" ||
+                    feature.$type === "app.bsky.richtext.facet#mention",
+                )
+                .map((feature) => {
+                  if (isLink(feature)) {
+                    return {
+                      $type: "app.bsky.richtext.facet#link",
+                      uri: feature.uri,
+                    };
+                  } else if (isMention(feature)) {
+                    return {
+                      $type: "app.bsky.richtext.facet#mention",
+                      did: feature.did,
+                    };
+                  } else {
+                    throw new Error("invalid code path");
+                  }
+                }),
+            })),
+          }
+        : {}),
+    };
+
+    const localChat: ChatMessageViewHydrated = {
+      uri: `local-${Date.now()}`,
+      cid: "",
+      author: {
+        did: userDID,
+        handle: userHandle || userDID,
+      },
+      record: record,
+      indexedAt: new Date().toISOString(),
+      chatProfile: chatProfile || undefined,
+    };
+
+    state = reduceChat(state, [localChat], []);
+    store.setState(state);
+
+    await pdsAgent.com.atproto.repo.createRecord({
+      repo: userDID,
+      collection: "place.stream.chat.message",
+      record,
+    });
+  };
+};
+
+export const reduceChat = (
+  state: LivestreamState,
+  messages: ChatMessageViewHydrated[],
+  blocks: PlaceStreamDefs.BlockView[],
+): LivestreamState => {
+  state = { ...state } as LivestreamState;
+  const newChat: { [key: string]: ChatMessageViewHydrated } = {
+    ...state.chatIndex,
+  };
+
+  // Add new messages
+  for (let message of messages) {
+    const date = new Date(message.record.createdAt);
+    const key = `${date.getTime()}-${message.uri}`;
+
+    // Remove existing local message matching the server one
+    if (!message.uri.startsWith("local-")) {
+      const existingLocalMessageKey = Object.keys(newChat).find((k) => {
+        const msg = newChat[k];
+        return (
+          msg.uri.startsWith("local-") &&
+          msg.record.text === message.record.text &&
+          msg.author.did === message.author.did
+        );
+      });
+
+      if (existingLocalMessageKey) {
+        delete newChat[existingLocalMessageKey];
+      }
+    }
+
+    // Handle reply information for local-first messages
+    if (message.record.reply) {
+      const reply = message.record.reply as {
+        parent?: { uri: string; cid: string };
+        root?: { uri: string; cid: string };
+      };
+
+      const parentUri = reply?.parent?.uri || reply?.root?.uri;
+
+      if (parentUri) {
+        // First try to find the parent message in our chat
+        const parentMsgKey = Object.keys(newChat).find(
+          (k) => newChat[k].uri === parentUri,
+        );
+
+        if (parentMsgKey) {
+          // Found the parent message, add its info to our message
+          const parentMsg = newChat[parentMsgKey];
+          message = {
+            ...message,
+            replyTo: {
+              cid: parentMsg.cid,
+              uri: parentMsg.uri,
+              author: parentMsg.author,
+              record: parentMsg.record,
+              chatProfile: parentMsg.chatProfile,
+              indexedAt: parentMsg.indexedAt,
+            },
+          };
+        }
+      }
+    }
+
+    newChat[key] = message;
+  }
+
+  for (const block of blocks) {
+    for (const [k, v] of Object.entries(newChat)) {
+      if (v.author.did === block.record.subject) {
+        delete newChat[k];
+      }
+    }
+  }
+
+  const newChatList = Object.keys(newChat)
+    .sort((a, b) => (a > b ? 1 : -1))
+    .map((key) => newChat[key]);
+
+  return {
+    ...state,
+    chatIndex: newChat,
+    chat: newChatList,
+  };
+};
diff --git a/js/components/src/livestream-store/context.tsx b/js/components/src/livestream-store/context.tsx
new file mode 100644
index 00000000..a51708e2
--- /dev/null
+++ b/js/components/src/livestream-store/context.tsx
@@ -0,0 +1,10 @@
+import { createContext } from "react";
+import { LivestreamStore } from "../livestream-store/livestream-store";
+
+type LivestreamContextType = {
+  store: LivestreamStore;
+};
+
+export const LivestreamContext = createContext<LivestreamContextType | null>(
+  null,
+);
diff --git a/js/components/src/livestream-store/index.tsx b/js/components/src/livestream-store/index.tsx
new file mode 100644
index 00000000..bc31680b
--- /dev/null
+++ b/js/components/src/livestream-store/index.tsx
@@ -0,0 +1,3 @@
+export * from "./chat";
+export * from "./context";
+export * from "./livestream-store";
diff --git a/js/components/src/livestream-store/livestream-state.tsx b/js/components/src/livestream-store/livestream-state.tsx
new file mode 100644
index 00000000..f6fb33c6
--- /dev/null
+++ b/js/components/src/livestream-store/livestream-state.tsx
@@ -0,0 +1,18 @@
+import { AppBskyActorDefs } from "@atproto/api";
+import {
+  ChatMessageViewHydrated,
+  LivestreamViewHydrated,
+  PlaceStreamDefs,
+  PlaceStreamSegment,
+} from "streamplace";
+
+export interface LivestreamState {
+  profile: AppBskyActorDefs.ProfileViewBasic | null;
+  chatIndex: { [key: string]: ChatMessageViewHydrated };
+  chat: ChatMessageViewHydrated[];
+  livestream: LivestreamViewHydrated | null;
+  viewers: number | null;
+  segment: PlaceStreamSegment.Record | null;
+  renditions: PlaceStreamDefs.Rendition[];
+  replyToMessage: ChatMessageViewHydrated | null;
+}
diff --git a/js/components/src/livestream-store/livestream-store.tsx b/js/components/src/livestream-store/livestream-store.tsx
new file mode 100644
index 00000000..4356b736
--- /dev/null
+++ b/js/components/src/livestream-store/livestream-store.tsx
@@ -0,0 +1,56 @@
+import { useContext } from "react";
+import { createStore, StoreApi, useStore } from "zustand";
+import { LivestreamContext } from "./context";
+import { LivestreamState } from "./livestream-state";
+import { handleWebSocketMessages } from "./websocket-consumer";
+
+export type LivestreamStore = StoreApi<LivestreamState>;
+
+export const makeLivestreamStore = (): StoreApi<LivestreamState> => {
+  return createStore<LivestreamState>()((set) => ({
+    profile: null,
+    chatIndex: {},
+    chat: [],
+    livestream: null,
+    viewers: null,
+    segment: null,
+    renditions: [],
+    replyToMessage: null,
+  }));
+};
+
+export function getStoreFromContext(): LivestreamStore {
+  const context = useContext(LivestreamContext);
+  if (!context) {
+    throw new Error(
+      "useLivestreamStore must be used within a LivestreamProvider",
+    );
+  }
+  return context.store;
+}
+
+export function useLivestreamStore<U>(
+  selector: (state: LivestreamState) => U,
+): U {
+  const store = getStoreFromContext();
+  return useStore(store, selector);
+}
+
+export const useHandleWebsocketMessages = () => {
+  const store = getStoreFromContext();
+  return (messages: any[]) => {
+    store.setState((state) => handleWebSocketMessages(state, messages));
+  };
+};
+
+export const useChat = () => useLivestreamStore((x) => x.chat);
+
+export const useProfile = () => useLivestreamStore((x) => x.profile);
+
+export const useViewers = () => useLivestreamStore((x) => x.viewers);
+
+export const useLivestream = () => useLivestreamStore((x) => x.livestream);
+
+export const useSegment = () => useLivestreamStore((x) => x.segment);
+
+export const useRenditions = () => useLivestreamStore((x) => x.renditions);
diff --git a/js/components/src/livestream-store/websocket-consumer.tsx b/js/components/src/livestream-store/websocket-consumer.tsx
new file mode 100644
index 00000000..8b04ffdc
--- /dev/null
+++ b/js/components/src/livestream-store/websocket-consumer.tsx
@@ -0,0 +1,62 @@
+import { AppBskyActorDefs } from "@atproto/api";
+import {
+  ChatMessageViewHydrated,
+  LivestreamViewHydrated,
+  PlaceStreamChatDefs,
+  PlaceStreamChatMessage,
+  PlaceStreamDefs,
+  PlaceStreamLivestream,
+  PlaceStreamSegment,
+} from "streamplace";
+import { reduceChat } from "./chat";
+import { LivestreamState } from "./livestream-state";
+
+export const handleWebSocketMessages = (
+  state: LivestreamState,
+  messages: any[],
+): LivestreamState => {
+  for (const message of messages) {
+    if (PlaceStreamLivestream.isLivestreamView(message)) {
+      state = {
+        ...state,
+        livestream: message as LivestreamViewHydrated,
+      };
+    } else if (PlaceStreamLivestream.isViewerCount(message)) {
+      state = {
+        ...state,
+        viewers: message.count,
+      };
+    } else if (PlaceStreamChatDefs.isMessageView(message)) {
+      // Explicitly map MessageView to MessageViewHydrated
+      const hydrated: ChatMessageViewHydrated = {
+        uri: message.uri,
+        cid: message.cid,
+        author: message.author,
+        record: message.record as PlaceStreamChatMessage.Record,
+        indexedAt: message.indexedAt,
+        chatProfile: (message as any).chatProfile,
+        replyTo: (message as any).replyTo,
+      };
+      state = reduceChat(state, [hydrated], []);
+    } else if (PlaceStreamSegment.isRecord(message)) {
+      state = {
+        ...state,
+        segment: message as PlaceStreamSegment.Record,
+      };
+    } else if (PlaceStreamDefs.isBlockView(message)) {
+      const block = message as PlaceStreamDefs.BlockView;
+      state = reduceChat(state, [], [block]);
+    } else if (PlaceStreamDefs.isRenditions(message)) {
+      state = {
+        ...state,
+        renditions: message.renditions,
+      };
+    } else if (AppBskyActorDefs.isProfileViewBasic(message)) {
+      state = {
+        ...state,
+        profile: message,
+      };
+    }
+  }
+  return reduceChat(state, [], []);
+};
diff --git a/js/components/src/streamplace-provider/context.tsx b/js/components/src/streamplace-provider/context.tsx
new file mode 100644
index 00000000..e89b42c6
--- /dev/null
+++ b/js/components/src/streamplace-provider/context.tsx
@@ -0,0 +1,10 @@
+import { createContext } from "react";
+import { StreamplaceStore } from "../streamplace-store/streamplace-store";
+
+type StreamplaceContextType = {
+  store: StreamplaceStore;
+};
+
+export const StreamplaceContext = createContext<StreamplaceContextType | null>(
+  null,
+);
diff --git a/js/components/src/streamplace-provider/index.tsx b/js/components/src/streamplace-provider/index.tsx
new file mode 100644
index 00000000..50b08c88
--- /dev/null
+++ b/js/components/src/streamplace-provider/index.tsx
@@ -0,0 +1,32 @@
+import { SessionManager } from "@atproto/api/dist/session-manager";
+import { useEffect, useRef } from "react";
+import { makeStreamplaceStore } from "../streamplace-store/streamplace-store";
+import { StreamplaceContext } from "./context";
+import Poller from "./poller";
+
+export function StreamplaceProvider({
+  children,
+  url,
+  oauthSession,
+}: {
+  children: React.ReactNode;
+  url: string;
+  oauthSession?: SessionManager;
+}) {
+  // todo: handle url changes?
+  const store = useRef(makeStreamplaceStore({ url })).current;
+
+  useEffect(() => {
+    store.setState({ url });
+  }, [url]);
+
+  useEffect(() => {
+    store.setState({ oauthSession });
+  }, [oauthSession]);
+
+  return (
+    <StreamplaceContext.Provider value={{ store: store }}>
+      <Poller>{children}</Poller>
+    </StreamplaceContext.Provider>
+  );
+}
diff --git a/js/components/src/streamplace-provider/poller.tsx b/js/components/src/streamplace-provider/poller.tsx
new file mode 100644
index 00000000..283662e2
--- /dev/null
+++ b/js/components/src/streamplace-provider/poller.tsx
@@ -0,0 +1,38 @@
+import React, { useEffect } from "react";
+import { StreamplaceAgent } from "streamplace";
+import {
+  useDID,
+  useGetBskyProfile,
+  useGetChatProfile,
+  useStreamplaceStore,
+} from "../streamplace-store";
+import { usePDSAgent } from "../streamplace-store/xrpc";
+
+export default function Poller({ children }: { children: React.ReactNode }) {
+  const url = useStreamplaceStore((state) => state.url);
+  const setLiveUsers = useStreamplaceStore((state) => state.setLiveUsers);
+  const did = useDID();
+  const pdsAgent = usePDSAgent();
+  const getChatProfile = useGetChatProfile();
+  const getBskyProfile = useGetBskyProfile();
+
+  useEffect(() => {
+    if (pdsAgent && did) {
+      getChatProfile();
+      getBskyProfile();
+    }
+  }, [pdsAgent, did]);
+
+  useEffect(() => {
+    const agent = new StreamplaceAgent(url);
+    const go = async () => {
+      const res = await agent.place.stream.live.getLiveUsers();
+      setLiveUsers(res.data.streams || []);
+    };
+    go();
+    const handle = setInterval(go, 3000);
+    return () => clearInterval(handle);
+  }, [url]);
+
+  return <>{children}</>;
+}
diff --git a/js/components/src/streamplace-provider/xrpc.tsx b/js/components/src/streamplace-provider/xrpc.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/js/components/src/streamplace-store/index.tsx b/js/components/src/streamplace-store/index.tsx
new file mode 100644
index 00000000..d860faa4
--- /dev/null
+++ b/js/components/src/streamplace-store/index.tsx
@@ -0,0 +1,2 @@
+export * from "./streamplace-store";
+export * from "./user";
diff --git a/js/components/src/streamplace-store/streamplace-store.tsx b/js/components/src/streamplace-store/streamplace-store.tsx
new file mode 100644
index 00000000..79e2f4e0
--- /dev/null
+++ b/js/components/src/streamplace-store/streamplace-store.tsx
@@ -0,0 +1,71 @@
+import { SessionManager } from "@atproto/api/dist/session-manager";
+import { useContext } from "react";
+import { PlaceStreamChatProfile, PlaceStreamLivestream } from "streamplace";
+import { createStore, StoreApi, useStore } from "zustand";
+import { StreamplaceContext } from "../streamplace-provider/context";
+
+// there are three categories of XRPC that we need to handle:
+// 1. Public (probably) OAuth XRPC to the users' PDS for apps that use this API.
+// 2. Confidental OAuth to the Streamplace server for doing things that require
+//    server-side authentication. This isn't very much stuff yet, but you need
+//    to log into Streamplace to do things like have Streamplace update your
+//    activity status.
+// 3. Anonymous XRPC to the Streamplace server for stuff like `getLiveUsers`. This
+//    is easy to handle internal to this library.
+// For the Streamplace app itself, all three are the same. For apps that aren't
+// doing OAuth through the Streamplace node, we need to expose an interface that
+// allows them to use atcute or whatever for 1.
+
+export interface StreamplaceState {
+  url: string;
+  liveUsers: PlaceStreamLivestream.LivestreamView[];
+  setLiveUsers: (users: PlaceStreamLivestream.LivestreamView[]) => void;
+  oauthSession: SessionManager | null;
+  handle: string | null;
+  chatProfile: PlaceStreamChatProfile.Record | null;
+}
+
+export type StreamplaceStore = StoreApi<StreamplaceState>;
+
+export const makeStreamplaceStore = ({
+  url,
+}: {
+  url: string;
+}): StoreApi<StreamplaceState> => {
+  return createStore<StreamplaceState>()((set) => ({
+    url,
+    liveUsers: [],
+    setLiveUsers: (users: PlaceStreamLivestream.LivestreamView[]) => {
+      set({ liveUsers: users });
+    },
+    oauthSession: null,
+    handle: null,
+    chatProfile: null,
+  }));
+};
+
+export function getStreamplaceStoreFromContext(): StreamplaceStore {
+  const context = useContext(StreamplaceContext);
+  if (!context) {
+    throw new Error(
+      "useStreamplaceStore must be used within a StreamplaceProvider",
+    );
+  }
+  return context.store;
+}
+
+export function useStreamplaceStore<U>(
+  selector: (state: StreamplaceState) => U,
+): U {
+  return useStore(getStreamplaceStoreFromContext(), selector);
+}
+
+export const useUrl = () => useStreamplaceStore((x) => x.url);
+
+export const useDID = () => useStreamplaceStore((x) => x.oauthSession?.did);
+
+export const useHandle = () => useStreamplaceStore((x) => x.handle);
+export const useSetHandle = (): ((handle: string) => void) => {
+  const store = getStreamplaceStoreFromContext();
+  return (handle: string) => store.setState({ handle });
+};
diff --git a/js/components/src/streamplace-store/user.tsx b/js/components/src/streamplace-store/user.tsx
new file mode 100644
index 00000000..6d6c3c84
--- /dev/null
+++ b/js/components/src/streamplace-store/user.tsx
@@ -0,0 +1,57 @@
+import { PlaceStreamChatProfile } from "streamplace";
+import {
+  getStreamplaceStoreFromContext,
+  useDID,
+  useStreamplaceStore,
+} from "./streamplace-store";
+import { usePDSAgent } from "./xrpc";
+
+export function useGetChatProfile() {
+  const did = useDID();
+  const pdsAgent = usePDSAgent();
+  const store = getStreamplaceStoreFromContext();
+
+  return async () => {
+    if (!did || !pdsAgent) {
+      throw new Error("No DID or PDS agent");
+    }
+    const res = await pdsAgent.com.atproto.repo.getRecord({
+      repo: did,
+      collection: "place.stream.chat.profile",
+      rkey: "self",
+    });
+    if (!res.success) {
+      throw new Error("Failed to get chat profile record");
+    }
+
+    if (PlaceStreamChatProfile.isRecord(res.data.value)) {
+      store.setState({ chatProfile: res.data.value });
+    } else {
+      console.log("not a record", res.data.value);
+    }
+  };
+}
+
+export function useGetBskyProfile() {
+  const did = useDID();
+  const pdsAgent = usePDSAgent();
+  const store = getStreamplaceStoreFromContext();
+
+  return async () => {
+    if (!did || !pdsAgent) {
+      throw new Error("No DID or PDS agent");
+    }
+    const res = await pdsAgent.app.bsky.actor.getProfile({
+      actor: did,
+    });
+    if (!res.success) {
+      throw new Error("Failed to get chat profile record");
+    }
+
+    store.setState({ handle: res.data.handle });
+  };
+}
+
+export function useChatProfile() {
+  return useStreamplaceStore((x) => x.chatProfile);
+}
diff --git a/js/components/src/streamplace-store/xrpc.tsx b/js/components/src/streamplace-store/xrpc.tsx
new file mode 100644
index 00000000..cf651d9b
--- /dev/null
+++ b/js/components/src/streamplace-store/xrpc.tsx
@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+import { StreamplaceAgent } from "streamplace";
+import { useStreamplaceStore } from ".";
+
+export function usePDSAgent(): StreamplaceAgent | null {
+  const oauthSession = useStreamplaceStore((state) => state.oauthSession);
+
+  return useMemo(() => {
+    if (!oauthSession) {
+      return null;
+    }
+
+    return new StreamplaceAgent(oauthSession);
+  }, [oauthSession]);
+}
diff --git a/js/components/tsconfig.json b/js/components/tsconfig.json
new file mode 100644
index 00000000..d337024b
--- /dev/null
+++ b/js/components/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../app/tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["./src"]
+}
diff --git a/js/streamplace/package.json b/js/streamplace/package.json
index b90a12d3..408e4603 100644
--- a/js/streamplace/package.json
+++ b/js/streamplace/package.json
@@ -3,7 +3,7 @@
   "version": "0.6.33",
   "description": "Live video on the AT Protocol",
   "main": "dist/index.js",
-  "types": "dist/index.d.js",
+  "types": "src/index.ts",
   "type": "module",
   "exports": {
     ".": {
@@ -12,9 +12,9 @@
     }
   },
   "scripts": {
-    "build": "tsup-node",
+    "build": "tsc",
     "postinstall": "cd ../.. && make js-lexicons && cd - && pnpm run build",
-    "start": "tsup-node --watch"
+    "start": "tsc --watch --preserveWatchOutput"
   },
   "keywords": [
     "streamplace",
@@ -25,12 +25,12 @@
   "license": "MIT",
   "packageManager": "pnpm@10.11.0",
   "dependencies": {
+    "@atproto/api": "^0.15.7",
     "@atproto/lexicon": "^0.4.11",
     "@atproto/xrpc": "^0.7.0",
     "multiformats": "^9.9.0"
   },
   "devDependencies": {
-    "tsup": "^8.5.0",
     "typescript": "~5.3.3"
   }
 }
diff --git a/js/app/features/bluesky/agent.tsx b/js/streamplace/src/agent.ts
similarity index 81%
rename from js/app/features/bluesky/agent.tsx
rename to js/streamplace/src/agent.ts
index 3c7b03f8..889e85b9 100644
--- a/js/app/features/bluesky/agent.tsx
+++ b/js/streamplace/src/agent.ts
@@ -2,10 +2,12 @@ import { Agent } from "@atproto/api";
 import { schemas as parentSchemas } from "@atproto/api/dist/client/lexicons";
 import { SessionManager } from "@atproto/api/dist/session-manager";
 import { Lexicons } from "@atproto/lexicon";
-import { schemas as appSchemas, PlaceNS } from "streamplace";
+import { PlaceNS } from "./lexicons";
+import { schemas as appSchemas } from "./lexicons/lexicons";
+
 export class StreamplaceAgent extends Agent {
   place = new PlaceNS(this);
-  lex: Lexicons;
+  declare lex: Lexicons;
 
   constructor(options: string | URL | SessionManager) {
     super(options);
diff --git a/js/streamplace/src/index.ts b/js/streamplace/src/index.ts
index f3507cd1..06b0a5bc 100644
--- a/js/streamplace/src/index.ts
+++ b/js/streamplace/src/index.ts
@@ -1,2 +1,4 @@
+export * from "./agent";
 export * from "./lexicons";
 export { schemas } from "./lexicons/lexicons";
+export * from "./useful-types";
diff --git a/js/streamplace/src/useful-types.ts b/js/streamplace/src/useful-types.ts
new file mode 100644
index 00000000..2533a434
--- /dev/null
+++ b/js/streamplace/src/useful-types.ts
@@ -0,0 +1,15 @@
+import {
+  PlaceStreamChatDefs,
+  PlaceStreamChatMessage,
+  PlaceStreamLivestream,
+} from "./lexicons";
+
+export interface LivestreamViewHydrated
+  extends PlaceStreamLivestream.LivestreamView {
+  record: PlaceStreamLivestream.Record;
+}
+
+export interface ChatMessageViewHydrated
+  extends PlaceStreamChatDefs.MessageView {
+  record: PlaceStreamChatMessage.Record;
+}
diff --git a/js/streamplace/tsconfig.json b/js/streamplace/tsconfig.json
index 4f9688f7..35fdfad7 100644
--- a/js/streamplace/tsconfig.json
+++ b/js/streamplace/tsconfig.json
@@ -1,10 +1,8 @@
 {
-  "include": [],
-  "references": [{ "path": "../app/tsconfig.base.json" }],
+  "extends": "../app/tsconfig.base.json",
   "compilerOptions": {
-    "moduleResolution": "bundler",
-    "module": "es2022",
-    "jsx": "react-jsx",
-    "sourceMap": true
-  }
+    "rootDir": "./src",
+    "outDir": "./dist"
+  },
+  "include": ["./src"]
 }
diff --git a/js/streamplace/tsup.config.ts b/js/streamplace/tsup.config.ts
deleted file mode 100644
index b29cc765..00000000
--- a/js/streamplace/tsup.config.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { defineConfig, Format } from "tsup";
-
-const options = {
-  splitting: false,
-  bundle: false,
-  clean: true,
-  sourcemap: true,
-  dts: true,
-  format: ["esm"] as Format[],
-};
-
-export default defineConfig([
-  {
-    ...options,
-    entry: ["./src/**"],
-    outDir: "dist",
-  },
-]);
diff --git a/knip.json b/knip.json
new file mode 100644
index 00000000..843202d0
--- /dev/null
+++ b/knip.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://unpkg.com/knip@5/schema.json",
+  "project": ["js/streamplace/src/**/*.ts"],
+  "entry": ["js/streamplace/src/index.ts"],
+  "ignoreWorkspaces": ["js/app", "js/desktop", "js/config-react-native-webrtc"],
+  "include": ["unlisted"],
+  "ignore": [".*tamagui.config.ts.*"]
+}
diff --git a/package.json b/package.json
index 3b2f5d75..c30a2e10 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   },
   "scripts": {
     "preinstall": "node hack/node-version.js",
-    "check": "pnpm run check:workspaces && git ls-files | xargs prettier --check --ignore-unknown",
+    "check": "knip && pnpm run check:workspaces && git ls-files | xargs prettier --check --ignore-unknown",
     "check:workspaces": "cd js/app && pnpm run check",
     "fix": "git ls-files | xargs prettier --write --ignore-unknown",
     "postinstall": "husky",
@@ -20,17 +20,21 @@
     "app": "pnpm run -r --stream --filter @streamplace/app... --parallel",
     "desktop": "pnpm run -r --stream --filter streamplace-desktop... --parallel",
     "docs": "cd js/docs && pnpm run",
-    "start": "pnpm run -r --stream --parallel start"
+    "start": "pnpm run -r --stream --parallel start",
+    "knip": "knip"
   },
   "keywords": [],
   "author": "Streamplace",
   "license": "MIT",
   "devDependencies": {
     "@atproto/lex-cli": "^0.5.6",
+    "@types/node": "^22.15.17",
     "husky": "^9.1.6",
+    "knip": "^5.59.1",
     "lerna": "^8.1.9",
     "lint-staged": "^15.2.10",
-    "prettier": "3.4.2"
+    "prettier": "3.4.2",
+    "typescript": "^5.8.3"
   },
   "workspaces": [
     "js/*"
diff --git a/pkg/api/websocket.go b/pkg/api/websocket.go
index 8f718ea6..c11d7797 100644
--- a/pkg/api/websocket.go
+++ b/pkg/api/websocket.go
@@ -22,6 +22,9 @@ import (
 var upgrader = websocket.Upgrader{
 	ReadBufferSize:  1024,
 	WriteBufferSize: 1024,
+	CheckOrigin: func(r *http.Request) bool {
+		return true
+	},
 }
 
 var pingPeriod = 5 * time.Second
@@ -160,6 +163,22 @@ func (a *StreamplaceAPI) HandleWebsocket(ctx context.Context) httprouter.Handle
 			}
 		}()
 
+		go func() {
+			profile, err := a.Model.GetRepo(repoDID)
+			if err != nil {
+				log.Error(ctx, "could not get profile", "error", err)
+				return
+			}
+			if profile != nil {
+				p := map[string]any{
+					"$type":  "app.bsky.actor.defs#profileViewBasic",
+					"did":    repoDID,
+					"handle": profile.Handle,
+				}
+				initialBurst <- p
+			}
+		}()
+
 		go func() {
 			seg, err := a.Model.LatestSegmentForUser(repoDID)
 			if err != nil {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 864918a3..36dd99cd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,14 +16,20 @@ importers:
         version: 0.1.0
       prettier-plugin-organize-imports:
         specifier: ^4.1.0
-        version: 4.1.0(prettier@3.4.2)(typescript@5.6.3)
+        version: 4.1.0(prettier@3.4.2)(typescript@5.8.3)
     devDependencies:
       '@atproto/lex-cli':
         specifier: ^0.5.6
         version: 0.5.7
+      '@types/node':
+        specifier: ^22.15.17
+        version: 22.15.17
       husky:
         specifier: ^9.1.6
         version: 9.1.6
+      knip:
+        specifier: ^5.59.1
+        version: 5.59.1(@types/node@22.15.17)(typescript@5.8.3)
       lerna:
         specifier: ^8.1.9
         version: 8.1.9(@swc/core@1.8.0(@swc/helpers@0.5.17))(encoding@0.1.13)
@@ -33,6 +39,9 @@ importers:
       prettier:
         specifier: 3.4.2
         version: 3.4.2
+      typescript:
+        specifier: ^5.8.3
+        version: 5.8.3
 
   js/app:
     dependencies:
@@ -90,6 +99,9 @@ importers:
       '@streamplace/atproto-oauth-client-react-native':
         specifier: workspace:*
         version: link:../atproto-oauth-client-react-native
+      '@streamplace/components':
+        specifier: workspace:*
+        version: link:../components
       '@tamagui/config':
         specifier: ^1.123.17
         version: 1.123.17(react-dom@18.3.1(react@18.3.1))(react-native-reanimated@3.16.1(@babel/core@7.26.0)(react-native@0.76.2(@babel/core@7.26.0)(@babel/preset-env@7.27.2(@babel/core@7.26.0))(@types/react@18.3.12)(bufferutil@4.0.8)(encoding@0.1.13)(react@18.3.1)(utf-8-validate@5.0.10))(react@18.3.1))(react-native@0.76.2(@babel/core@7.26.0)(@babel/preset-env@7.27.2(@babel/core@7.26.0))(@types/react@18.3.12)(bufferutil@4.0.8)(encoding@0.1.13)(react@18.3.1)(utf-8-validate@5.0.10))(react@18.3.1)
@@ -367,7 +379,32 @@ importers:
         version: 22.15.17
       typescript:
         specifier: ^5.6.3
-        version: 5.6.3
+        version: 5.8.3
+
+  js/components:
+    dependencies:
+      '@atproto/api':
+        specifier: ^0.15.7
+        version: 0.15.7
+      react:
+        specifier: '*'
+        version: 18.3.1
+      react-native:
+        specifier: 0.76.2
+        version: 0.76.2(@babel/core@7.26.0)(@babel/preset-env@7.27.2(@babel/core@7.26.0))(@types/react@18.3.12)(bufferutil@4.0.8)(encoding@0.1.13)(react@18.3.1)(utf-8-validate@5.0.10)
+      react-use-websocket:
+        specifier: ^4.13.0
+        version: 4.13.0
+      streamplace:
+        specifier: workspace:*
+        version: link:../streamplace
+      zustand:
+        specifier: ^5.0.5
+        version: 5.0.5(@types/react@18.3.12)(immer@10.1.1)(react@18.3.1)(use-sync-external-store@1.2.2(react@18.3.1))
+    devDependencies:
+      tsup:
+        specifier: ^8.5.0
+        version: 8.5.0(@swc/core@1.8.0(@swc/helpers@0.5.17))(jiti@2.4.2)(postcss@8.5.3)(typescript@5.8.3)(yaml@2.5.1)
 
   js/config-react-native-webrtc:
     dependencies:
@@ -447,10 +484,10 @@ importers:
         version: 0.5.10
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.13.0
-        version: 8.13.0(@typescript-eslint/parser@8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)
+        version: 8.13.0(@typescript-eslint/parser@8.13.0(eslint@9.14.0(jiti@2.4.2))(typescript@5.6.3))(eslint@9.14.0(jiti@2.4.2))(typescript@5.6.3)
       '@typescript-eslint/parser':
         specifier: ^8.13.0
-        version: 8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)
+        version: 8.13.0(eslint@9.14.0(jiti@2.4.2))(typescript@5.6.3)
       '@vercel/webpack-asset-relocator-loader':
         specifier: 1.7.3
         version: 1.7.3
@@ -462,10 +499,10 @@ importers:
         version: 33.0.2
       eslint:
         specifier: ^9.14.0
-        version: 9.14.0(jiti@1.21.6)
+        version: 9.14.0(jiti@2.4.2)
       eslint-plugin-import:
         specifier: ^2.31.0
-        version: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint@9.14.0(jiti@1.21.6))
+        version: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@9.14.0(jiti@2.4.2))(typescript@5.6.3))(eslint@9.14.0(jiti@2.4.2))
       fork-ts-checker-webpack-plugin:
         specifier: ^9.0.2
         version: 9.0.2(typescript@5.6.3)(webpack@5.94.0(@swc/core@1.8.0(@swc/helpers@0.5.17)))
@@ -489,7 +526,7 @@ importers:
     dependencies:
       '@astrojs/starlight':
         specifier: ^0.34.1
-        version: 0.34.2(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))
+        version: 0.34.2(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))
       '@fontsource/atkinson-hyperlegible-next':
         specifier: ^5.2.2
         version: 5.2.2
@@ -498,22 +535,25 @@ importers:
         version: link:../app
       astro:
         specifier: ^5.6.1
-        version: 5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)
+        version: 5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)
       sharp:
         specifier: ^0.32.5
         version: 0.32.6
       starlight-openapi:
         specifier: ^0.17.0
-        version: 0.17.0(@astrojs/starlight@0.34.2(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)))(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))(openapi-types@12.1.3)
+        version: 0.17.0(@astrojs/starlight@0.34.2(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)))(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))(openapi-types@12.1.3)
       starlight-openapi-rapidoc:
         specifier: ^0.8.1-beta
-        version: 0.8.1-beta(@astrojs/starlight@0.34.2(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)))(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))(openapi-types@12.1.3)
+        version: 0.8.1-beta(@astrojs/starlight@0.34.2(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)))(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))(openapi-types@12.1.3)
       streamplace:
         specifier: workspace:*
         version: link:../streamplace
 
   js/streamplace:
     dependencies:
+      '@atproto/api':
+        specifier: ^0.15.7
+        version: 0.15.7
       '@atproto/lexicon':
         specifier: ^0.4.11
         version: 0.4.11
@@ -524,9 +564,6 @@ importers:
         specifier: ^9.9.0
         version: 9.9.0
     devDependencies:
-      tsup:
-        specifier: ^8.5.0
-        version: 8.5.0(@swc/core@1.8.0(@swc/helpers@0.5.17))(jiti@1.21.6)(postcss@8.5.3)(typescript@5.3.3)(yaml@2.5.1)
       typescript:
         specifier: ~5.3.3
         version: 5.3.3
@@ -2000,12 +2037,18 @@ packages:
   '@emnapi/core@1.2.0':
     resolution: {integrity: sha512-E7Vgw78I93we4ZWdYCb4DGAwRROGkMIXk7/y87UmANR+J6qsWusmC3gLt0H+O0KOt5e6O38U8oJamgbudrES/w==}
 
+  '@emnapi/core@1.4.3':
+    resolution: {integrity: sha512-4m62DuCE07lw01soJwPiBGC0nAww0Q+RY70VZ+n49yDIO13yyinhbWCeNnaob0lakDtWQzSdtNWzJeOJt2ma+g==}
+
   '@emnapi/runtime@1.4.3':
     resolution: {integrity: sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==}
 
   '@emnapi/wasi-threads@1.0.1':
     resolution: {integrity: sha512-iIBu7mwkq4UQGeMEM8bLwNK962nXdhodeScX4slfQnRhEMMzvYivHhutCIk8uojvmASXXPC2WNEjwxFWk72Oqw==}
 
+  '@emnapi/wasi-threads@1.0.2':
+    resolution: {integrity: sha512-5n3nTJblwRi8LlXkJ9eBzu+kZR8Yxcc7ubakyQTFzPMtIhFpUBRbsnc2Dv88IZDIbCDlBiWrknhB4Lsz7mg6BA==}
+
   '@emoji-mart/react@1.1.1':
     resolution: {integrity: sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g==}
     peerDependencies:
@@ -3069,6 +3112,9 @@ packages:
     resolution: {integrity: sha512-z10PF9JV6SbjFq+/rYabM+8CVlMokgl8RFGvieSGNTmrkQanfHn+15XBrhG3BgUfvmTeSeyShfOHpG0i9zEdcg==}
     deprecated: Motion One for Vue is deprecated. Use Oku Motion instead https://oku-ui.com/motion
 
+  '@napi-rs/wasm-runtime@0.2.10':
+    resolution: {integrity: sha512-bCsCyeZEwVErsGmyPNSzwfwFn4OdxBj0mmv6hOFucB/k81Ojdu68RbZdxYsRQUPc9l6SU5F/cG+bXgWs3oUgsQ==}
+
   '@napi-rs/wasm-runtime@0.2.4':
     resolution: {integrity: sha512-9zESzOO5aDByvhIAsOy9TbpZ0Ur2AJbUI7UT73kcUTS2mxAMHOBaa1st/jAymNoCtvrit99kkzT1FZuXVcgfIQ==}
 
@@ -3306,6 +3352,71 @@ packages:
   '@oslojs/encoding@1.1.0':
     resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==}
 
+  '@oxc-resolver/binding-darwin-arm64@9.0.2':
+    resolution: {integrity: sha512-MVyRgP2gzJJtAowjG/cHN3VQXwNLWnY+FpOEsyvDepJki1SdAX/8XDijM1yN6ESD1kr9uhBKjGelC6h3qtT+rA==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-resolver/binding-darwin-x64@9.0.2':
+    resolution: {integrity: sha512-7kV0EOFEZ3sk5Hjy4+bfA6XOQpCwbDiDkkHN4BHHyrBHsXxUR05EcEJPPL1WjItefg+9+8hrBmoK0xRoDs41+A==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-resolver/binding-freebsd-x64@9.0.2':
+    resolution: {integrity: sha512-6OvkEtRXrt8sJ4aVfxHRikjain9nV1clIsWtJ1J3J8NG1ZhjyJFgT00SCvqxbK+pzeWJq6XzHyTCN78ML+lY2w==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-resolver/binding-linux-arm-gnueabihf@9.0.2':
+    resolution: {integrity: sha512-aYpNL6o5IRAUIdoweW21TyLt54Hy/ZS9tvzNzF6ya1ckOQ8DLaGVPjGpmzxdNja9j/bbV6aIzBH7lNcBtiOTkQ==}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-arm64-gnu@9.0.2':
+    resolution: {integrity: sha512-RGFW4vCfKMFEIzb9VCY0oWyyY9tR1/o+wDdNePhiUXZU4SVniRPQaZ1SJ0sUFI1k25pXZmzQmIP6cBmazi/Dew==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-arm64-musl@9.0.2':
+    resolution: {integrity: sha512-lxx/PibBfzqYvut2Y8N2D0Ritg9H8pKO+7NUSJb9YjR/bfk2KRmP8iaUz3zB0JhPtf/W3REs65oKpWxgflGToA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-riscv64-gnu@9.0.2':
+    resolution: {integrity: sha512-yD28ptS/OuNhwkpXRPNf+/FvrO7lwURLsEbRVcL1kIE0GxNJNMtKgIE4xQvtKDzkhk6ZRpLho5VSrkkF+3ARTQ==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-s390x-gnu@9.0.2':
+    resolution: {integrity: sha512-WBwEJdspoga2w+aly6JVZeHnxuPVuztw3fPfWrei2P6rNM5hcKxBGWKKT6zO1fPMCB4sdDkFohGKkMHVV1eryQ==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-x64-gnu@9.0.2':
+    resolution: {integrity: sha512-a2z3/cbOOTUq0UTBG8f3EO/usFcdwwXnCejfXv42HmV/G8GjrT4fp5+5mVDoMByH3Ce3iVPxj1LmS6OvItKMYQ==}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-x64-musl@9.0.2':
+    resolution: {integrity: sha512-bHZF+WShYQWpuswB9fyxcgMIWVk4sZQT0wnwpnZgQuvGTZLkYJ1JTCXJMtaX5mIFHf69ngvawnwPIUA4Feil0g==}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-resolver/binding-wasm32-wasi@9.0.2':
+    resolution: {integrity: sha512-I5cSgCCh5nFozGSHz+PjIOfrqW99eUszlxKLgoNNzQ1xQ2ou9ZJGzcZ94BHsM9SpyYHLtgHljmOZxCT9bgxYNA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@oxc-resolver/binding-win32-arm64-msvc@9.0.2':
+    resolution: {integrity: sha512-5IhoOpPr38YWDWRCA5kP30xlUxbIJyLAEsAK7EMyUgqygBHEYLkElaKGgS0X5jRXUQ6l5yNxuW73caogb2FYaw==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-resolver/binding-win32-x64-msvc@9.0.2':
+    resolution: {integrity: sha512-Qc40GDkaad9rZksSQr2l/V9UubigIHsW69g94Gswc2sKYB3XfJXfIfyV8WTJ67u6ZMXsZ7BH1msSC6Aen75mCg==}
+    cpu: [x64]
+    os: [win32]
+
   '@oxc-transform/binding-darwin-arm64@0.47.1':
     resolution: {integrity: sha512-GT56Wkk/M1Eo1HCFfj8PxNn/ssBfxFVIrS3A5lJ6GE2k3gbVRORNzVA1znHtB3Tj4hIvWPNzqh+EQ2bhaFypNQ==}
     cpu: [arm64]
@@ -7314,6 +7425,10 @@ packages:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
 
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
   fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
@@ -7353,6 +7468,9 @@ packages:
   fbjs@3.0.5:
     resolution: {integrity: sha512-ztsSx77JBtkuMrEypfhgc3cI0+0h+svqeie7xHbh1k/IKdcydnvadp/mUaGgjAOXQmQSxsqgaRhS3q9fy+1kxg==}
 
+  fd-package-json@2.0.0:
+    resolution: {integrity: sha512-jKmm9YtsNXN789RS/0mSzOC1NUq9mkVd65vbSSVsKdjGvYXBuE4oWe2QOEoFeRmJg+lPuZxpmrfFclNhoRMneQ==}
+
   fd-slicer@1.1.0:
     resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
 
@@ -7527,6 +7645,11 @@ packages:
     resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
     engines: {node: '>= 6'}
 
+  formatly@0.2.4:
+    resolution: {integrity: sha512-lIN7GpcvX/l/i24r/L9bnJ0I8Qn01qijWpQpDDvTLL29nKqSaJJu4h20+7VJ6m2CAhQ2/En/GbxDiHCzq/0MyA==}
+    engines: {node: '>=18.3.0'}
+    hasBin: true
+
   forwarded@0.2.0:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
@@ -8608,6 +8731,10 @@ packages:
     resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
     hasBin: true
 
+  jiti@2.4.2:
+    resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
+    hasBin: true
+
   join-component@1.1.0:
     resolution: {integrity: sha512-bF7vcQxbODoGK1imE2P9GS9aw4zD0Sd+Hni68IMZLj7zRnquH7dXUmMw9hDI5S/Jzt7q+IyTXN0rSg2GI0IKhQ==}
 
@@ -8780,6 +8907,14 @@ packages:
     resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==}
     engines: {node: '>= 8'}
 
+  knip@5.59.1:
+    resolution: {integrity: sha512-pOMBw6sLQhi/RfnpI6TwBY6NrAtKXDO5wkmMm+pCsSK5eWbVfDnDtPXbLDGNCoZPXiuAojb27y4XOpp4JPNxlA==}
+    engines: {node: '>=18.18.0'}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>=18'
+      typescript: '>=5.0.4'
+
   launch-editor@2.9.1:
     resolution: {integrity: sha512-Gcnl4Bd+hRO9P9icCP/RVVT2o8SFlPXofuCxvA2SaZuH45whSvf5p8x5oih5ftLiVhEI4sp5xDY+R+b3zJBh5w==}
 
@@ -10118,6 +10253,9 @@ packages:
       typescript:
         optional: true
 
+  oxc-resolver@9.0.2:
+    resolution: {integrity: sha512-w838ygc1p7rF+7+h5vR9A+Y9Fc4imy6C3xPthCMkdFUgFvUWkmABeNB8RBDQ6+afk44Q60/UMMQ+gfDUW99fBA==}
+
   oxc-transform@0.47.1:
     resolution: {integrity: sha512-krLyXKa+2RWT9MFcj2q4ffEFFzX3EoypcLGpXMhTW0ayLxmGxyiLYlDlwFwP+5fbaVeeBu36XsVroOZelddl7g==}
 
@@ -11783,6 +11921,10 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  strip-json-comments@5.0.1:
+    resolution: {integrity: sha512-0fk9zBqO67Nq5M/m45qHCJxylV/DhBlIOVExqgOMiCCrzrhU6tCibRXNqE3jwJLftzE9SNuZtYbpzcO+i9FiKw==}
+    engines: {node: '>=14.16'}
+
   strip-outer@1.0.1:
     resolution: {integrity: sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==}
     engines: {node: '>=0.10.0'}
@@ -12666,6 +12808,10 @@ packages:
   walk-up-path@3.0.1:
     resolution: {integrity: sha512-9YlCL/ynK3CTlrSRrDxZvUauLzAswPCrsaCgilqFevUYpeEW0/3ScEjaa3kbW/T0ghhkEr7mv+fpjqn1Y1YuTA==}
 
+  walk-up-path@4.0.0:
+    resolution: {integrity: sha512-3hu+tD8YzSLGuFYtPRb48vdhKMi0KQV5sn+uWr8+7dMEq/2G/dtLrdDinkLjqq5TIbIBjYJ4Ax/n3YiaW7QM8A==}
+    engines: {node: 20 || >=22}
+
   walker@1.0.8:
     resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}
 
@@ -13030,6 +13176,12 @@ packages:
       typescript: ^4.9.4 || ^5.0.2
       zod: ^3
 
+  zod-validation-error@3.4.1:
+    resolution: {integrity: sha512-1KP64yqDPQ3rupxNv7oXhf7KdhHHgaqbKuspVoiN93TT0xrBjql+Svjkdjq/Qh/7GSMmgQs3AfvBT0heE35thw==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      zod: ^3.24.4
+
   zod@3.24.4:
     resolution: {integrity: sha512-OdqJE9UDRPwWsrHjLN2F8bPxvwJBK22EHLWtanu0LSYr5YqzsaaW3RMgmjwr8Rypg5k+meEJdSPXJZXE/yqOMg==}
 
@@ -13051,6 +13203,24 @@ packages:
       use-sync-external-store:
         optional: true
 
+  zustand@5.0.5:
+    resolution: {integrity: sha512-mILtRfKW9xM47hqxGIxCv12gXusoY/xTSHBYApXozR0HmQv299whhBeeAcRy+KrPPybzosvJBCOmVjq6x12fCg==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
@@ -13101,12 +13271,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/mdx@4.2.6(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))':
+  '@astrojs/mdx@4.2.6(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))':
     dependencies:
       '@astrojs/markdown-remark': 6.3.1
       '@mdx-js/mdx': 3.1.0(acorn@8.14.1)
       acorn: 8.14.1
-      astro: 5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)
+      astro: 5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)
       es-module-lexer: 1.7.0
       estree-util-visit: 2.0.0
       hast-util-to-html: 9.0.5
@@ -13130,17 +13300,17 @@ snapshots:
       stream-replace-string: 2.0.0
       zod: 3.24.4
 
-  '@astrojs/starlight@0.34.2(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))':
+  '@astrojs/starlight@0.34.2(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))':
     dependencies:
       '@astrojs/markdown-remark': 6.3.1
-      '@astrojs/mdx': 4.2.6(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))
+      '@astrojs/mdx': 4.2.6(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))
       '@astrojs/sitemap': 3.3.1
       '@pagefind/default-ui': 1.3.0
       '@types/hast': 3.0.4
       '@types/js-yaml': 4.0.9
       '@types/mdast': 4.0.4
-      astro: 5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)
-      astro-expressive-code: 0.41.2(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))
+      astro: 5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)
+      astro-expressive-code: 0.41.2(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))
       bcp-47: 2.1.0
       hast-util-from-html: 2.0.3
       hast-util-select: 6.0.4
@@ -15531,6 +15701,12 @@ snapshots:
       '@emnapi/wasi-threads': 1.0.1
       tslib: 2.8.1
 
+  '@emnapi/core@1.4.3':
+    dependencies:
+      '@emnapi/wasi-threads': 1.0.2
+      tslib: 2.8.1
+    optional: true
+
   '@emnapi/runtime@1.4.3':
     dependencies:
       tslib: 2.8.1
@@ -15539,6 +15715,11 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@emnapi/wasi-threads@1.0.2':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@emoji-mart/react@1.1.1(emoji-mart@5.6.0)(react@18.3.1)':
     dependencies:
       emoji-mart: 5.6.0
@@ -15704,9 +15885,9 @@ snapshots:
   '@esbuild/win32-x64@0.25.3':
     optional: true
 
-  '@eslint-community/eslint-utils@4.4.1(eslint@9.14.0(jiti@1.21.6))':
+  '@eslint-community/eslint-utils@4.4.1(eslint@9.14.0(jiti@2.4.2))':
     dependencies:
-      eslint: 9.14.0(jiti@1.21.6)
+      eslint: 9.14.0(jiti@2.4.2)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.12.1': {}
@@ -16701,7 +16882,7 @@ snapshots:
 
   '@leichtgewicht/ip-codec@2.0.5': {}
 
-  '@lerna/create@8.1.9(@swc/core@1.8.0(@swc/helpers@0.5.17))(encoding@0.1.13)(typescript@5.6.3)':
+  '@lerna/create@8.1.9(@swc/core@1.8.0(@swc/helpers@0.5.17))(encoding@0.1.13)(typescript@5.8.3)':
     dependencies:
       '@npmcli/arborist': 7.5.4
       '@npmcli/package-json': 5.2.0
@@ -16719,7 +16900,7 @@ snapshots:
       console-control-strings: 1.1.0
       conventional-changelog-core: 5.0.1
       conventional-recommended-bump: 7.0.1
-      cosmiconfig: 9.0.0(typescript@5.6.3)
+      cosmiconfig: 9.0.0(typescript@5.8.3)
       dedent: 1.5.3
       execa: 5.0.0
       fs-extra: 11.2.0
@@ -17049,6 +17230,13 @@ snapshots:
       '@motionone/dom': 10.18.0
       tslib: 2.8.1
 
+  '@napi-rs/wasm-runtime@0.2.10':
+    dependencies:
+      '@emnapi/core': 1.4.3
+      '@emnapi/runtime': 1.4.3
+      '@tybys/wasm-util': 0.9.0
+    optional: true
+
   '@napi-rs/wasm-runtime@0.2.4':
     dependencies:
       '@emnapi/core': 1.2.0
@@ -17354,6 +17542,47 @@ snapshots:
 
   '@oslojs/encoding@1.1.0': {}
 
+  '@oxc-resolver/binding-darwin-arm64@9.0.2':
+    optional: true
+
+  '@oxc-resolver/binding-darwin-x64@9.0.2':
+    optional: true
+
+  '@oxc-resolver/binding-freebsd-x64@9.0.2':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm-gnueabihf@9.0.2':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm64-gnu@9.0.2':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm64-musl@9.0.2':
+    optional: true
+
+  '@oxc-resolver/binding-linux-riscv64-gnu@9.0.2':
+    optional: true
+
+  '@oxc-resolver/binding-linux-s390x-gnu@9.0.2':
+    optional: true
+
+  '@oxc-resolver/binding-linux-x64-gnu@9.0.2':
+    optional: true
+
+  '@oxc-resolver/binding-linux-x64-musl@9.0.2':
+    optional: true
+
+  '@oxc-resolver/binding-wasm32-wasi@9.0.2':
+    dependencies:
+      '@napi-rs/wasm-runtime': 0.2.10
+    optional: true
+
+  '@oxc-resolver/binding-win32-arm64-msvc@9.0.2':
+    optional: true
+
+  '@oxc-resolver/binding-win32-x64-msvc@9.0.2':
+    optional: true
+
   '@oxc-transform/binding-darwin-arm64@0.47.1':
     optional: true
 
@@ -19855,15 +20084,15 @@ snapshots:
       '@types/node': 22.15.17
     optional: true
 
-  '@typescript-eslint/eslint-plugin@8.13.0(@typescript-eslint/parser@8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)':
+  '@typescript-eslint/eslint-plugin@8.13.0(@typescript-eslint/parser@8.13.0(eslint@9.14.0(jiti@2.4.2))(typescript@5.6.3))(eslint@9.14.0(jiti@2.4.2))(typescript@5.6.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)
+      '@typescript-eslint/parser': 8.13.0(eslint@9.14.0(jiti@2.4.2))(typescript@5.6.3)
       '@typescript-eslint/scope-manager': 8.13.0
-      '@typescript-eslint/type-utils': 8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)
+      '@typescript-eslint/type-utils': 8.13.0(eslint@9.14.0(jiti@2.4.2))(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.13.0(eslint@9.14.0(jiti@2.4.2))(typescript@5.6.3)
       '@typescript-eslint/visitor-keys': 8.13.0
-      eslint: 9.14.0(jiti@1.21.6)
+      eslint: 9.14.0(jiti@2.4.2)
       graphemer: 1.4.0
       ignore: 5.3.1
       natural-compare: 1.4.0
@@ -19873,14 +20102,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)':
+  '@typescript-eslint/parser@8.13.0(eslint@9.14.0(jiti@2.4.2))(typescript@5.6.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.13.0
       '@typescript-eslint/types': 8.13.0
       '@typescript-eslint/typescript-estree': 8.13.0(typescript@5.6.3)
       '@typescript-eslint/visitor-keys': 8.13.0
       debug: 4.4.0
-      eslint: 9.14.0(jiti@1.21.6)
+      eslint: 9.14.0(jiti@2.4.2)
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
@@ -19891,10 +20120,10 @@ snapshots:
       '@typescript-eslint/types': 8.13.0
       '@typescript-eslint/visitor-keys': 8.13.0
 
-  '@typescript-eslint/type-utils@8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)':
+  '@typescript-eslint/type-utils@8.13.0(eslint@9.14.0(jiti@2.4.2))(typescript@5.6.3)':
     dependencies:
       '@typescript-eslint/typescript-estree': 8.13.0(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.13.0(eslint@9.14.0(jiti@2.4.2))(typescript@5.6.3)
       debug: 4.4.0
       ts-api-utils: 1.4.0(typescript@5.6.3)
     optionalDependencies:
@@ -19920,13 +20149,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)':
+  '@typescript-eslint/utils@8.13.0(eslint@9.14.0(jiti@2.4.2))(typescript@5.6.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0(jiti@1.21.6))
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0(jiti@2.4.2))
       '@typescript-eslint/scope-manager': 8.13.0
       '@typescript-eslint/types': 8.13.0
       '@typescript-eslint/typescript-estree': 8.13.0(typescript@5.6.3)
-      eslint: 9.14.0(jiti@1.21.6)
+      eslint: 9.14.0(jiti@2.4.2)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -20776,12 +21005,12 @@ snapshots:
 
   astring@1.9.0: {}
 
-  astro-expressive-code@0.41.2(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)):
+  astro-expressive-code@0.41.2(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)):
     dependencies:
-      astro: 5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)
+      astro: 5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)
       rehype-expressive-code: 0.41.2
 
-  astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1):
+  astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1):
     dependencies:
       '@astrojs/compiler': 2.12.0
       '@astrojs/internal-helpers': 0.6.1
@@ -20834,8 +21063,8 @@ snapshots:
       unist-util-visit: 5.0.0
       unstorage: 1.16.0(idb-keyval@6.2.1)
       vfile: 6.0.3
-      vite: 6.3.4(@types/node@22.15.17)(jiti@1.21.6)(lightningcss@1.29.1)(terser@5.32.0)(yaml@2.5.1)
-      vitefu: 1.0.6(vite@6.3.4(@types/node@22.15.17)(jiti@1.21.6)(lightningcss@1.29.1)(terser@5.32.0)(yaml@2.5.1))
+      vite: 6.3.4(@types/node@22.15.17)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.32.0)(yaml@2.5.1)
+      vitefu: 1.0.6(vite@6.3.4(@types/node@22.15.17)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.32.0)(yaml@2.5.1))
       xxhash-wasm: 1.1.0
       yargs-parser: 21.1.1
       yocto-spinner: 0.2.2
@@ -21794,14 +22023,14 @@ snapshots:
     optionalDependencies:
       typescript: 5.6.3
 
-  cosmiconfig@9.0.0(typescript@5.6.3):
+  cosmiconfig@9.0.0(typescript@5.8.3):
     dependencies:
       env-paths: 2.2.1
       import-fresh: 3.3.0
       js-yaml: 4.1.0
       parse-json: 5.2.0
     optionalDependencies:
-      typescript: 5.6.3
+      typescript: 5.8.3
 
   crc-32@1.2.2: {}
 
@@ -22550,17 +22779,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint@9.14.0(jiti@1.21.6)):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.13.0(eslint@9.14.0(jiti@2.4.2))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint@9.14.0(jiti@2.4.2)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)
-      eslint: 9.14.0(jiti@1.21.6)
+      '@typescript-eslint/parser': 8.13.0(eslint@9.14.0(jiti@2.4.2))(typescript@5.6.3)
+      eslint: 9.14.0(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint@9.14.0(jiti@1.21.6)):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@9.14.0(jiti@2.4.2))(typescript@5.6.3))(eslint@9.14.0(jiti@2.4.2)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -22569,9 +22798,9 @@ snapshots:
       array.prototype.flatmap: 1.3.2
       debug: 3.2.7
       doctrine: 2.1.0
-      eslint: 9.14.0(jiti@1.21.6)
+      eslint: 9.14.0(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint@9.14.0(jiti@1.21.6))
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.13.0(eslint@9.14.0(jiti@2.4.2))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint@9.14.0(jiti@2.4.2))
       hasown: 2.0.2
       is-core-module: 2.15.1
       is-glob: 4.0.3
@@ -22583,7 +22812,7 @@ snapshots:
       string.prototype.trimend: 1.0.8
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)
+      '@typescript-eslint/parser': 8.13.0(eslint@9.14.0(jiti@2.4.2))(typescript@5.6.3)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
@@ -22603,9 +22832,9 @@ snapshots:
 
   eslint-visitor-keys@4.2.0: {}
 
-  eslint@9.14.0(jiti@1.21.6):
+  eslint@9.14.0(jiti@2.4.2):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0(jiti@1.21.6))
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0(jiti@2.4.2))
       '@eslint-community/regexpp': 4.12.1
       '@eslint/config-array': 0.18.0
       '@eslint/core': 0.7.0
@@ -22641,7 +22870,7 @@ snapshots:
       optionator: 0.9.4
       text-table: 0.2.0
     optionalDependencies:
-      jiti: 1.21.6
+      jiti: 2.4.2
     transitivePeerDependencies:
       - supports-color
 
@@ -23128,6 +23357,14 @@ snapshots:
       merge2: 1.4.1
       micromatch: 4.0.8
 
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
   fast-json-stable-stringify@2.1.0: {}
 
   fast-levenshtein@2.0.6: {}
@@ -23174,6 +23411,10 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
+  fd-package-json@2.0.0:
+    dependencies:
+      walk-up-path: 4.0.0
+
   fd-slicer@1.1.0:
     dependencies:
       pend: 1.2.0
@@ -23426,6 +23667,10 @@ snapshots:
       combined-stream: 1.0.8
       mime-types: 2.1.35
 
+  formatly@0.2.4:
+    dependencies:
+      fd-package-json: 2.0.0
+
   forwarded@0.2.0: {}
 
   framer-motion@6.5.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
@@ -24769,6 +25014,8 @@ snapshots:
 
   jiti@1.21.6: {}
 
+  jiti@2.4.2: {}
+
   join-component@1.1.0: {}
 
   jose@4.15.9: {}
@@ -24954,6 +25201,24 @@ snapshots:
 
   klona@2.0.6: {}
 
+  knip@5.59.1(@types/node@22.15.17)(typescript@5.8.3):
+    dependencies:
+      '@nodelib/fs.walk': 1.2.8
+      '@types/node': 22.15.17
+      fast-glob: 3.3.3
+      formatly: 0.2.4
+      jiti: 2.4.2
+      js-yaml: 4.1.0
+      minimist: 1.2.8
+      oxc-resolver: 9.0.2
+      picocolors: 1.1.1
+      picomatch: 4.0.2
+      smol-toml: 1.3.4
+      strip-json-comments: 5.0.1
+      typescript: 5.8.3
+      zod: 3.24.4
+      zod-validation-error: 3.4.1(zod@3.24.4)
+
   launch-editor@2.9.1:
     dependencies:
       picocolors: 1.1.1
@@ -24961,7 +25226,7 @@ snapshots:
 
   lerna@8.1.9(@swc/core@1.8.0(@swc/helpers@0.5.17))(encoding@0.1.13):
     dependencies:
-      '@lerna/create': 8.1.9(@swc/core@1.8.0(@swc/helpers@0.5.17))(encoding@0.1.13)(typescript@5.6.3)
+      '@lerna/create': 8.1.9(@swc/core@1.8.0(@swc/helpers@0.5.17))(encoding@0.1.13)(typescript@5.8.3)
       '@npmcli/arborist': 7.5.4
       '@npmcli/package-json': 5.2.0
       '@npmcli/run-script': 8.1.0
@@ -24979,7 +25244,7 @@ snapshots:
       conventional-changelog-angular: 7.0.0
       conventional-changelog-core: 5.0.1
       conventional-recommended-bump: 7.0.1
-      cosmiconfig: 9.0.0(typescript@5.6.3)
+      cosmiconfig: 9.0.0(typescript@5.8.3)
       dedent: 1.5.3
       envinfo: 7.13.0
       execa: 5.0.0
@@ -25032,7 +25297,7 @@ snapshots:
       strong-log-transformer: 2.1.0
       tar: 6.2.1
       temp-dir: 1.0.0
-      typescript: 5.6.3
+      typescript: 5.8.3
       upath: 2.0.1
       uuid: 10.0.0
       validate-npm-package-license: 3.0.4
@@ -27032,6 +27297,22 @@ snapshots:
     transitivePeerDependencies:
       - zod
 
+  oxc-resolver@9.0.2:
+    optionalDependencies:
+      '@oxc-resolver/binding-darwin-arm64': 9.0.2
+      '@oxc-resolver/binding-darwin-x64': 9.0.2
+      '@oxc-resolver/binding-freebsd-x64': 9.0.2
+      '@oxc-resolver/binding-linux-arm-gnueabihf': 9.0.2
+      '@oxc-resolver/binding-linux-arm64-gnu': 9.0.2
+      '@oxc-resolver/binding-linux-arm64-musl': 9.0.2
+      '@oxc-resolver/binding-linux-riscv64-gnu': 9.0.2
+      '@oxc-resolver/binding-linux-s390x-gnu': 9.0.2
+      '@oxc-resolver/binding-linux-x64-gnu': 9.0.2
+      '@oxc-resolver/binding-linux-x64-musl': 9.0.2
+      '@oxc-resolver/binding-wasm32-wasi': 9.0.2
+      '@oxc-resolver/binding-win32-arm64-msvc': 9.0.2
+      '@oxc-resolver/binding-win32-x64-msvc': 9.0.2
+
   oxc-transform@0.47.1:
     optionalDependencies:
       '@oxc-transform/binding-darwin-arm64': 0.47.1
@@ -27385,11 +27666,11 @@ snapshots:
       postcss: 8.5.3
       ts-node: 10.9.2(@swc/core@1.8.0(@swc/helpers@0.5.17))(@types/node@22.15.17)(typescript@5.3.3)
 
-  postcss-load-config@6.0.1(jiti@1.21.6)(postcss@8.5.3)(yaml@2.5.1):
+  postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.5.3)(yaml@2.5.1):
     dependencies:
       lilconfig: 3.1.3
     optionalDependencies:
-      jiti: 1.21.6
+      jiti: 2.4.2
       postcss: 8.5.3
       yaml: 2.5.1
 
@@ -27461,10 +27742,10 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier-plugin-organize-imports@4.1.0(prettier@3.4.2)(typescript@5.6.3):
+  prettier-plugin-organize-imports@4.1.0(prettier@3.4.2)(typescript@5.8.3):
     dependencies:
       prettier: 3.4.2
-      typescript: 5.6.3
+      typescript: 5.8.3
 
   prettier@3.4.2: {}
 
@@ -28888,22 +29169,22 @@ snapshots:
     dependencies:
       type-fest: 0.7.1
 
-  starlight-openapi-rapidoc@0.8.1-beta(@astrojs/starlight@0.34.2(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)))(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))(openapi-types@12.1.3):
+  starlight-openapi-rapidoc@0.8.1-beta(@astrojs/starlight@0.34.2(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)))(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))(openapi-types@12.1.3):
     dependencies:
-      '@astrojs/starlight': 0.34.2(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))
+      '@astrojs/starlight': 0.34.2(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))
       '@astropub/md': 0.4.0
       '@readme/openapi-parser': 2.5.0(openapi-types@12.1.3)
-      astro: 5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)
+      astro: 5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)
       github-slugger: 2.0.0
     transitivePeerDependencies:
       - '@astrojs/markdown-remark'
       - openapi-types
 
-  starlight-openapi@0.17.0(@astrojs/starlight@0.34.2(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)))(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))(openapi-types@12.1.3):
+  starlight-openapi@0.17.0(@astrojs/starlight@0.34.2(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)))(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))(openapi-types@12.1.3):
     dependencies:
-      '@astrojs/starlight': 0.34.2(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))
+      '@astrojs/starlight': 0.34.2(astro@5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1))
       '@readme/openapi-parser': 2.7.0(openapi-types@12.1.3)
-      astro: 5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@1.21.6)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)
+      astro: 5.7.10(@types/node@22.15.17)(encoding@0.1.13)(idb-keyval@6.2.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.40.1)(terser@5.32.0)(typescript@5.8.3)(yaml@2.5.1)
       github-slugger: 2.0.0
       url-template: 3.1.1
     transitivePeerDependencies:
@@ -29027,6 +29308,8 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
+  strip-json-comments@5.0.1: {}
+
   strip-outer@1.0.1:
     dependencies:
       escape-string-regexp: 1.0.5
@@ -29128,7 +29411,7 @@ snapshots:
       chokidar: 3.6.0
       didyoumean: 1.2.2
       dlv: 1.1.3
-      fast-glob: 3.3.2
+      fast-glob: 3.3.3
       glob-parent: 6.0.2
       is-glob: 4.0.3
       jiti: 1.21.6
@@ -29490,7 +29773,7 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  tsup@8.5.0(@swc/core@1.8.0(@swc/helpers@0.5.17))(jiti@1.21.6)(postcss@8.5.3)(typescript@5.3.3)(yaml@2.5.1):
+  tsup@8.5.0(@swc/core@1.8.0(@swc/helpers@0.5.17))(jiti@2.4.2)(postcss@8.5.3)(typescript@5.8.3)(yaml@2.5.1):
     dependencies:
       bundle-require: 5.1.0(esbuild@0.25.3)
       cac: 6.7.14
@@ -29501,7 +29784,7 @@ snapshots:
       fix-dts-default-cjs-exports: 1.0.1
       joycon: 3.1.1
       picocolors: 1.1.1
-      postcss-load-config: 6.0.1(jiti@1.21.6)(postcss@8.5.3)(yaml@2.5.1)
+      postcss-load-config: 6.0.1(jiti@2.4.2)(postcss@8.5.3)(yaml@2.5.1)
       resolve-from: 5.0.0
       rollup: 4.40.1
       source-map: 0.8.0-beta.0
@@ -29512,7 +29795,7 @@ snapshots:
     optionalDependencies:
       '@swc/core': 1.8.0(@swc/helpers@0.5.17)
       postcss: 8.5.3
-      typescript: 5.3.3
+      typescript: 5.8.3
     transitivePeerDependencies:
       - jiti
       - supports-color
@@ -29936,7 +30219,7 @@ snapshots:
       - utf-8-validate
       - zod
 
-  vite@6.3.4(@types/node@22.15.17)(jiti@1.21.6)(lightningcss@1.29.1)(terser@5.32.0)(yaml@2.5.1):
+  vite@6.3.4(@types/node@22.15.17)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.32.0)(yaml@2.5.1):
     dependencies:
       esbuild: 0.25.3
       fdir: 6.4.4(picomatch@4.0.2)
@@ -29947,14 +30230,14 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.15.17
       fsevents: 2.3.3
-      jiti: 1.21.6
+      jiti: 2.4.2
       lightningcss: 1.29.1
       terser: 5.32.0
       yaml: 2.5.1
 
-  vitefu@1.0.6(vite@6.3.4(@types/node@22.15.17)(jiti@1.21.6)(lightningcss@1.29.1)(terser@5.32.0)(yaml@2.5.1)):
+  vitefu@1.0.6(vite@6.3.4(@types/node@22.15.17)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.32.0)(yaml@2.5.1)):
     optionalDependencies:
-      vite: 6.3.4(@types/node@22.15.17)(jiti@1.21.6)(lightningcss@1.29.1)(terser@5.32.0)(yaml@2.5.1)
+      vite: 6.3.4(@types/node@22.15.17)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.32.0)(yaml@2.5.1)
 
   vlq@1.0.1: {}
 
@@ -30002,6 +30285,8 @@ snapshots:
 
   walk-up-path@3.0.1: {}
 
+  walk-up-path@4.0.0: {}
+
   walker@1.0.8:
     dependencies:
       makeerror: 1.0.12
@@ -30399,6 +30684,10 @@ snapshots:
       typescript: 5.8.3
       zod: 3.24.4
 
+  zod-validation-error@3.4.1(zod@3.24.4):
+    dependencies:
+      zod: 3.24.4
+
   zod@3.24.4: {}
 
   zustand@5.0.0(@types/react@18.3.12)(immer@10.1.1)(react@18.3.1)(use-sync-external-store@1.2.0(react@18.3.1)):
@@ -30408,4 +30697,11 @@ snapshots:
       react: 18.3.1
       use-sync-external-store: 1.2.0(react@18.3.1)
 
+  zustand@5.0.5(@types/react@18.3.12)(immer@10.1.1)(react@18.3.1)(use-sync-external-store@1.2.2(react@18.3.1)):
+    optionalDependencies:
+      '@types/react': 18.3.12
+      immer: 10.1.1
+      react: 18.3.1
+      use-sync-external-store: 1.2.2(react@18.3.1)
+
   zwitch@2.0.4: {}
-- 
2.51.2