Offer the engine's five size bands as exclusive ranges, so a count of 100 has one home and a group cannot continue without a size.

Co-authored-by: Cursor <cursoragent@cursor.com>

tests/components/SelectPage.test.tsx

@@ -1,8 +1,17 @@
 import { describe, it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
 import { CommunitySizeSelectScreen } from "../../app/(app)/create/screens/select/CommunitySizeSelectScreen";
 
+const BANDS = [
+  "One member",
+  "2 to 5",
+  "6 to 12",
+  "13 to 100",
+  "More than 100",
+] as const;
+
 describe("CommunitySizeSelectScreen", () => {
   it("renders HeaderLockup title", () => {
     render(<CommunitySizeSelectScreen />);
@@ -13,19 +22,44 @@ describe("CommunitySizeSelectScreen", () => {
     ).toBeInTheDocument();
   });
 
-  it("renders preset size chips", () => {
+  it("asks groups to count people who have a say", () => {
     render(<CommunitySizeSelectScreen />);
-    expect(screen.getByText("1 member")).toBeInTheDocument();
-    expect(screen.getByText("2-5 members")).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "Count the people who have a say in your big decisions. If others take part without a vote, you can say so later in setup.",
+      ),
+    ).toBeInTheDocument();
   });
 
-  it("gives size chips Select/Deselect accessible names", () => {
+  it("renders the five size bands", () => {
     render(<CommunitySizeSelectScreen />);
+    for (const label of BANDS) {
+      expect(
+        screen.getByRole("button", { name: `Select ${label}` }),
+      ).toBeInTheDocument();
+    }
+  });
+
+  it("keeps a single band selected", async () => {
+    const user = userEvent.setup();
+    render(<CommunitySizeSelectScreen />);
+
+    await user.click(screen.getByRole("button", { name: "Select 13 to 100" }));
     expect(
-      screen.getByRole("button", { name: "Select 1 member" }),
+      screen.getByRole("button", { name: "Deselect 13 to 100" }),
     ).toBeInTheDocument();
     expect(
-      screen.getByRole("button", { name: "Select 2-5 members" }),
+      screen.getByRole("button", { name: "Select More than 100" }),
+    ).toBeInTheDocument();
+
+    await user.click(
+      screen.getByRole("button", { name: "Select More than 100" }),
+    );
+    expect(
+      screen.getByRole("button", { name: "Deselect More than 100" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Select 13 to 100" }),
     ).toBeInTheDocument();
   });
 });

tests/unit/communitySizeBands.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from "vitest";
+import communitySize from "../../messages/en/create/community/communitySize.json";
+import { SIZE_BANDS } from "../../lib/create/deckTypes";
+import { isCommunitySizeStepBlocked } from "../../app/(app)/create/utils/createFlowFooterLabels";
+
+/**
+ * Inclusive bounds. 100 stays in 13 to 100. More than 100 starts at 101.
+ * The last band has no upper bound.
+ */
+const BOUNDS: Record<(typeof SIZE_BANDS)[number], { min: number; max: number | null }> = {
+  oneMember: { min: 1, max: 1 },
+  twoToFive: { min: 2, max: 5 },
+  sixToTwelve: { min: 6, max: 12 },
+  thirteenToOneHundred: { min: 13, max: 100 },
+  oneHundredToOneHundredK: { min: 101, max: null },
+};
+
+function bandsForCount(count: number): string[] {
+  return SIZE_BANDS.filter((id) => {
+    const bound = BOUNDS[id];
+    return count >= bound.min && (bound.max == null || count <= bound.max);
+  });
+}
+
+describe("community size bands", () => {
+  it("offers the five engine bands, with exclusive labels", () => {
+    expect(communitySize.header.description).toBe(
+      "Count the people who have a say in your big decisions. If others take part without a vote, you can say so later in setup.",
+    );
+    expect(communitySize.communitySizes).toEqual([
+      { id: "oneMember", label: "One member" },
+      { id: "twoToFive", label: "2 to 5" },
+      { id: "sixToTwelve", label: "6 to 12" },
+      { id: "thirteenToOneHundred", label: "13 to 100" },
+      { id: "oneHundredToOneHundredK", label: "More than 100" },
+    ]);
+    expect(communitySize.communitySizes.map((row) => row.id)).toEqual([
+      ...SIZE_BANDS,
+    ]);
+  });
+
+  it("puts each count in exactly one band, with 100 in 13 to 100", () => {
+    expect(bandsForCount(1)).toEqual(["oneMember"]);
+    expect(bandsForCount(5)).toEqual(["twoToFive"]);
+    expect(bandsForCount(6)).toEqual(["sixToTwelve"]);
+    expect(bandsForCount(12)).toEqual(["sixToTwelve"]);
+    expect(bandsForCount(13)).toEqual(["thirteenToOneHundred"]);
+    expect(bandsForCount(100)).toEqual(["thirteenToOneHundred"]);
+    expect(bandsForCount(101)).toEqual(["oneHundredToOneHundredK"]);
+    for (let count = 1; count <= 500; count += 1) {
+      expect(bandsForCount(count)).toHaveLength(1);
+    }
+  });
+
+  it("blocks continue on the size step until one band is chosen", () => {
+    expect(isCommunitySizeStepBlocked("community-size", undefined)).toBe(true);
+    expect(isCommunitySizeStepBlocked("community-size", [])).toBe(true);
+    expect(isCommunitySizeStepBlocked("community-size", [""])).toBe(true);
+    expect(
+      isCommunitySizeStepBlocked("community-size", ["thirteenToOneHundred"]),
+    ).toBe(false);
+    expect(
+      isCommunitySizeStepBlocked("community-structure", undefined),
+    ).toBe(false);
+  });
+});

tests/unit/createFooterMessages.test.ts

@@ -16,8 +16,8 @@ describe("create footer messages", () => {
     );
   });
 
-  it("exposes confirmMembers for the community-size footer CTA", () => {
-    expect(messages.create.footer.confirmMembers).toBe("Confirm members");
+  it("exposes confirmSize for the community-size footer CTA", () => {
+    expect(messages.create.footer.confirmSize).toBe("Confirm size");
   });
 
   it("exposes publishCommunityRule for the final-review footer CTA", () => {