@explorer02/cfm-survey-sdk 0.1.8 → 0.2.0

package/templates/docs/03-ui-specs/02-radio.md

@@ -0,0 +1,57 @@
+# UI Spec: Radio MCQ (`type: 'radio'`)
+
+> **Reference:** `apps/client/src/components/Question.tsx` (inline)
+> **SDK type:** `RadioQuestion` — `fetchSurvey/types/radio.ts`
+> **Component blueprint:** `01-components/02-question.md`
+
+## Config Inventory
+
+| Field | Implemented | UI impact |
+|-------|-------------|-----------|
+| `options[]` | ✅ | One card per option |
+| `options[].label` | ✅ | HTML via `dangerouslySetInnerHTML` |
+| `options[].value` | ✅ | Selection value; `null` → empty string on input |
+| `isMultiSelect` | ❌ | SDK supports; client is single-select only |
+
+## Layout Anatomy
+
+```
+┌─ label (full-width card) ─────────────────────────────────────┐
+│  (●)  Option label HTML                                      │  selected
+└───────────────────────────────────────────────────────────────┘
+┌─ label ───────────────────────────────────────────────────────┐
+│  (○)  Option label HTML                                      │  unselected
+└───────────────────────────────────────────────────────────────┘
+```
+
+## Interactive States
+
+| State | Border | Background | Radio |
+|-------|--------|------------|-------|
+| Unselected | `#e5e5e5` | `white` | `border-gray-400`, empty |
+| Unselected hover | `#e5e5e5` | `hover:bg-gray-50/50` | — |
+| Selected | `#e20074` | `#fdf2f8` | `border-2 border-[#e20074]` + inner dot `h-2.5 w-2.5 bg-[#e20074]` |
+
+## Structure
+
+```tsx
+<label className="flex items-center gap-4 rounded-lg border py-4 px-5 cursor-pointer">
+  <input type="radio" name={question.id} className="sr-only" />
+  <div className="h-5 w-5 rounded-full border ..."> {/* custom radio */} </div>
+  <span dangerouslySetInnerHTML={{ __html: option.label }} />
+</label>
+```
+
+## Answer Mutation
+
+```typescript
+onSelect(option.value) // string | number
+```
+
+## Agent Checklist
+
+- [ ] Full-width card options with gap-3 vertical stack
+- [ ] Custom circular radio indicator (not browser default)
+- [ ] Selected: magenta border + pink background
+- [ ] HTML labels
+- [ ] If `isMultiSelect`: implement checkbox cards (SDK gap in reference)

package/templates/docs/03-ui-specs/03-text.md

@@ -0,0 +1,51 @@
+# UI Spec: Text Field (`type: 'text'`)
+
+> **Reference:** `apps/client/src/components/Question.tsx` (inline)
+> **SDK type:** `TextQuestion` — `fetchSurvey/types/text.ts`
+
+## Config Inventory
+
+| Field | Implemented | UI impact |
+|-------|-------------|-----------|
+| `placeholder` | ✅ | Textarea placeholder; default `'Type your response here...'` |
+| `maxCharacterCount` | ✅ | Counter uses this; default 1000 |
+| `inputVariant: 'long'` | ✅ | Always textarea (4 rows) in reference |
+| `inputVariant: 'short'` | ❌ | Should render single-line `<input>` when SDK sends `'short'` |
+
+## Layout Anatomy
+
+```
+┌─ textarea (w-full rounded-[4px] border border-gray-300 p-4) ──┐
+│  placeholder text                                               │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+                                    N Zeichen verbleiben.  ← counter
+```
+
+## Interactive States
+
+| State | Style |
+|-------|-------|
+| Default | `border-gray-300` |
+| Focus | `focus:border-[#e20074] focus:ring-1 focus:ring-[#e20074]` |
+
+## Character Counter
+
+```typescript
+remaining = maxCharacterCount ?? 1000 - selectedValue.length
+// Display: "{remaining} Zeichen verbleiben." (German in reference client)
+// Agents: use survey language for i18n
+```
+
+## Answer Mutation
+
+```typescript
+onSelect(string) // onChange from textarea
+```
+
+## Agent Checklist
+
+- [ ] Textarea with 4 rows for long variant
+- [ ] Character counter bottom-right
+- [ ] Magenta focus ring
+- [ ] Implement `inputVariant: 'short'` as single-line input when present

