Compiled the supplied gallery story into an Executable State Logic Module. Grid is the source-defined initial mode, view switching is explicit, carousel navigation is legal only in carousel mode, and wraparound uses a required item count instead of inventing one. # Behavior Contract Source behavior: - Initial view is `grid`. - User may switch to `grid`, `masonry`, or `carousel`. - In carousel mode, next and previous navigation wrap around. - TypeScript only; no dependency is allowed. Operational boundary: - The story does not supply an item count, so `itemCount` is an explicit constructor input. - The story does not say that switching modes resets the current carousel index, so the index is preserved. - The story does not define keyboard handlers, rendering, persistence, or animation, so none is added. # State Model ```ts type ViewMode = "grid" | "masonry" | "carousel"; type GalleryState = { viewMode: ViewMode; carouselIndex: number; itemCount: number; }; ``` Initial-state rule: - `viewMode` starts as `grid`. - `carouselIndex` starts at `0`. - `itemCount` is supplied by the caller and normalized to a non-negative integer. # Event Contract ```ts type GalleryEvent = | { type: "SWITCH_VIEW"; viewMode: ViewMode } | { type: "NEXT" } | { type: "PREVIOUS" }; ``` Event meaning: - `SWITCH_VIEW` changes only the active view mode. - `NEXT` advances one item only while in carousel mode. - `PREVIOUS` moves back one item only while in carousel mode. # Transition Matrix | Current state | Event | Guard | Next state | |---|---|---|---| | any view | SWITCH_VIEW(mode) | mode is one of the declared view modes | same data, `viewMode = mode` | | carousel | NEXT | `itemCount > 0` | index = `(index + 1) % itemCount` | | carousel | PREVIOUS | `itemCount > 0` | index = `(index - 1 + itemCount) % itemCount` | | carousel | NEXT / PREVIOUS | `itemCount = 0` | no-op | | grid or masonry | NEXT / PREVIOUS | none | no-op | # TypeScript Module ```ts export type ViewMode = "grid" | "masonry" | "carousel"; export type GalleryState = { viewMode: ViewMode; carouselIndex: number; itemCount: number; }; export type GalleryEvent = | { type: "SWITCH_VIEW"; viewMode: ViewMode } | { type: "NEXT" } | { type: "PREVIOUS" }; export function createGalleryState(itemCount: number): GalleryState { const safeItemCount = Number.isFinite(itemCount) ? Math.max(0, Math.floor(itemCount)) : 0; return { viewMode: "grid", carouselIndex: 0, itemCount: safeItemCount, }; } export function transitionGallery( state: GalleryState, event: GalleryEvent, ): GalleryState { if (event.type === "SWITCH_VIEW") { return { ...state, viewMode: event.viewMode }; } if (state.viewMode !== "carousel" || state.itemCount === 0) { return state; } if (event.type === "NEXT") { return { ...state, carouselIndex: (state.carouselIndex + 1) % state.itemCount, }; } return { ...state, carouselIndex: (state.carouselIndex - 1 + state.itemCount) % state.itemCount, }; } ``` # Proof Traces Trace A — switch modes: 1. `createGalleryState(5)` → grid, index 0. 2. `SWITCH_VIEW(carousel)` → carousel, index 0. 3. `SWITCH_VIEW(masonry)` → masonry, index 0. Trace B — wrap next: 1. carousel, index 4, itemCount 5. 2. `NEXT` → index 0. Trace C — wrap previous: 1. carousel, index 0, itemCount 5. 2. `PREVIOUS` → index 4. Trace D — navigation outside carousel: 1. grid, index 0, itemCount 5. 2. `NEXT` → unchanged state. # Boundary Notes - `itemCount` is required because wraparound cannot be computed from the story without the collection size. - No event changes `itemCount`; the source does not describe dynamic collection updates. - No claim is made that this module was compiled or executed in a project. - If the buyer later supplies a rule such as “switching into carousel resets to the first item,” that becomes one explicit transition update rather than a silent assumption. # Apply Notes Use `createGalleryState(itemCount)` to create the initial state and route UI actions through `transitionGallery`. Rendering remains outside this module: the UI reads `viewMode` and `carouselIndex`, while this module owns only the story-defined state behavior. Completion checks: - Complete TypeScript module present: satisfied - Every source-stated transition represented: satisfied - Guards and invariants explicit: satisfied - No invented project dependency: satisfied - Direct buyer use: satisfied - No hidden dependency: satisfied - No unsupported runtime claim: satisfied