Update create flow pages

app/create/utils/anonymousDraftStorage.ts

@@ -0,0 +1,96 @@
+import type { CreateFlowState } from "../types";
+
+/** Anonymous in-progress create flow (local only until magic-link transfer). */
+export const CREATE_FLOW_ANONYMOUS_KEY = "create-flow-anonymous" as const;
+
+/**
+ * Set when the user submits magic link from “Save your progress?” so after verify we PUT to server.
+ * Value is arbitrary truthy string; cleared after successful transfer or abandon.
+ */
+export const CREATE_FLOW_TRANSFER_PENDING_KEY =
+  "create-flow-transfer-pending" as const;
+
+/**
+ * When signed-in + sync, {@link SignedInDraftHydration} resolves server vs this key via `window.confirm`
+ * if both are non-empty; see `messages/en/create/draftHydration.json`.
+ */
+
+const LEGACY_LIVE_KEY = "create-flow-state";
+const LEGACY_DRAFT_KEY = "create-flow-draft";
+
+export function readAnonymousCreateFlowState(): CreateFlowState {
+  if (typeof window === "undefined") return {};
+  try {
+    const raw = window.localStorage.getItem(CREATE_FLOW_ANONYMOUS_KEY);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw) as CreateFlowState;
+    return typeof parsed === "object" && parsed !== null ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+
+export function writeAnonymousCreateFlowState(value: CreateFlowState): void {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(
+      CREATE_FLOW_ANONYMOUS_KEY,
+      JSON.stringify(value),
+    );
+  } catch {
+    // quota / private mode
+  }
+}
+
+export function clearAnonymousCreateFlowStorage(): void {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.removeItem(CREATE_FLOW_ANONYMOUS_KEY);
+    window.localStorage.removeItem(CREATE_FLOW_TRANSFER_PENDING_KEY);
+  } catch {
+    // ignore
+  }
+}
+
+export function setTransferPendingFlag(): void {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(CREATE_FLOW_TRANSFER_PENDING_KEY, "1");
+  } catch {
+    // ignore
+  }
+}
+
+export function hasTransferPendingFlag(): boolean {
+  if (typeof window === "undefined") return false;
+  try {
+    return Boolean(
+      window.localStorage.getItem(CREATE_FLOW_TRANSFER_PENDING_KEY),
+    );
+  } catch {
+    return false;
+  }
+}
+
+export function clearTransferPendingFlag(): void {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.removeItem(CREATE_FLOW_TRANSFER_PENDING_KEY);
+  } catch {
+    // ignore
+  }
+}
+
+/** One-time cleanup of pre–anonymous-draft keys. */
+export function clearLegacyCreateFlowKeysOnce(): void {
+  if (typeof window === "undefined") return;
+  try {
+    const done = window.sessionStorage.getItem("create-flow-legacy-cleared");
+    if (done) return;
+    window.localStorage.removeItem(LEGACY_LIVE_KEY);
+    window.localStorage.removeItem(LEGACY_DRAFT_KEY);
+    window.sessionStorage.setItem("create-flow-legacy-cleared", "1");
+  } catch {
+    // ignore
+  }
+}

app/create/utils/createFlowScreenRegistry.ts