package/templates/docs/03-ui-specs/04-csat.md

@@ -0,0 +1,57 @@
+# UI Spec: CSAT (`type: 'csat'`)
+
+> **Reference:** `apps/client/src/components/CsatScale.tsx`
+> **SDK type:** `CsatQuestion` — `fetchSurvey/types/csat.ts`
+> **Component blueprint:** `01-components/04-csat-scale.md`
+
+## Config Inventory
+
+| Field | Implemented | UI impact |
+|-------|-------------|-----------|
+| `options[]` | ✅ | Scale buttons or dropdown options |
+| `buttonType` | ✅ partial | Branches below |
+| `labelPosition` | ✅ | `'top'` → flex-col-reverse; `'hidden'` → no label |
+| `minLabel` / `maxLabel` | ✅ | Rendered in Question.tsx above scale |
+| `hasNotApplicable` | ❌ | N/A option in options array still renders |
+| `reverseScaleOrder` | ❌ | Document: reverse options before map |
+
+## Config Decision Tree
+
+```
+csat
+├── buttonType === 'dropdown'
+│   └── Native <select>, placeholder "Select an option"
+│       └── Parse value 'null' → null
+└── else (emoji | star | numbered | number | default)
+    └── flex flex-wrap gap-3 buttons
+        ├── emoji → getEmojiForIndex(index, scaleLength)
+        ├── star → CsatStarIcons filled/empty; labels hidden
+        ├── numbered/number → mono font value
+        └── default → bold value or 'N/A' if null
+```
+
+## Interactive States
+
+| State | Border | Background | Transform |
+|-------|--------|------------|-----------|
+| Default | `border-gray-200` | `white` | scale-100 |
+| Hover | `border-gray-300` | `hover:bg-gray-50` | — |
+| Selected | `border-[#e20074]` | `#fdf2f8` | `scale-110` |
+| Star mode | transparent | transparent | no border/bg on button |
+
+## Tooltips
+
+Recommended: `title={option.label}` on each button. Not in reference client.
+
+## Answer Mutation
+
+```typescript
+onSelect(string | number | null)
+```
+
+## Agent Checklist
+
+- [ ] Dropdown branch with magenta focus ring
+- [ ] Emoji/star/numbered branches per decision tree
+- [ ] `labelPosition` controls label above/below/hidden
+- [ ] Implement `reverseScaleOrder` and standalone `hasNotApplicable` (SDK gaps)

package/templates/docs/03-ui-specs/05-rating-scale.md

@@ -0,0 +1,49 @@
+# UI Spec: Rating Scale (`type: 'rating_scale'`)
+
+> **Reference:** ❌ Not routed in `Question.tsx` — reuse `CsatScale.tsx` patterns
+> **SDK type:** `RatingScaleQuestion` — `fetchSurvey/types/ratingScale.ts`
+> **Component blueprint:** `01-components/03-rating-scale.md`
+
+## Config Inventory
+
+| Field | Implemented | UI impact |
+|-------|-------------|-----------|
+| `options[]` | ❌ gap | Star/emoji buttons (no NPS colors) |
+| `scaleStyle` | ❌ gap | `'star'` or `'emoji'` |
+| `minLabel` / `midLabel` / `maxLabel` | ❌ gap | Same formulas as NPS in Question shell |
+| `midLabelIndex` | ❌ gap | `(midLabelIndex / (options.length - 1)) * 100`% |
+| `reverseScaleOrder` | ❌ gap | Reverse options before render |
+
+## Expected UI (from CsatScale + rating labels)
+
+```
+[minLabel]     [midLabel @ %]     [maxLabel]
+┌────┬────┬────┬────┬────┐
+│ ★  │ ★  │ ★  │ ★  │ ★  │  scaleStyle: 'star'
+└────┴────┴────┴────┴────┘
+  OR emoji row from getEmojiForIndex when scaleStyle: 'emoji'
+```
+
+Reuse CsatScale selected styling: `border-[#e20074] bg-[#fdf2f8] scale-110`.
+
+## Config Decision Tree
+
+```
+rating_scale
+├── scaleStyle === 'star' → CsatStarIcons per option
+├── scaleStyle === 'emoji' → getEmojiForIndex
+└── else → numbered badges (no option.color)
+```
+
+## Answer Mutation
+
+```typescript
+onSelect(number)
+```
+
+## Agent Checklist
+
+- [ ] Add dispatcher branch in Question for `rating_scale`
+- [ ] No traffic-light NPS colors on options
+- [ ] min/mid/max labels with midLabelIndex formula
+- [ ] Match CsatScale interactive states

