Create Community stage implemented

app/create/utils/anonymousDraftStorage.ts

@@ -1,4 +1,5 @@
 import type { CreateFlowState } from "../types";
+import { migrateLegacyCreateFlowState } from "../../../lib/create/migrateLegacyCreateFlowState";
 
 /** Anonymous in-progress create flow (local only until magic-link transfer). */
 export const CREATE_FLOW_ANONYMOUS_KEY = "create-flow-anonymous" as const;
@@ -23,8 +24,10 @@ export function readAnonymousCreateFlowState(): CreateFlowState {
   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 : {};
+    const parsed = JSON.parse(raw) as Record<string, unknown>;
+    return typeof parsed === "object" && parsed !== null
+      ? migrateLegacyCreateFlowState(parsed)
+      : {};
   } catch {
     return {};
   }

app/create/utils/createFlowProportionProgress.ts

@@ -0,0 +1,37 @@
+import type { ProportionBarState } from "../../components/progress/ProportionBar/ProportionBar.types";
+import type { CreateFlowStep } from "../types";
+import { FLOW_STEP_ORDER, getStepIndex } from "./flowSteps";
+
+/**
+ * One `ProportionBarState` per index in `FLOW_STEP_ORDER` (same length).
+ * Third Create Community step (`community-structure`) uses `1-2` per Figma.
+ */
+const PROPORTION_BY_STEP_INDEX: readonly ProportionBarState[] = [
+  "1-0", // informational
+  "1-1", // community-name
+  "1-2", // community-structure
+  "1-3", // community-context
+  "1-4", // community-size
+  "1-5", // community-upload
+  "2-0", // community-save
+  "2-0", // review (Figma Flow — Review `19706:12135`: same segment fill as end of Create Community)
+  "2-2", // cards
+  "3-0", // right-rail
+  "3-1", // confirm-stakeholders
+  "3-2", // final-review
+  "3-2", // completed
+] as const;
+
+if (PROPORTION_BY_STEP_INDEX.length !== FLOW_STEP_ORDER.length) {
+  throw new Error(
+    "createFlowProportionProgress: PROPORTION_BY_STEP_INDEX length must match FLOW_STEP_ORDER",
+  );
+}
+
+export function getProportionBarProgressForCreateFlowStep(
+  step: CreateFlowStep | null | undefined,
+): ProportionBarState {
+  const idx = getStepIndex(step);
+  if (idx < 0) return "1-0";
+  return PROPORTION_BY_STEP_INDEX[idx] ?? "1-0";
+}

app/create/utils/createFlowScreenRegistry.ts

@@ -35,6 +35,7 @@ export const CREATE_FLOW_SCREEN_REGISTRY: Record<
   CreateFlowStep,
   CreateFlowScreenDefinition
 > = {
+  /** Figma: Flow — Informational (node 20094-16005). */
   informational: {
     layoutKind: "informational",
     figmaNodeId: "20094-16005",
@@ -49,7 +50,7 @@ export const CREATE_FLOW_SCREEN_REGISTRY: Record<
   },
   "community-size": {
     layoutKind: "select",
-    figmaNodeId: "20094-18244",
+    figmaNodeId: "20094-41317",
     messageNamespace: "create.communitySize",
     centeredBodyBelowMd: false,
   },
@@ -61,7 +62,7 @@ export const CREATE_FLOW_SCREEN_REGISTRY: Record<
   },
   "community-structure": {
     layoutKind: "select",
-    figmaNodeId: "20094-41317",
+    figmaNodeId: "20094-18244",
     messageNamespace: "create.communityStructure",
     centeredBodyBelowMd: false,
   },
@@ -71,10 +72,10 @@ export const CREATE_FLOW_SCREEN_REGISTRY: Record<
     messageNamespace: "create.communityUpload",
     centeredBodyBelowMd: false,
   },
-  "community-reflection": {
+  "community-save": {
     layoutKind: "text",
     figmaNodeId: "20097-14948",
-    messageNamespace: "create.communityReflection",
+    messageNamespace: "create.communitySave",
     centeredBodyBelowMd: true,
   },
   review: {

app/create/utils/flowSteps.ts

@@ -3,6 +3,7 @@
  *
  * Single source of truth for step order and navigation helpers.
  * Order matches Figma Create Community (frames 1–8) then later stages.
+ * `community-structure` precedes `community-context` and `community-size` (Figma frame 3 vs 5 swap).
  */
 
 import type { CreateFlowStep } from "../types";
@@ -13,11 +14,11 @@ import type { CreateFlowStep } from "../types";
 export const FLOW_STEP_ORDER: readonly CreateFlowStep[] = [
   "informational",
   "community-name",
-  "community-size",
-  "community-context",
   "community-structure",
+  "community-context",
+  "community-size",
   "community-upload",
-  "community-reflection",
+  "community-save",
   "review",
   "cards",
   "right-rail",