Create flow: session UI + sign out

app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx

@@ -10,7 +10,7 @@ const CreateFlowTopNavContainer = memo<CreateFlowTopNavProps>(
     hasShare = false,
     hasExport = false,
     hasEdit = false,
-    loggedIn = false,
+    saveDraftOnExit = false,
     onShare,
     onExport,
     onEdit,
@@ -34,7 +34,7 @@ const CreateFlowTopNavContainer = memo<CreateFlowTopNavProps>(
         hasShare={hasShare}
         hasExport={hasExport}
         hasEdit={hasEdit}
-        loggedIn={loggedIn}
+        saveDraftOnExit={saveDraftOnExit}
         onShare={onShare}
         onExport={onExport}
         onEdit={onEdit}

app/components/utility/CreateFlowTopNav/CreateFlowTopNav.types.ts

@@ -22,10 +22,11 @@ export interface CreateFlowTopNavProps {
    */
   hasEdit?: boolean;
   /**
-   * Whether the user is logged in
+   * When true, exit control is "Save & Exit" and `onExit` receives `{ saveDraft: true }`.
+   * When false, shows "Exit" and `{ saveDraft: false }` (caller may confirm data loss).
    * @default false
    */
-  loggedIn?: boolean;
+  saveDraftOnExit?: boolean;
   /**
    * Callback when Share button is clicked
    */
@@ -40,7 +41,7 @@ export interface CreateFlowTopNavProps {
   onEdit?: () => void;
   /**
    * Callback when Exit/Save & Exit button is clicked.
-   * When user is logged in, called with { saveDraft: true } to stub "Save & Exit".
+   * When `saveDraftOnExit` is true, called with `{ saveDraft: true }`.
    */
   onExit?: (options?: { saveDraft?: boolean }) => void;
   /**

app/components/utility/CreateFlowTopNav/CreateFlowTopNav.view.tsx

@@ -1,12 +1,18 @@
+"use client";
+
 import Logo from "../../asset/logo";
 import Button from "../../buttons/Button";
+import { useTranslation } from "../../../contexts/MessagesContext";
 import type { CreateFlowTopNavProps } from "./CreateFlowTopNav.types";
 
+const exitButtonFigmaClass =
+  "!rounded-[var(--radius-measures-radius-full,9999px)] !border-[1.25px] !px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!text-[12px] md:!leading-[14px]";
+
 export function CreateFlowTopNavView({
   hasShare = false,
   hasExport = false,
   hasEdit = false,
-  loggedIn = false,
+  saveDraftOnExit = false,
   onShare,
   onExport,
   onEdit,
@@ -14,7 +20,8 @@ export function CreateFlowTopNavView({
   buttonPalette = "default",
   className = "",
 }: CreateFlowTopNavProps) {
-  const exitButtonText = loggedIn ? "Save & Exit" : "Exit";
+  const t = useTranslation("create.topNav");
+  const exitButtonText = saveDraftOnExit ? t("saveAndExit") : t("exit");
 
   return (
     <header
@@ -27,11 +34,9 @@ export function CreateFlowTopNavView({
         role="navigation"
         aria-label="Create Flow Navigation"
       >
-        {/* Logo - Left */}
         <Logo size="createFlow" wordmark palette={buttonPalette} />
 
-        {/* Button Group - Right */}
-        <div className="flex items-center gap-[var(--spacing-scale-012,12px)]">
+        <div className="flex flex-wrap items-center justify-end gap-[var(--spacing-scale-012,12px)]">
           {hasShare && (
             <Button
               buttonType="outline"
@@ -89,9 +94,10 @@ export function CreateFlowTopNavView({
             buttonType="outline"
             palette={buttonPalette}
             size="xsmall"
-            onClick={() => onExit?.({ saveDraft: loggedIn })}
+            type="button"
+            onClick={() => void onExit?.({ saveDraft: saveDraftOnExit })}
             ariaLabel={exitButtonText}
-            className="md:!text-[12px] md:!leading-[14px] !text-[10px] !leading-[12px] !px-[var(--spacing-scale-006,6px)] md:!px-[var(--spacing-scale-008,8px)] !py-[6px] md:!py-[8px] !border md:!border-[1.5px]"
+            className={`md:!text-[12px] md:!leading-[14px] !text-[10px] !leading-[12px] !py-[6px] md:!py-[8px] shrink-0 ${exitButtonFigmaClass}`}
           >
             {exitButtonText}
           </Button>