package/templates/docs/03-ui-specs/06-slider.md

@@ -0,0 +1,42 @@
+# UI Spec: Standalone Slider (`type: 'slider'`)
+
+> **Reference:** ❌ Not routed in `Question.tsx` — reuse `CustomSliderTrack.tsx`
+> **SDK type:** `SliderQuestion` — `fetchSurvey/types/slider.ts`
+> **Component blueprint:** `01-components/09-custom-slider-track.md`
+
+## Config Inventory
+
+| Field | Implemented | UI impact |
+|-------|-------------|-----------|
+| `min` / `max` / `step` | ❌ gap | Track range |
+| `defaultValue` | ❌ gap | Initial thumb position |
+| `minLabel` / `maxLabel` | ❌ gap | End labels above track |
+| `enableInputBox` | ❌ gap | See SliderMatrixScale input pattern |
+| `displayValues` | ❌ gap | Pass to CustomSliderTrack |
+
+## Layout Anatomy
+
+```
+[minLabel]                              [maxLabel]
+┌──────────────────────────────────────────────────┐
+│  ───●────────────────  (CustomSliderTrack)      │
+└──────────────────────────────────────────────────┘
+[optional number input + steppers if enableInputBox]
+```
+
+## Reference Patterns
+
+Copy from [`09-slider-matrix.md`](09-slider-matrix.md) single-row layout and [`shared/custom-slider-track.md`](shared/custom-slider-track.md).
+
+## Answer Mutation
+
+```typescript
+onSelect(number)
+```
+
+## Agent Checklist
+
+- [ ] Add Question dispatcher for `slider`
+- [ ] CustomSliderTrack with min/max/step
+- [ ] Optional input box with clamp min/max
+- [ ] End labels flex justify-between

package/templates/docs/03-ui-specs/07-matrix-cfm.md

@@ -0,0 +1,66 @@
+# UI Spec: CFM Matrix (`type: 'matrix'`, `subType: 'CFM_MATRIX'`)
+
+> **Reference:** `apps/client/src/components/LikertMatrixScale.tsx`
+> **SDK type:** `MatrixQuestion` — `fetchSurvey/types/matrix.ts`
+> **Component blueprint:** `01-components/06-likert-matrix-scale.md`
+
+## Config Inventory
+
+| Field | Implemented | UI impact |
+|-------|-------------|-----------|
+| `rows[]`, `columns[]` | ✅ | Grid / carousel / dropdown data |
+| `matrixFormat` | ✅ | Orchestrator routing |
+| `answerType` | ✅ | `'multiple'` → checkboxes |
+| `matrixType: 'bipolar'` | ✅ | 25% left + 25% right columns |
+| `labels[]` | ✅ | Anchor labels above scale |
+| `transposeTable` | ✅ | Swap row/col iteration |
+| `repeatScale` | ✅ | Re-render header per row |
+| `enableScale` | ✅ | Show/hide column header row |
+| `hasNotApplicable` | ✅ | N/A column with mutex |
+
+## Config Decision Tree
+
+```
+CFM_MATRIX
+├── matrixFormat === 'dropdown' → LikertMatrixDropdownLayout (MatrixDropdown per row)
+├── matrixFormat === 'carousel' → LikertMatrixCarouselLayout (one row, prev/next, blue dots)
+└── else → LikertMatrixGridLayout
+    ├── transposeTable ? columns×rows : rows×columns
+    ├── repeatScale ? header per row : single header
+    ├── enableScale ? column headers : hidden
+    └── matrixType === 'bipolar' ? 25% | scale | 25% layout
+```
+
+## Interactive Behaviors
+
+| Behavior | Condition | Action |
+|----------|-----------|--------|
+| Click selected radio again | single-select grid/carousel | Clear row (`undefined`) |
+| N/A selected | any | Other cols opacity 0.4, disabled |
+| Multi N/A | answerType multiple | Sets `[null]` exclusively |
+| Multi toggle | answerType multiple | Add/remove from array |
+
+## Grid Layout
+
+- Row label column: `180px` (likert) or `25%` (bipolar)
+- Zebra rows: even rows `rgba(249,250,251,0.8)`
+- Native inputs: `accentColor: #e20074`, 18×18px
+
+## Carousel
+
+- Blue active dot: `#2563eb` (Likert only)
+- Card: white, border, shadow, centered row text
+
+## Answer Mutation
+
+```typescript
+onSelect(MatrixAnswerMap) // Record<rowId, value | value[] | null>
+```
+
+## Agent Checklist
+
+- [ ] All three matrixFormat branches
+- [ ] transposeTable + repeatScale + enableScale
+- [ ] Bipolar 25/50/25 layout with rightText
+- [ ] Single-select deselect on re-click
+- [ ] N/A mutex with opacity 0.4

