Component cleanup

app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.container.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { memo } from "react";
+import { useRouter } from "next/navigation";
+import { CreateFlowTopNavView } from "./CreateFlowTopNav.view";
+import type { CreateFlowTopNavProps } from "./CreateFlowTopNav.types";
+
+/**
+ * Figma: Utility / CreateFlowTopNav — wizard header (create-flow chrome).
+ * Exit, optional share / export / edit; strings in `messages/en/create/topNav.json`.
+ */
+const CreateFlowTopNavContainer = memo<CreateFlowTopNavProps>(
+  ({
+    hasShare = false,
+    hasExport = false,
+    hasEdit = false,
+    saveDraftOnExit = false,
+    onShare,
+    onExport,
+    onEdit,
+    onExit,
+    buttonPalette,
+    className = "",
+  }) => {
+    const router = useRouter();
+
+    const handleExit = (options?: { saveDraft?: boolean }) => {
+      if (onExit) {
+        onExit(options);
+      } else {
+        // Default behavior: navigate to home
+        router.push("/");
+      }
+    };
+
+    return (
+      <CreateFlowTopNavView
+        hasShare={hasShare}
+        hasExport={hasExport}
+        hasEdit={hasEdit}
+        saveDraftOnExit={saveDraftOnExit}
+        onShare={onShare}
+        onExport={onExport}
+        onEdit={onEdit}
+        onExit={handleExit}
+        buttonPalette={buttonPalette}
+        className={className}
+      />
+    );
+  },
+);
+
+CreateFlowTopNavContainer.displayName = "CreateFlowTopNav";
+
+export default CreateFlowTopNavContainer;

app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.types.ts

@@ -0,0 +1,56 @@
+/**
+ * Type definitions for CreateFlowTopNav component
+ *
+ * Top navigation bar for the create rule flow.
+ * Includes logo and action buttons (Share, Export, Edit, Exit).
+ */
+
+export interface CreateFlowTopNavProps {
+  /**
+   * Whether to show the Share button
+   * @default false
+   */
+  hasShare?: boolean;
+  /**
+   * Whether to show the Export button
+   * @default false
+   */
+  hasExport?: boolean;
+  /**
+   * Whether to show the Edit button
+   * @default false
+   */
+  hasEdit?: boolean;
+  /**
+   * 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
+   */
+  saveDraftOnExit?: boolean;
+  /**
+   * Callback when Share button is clicked
+   */
+  onShare?: () => void;
+  /**
+   * Callback when Export button is clicked
+   */
+  onExport?: () => void;
+  /**
+   * Callback when Edit button is clicked
+   */
+  onEdit?: () => void;
+  /**
+   * Callback when Exit/Save & Exit button is clicked.
+   * When `saveDraftOnExit` is true, called with `{ saveDraft: true }`.
+   */
+  onExit?: (options?: { saveDraft?: boolean }) => void;
+  /**
+   * Palette for nav buttons (e.g. "inverse" on completed page to match teal background)
+   * @default "default"
+   */
+  buttonPalette?: "default" | "inverse";
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}

app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.view.tsx

@@ -0,0 +1,108 @@
+"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,
+  saveDraftOnExit = false,
+  onShare,
+  onExport,
+  onEdit,
+  onExit,
+  buttonPalette = "default",
+  className = "",
+}: CreateFlowTopNavProps) {
+  const t = useTranslation("create.topNav");
+  const exitButtonText = saveDraftOnExit ? t("saveAndExit") : t("exit");
+
+  return (
+    <header
+      className={`bg-black w-full ${className}`}
+      role="banner"
+      aria-label={t("bannerAriaLabel")}
+    >
+      <nav
+        className="flex items-center justify-between mx-auto max-w-[639px] md:max-w-[1920px] px-[var(--spacing-measures-spacing-500,20px)] md:px-[48px] py-[var(--spacing-measures-spacing-300,12px)] md:py-[var(--spacing-measures-spacing-016,16px)]"
+        role="navigation"
+        aria-label={t("navAriaLabel")}
+      >
+        <Logo size="createFlow" wordmark palette={buttonPalette} />
+
+        <div className="flex flex-wrap items-center justify-end gap-[var(--spacing-scale-012,12px)]">
+          {hasShare && (
+            <Button
+              buttonType="outline"
+              palette={buttonPalette}
+              size="xsmall"
+              onClick={onShare}
+              ariaLabel={t("shareAriaLabel")}
+              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]"
+            >
+              {t("share")}
+            </Button>
+          )}
+
+          {hasExport && (
+            <Button
+              buttonType="outline"
+              palette={buttonPalette}
+              size="xsmall"
+              onClick={onExport}
+              ariaLabel={t("exportAriaLabel")}
+              className="justify-center gap-[var(--spacing-scale-002,2px)] !pl-[var(--spacing-scale-012,12px)] !pr-[var(--spacing-scale-006,6px)] md:!pr-[var(--spacing-scale-006,6px)] !text-[10px] md:!text-[12px] !leading-[12px] md:!leading-[14px] !py-[6px] md:!py-[8px] !border md:!border-[1.5px]"
+            >
+              <span>{t("export")}</span>
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="shrink-0 md:w-[14px] md:h-[14px]"
+                aria-hidden="true"
+              >
+                <path d="M19 9l-7 7-7-7" />
+              </svg>
+            </Button>
+          )}
+
+          {hasEdit && (
+            <Button
+              buttonType="outline"
+              palette={buttonPalette}
+              size="xsmall"
+              onClick={onEdit}
+              ariaLabel={t("editAriaLabel")}
+              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]"
+            >
+              {t("edit")}
+            </Button>
+          )}
+
+          <Button
+            buttonType="outline"
+            palette={buttonPalette}
+            size="xsmall"
+            type="button"
+            onClick={() => void onExit?.({ saveDraft: saveDraftOnExit })}
+            ariaLabel={exitButtonText}
+            className={`md:!text-[12px] md:!leading-[14px] !text-[10px] !leading-[12px] !py-[6px] md:!py-[8px] shrink-0 ${exitButtonFigmaClass}`}
+          >
+            {exitButtonText}
+          </Button>
+        </div>
+      </nav>
+    </header>
+  );
+}

app/components/navigation/CreateFlowTopNav/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./CreateFlowTopNav.container";
+export type { CreateFlowTopNavProps } from "./CreateFlowTopNav.types";