Create flow: session UI + sign out

app/create/text/page.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import { useMediaQuery } from "../../hooks/useMediaQuery";
 import HeaderLockup from "../../components/type/HeaderLockup";
 import TextInput from "../../components/controls/TextInput";
+import { useCreateFlow } from "../context/CreateFlowContext";
 
 /**
  * Text page for the create flow
@@ -12,9 +13,18 @@ import TextInput from "../../components/controls/TextInput";
  * Responsive sizing: uses L/M for HeaderLockup and medium/small for TextInput based on 640px breakpoint.
  */
 export default function TextPage() {
+  const { markCreateFlowInteraction, updateState, state } = useCreateFlow();
   const [isMounted, setIsMounted] = useState(false);
   const isMdOrLarger = useMediaQuery("(min-width: 640px)");
-  const [value, setValue] = useState("");
+  const [value, setValue] = useState(() =>
+    typeof state.title === "string" ? state.title : "",
+  );
+
+  useEffect(() => {
+    const incoming = state.title;
+    if (typeof incoming !== "string" || incoming.length === 0) return;
+    setValue((prev) => (prev === "" ? incoming : prev));
+  }, [state.title]);
 
   // Avoid flash: only use breakpoint after mount so SSR and first paint use same layout (desktop).
   useEffect(() => {
@@ -43,7 +53,12 @@ export default function TextPage() {
           <TextInput
             placeholder="Enter your community name"
             value={value}
-            onChange={(e) => setValue(e.target.value)}
+            onChange={(e) => {
+              const v = e.target.value;
+              setValue(v);
+              markCreateFlowInteraction();
+              updateState({ title: v });
+            }}
             inputSize={effectiveMdOrLarger ? "medium" : "small"}
             formHeader={false}
             textHint={`${characterCount}/${maxLength}`}