package/templates/docs/03-ui-specs/08-matrix-csat-rating.md

@@ -0,0 +1,65 @@
+# UI Spec: CSAT / Rating Matrix (`subType: 'CSAT_MATRIX' | 'RATING_MATRIX'`)
+
+> **Reference:** `apps/client/src/components/CsatMatrixScale.tsx`
+> **SDK type:** `MatrixQuestion` — `fetchSurvey/types/matrix.ts`
+> **Component blueprint:** `01-components/05-csat-matrix-scale.md`
+
+## Config Inventory
+
+| Field | Implemented | UI impact |
+|-------|-------------|-----------|
+| `buttonType` | ✅ | Grid vs vertical list routing |
+| `matrixFormat` | ✅ | carousel vs standard |
+| `hasNotApplicable` | ✅ | Checkbox below row (vertical) or N/A column (grid) |
+| `reverseScaleOrder` | ✅ | Flip emoji/star/number index |
+| `labels[]` | ✅ | Anchor row above columns |
+| `columns[].color` | ✅ | RATING_MATRIX badge colors |
+
+## Config Decision Tree
+
+```
+CSAT_MATRIX | RATING_MATRIX
+├── matrixFormat === 'carousel' → CsatMatrixCarousel
+├── buttonType in (dropdown, selectbox, radio) → CsatMatrixVerticalList
+│   ├── dropdown → MatrixDropdown placeholder "Select..."
+│   ├── selectbox → full-width cards #fdf2f8 selected
+│   └── else → card radio list
+└── else → CsatMatrixGrid
+    ├── emoji → getEmojiForIndex + hover scale + ring when selected
+    ├── star → opacity 0.5 unselected; filled/empty icons
+    ├── numbered → 40×40 badge; selected magenta fill
+    └── graphics → CustomSliderTrack per row (not in grid — carousel only)
+```
+
+## Grid Structure
+
+- Row label: `180px` fixed column
+- N/A column: `56px` when `hasNotApplicable`
+- Alternating row backgrounds
+- Column headers OR `labels[]` anchor row with percentage positioning
+
+## Carousel
+
+- Pink active dot expands: `20px × 8px` vs `8px` inactive
+- Column labels below cells
+- Emoji tooltip via hover state (`hoveredCell`)
+- Graphics mode: slider maps column index
+
+## Tooltips
+
+`title={col.label}` recommended on grid cells (emoji hover uses scale transform).
+
+## Answer Mutation
+
+```typescript
+onSelect(MatrixAnswerMap)
+// hasNotApplicable: null for N/A; undefined clears
+```
+
+## Agent Checklist
+
+- [ ] scaleColumns = columns.filter(c => c.value !== null)
+- [ ] All buttonType × matrixFormat branches
+- [ ] reverseScaleOrder on emoji/star/numbered
+- [ ] Carousel pink dot indicators
+- [ ] Vertical selectbox cards match standalone radio styling

package/templates/docs/03-ui-specs/09-slider-matrix.md

