@streamplace/components 0.9.4 → 0.9.7

package/dist/lib/theme/tokens.d.ts

@@ -329,17 +329,17 @@ export declare const colors: {
         readonly 950: "#052e16";
     };
     readonly warning: {
-        readonly 50: "#fffbeb";
-        readonly 100: "#fef3c7";
-        readonly 200: "#fde68a";
-        readonly 300: "#fcd34d";
-        readonly 400: "#fbbf24";
-        readonly 500: "#f59e0b";
-        readonly 600: "#d97706";
-        readonly 700: "#b45309";
-        readonly 800: "#92400e";
-        readonly 900: "#78350f";
-        readonly 950: "#451a03";
+        readonly 50: "#fffaf0";
+        readonly 100: "#ffe6c7";
+        readonly 200: "#ffd99e";
+        readonly 300: "#ffcc75";
+        readonly 400: "#ffb94e";
+        readonly 500: "#ff9e1f";
+        readonly 600: "#e67e00";
+        readonly 700: "#cc6600";
+        readonly 800: "#998c00";
+        readonly 900: "#664200";
+        readonly 950: "#332900";
     };
     readonly ios: {
         readonly systemBlue: "#007AFF";

package/dist/lib/theme/tokens.js

@@ -335,17 +335,17 @@ exports.colors = {
         950: "#052e16",
     },
     warning: {
-        50: "#fffbeb",
-        100: "#fef3c7",
-        200: "#fde68a",
-        300: "#fcd34d",
-        400: "#fbbf24",
-        500: "#f59e0b",
-        600: "#d97706",
-        700: "#b45309",
-        800: "#92400e",
-        900: "#78350f",
-        950: "#451a03",
+        50: "#fffaf0",
+        100: "#ffe6c7",
+        200: "#ffd99e",
+        300: "#ffcc75",
+        400: "#ffb94e",
+        500: "#ff9e1f",
+        600: "#e67e00",
+        700: "#cc6600",
+        800: "#998c00",
+        900: "#664200",
+        950: "#332900",
     },
     // iOS system colors (adaptive)
     ios: {

package/dist/utils/did.d.ts

@@ -0,0 +1,13 @@
+export interface DIDDocument {
+    id: string;
+    service?: Array<{
+        id: string;
+        type?: string;
+        serviceEndpoint?: string;
+    }>;
+    [key: string]: any;
+}
+export declare function resolveDIDDocument(did: string): Promise<DIDDocument>;
+export declare function getPDSServiceEndpoint(didDoc: DIDDocument): string;
+export declare function getBlob(did: string, cid: string, didDoc?: DIDDocument): Promise<Blob>;
+//# sourceMappingURL=did.d.ts.map

package/dist/utils/did.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"did.d.ts","sourceRoot":"","sources":["../../src/utils/did.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,KAAK,CAAC;QACd,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC,CAAC;IACH,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,wBAAsB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,WAAW,CAAC,CAsB1E;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAQjE;AAED,wBAAsB,OAAO,CAC3B,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM,EACX,MAAM,CAAC,EAAE,WAAW,GACnB,OAAO,CAAC,IAAI,CAAC,CAYf"}

package/dist/utils/did.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveDIDDocument = resolveDIDDocument;
+exports.getPDSServiceEndpoint = getPDSServiceEndpoint;
+exports.getBlob = getBlob;
+async function resolveDIDDocument(did) {
+    let didDocUrl;
+    if (did.startsWith("did:web:")) {
+        // For did:web, construct the URL directly
+        const domain = did.replace("did:web:", "").replace(/:/g, "/");
+        didDocUrl = `https://${domain}/.well-known/did.json`;
+    }
+    else if (did.startsWith("did:plc:")) {
+        // For did:plc, use plc.directory
+        didDocUrl = `https://plc.directory/${did}`;
+    }
+    else {
+        throw new Error(`Unsupported DID method: ${did}`);
+    }
+    const response = await fetch(didDocUrl);
+    if (!response.ok) {
+        throw new Error(`Failed to resolve DID document for ${did}: ${response.status}`);
+    }
+    return response.json();
+}
+function getPDSServiceEndpoint(didDoc) {
+    const pdsService = didDoc.service?.find((s) => s.id === "#atproto_pds");
+    if (!pdsService?.serviceEndpoint) {
+        throw new Error("No PDS service endpoint found in DID document");
+    }
+    return pdsService.serviceEndpoint;
+}
+async function getBlob(did, cid, didDoc) {
+    const doc = didDoc || (await resolveDIDDocument(did));
+    const pdsEndpoint = getPDSServiceEndpoint(doc);
+    const blobUrl = `${pdsEndpoint}/xrpc/com.atproto.sync.getBlob?did=${did}&cid=${cid}`;
+    const response = await fetch(blobUrl);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch blob: ${response.status}`);
+    }
+    return response.blob();
+}
+//# sourceMappingURL=did.js.map

package/dist/utils/did.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"did.js","sourceRoot":"","sources":["../../src/utils/did.ts"],"names":[],"mappings":";;AAUA,gDAsBC;AAED,sDAQC;AAED,0BAgBC;AAlDM,KAAK,UAAU,kBAAkB,CAAC,GAAW;IAClD,IAAI,SAAiB,CAAC;IAEtB,IAAI,GAAG,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC;QAC/B,0CAA0C;QAC1C,MAAM,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAC9D,SAAS,GAAG,WAAW,MAAM,uBAAuB,CAAC;IACvD,CAAC;SAAM,IAAI,GAAG,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC;QACtC,iCAAiC;QACjC,SAAS,GAAG,yBAAyB,GAAG,EAAE,CAAC;IAC7C,CAAC;SAAM,CAAC;QACN,MAAM,IAAI,KAAK,CAAC,2BAA2B,GAAG,EAAE,CAAC,CAAC;IACpD,CAAC;IAED,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,SAAS,CAAC,CAAC;IACxC,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;QACjB,MAAM,IAAI,KAAK,CACb,sCAAsC,GAAG,KAAK,QAAQ,CAAC,MAAM,EAAE,CAChE,CAAC;IACJ,CAAC;IAED,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAC;AACzB,CAAC;AAED,SAAgB,qBAAqB,CAAC,MAAmB;IACvD,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,cAAc,CAAC,CAAC;IAExE,IAAI,CAAC,UAAU,EAAE,eAAe,EAAE,CAAC;QACjC,MAAM,IAAI,KAAK,CAAC,+CAA+C,CAAC,CAAC;IACnE,CAAC;IAED,OAAO,UAAU,CAAC,eAAe,CAAC;AACpC,CAAC;AAEM,KAAK,UAAU,OAAO,CAC3B,GAAW,EACX,GAAW,EACX,MAAoB;IAEpB,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,MAAM,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IACtD,MAAM,WAAW,GAAG,qBAAqB,CAAC,GAAG,CAAC,CAAC;IAE/C,MAAM,OAAO,GAAG,GAAG,WAAW,sCAAsC,GAAG,QAAQ,GAAG,EAAE,CAAC;IAErF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,OAAO,CAAC,CAAC;IACtC,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;QACjB,MAAM,IAAI,KAAK,CAAC,yBAAyB,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;IAC9D,CAAC;IAED,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAC;AACzB,CAAC"}

package/locales/en-US/settings.ftl

@@ -121,7 +121,7 @@ inactive = Inactive
 active = Active
 
 ## Multistreaming
-multistreaming = Multistreaming
+multistream = Multistreaming
 multistream-targets = Multistream Targets
 multistream-description = Automatically push your Streamplace livestreams to other streaming services like Twitch or YouTube.
 create-multistream-target = Create Multistream Target
@@ -168,6 +168,7 @@ need-setup-live-dashboard = Need to set up streaming first? Visit the live dashb
 no-languages-found = No languages found
 
 ## Branding Administration
+branding = Branding
 branding-admin = Branding Administration
 branding-admin-description = Customize your Streamplace instance. Note that settings may take a few hours to propagate.
 branding-login-required = Please log in to manage branding

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.9.4",
+  "version": "0.9.7",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -42,6 +42,7 @@
     "expo-sensors": "^15.0.7",
     "expo-sqlite": "~15.2.12",
     "expo-video": "^2.0.0",
+    "graphemer": "^1.4.0",
     "hls.js": "^1.5.17",
     "i18next": "^25.4.2",
     "i18next-browser-languagedetector": "^8.2.0",
@@ -80,5 +81,5 @@
     "i18n:watch": "nodemon --watch 'locales/**/*.ftl' --exec 'node scripts/compile-translations.js'",
     "i18n:extract": "i18next-cli extract && node scripts/migrate-i18n.js"
   },
-  "gitHead": "4c5523a92b26dbdae76dd3334ddf66ce4d32f999"
+  "gitHead": "46b5c8833f5c53934374899c417e6c83a9b0c1f2"
 }

package/src/components/chat/chat-box.tsx

@@ -1,10 +1,11 @@
 import Picker from "@emoji-mart/react";
+import Graphemer from "graphemer";
 import { AtSignIcon, ExternalLink, X } from "lucide-react-native";
 import { env } from "process";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Platform, Pressable, TextInput } from "react-native";
 import { ChatMessageViewHydrated } from "streamplace";
-import { Button, Loader, Text, useTheme, View } from "../../";
+import { Button, Loader, Text, toast, useTheme, View } from "../../";
 import { handleSlashCommand } from "../../lib/slash-commands";
 import { registerTeleportCommand } from "../../lib/slash-commands/teleport";
 import { StreamNotifications } from "../../lib/stream-notifications";
@@ -41,6 +42,8 @@ const COOL_EMOJI_LIST = [
   ..."😀🥸😍😘😁🥸😆🥸😜🥸😂😅🥸🙂🤫😱🥸🤣😗😄🥸😎🤓😲😯😰🥸😥🥸😣🥸😞😓🥸😩😩🥸😤🥱",
 ];
 
+const graphemer = new Graphemer();
+
 export function ChatBox({
   isPopout,
   chatBoxStyle,
@@ -65,6 +68,7 @@ export function ChatBox({
     new Map(),
   );
   const [filteredEmojis, setFilteredEmojis] = useState<any[]>([]);
+  const isOverLimit = graphemer.countGraphemes(message) > 300;
 
   let linfo = useLivestream();
 
@@ -255,6 +259,17 @@ export function ChatBox({
 
   const submit = async () => {
     if (!message.trim()) return;
+    if (graphemer.countGraphemes(message) > 300) {
+      toast.show(
+        "Message too long",
+        "Please limit your message to 300 characters.",
+        {
+          variant: "error",
+          duration: 3,
+        },
+      );
+      return;
+    }
 
     const messageText = message;
     setMessage("");
@@ -457,7 +472,14 @@ export function ChatBox({
               }
             }
           }}
-          style={[chatBoxStyle]}
+          style={[
+            chatBoxStyle,
+            isOverLimit && {
+              borderColor: "#ef4444",
+              borderWidth: 2,
+              outline: "none",
+            },
+          ]}
           // "submit" won't blur on enter
           submitBehavior="submit"
           placeholder="Type a message..."

package/src/components/chat/mod-view.tsx

@@ -5,7 +5,6 @@ import { usePlayerStore } from "../../player-store";
 import {
   useCreateBlockRecord,
   useCreateHideChatRecord,
-  useUpdateLivestreamRecord,
 } from "../../streamplace-store/block";
 import {
   ModerationPermissions,
@@ -17,24 +16,19 @@ import { Linking } from "react-native";
 import { ChatMessageViewHydrated } from "streamplace";
 import {
   useDeleteChatMessage,
-  useLivestream,
   useLivestreamStore,
 } from "../../livestream-store";
 import { useStreamplaceStore } from "../../streamplace-store";
 import { formatHandle, formatHandleWithAt } from "../../utils/format-handle";
 import {
   atoms,
-  Button,
-  DialogFooter,
   DropdownMenu,
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuTrigger,
   layout,
-  ResponsiveDialog,
   ResponsiveDropdownMenuContent,
   Text,
-  Textarea,
   useToast,
   View,
 } from "../ui";
@@ -61,10 +55,6 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
   let [messageRemoved, setMessageRemoved] = useState(false);
   let { createBlock, isLoading: isBlockLoading } = useCreateBlockRecord();
   let { createHideChat, isLoading: isHideLoading } = useCreateHideChatRecord();
-  let { updateLivestream, isLoading: isUpdateTitleLoading } =
-    useUpdateLivestreamRecord();
-  const livestream = useLivestream();
-  const [showUpdateTitleDialog, setShowUpdateTitleDialog] = useState(false);
 
   const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
   const setReportSubject = usePlayerStore((x) => x.setReportSubject);
@@ -135,9 +125,6 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
               createHideChat={createHideChat}
               createBlock={createBlock}
               toast={toast}
-              setShowUpdateTitleDialog={setShowUpdateTitleDialog}
-              isUpdateTitleLoading={isUpdateTitleLoading}
-              livestream={livestream}
               setReportModalOpen={setReportModalOpen}
               setReportSubject={setReportSubject}
               deleteChatMessage={deleteChatMessage}
@@ -145,17 +132,6 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
           )}
         </ResponsiveDropdownMenuContent>
       </DropdownMenu>
-
-      {/* Update Stream Title Dialog - rendered outside dropdown */}
-      {showUpdateTitleDialog && (
-        <UpdateStreamTitleDialog
-          livestream={livestream}
-          streamerDID={streamerDID}
-          updateLivestream={updateLivestream}
-          isLoading={isUpdateTitleLoading}
-          onClose={() => setShowUpdateTitleDialog(false)}
-        />
-      )}
     </>
   );
 });
@@ -173,9 +149,6 @@ interface ModViewContentProps {
   createHideChat: (uri: string, streamerDID?: string) => Promise<any>;
   createBlock: (did: string, streamerDID?: string) => Promise<any>;
   toast: ReturnType<typeof useToast>;
-  setShowUpdateTitleDialog: (show: boolean) => void;
-  isUpdateTitleLoading: boolean;
-  livestream: any;
   setReportModalOpen: (open: boolean) => void;
   setReportSubject: (subject: any) => void;
   deleteChatMessage: (uri: string) => Promise<any>;
@@ -194,9 +167,6 @@ function ModViewContent({
   createHideChat,
   createBlock,
   toast,
-  setShowUpdateTitleDialog,
-  isUpdateTitleLoading,
-  livestream,
   setReportModalOpen,
   setReportSubject,
   deleteChatMessage,
@@ -290,23 +260,6 @@ function ModViewContent({
         </DropdownMenuGroup>
       )}
 
-      {modPermissions.canManageLivestream && (
-        <DropdownMenuGroup key="stream-actions" title={`Stream actions`}>
-          <DropdownMenuItem
-            onPress={() => {
-              setShowUpdateTitleDialog(true);
-            }}
-            disabled={isUpdateTitleLoading || !livestream}
-          >
-            <Text
-              color={isUpdateTitleLoading || !livestream ? "muted" : "primary"}
-            >
-              {isUpdateTitleLoading ? "Updating..." : "Update stream title"}
-            </Text>
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-      )}
-
       <DropdownMenuGroup key="user-actions" title={`User actions`}>
         <DropdownMenuItem
           onPress={() => {
@@ -418,161 +371,3 @@ export function ReportButton({
     </DropdownMenuItem>
   );
 }
-
-interface UpdateStreamTitleDialogProps {
-  livestream: any;
-  streamerDID?: string;
-  updateLivestream: (
-    livestreamUri: string,
-    title: string,
-    streamerDID?: string,
-  ) => Promise<any>;
-  isLoading: boolean;
-  onClose: () => void;
-}
-
-function UpdateStreamTitleDialog({
-  livestream,
-  streamerDID,
-  updateLivestream,
-  isLoading,
-  onClose,
-}: UpdateStreamTitleDialogProps) {
-  const [title, setTitle] = useState(livestream?.record?.title || "");
-  const [error, setError] = useState<string | null>(null);
-  const toast = useToast();
-
-  useEffect(() => {
-    if (livestream?.record?.title) {
-      setTitle(livestream.record.title);
-    }
-  }, [livestream?.record?.title]);
-
-  const handleUpdate = async () => {
-    setError(null);
-
-    if (!title.trim()) {
-      setError("Please enter a stream title");
-      return;
-    }
-
-    if (!livestream?.uri) {
-      setError("No livestream found");
-      return;
-    }
-
-    try {
-      await updateLivestream(livestream.uri, title.trim(), streamerDID);
-      toast.show(
-        "Stream title updated",
-        "The stream title has been successfully updated.",
-        { duration: 3 },
-      );
-      onClose();
-    } catch (err) {
-      setError(
-        err instanceof Error ? err.message : "Failed to update stream title",
-      );
-    }
-  };
-
-  return (
-    <ResponsiveDialog
-      open={true}
-      onOpenChange={(open) => {
-        if (!open) {
-          onClose();
-          setError(null);
-          setTitle(livestream?.record?.title || "");
-        }
-      }}
-      title="Update Stream Title"
-      description="Update the title of the livestream."
-      size="md"
-      dismissible={false}
-    >
-      <View style={[{ padding: 16, paddingBottom: 0 }]}>
-        <View style={[{ marginBottom: 16 }]}>
-          <Text
-            style={[
-              { color: atoms.colors.gray[300], fontSize: 13, marginBottom: 8 },
-            ]}
-          >
-            Stream Title
-          </Text>
-          <Textarea
-            value={title}
-            onChangeText={(text) => {
-              setTitle(text);
-              setError(null);
-            }}
-            placeholder="Enter stream title..."
-            maxLength={140}
-            multiline
-            style={[
-              {
-                padding: 12,
-                borderRadius: 8,
-                backgroundColor: atoms.colors.neutral[800],
-                color: atoms.colors.white,
-                borderWidth: 1,
-                borderColor: atoms.colors.neutral[600],
-                minHeight: 100,
-                fontSize: 16,
-              },
-            ]}
-          />
-          <Text
-            style={[
-              { color: atoms.colors.gray[400], fontSize: 12, marginTop: 4 },
-            ]}
-          >
-            {title.length}/140 characters
-          </Text>
-        </View>
-
-        {error && (
-          <View
-            style={[
-              {
-                backgroundColor: atoms.colors.red[900],
-                padding: 12,
-                borderRadius: 8,
-                borderWidth: 1,
-                borderColor: atoms.colors.red[700],
-                marginBottom: 16,
-              },
-            ]}
-          >
-            <Text style={[{ color: atoms.colors.red[400], fontSize: 13 }]}>
-              {error}
-            </Text>
-          </View>
-        )}
-      </View>
-
-      <DialogFooter>
-        <Button
-          width="min"
-          variant="secondary"
-          onPress={() => {
-            onClose();
-            setError(null);
-            setTitle(livestream?.record?.title || "");
-          }}
-          disabled={isLoading}
-        >
-          <Text>Cancel</Text>
-        </Button>
-        <Button
-          variant="primary"
-          width="min"
-          onPress={handleUpdate}
-          disabled={isLoading || !title.trim()}
-        >
-          <Text>{isLoading ? "Updating..." : "Update Title"}</Text>
-        </Button>
-      </DialogFooter>
-    </ResponsiveDialog>
-  );
-}

package/src/components/chat/update-stream-title-dialog.tsx

@@ -0,0 +1,169 @@
+import { useEffect, useState } from "react";
+import {
+  atoms,
+  Button,
+  DialogFooter,
+  ResponsiveDialog,
+  Text,
+  Textarea,
+  useToast,
+  View,
+} from "../ui";
+
+export interface UpdateStreamTitleDialogProps {
+  livestream: any;
+  streamerDID?: string;
+  updateLivestream: (
+    livestreamUri: string,
+    title: string,
+    streamerDID?: string,
+  ) => Promise<any>;
+  isLoading: boolean;
+  onClose: () => void;
+}
+
+export function UpdateStreamTitleDialog({
+  livestream,
+  streamerDID,
+  updateLivestream,
+  isLoading,
+  onClose,
+}: UpdateStreamTitleDialogProps) {
+  const [title, setTitle] = useState(livestream?.record?.title || "");
+  const [error, setError] = useState<string | null>(null);
+  const toast = useToast();
+
+  useEffect(() => {
+    if (livestream?.record?.title) {
+      setTitle(livestream.record.title);
+    }
+  }, [livestream?.record?.title]);
+
+  const handleUpdate = async () => {
+    setError(null);
+
+    if (!title.trim()) {
+      setError("Please enter a stream title");
+      return;
+    }
+
+    if (!livestream?.uri) {
+      setError("No livestream found");
+      return;
+    }
+
+    try {
+      await updateLivestream(livestream.uri, title.trim(), streamerDID);
+      toast.show(
+        "Stream title updated",
+        "The stream title has been successfully updated.",
+        { duration: 3 },
+      );
+      onClose();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to update stream title",
+      );
+    }
+  };
+
+  return (
+    <ResponsiveDialog
+      open={true}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose();
+          setError(null);
+          setTitle(livestream?.record?.title || "");
+        }
+      }}
+      title="Update Stream Title"
+      description="Update the title of the livestream."
+      size="md"
+      dismissible={false}
+    >
+      <View style={[{ padding: 16, paddingBottom: 0 }]}>
+        <View style={[{ marginBottom: 16 }]}>
+          <Text
+            style={[
+              { color: atoms.colors.gray[300], fontSize: 13, marginBottom: 8 },
+            ]}
+          >
+            Stream Title
+          </Text>
+          <Textarea
+            value={title}
+            onChangeText={(text) => {
+              setTitle(text);
+              setError(null);
+            }}
+            placeholder="Enter stream title..."
+            maxLength={140}
+            multiline
+            style={[
+              {
+                padding: 12,
+                borderRadius: 8,
+                backgroundColor: atoms.colors.neutral[800],
+                color: atoms.colors.white,
+                borderWidth: 1,
+                borderColor: atoms.colors.neutral[600],
+                minHeight: 100,
+                fontSize: 16,
+              },
+            ]}
+          />
+          <Text
+            style={[
+              { color: atoms.colors.gray[400], fontSize: 12, marginTop: 4 },
+            ]}
+          >
+            {title.length}/140 characters
+          </Text>
+        </View>
+
+        {error && (
+          <View
+            style={[
+              {
+                backgroundColor: atoms.colors.red[900],
+                padding: 12,
+                borderRadius: 8,
+                borderWidth: 1,
+                borderColor: atoms.colors.red[700],
+                marginBottom: 16,
+              },
+            ]}
+          >
+            <Text style={[{ color: atoms.colors.red[400], fontSize: 13 }]}>
+              {error}
+            </Text>
+          </View>
+        )}
+      </View>
+
+      <DialogFooter>
+        <Button
+          width="min"
+          variant="secondary"
+          onPress={() => {
+            onClose();
+            setError(null);
+            setTitle(livestream?.record?.title || "");
+          }}
+          disabled={isLoading}
+        >
+          <Text>Cancel</Text>
+        </Button>
+        <Button
+          variant="primary"
+          width="min"
+          onPress={handleUpdate}
+          disabled={isLoading || !title.trim()}
+        >
+          <Text>{isLoading ? "Updating..." : "Update Title"}</Text>
+        </Button>
+      </DialogFooter>
+    </ResponsiveDialog>
+  );
+}