@@ -0,0 +1,123 @@
+import type { CreateFlowStep } from "../types";
+
+/**
+ * Figma layout families for the create flow (not encoded in the URL).
+ * Registry and `app/create/screens/` are organized by these kinds.
+ */
+export type CreateFlowLayoutKind =
+  | "informational"
+  | "text"
+  | "select"
+  | "upload"
+  | "review"
+  | "card"
+  | "right-rail"
+  | "completed";
+
+export interface CreateFlowScreenDefinition {
+  layoutKind: CreateFlowLayoutKind;
+  /** Figma node id (file Community-Rule-System), dev mode. */
+  figmaNodeId: string;
+  /**
+   * Namespace for `useTranslation`, e.g. `create.communityName`.
+   * Not all screens use i18n the same way (e.g. card step uses `useMessages` elsewhere).
+   */
+  messageNamespace: string;
+  /** Match legacy `text` step: main area vertically centered below `md`. */
+  centeredBodyBelowMd: boolean;
+}
+
+/**
+ * Registry: **distinct URL (`CreateFlowStep`) → Figma + layout**.
+ * Source of truth for product order remains `FLOW_STEP_ORDER` in `flowSteps.ts`.
+ */
+export const CREATE_FLOW_SCREEN_REGISTRY: Record<
+  CreateFlowStep,
+  CreateFlowScreenDefinition
+> = {
+  informational: {
+    layoutKind: "informational",
+    figmaNodeId: "20094-16005",
+    messageNamespace: "create.informational",
+    centeredBodyBelowMd: false,
+  },
+  "community-name": {
+    layoutKind: "text",
+    figmaNodeId: "20094-18187",
+    messageNamespace: "create.communityName",
+    centeredBodyBelowMd: true,
+  },
+  "community-size": {
+    layoutKind: "select",
+    figmaNodeId: "20094-18244",
+    messageNamespace: "create.communitySize",
+    centeredBodyBelowMd: false,
+  },
+  "community-context": {
+    layoutKind: "text",
+    figmaNodeId: "20094-41243",
+    messageNamespace: "create.communityContext",
+    centeredBodyBelowMd: true,
+  },
+  "community-structure": {
+    layoutKind: "select",
+    figmaNodeId: "20094-41317",
+    messageNamespace: "create.communityStructure",
+    centeredBodyBelowMd: false,
+  },
+  "community-upload": {
+    layoutKind: "upload",
+    figmaNodeId: "20094-41524",
+    messageNamespace: "create.communityUpload",
+    centeredBodyBelowMd: false,
+  },
+  "community-reflection": {
+    layoutKind: "text",
+    figmaNodeId: "20097-14948",
+    messageNamespace: "create.communityReflection",
+    centeredBodyBelowMd: true,
+  },
+  review: {
+    layoutKind: "review",
+    figmaNodeId: "19706-12135",
+    messageNamespace: "create.review",
+    centeredBodyBelowMd: false,
+  },
+  cards: {
+    layoutKind: "card",
+    figmaNodeId: "TBD-cards",
+    messageNamespace: "create.communication",
+    centeredBodyBelowMd: false,
+  },
+  "right-rail": {
+    layoutKind: "right-rail",
+    figmaNodeId: "TBD-right-rail",
+    messageNamespace: "create.rightRail",
+    centeredBodyBelowMd: false,
+  },
+  "confirm-stakeholders": {
+    layoutKind: "select",
+    figmaNodeId: "21104-46594",
+    messageNamespace: "create.confirmStakeholders",
+    centeredBodyBelowMd: false,
+  },
+  "final-review": {
+    layoutKind: "review",
+    figmaNodeId: "20907-212767",
+    messageNamespace: "create.finalReview",
+    centeredBodyBelowMd: false,
+  },
+  completed: {
+    layoutKind: "completed",
+    figmaNodeId: "20907-213286",
+    messageNamespace: "create.completed",
+    centeredBodyBelowMd: false,
+  },
+};
+
+export function createFlowStepUsesCenteredTextLayout(
+  step: CreateFlowStep | null,
+): boolean {
+  if (!step) return false;
+  return CREATE_FLOW_SCREEN_REGISTRY[step].centeredBodyBelowMd;
+}

app/create/utils/flowSteps.ts

@@ -2,6 +2,7 @@
  * Step definitions and helpers for the Create Rule Flow
  *
  * Single source of truth for step order and navigation helpers.
+ * Order matches Figma Create Community (frames 1–8) then later stages.
  */
 
 import type { CreateFlowStep } from "../types";
@@ -11,9 +12,12 @@ import type { CreateFlowStep } from "../types";
  */
 export const FLOW_STEP_ORDER: readonly CreateFlowStep[] = [
   "informational",
-  "text",
-  "select",
-  "upload",
+  "community-name",
+  "community-size",
+  "community-context",
+  "community-structure",
+  "community-upload",
+  "community-reflection",
   "review",
   "cards",
   "right-rail",
@@ -75,3 +79,23 @@ export function isValidStep(
     (VALID_STEPS as readonly string[]).includes(step)
   );
 }
+
+/**
+ * Parses `/create/{screenId}` (and optional trailing segments) from pathname.
+ * Returns null for non-wizard paths (e.g. `/create/review-template/...`).
+ */
+export function parseCreateFlowScreenFromPathname(
+  pathname: string | null,
+): CreateFlowStep | null {
+  if (!pathname || pathname.length === 0) return null;
+  if (pathname.includes("/create/review-template/")) return null;
+
+  const parts = pathname.split("/").filter(Boolean);
+  const createIdx = parts.indexOf("create");
+  if (createIdx === -1 || createIdx >= parts.length - 1) return null;
+
+  const segment = parts[createIdx + 1];
+  if (segment === "review-template") return null;
+
+  return isValidStep(segment) ? segment : null;
+}

app/create/utils/hasCreateFlowUserInput.ts

@@ -0,0 +1,27 @@
+import type { CreateFlowState } from "../types";
+
+const IGNORED_KEYS = new Set<string>(["currentStep"]);
+
+function valueIndicatesUserInput(value: unknown): boolean {
+  if (value === undefined || value === null) return false;
+  if (typeof value === "string") return value.trim().length > 0;
+  if (typeof value === "boolean") return value;
+  if (typeof value === "number") return Number.isFinite(value);
+  if (Array.isArray(value)) return value.length > 0;
+  if (typeof value === "object") {
+    return Object.keys(value as object).length > 0;
+  }
+  return false;
+}
+
+/**
+ * True once the user has entered meaningful create-flow data (not only navigation metadata).
+ * Used to show "Save & Exit" vs a plain "Exit" that confirms data loss.
+ */
+export function hasCreateFlowUserInput(state: CreateFlowState): boolean {
+  for (const key of Object.keys(state)) {
+    if (IGNORED_KEYS.has(key)) continue;
+    if (valueIndicatesUserInput(state[key])) return true;
+  }
+  return false;
+}