@@ -0,0 +1,61 @@
+# UI Spec: Slider Matrix (`type: 'slider_matrix'`)
+
+> **Reference:** `apps/client/src/components/SliderMatrixScale.tsx`
+> **SDK type:** `SliderMatrixQuestion` — `fetchSurvey/types/sliderMatrix.ts`
+> **Component blueprint:** `01-components/07-slider-matrix-scale.md`
+> **Shared:** [`shared/custom-slider-track.md`](shared/custom-slider-track.md)
+
+## Config Inventory
+
+| Field | Implemented | UI impact |
+|-------|-------------|-----------|
+| `rows[]` (min/max/step) | ✅ | Per-row slider range |
+| `labels[]` | ✅ | Header anchor labels |
+| `tickValues[]` | ✅ | Colored badges above track |
+| `ticks` | ✅ | Discrete marks + htmlStep |
+| `sliderType: 'graphics'` | ✅ | Plain text tick labels; emoji thumb |
+| `enableInputBox` | ✅ | 80px input + stepper buttons |
+| `displayValues` | ✅ | Passed to CustomSliderTrack |
+| `enableNotApplicable` | ✅ | Checkbox; value `'N/A'` string |
+
+## Layout Anatomy
+
+```
+[header: labels[] + tickValues badges OR computed marks]
+┌─ row band (#f3f4f6, rounded-xl) ─────────────────────────────┐
+│ 25% statement │ CustomSliderTrack │ 25% rightText? │ input? │ N/A? │
+└───────────────────────────────────────────────────────────────┘
+```
+
+## Header Tick Positioning
+
+```typescript
+percentage = ((tv.value - min) / (max - min)) * 100
+sliceWidth = tickValues.length > 1 ? 100 / (tickValues.length - 1) : 100
+// Colored badge: tv.color bg, white text, rounded 4px
+// graphics: plain text label instead of colored badge
+```
+
+## N/A Behavior
+
+- Checked → `rowVal === 'N/A'`; slider disabled, input grayed
+- Unchecked → reset to `defaultValue ?? min`
+
+## Input Box
+
+- Clamp to row.min / row.max on change
+- Steppers use `htmlStep` increment/decrement
+
+## Answer Mutation
+
+```typescript
+onSelect(Record<string, number | null | 'N/A'>)
+```
+
+## Agent Checklist
+
+- [ ] Shared header from first row min/max/step
+- [ ] Gray row bands with 25% statement columns
+- [ ] CustomSliderTrack per row with correct htmlStep
+- [ ] tickValues colored badges (non-graphics)
+- [ ] N/A mutex disables slider + input

package/templates/docs/03-ui-specs/10-file-upload.md

@@ -0,0 +1,54 @@
+# UI Spec: File Upload (`type: 'file_upload'`)
+
+> **Reference:** `apps/client/src/components/FileUploadScale.tsx`
+> **SDK type:** `FileUploadQuestion` — `fetchSurvey/types/fileUpload.ts`
+> **Component blueprint:** `01-components/08-file-upload-scale.md`
+
+## Config Inventory
+
+| Field | Implemented | UI impact |
+|-------|-------------|-----------|
+| `uploadMessage` | ✅ | HTML in dropzone (bold 16px) |
+| `supportedFileFormats` | ✅ | Validation + accept attribute |
+| `maxFileCount` | ✅ | Total file limit |
+| `fileSizeLimit` | ✅ | MB limit |
+| `fileSizeLimitType` | ✅ | `PER_FILE` or `IN_TOTAL` |
+
+## Layout Anatomy
+
+```
+[uploadMessage HTML in dashed dropzone]
+  File limit: N; File size limit: XMB/file|in total; Supports: ...
+[local error banner — red if validation fails]
+[file list cards: icon, name, size, remove ×]
+```
+
+## Interactive States
+
+| State | Border | Background |
+|-------|--------|------------|
+| Default | `#d1d5db` dashed | `#f9fafb` |
+| Hover | `#e20074` | `#fdf2f8` |
+| Drag active | `#e20074` | `#fdf2f8` |
+
+## Local Validation (before SDK)
+
+1. Max file count exceeded
+2. Unsupported extension
+3. PER_FILE size exceeded
+4. IN_TOTAL cumulative size exceeded
+
+Error banner: `#fee2e2` bg, `#b91c1c` text.
+
+## Answer Mutation
+
+```typescript
+onSelect(File[] | undefined) // undefined when all removed
+```
+
+## Agent Checklist
+
+- [ ] Hidden `<input type="file">` triggered by dropzone click
+- [ ] Drag enter/over/leave/drop handlers
+- [ ] Dynamic constraints line in dropzone
+- [ ] File list with remove button (hover red)

package/templates/docs/03-ui-specs/11-text-and-media.md

@@ -0,0 +1,49 @@
+# UI Spec: Text and Media (`type: 'text_and_media'`)
+
+> **Reference:** `apps/client/src/components/Question.tsx` (inline)
+> **SDK type:** `TextAndMediaQuestion` — `fetchSurvey/types/textAndMedia.ts`
+> **Component blueprint:** `01-components/02-question.md`
+
+## Config Inventory
+
+| Field | Implemented | UI impact |
+|-------|-------------|-----------|
+| `mediaUrl` | ✅ | Required to render media block |
+| `mediaMimeType` | ✅ | `video/` or `VIDEO` → `<video>`; else `<img>` |
+| `mediaTitle` | ✅ | Caption below media, centered gray text |
+| `mediaAlignment` | ✅ | Flex justify: CENTER / RIGHT / default left |
+| `mediaSize` | ✅ | Width `%` on media container; default 100% |
+
+No answer input — display-only question.
+
+## Layout Anatomy
+
+```
+[question title + description — standard shell]
+
+┌─ flex container (justify per mediaAlignment) ──────────────┐
+│  ┌─ media block (width: mediaSize%) ──────────────────┐   │
+│  │  <video controls> or <img>                          │   │
+│  │  [optional mediaTitle caption]                      │   │
+│  └─────────────────────────────────────────────────────┘   │
+└────────────────────────────────────────────────────────────┘
+```
+
+## Alignment Mapping
+
+| `mediaAlignment` | CSS |
+|------------------|-----|
+| `TOP_CENTER`, `BOTTOM_CENTER` | `justify-center` |
+| `TOP_RIGHT`, `BOTTOM_RIGHT` | `justify-end` |
+| default | `justify-start` |
+
+## Answer Mutation
+
+None — no `onSelect` payload for this type.
+
+## Agent Checklist
+
+- [ ] Render only when `mediaUrl` is present
+- [ ] Video vs image from mime type
+- [ ] `max-w-full rounded-md shadow-sm` on media element
+- [ ] Optional centered caption for `mediaTitle`

package/templates/docs/03-ui-specs/12-survey-chrome.md

@@ -0,0 +1,60 @@
+# UI Spec: Survey Chrome
+
+> **Reference:** `SurveyPage.tsx`, `Header.tsx`, `Footer.tsx`, `ProgressBar.tsx`, `LanguageSelector.tsx`
+> **Component blueprints:** `01-components/01-survey-page.md`, `10-header-footer.md`, `11-progress-bar.md`, `12-language-selector.md`
+
+## SurveyPage — 5-State Machine
+
+| State | Condition | UI |
+|-------|-----------|-----|
+| Loading | `surveyQueryResults.isLoading` | Centered "Loading..." |
+| Error | `surveyQueryResults.error` | Red error message |
+| Empty | `!survey` | "No survey data" |
+| Submitted | `submitSurveyResults.data` | Thank you message |
+| Active | else | Questions + nav |
+
+## Active Layout
+
+```
+Header
+main (max-w-4xl)
+  ProgressBar(progressPercentage)
+  LanguageSelector (hidden if ≤1 language)
+  Questions (space-y-12)
+  Submit error (if any)
+  Nav: Back (if page > 0) + Next/Submit
+Footer
+```
+
+## Navigation Labels
+
+German when `survey.language.startsWith('de')`:
+
+| Action | EN | DE |
+|--------|----|----|
+| Back | Zurück | Back |
+| Next | Weiter | Next |
+| Submit | Absenden | Submit |
+| Submitting | Wird gesendet... | Submitting... |
+
+## Button Tokens
+
+- Back: `border-[#e20074] text-[#e20074] hover:bg-[#fdf2f8]`
+- Primary: `bg-[#e20074] text-white hover:opacity-90`
+
+## ProgressBar
+
+Pink fill bar, `300ms` width transition on `progressPercentage`.
+
+## LanguageSelector
+
+- Hidden when `languages.length <= 1`
+- Focus ring: `#2563eb`
+
+## Agent Checklist
+
+- [ ] All 5 states implemented
+- [ ] `onAction({ type: 'CHANGE' })` wired per question
+- [ ] PREVIOUS / NEXT actions on nav buttons
+- [ ] ProgressBar receives `state.progressPercentage`
+- [ ] Header/Footer on every state branch