@mmerterden/multi-agent-pipeline 11.2.0 → 11.3.1

package/pipeline/skills/figma-ios/figma-to-component/phases/phase-4b-view.md

@@ -1,705 +0,0 @@
-# PHASE 4B  -  View Implementation + Preview
-
-Write the main View struct and Preview.
-This is the most critical implementation phase  -  it produces the actual SwiftUI component.
-
-required  -  always execute this phase.
-PARALLEL WITH: Phase 4A (Configuration), Phase 4C (FIGMA.md)
-
----
-
-## CONTEXT VARIABLES
-
-These are provided by the orchestrator in the dispatch prompt:
-- `componentName`  -  e.g., "LabelBadge"
-- `componentLocation`  -  e.g., "Sources/UIComponents/.../LabelBadge/"
-- `artifactPath`  -  path to implementation artifacts
-- `nodeId`  -  Figma node ID
-- `fileKey`  -  Figma file key
-- `complexity`  -  SIMPLE or COMPLEX
-- `gitUser`  -  from `git config user.name`
-- `date`  -  current date in DD.MM.YYYY format
-- `issueNumber`  -  GitHub issue number (e.g., "340"). May be empty if not available.
-
----
-
-## PRE-CHECK
-
-Read all required analysis files **in this order** (compact context first, large files last):
-
-```
-{artifactPath}/pass1/component_summary.json            → Component overview (~100 lines)  -  READ FIRST
-{artifactPath}/pass3/00_property_coverage.json          → Property mandate (IMPLEMENT/SKIP/DEFER)
-{artifactPath}/pass3/07_implementation_spec.md          → Compiled blueprint
-{artifactPath}/pass3/04b_component_architecture.md      → API shape, enums, properties
-{artifactPath}/pass3/04c_variant_config_analysis.json   → Boolean classifications, sub-component types (from 3H)
-{artifactPath}/pass3/02_token_mapping.md                → Swift token usage patterns
-{artifactPath}/pass3/03_nested_components.md            → Child component init signatures
-{artifactPath}/pass3/08_utility_integration.md          → Testing IDs, accessibility, analytics
-{artifactPath}/pass3/04_patterns.md                     → Dimensions, variant examples
-{artifactPath}/pass1/screenshot.png                     → Visual reference
-{artifactPath}/pass1/design_context_response.json       → Layout hierarchy (ONLY if needed for complex layout detail)
-```
-
-If `component_summary.json` does not exist, fall back to reading `component_properties.json` directly.
-If `00_property_coverage.json` does not exist, proceed without it (backward compatibility with pre-3G components).
-
-Read macros reference:
-```
-.instructions/figma/figma-to-swiftui/reference/macros.md
-```
-
-Read effects conversion reference (shadows, blur, gradients, animations):
-```
-.instructions/figma/figma-to-swiftui/reference/figma-to-swiftui-effects.md
-```
-
-**(strict) CSS effect lookup:** If `design_context_response.json` contains any of `backdrop-blur-[...]`, `backdrop-filter`, `filter: blur(...)`, `box-shadow`, `linear-gradient(...deg, ...)`, you MUST apply the mapping from `figma-to-swiftui-effects.md` verbatim. Cite the section number in a code comment next to the translated line.
-
-**ANTI-PATTERN  -  do NOT reach for system Materials:** CSS `backdrop-blur-[Npx]` maps to `.blur(radius: N/2)` per effects-reference section2  -  NOT to `.ultraThinMaterial`, `.regularMaterial`, or `.thinMaterial`. iOS Materials adapt their tint based on underlying content (darker on dark backgrounds, lighter on light) which does not match CSS `backdrop-filter` semantics. Use a plain gradient/fill + `.blur(radius:)` following the reference. If a stroke border must stay sharp, put it in an overlay above the blurred layer.
-
-If any required file is missing:
-
-```
-STATUS: HALT
-PHASE: phase-4b
-GATE: PRE_CHECK
-REASON: Required artifacts missing.
-COMPLETED_GATES: []
-ARTIFACTS_CREATED: none
-USER_ACTION_REQUIRED: Run Phase 3 first.
-```
-
----
-
-## GATE 1: FILE_HEADER
-
-```swift
-//
-//  {ComponentName}.swift
-//  UIComponents
-//
-//  Created by {gitUser} on {date}.
-//
-
-import SwiftUI
-```
-
-### Import resolution
-
-Add imports based on what the component needs:
-
-| Condition | Import | When |
-|-----------|--------|------|
-| COMPLEX component | `import UIMacros` | @GenerateViewConfiguration macro |
-| Design tokens used | `import UIAssetTokens` | Color, Spacing, Radius, Font tokens |
-| Utility modifiers | `import UIComponentUtilities` | Testing IDs, accessibility, analytics |
-| Direct analytics | `import AnalyticsEvents` | Direct `.track()` calls |
-| Nested component from another module | `import {ModuleName}` | Cross-module dependency |
-
----
-
-## GATE 2: CONSTANTS
-
-Extract ALL raw numbers from Figma metadata and design_context. No magic numbers in the body.
-
-INPUT: `pass3/04_patterns.md` → Dimensions section
-INPUT: `pass1/design_context_response.json` → any raw values (opacity, gradient stops, etc.)
-
-```swift
-private enum Constants {
-    static let width: CGFloat = {from metadata}
-    static let height: CGFloat = {from metadata}
-    // Only values NOT covered by design tokens
-    // Do NOT duplicate token values here (spacing, radius, colors are tokens)
-}
-```
-
-**Rules:**
-- Spacing values → use `.Spacing.spacingN` tokens, NOT constants
-- Radius values → use `.Radius.radiusN` tokens, NOT constants
-- Colors → use `Color.Namespace.tokenName` tokens, NOT constants
-- Only truly component-specific numbers go in Constants (opacity, gradient stops, fixed dimensions)
-- If no component-specific constants exist, omit the Constants enum entirely
-
-**Constants Placement Rule:**
-- Constants MUST be `private enum Constants` nested INSIDE the View struct, NOT at file scope
-- Place it as the first item inside the struct, before `// MARK: - Properties`
-- Token values (`.Spacing.*`, `.Radius.*`, `Color.*`, `.Size.*`) are used directly in the body  -  do NOT wrap them in Constants
-
----
-
-## GATE 2.5: PROPERTY_MANDATE_CHECK
-
-**If `pass3/00_property_coverage.json` exists**, verify that every property with `status: "IMPLEMENT"` has a corresponding Swift init parameter or configuration property in the view being implemented.
-
-For each IMPLEMENT property:
-- VARIANT → must have an enum type and init parameter
-- BOOLEAN → must have a Bool parameter (or merged into Optional per Boolean Visibility Merge Rule)
-- TEXT → must have a String parameter
-- INSTANCE_SWAP → must have an Image?, AnyView?, or typed view parameter, OR be documented as fixed in FIGMA.md
-
-If any IMPLEMENT property is missing from the view's init:
-
-```
-STATUS: HALT
-PHASE: phase-4b
-GATE: PROPERTY_MANDATE_CHECK
-REASON: IMPLEMENT property not exposed in view init.
-MISSING_PROPERTIES: [{list names and expected Swift types}]
-COMPLETED_GATES: [PRE_CHECK, FILE_HEADER, CONSTANTS, VIEW_STRUCT]
-ARTIFACTS_CREATED:
-  - {componentLocation}/{ComponentName}.swift (partial)
-USER_ACTION_REQUIRED: Options:
-  1) Add the missing properties to the view
-  2) Update 00_property_coverage.json to mark as SKIP with reason
-```
-
-If `00_property_coverage.json` does not exist, skip this gate (backward compatibility).
-
----
-
-## GATE 3: VIEW_STRUCT
-
-> **Issue link:** If `issueNumber` is provided, include the `/// Issue:` doc comment line. If empty or not available, omit the line entirely.
-
-### SIMPLE component (≤3 properties)
-
-```swift
-/// {Brief description of component}
-///
-/// Figma: [{ComponentName}](https://www.figma.com/design/{fileKey}/?node-id={nodeId})
-/// Issue: [#{issueNumber}](https://github.com/{github.componentsRepo}/issues/{issueNumber})
-public struct {ComponentName}: View {
-    // MARK: - Properties
-
-    {All properties from Final API Design  -  public let}
-
-    // MARK: - Initialization
-
-    public init(
-        {param1}: {Type},
-        {param2}: {Type} = {default}
-    ) {
-        self.{param1} = {param1}
-        self.{param2} = {param2}
-    }
-
-    // MARK: - Body
-
-    public var body: some View {
-        {implementation}
-    }
-}
-```
-
-**CRITICAL  -  Type Placement:**
-- ALL component-specific enums/types MUST be nested inside the View struct (SIMPLE) or Configuration struct (COMPLEX)
-- **For COMPLEX components: ALL data model types MUST be defined inside `{ComponentName}Configuration`, NOT inside the View struct.** The View then exposes them via `public typealias` for backwards-compatible API: `public typealias MyType = {ComponentName}Configuration.MyType`
-- NEVER define them as top-level types outside the struct
-- NEVER define data model types inside a COMPLEX View struct  -  they belong in Configuration
-- Name them WITHOUT the component prefix: `Size` not `{ComponentName}Size`, `State` not `{ComponentName}State`
-- Extensions on nested types use `extension {ComponentName}.TypeName { }` after the struct closing brace
-
-For SIMPLE components, define enums inside the View struct:
-
-```swift
-public struct {ComponentName}: View {
-    // MARK: - Types
-
-    public enum State: String, CaseIterable, Sendable {
-        case active
-        case inactive
-    }
-
-    // MARK: - Properties
-
-    private let state: State
-    // ...
-}
-
-// Extensions on nested types go after the struct
-extension {ComponentName}.State {
-    var backgroundColor: Color {
-        switch self {
-        case .active: return .Success.n100
-        case .inactive: return .Background.backgroundGrey
-        }
-    }
-}
-```
-
-### COMPLEX component (>3 properties)
-
-```swift
-/// {Brief description of component}
-///
-/// Figma: [{ComponentName}](https://www.figma.com/design/{fileKey}/?node-id={nodeId})
-/// Issue: [#{issueNumber}](https://github.com/{github.componentsRepo}/issues/{issueNumber})
-@GenerateViewConfiguration
-public struct {ComponentName}: View {
-    // MARK: - Properties
-
-    private let configuration: {ComponentName}Configuration
-    // Closure dependencies (from always-present actions)
-    private let primaryAction: () -> Void
-    // Optional closure dependencies (from PAIRED_ACTION_SUBCOMPONENT)
-    private var secondaryAction: (() -> Void)?
-
-    // MARK: - Initialization
-
-    public init({requiredDynamicProps}, {requiredClosures}) {
-        self.configuration = .init({requiredDynamicProps})
-        self.{closure} = {closure}
-    }
-
-    // MARK: - Body
-
-    public var body: some View {
-        {implementation}
-    }
-}
-```
-
-**CRITICAL for COMPLEX:**
-- `@GenerateViewConfiguration` macro generates ONLY:
-  - `configured(_:)` method  -  post-init configuration transform
-- **AI writes the custom init**  -  the macro does NOT generate inits
-- **Phase 4E writes +Modifiers**  -  View-level forwarding modifiers (`.state()`, `.title()`, etc.) are written by AI in +Modifiers.swift because Swift macros cannot introspect the Configuration struct
-- Init includes **required dynamic props** as direct parameters + **required closures**
-- Optional props with defaults → set via chain modifiers (generated by macro)
-- Configuration is `private let`  -  the macro-generated `configured()` method reconstructs via init, not mutation
-
-**Init generation rules:**
-1. **Required props** = Configuration props that have no sensible default (the component is meaningless without them). These become init parameters. AI infers this from component semantics, not from whether a default exists in config.
-2. **Required closures** = Always-present actions (e.g., primary button action). These become init parameters.
-3. **Optional config props** = Props with defaults or optional props. Set via chain modifiers, NOT init params.
-4. **Paired action closures** = From `PAIRED_ACTION_SUBCOMPONENT`. NOT in init  -  set via paired modifiers.
-
-### With dependencies (Bindings, ObservedObjects)
-
-```swift
-@GenerateViewConfiguration
-public struct {ComponentName}: View {
-    private let configuration: {ComponentName}Configuration
-    @Binding private var isExpanded: Bool
-
-    public init(isExpanded: Binding<Bool>, {requiredProps}) {
-        self._isExpanded = isExpanded
-        self.configuration = .init({requiredProps})
-    }
-
-    public var body: some View { ... }
-}
-```
-
-### Paired modifiers (from PAIRED_ACTION_SUBCOMPONENT)
-
-For each `PAIRED_ACTION_SUBCOMPONENT` from 3H, generate a View-level modifier that binds data + closure atomically:
-
-```swift
-// 1 dynamic prop + action:
-public func secondaryButton(_ title: String, action: @escaping () -> Void) -> {ComponentName} {
-    var copy = self.configured { $0.secondaryButtonTitle(title) }
-    copy.secondaryAction = action
-    return copy
-}
-
-// 2+ dynamic props + action:
-public func actionLink(_ config: {ComponentName}Configuration.ActionLinkConfiguration,
-                        action: @escaping () -> Void) -> {ComponentName} {
-    var copy = self.configured { $0.actionLinkConfiguration(config) }
-    copy.actionLinkAction = action
-    return copy
-}
-
-// 0 dynamic props + action (fully static sub-component):
-public func dismissButton(action: @escaping () -> Void) -> {ComponentName} {
-    var copy = self
-    copy.dismissAction = action
-    return copy
-}
-```
-
-**NOTE:** Paired modifiers use `configured()` for the config part (reconstructs via init, keeps `let configuration`), then mutate only the closure property on the copy. Optional closure properties (`secondaryAction`, etc.) must be `var` on the View for this pattern.
-
-Place paired modifiers in the View file after the body, before Preview.
-
----
-
-## GATE 4: BODY_IMPLEMENTATION
-
-INPUT: `pass1/design_context_response.json` → `code` field for layout structure
-INPUT: `pass3/02_token_mapping.md` → token usage patterns
-INPUT: `pass3/04b_component_architecture.md` → API shape
-INPUT: `pass1/screenshot.png` → visual reference
-
-### 4.1 Layout translation
-
-Translate Figma layout to SwiftUI:
-
-| Figma | SwiftUI |
-|-------|---------|
-| Horizontal auto-layout | `HStack(spacing:)` |
-| Vertical auto-layout | `VStack(alignment:, spacing:)` |
-| Padding (uniform) | `.padding(.Spacing.spacingN)` |
-| Padding (per-side) | `.padding(.horizontal, .Spacing.spacingN)` |
-| Border radius | `.clipShape(RoundedRectangle(cornerRadius: .Radius.radiusN))` |
-| Background fill | `.background(Color.Namespace.token)` |
-| Fixed width | `.frame(width: Constants.width)` |
-| Hug contents | No frame modifier (natural sizing) |
-| Fill container | `.frame(maxWidth: .infinity)` |
-
-### 4.2 Alignment rules
-
-Figma flex → SwiftUI alignment:
-
-| Figma | SwiftUI |
-|-------|---------|
-| `flex-start` / `left` | `.leading` |
-| `flex-end` / `right` | `.trailing` |
-| `center` | `.center` |
-| `space-between` | `Spacer()` between children |
-
-### 4.3 Token application
-
-INPUT: `pass3/02_token_mapping.md`
-
-Apply Swift tokens from the mapping. Use the exact Swift usage patterns documented:
-
-```swift
-// Typography
-Text(title)
-    .typographyStyle(.smallBold)
-
-// Colors
-.foregroundStyle(Color.Text.textPrimary)
-.background(Color.Background.background)
-
-// Spacing
-.padding(.horizontal, .Spacing.spacing4)
-HStack(spacing: .Spacing.spacing8) { ... }
-
-// Radius
-.clipShape(RoundedRectangle(cornerRadius: .Radius.radius4))
-```
-
-### 4.4 Conditional rendering
-
-For optional properties and boolean toggles:
-
-```swift
-// Optional content
-if let subtitle = configuration.subtitle {
-    Text(subtitle)
-        .typographyStyle(.captionRegular)
-}
-
-// Boolean toggle
-if configuration.showIcon, let icon = configuration.leftIcon {
-    icon
-        .resizable()
-        .frame(width: Constants.iconSize, height: Constants.iconSize)
-}
-```
-
-### 4.5 Computed properties for state-driven styling
-
-When an enum drives visual changes (colors, icons), use computed properties:
-
-```swift
-// MARK: - Computed Properties
-
-private var backgroundColor: Color {
-    switch configuration.state {
-    case .success: return .Success.n100
-    case .warning: return .Warning.n100
-    case .error: return .Error.n100
-    case .standard: return .Background.backgroundGrey
-    case .secondary: return .Badge.badgeBackgroundInfo
-    }
-}
-
-private var textColor: Color {
-    switch configuration.state {
-    case .success: return .Text.textSuccess
-    case .warning: return .Text.textWarning
-    // ...
-    }
-}
-```
-
-### 4.6 Nested component integration
-
-INPUT: `pass3/03_nested_components.md`
-INPUT: `pass3/04c_variant_config_analysis.json` → `staticProps` for boolean-gated sub-components
-
-Use EXACT init signatures from the nested components analysis:
-
-```swift
-// From analysis: TextLink(_ text: String, action: () -> Void)
-TextLink(configuration.linkText, action: configuration.action)
-
-// From analysis: LabelBadge(text: String, state: LabelBadge.State)
-LabelBadge(text: statusText, state: .success)
-```
-
-**For boolean-gated sub-components (KNOWN_SUBCOMPONENT / PAIRED_ACTION_SUBCOMPONENT):**
-
-Static props from 3H `staticProps` are hardcoded in the View body. Only dynamic props come from Configuration:
-
-```swift
-// Secondary button: title is dynamic, style/size/colorTheme are static
-if let title = configuration.secondaryButtonTitle {
-    TurkishButton { secondaryAction?() }
-        .title(title)
-        .style(.ghost)       // static  -  hardcoded from 3H staticProps
-        .size(.default)      // static
-        .colorTheme(.brand)  // static
-}
-```
-
-### 4.7 Layer text  -  static vs dynamic
-
-Texts from Figma layers are classified in `pass3/04_patterns.md` (Layer Text Classification table) as STATIC or DYNAMIC.
-
-- **DYNAMIC** texts → MUST use the corresponding Configuration property: `Text(configuration.currencyCode)`, NOT `Text("TRY")`
-- **STATIC** texts → use localization key if available (`Text(.Price.totalAmount)`), or hardcode only if truly fixed structural text (separators like "/", operators like "+")
-
-**Never hardcode text that represents variable data.** If a text looks like sample data (a price, an amount, a percentage, a currency code, a date), it MUST come from a configuration property. If no matching property exists in the architecture, HALT  -  the architecture is incomplete.
-
-### 4.7.1 Price pattern rendering
-
-When the architecture identifies a **price pattern** (section1.5.1 in Phase 3D), use `CurrencyTextRenderer` for rendering:
-
-```swift
-// Create a style with the component's fonts
-let style = CurrencyTextStyle(
-    currencyFont: .smallRegular,
-    amountFont: .smallBold,
-    color: .Text.textWhite
-)
-
-// Render as AttributedString  -  handles placement, formatting, grouping
-Text(CurrencyTextRenderer.attributedString(
-    value: amount,           // Double
-    currencyCode: currencyCode,  // String
-    style: style
-))
-```
-
-Do NOT manually place currency code left/right  -  `CurrencyTextRenderer` resolves placement from `CurrencyFormatProvider`. Do NOT format the amount as String  -  pass `Double`, the renderer formats it.
-
-### 4.7.1a Attributed text rendering (multi-font)
-
-When a text has mixed typography (section1.5.1a in Phase 3D), use `AttributedString.format()` from `UIExtensions`. The highlight value can be a dynamic prop or a localization key  -  use `.localized` (no args) to keep `%@` placeholders intact:
-
-```swift
-// Highlight from localization key (static but styled differently)
-var highlight = AttributedString(LocalizationStringKey.Component.highlightKey.localized)
-highlight.font = .xSmallBold
-highlight.foregroundColor = .Text.textWhite
-
-// Template with %@ placeholder
-var template = AttributedString(LocalizationStringKey.Component.templateKey.localized)
-template.font = .xSmallRegular
-template.foregroundColor = .Text.textWhite
-
-Text(template.format(highlight))
-```
-
-### 4.7.2 Image asset rendering
-
-When the architecture identifies image assets (section1.5.2 in Phase 3D):
-
-**DYNAMIC images (remote):**
-```swift
-import CoreUI
-
-// Use the remote image component from CoreUI
-RemoteImage(url: configuration.imageURL)
-    .frame(width: Constants.imageWidth, height: Constants.imageHeight)
-    .clipShape(RoundedRectangle(cornerRadius: .Radius.radius8))
-```
-
-Do NOT embed Figma placeholder photos as bundled assets  -  they are sample data. The component takes a `URL` and loads the real image at runtime.
-
-**STATIC images (bundled):**
-```swift
-// Use generated Image accessor from UIAssets
-Image.CategoryName.assetName
-    .resizable()
-    .frame(width: Constants.iconSize, height: Constants.iconSize)
-```
-
-Static assets are added to `Shared/UIAssets/Images/` in mobile-common and regenerated via `generate-ui-assets` plugin.
-
-### 4.7.3 Collapsible sections
-
-When a Figma component has expanded/collapsed variants (accordion, expandable card, FAQ item, disclosure group):
-
-- Use `@State private var isExpanded: Bool` (or `@Binding` if parent controls it)
-- **Arrow/chevron:** Rotate with `.rotationEffect(.degrees(isExpanded ? 180 : 0))` and animate with `.animation(.easeInOut(duration: 0.25), value: isExpanded)`
-- **Content:** Wrap in conditional with height transition:
-```swift
-if isExpanded {
-    contentView
-        .transition(.opacity.combined(with: .move(edge: .top)))
-}
-```
-- **Container:** Apply `.animation(.easeInOut(duration: 0.25), value: isExpanded)` on the outer VStack so SwiftUI animates the height change
-- **Tap:** Toggle via `.onTapGesture { withAnimation { isExpanded.toggle() } }` on the header row
-
-Do NOT use `DisclosureGroup`  -  it has limited styling control. Build the expand/collapse manually for pixel-perfect Figma match.
-
-### 4.7.4 Interaction pattern rendering (navigation / overlays / bottom sheets)
-
-When the architecture identifies an **interaction pattern** (section1.5.4 in Phase 3D), read the matching skill and follow its "Integration with Phase 4B". The component **emits intent / takes a caller-owned binding  -  it never routes, presents an app-level overlay, or owns the sheet surface.** Native SwiftUI is the default; use a project system only when `figma-config` declares `ui.<system>`.
-
-- **Navigation** (`/figma-navigation`): emit a typed `output`/`onSelect` for push/detail/back; system back or `@Environment(\.dismiss)`; tab via a caller-owned `Binding`. Never hardcode `NavigationLink(destination: ConcreteScreen())` in a reusable component.
-- **Overlays** (`/figma-overlays`): the component emits `.saved` / `.removeRequested(id)`; the caller shows the toast/alert/modal. Native `.alert`/`.confirmationDialog` for 1-3 button dialogs; `.sheet(item:)` for a data modal card; rich content via a local `.sheet/.modal { }`. Loading is ref-counted with min-show. No `AnyView` through a center.
-- **Bottom sheets** (`/figma-bottom-sheets`): author the component as sheet **content**; the caller owns `isPresented`/`item` + `.presentationDetents([...])`. A pinned CTA is `.safeAreaInset(edge:.bottom)`, not a presented sheet. Multi-step = `NavigationStack` inside the sheet (native) or the project engine's nav sheet (custom).
-
-If `figma-config` sets `ui.navigationSystem`/`ui.overlaySystem`/`ui.sheetSystem` to `custom`, use that project's types (router/route enum/scene container, overlay center, branded/headless sheet modifiers) resolved from config  -  do not hardcode their names.
-
-### 4.8 @ViewBuilder for complex conditional views
-
-```swift
-@ViewBuilder
-private var iconView: some View {
-    if let icon = configuration.leftIcon {
-        icon
-            .resizable()
-            .frame(width: Constants.iconSize, height: Constants.iconSize)
-            .foregroundStyle(textColor)
-    }
-}
-```
-
----
-
-## GATE 5: UTILITY_INTEGRATION
-
-INPUT: `pass3/08_utility_integration.md`
-
-Apply utility modifiers from the Element-to-Utility Mapping table.
-
-### 5.1 Testing identifiers
-
-```swift
-import UIComponentUtilities
-
-// Static identifier
-someView
-    .accessibilityIdentifier(.{ComponentName}.badge)
-
-// Dynamic identifier (list items)
-ForEach(items.indices, id: \.self) { index in
-    ItemRow(item: items[index])
-        .accessibilityIdentifier(.{ComponentName}.Item.row.with(index))
-}
-```
-
-### 5.2 Localization keys
-
-```swift
-// Static text from localization key
-Text(.{ComponentName}.title)
-
-// Format string
-Text(String(format: LocalizationStringKey.{ComponentName}.subtitle.localized, count))
-```
-
-If utility_integration says "No localization keys" → skip. Dynamic text uses caller-provided strings.
-
-### 5.3 Accessibility
-
-INPUT: `pass3/08_utility_integration.md` → Accessibility section
-
-Apply ONLY what the analysis specifies. If the analysis says 0 accessibility keys and no modifiers, add NOTHING.
-
-**CRITICAL  -  No unnecessary accessibility annotations:**
-- Accessibility is for vision-impaired users to **navigate and use** the app
-- Ask: "Does a vision-impaired person need this information?"  -  if NO, do not add it
-- Do NOT generate per-enum-variant accessibility keys for visual state the user already knows (loyalty tier, color-coded status)
-- Do NOT add `localizedAccessibilityName` computed properties on enums unless Phase 2C explicitly defined those keys
-- If any accessibility text IS needed, it MUST use `LocalizedAccessibilityStringKey`  -  never hardcode English strings
-
-**Before adding ANY modifier, ask: "What breaks if I remove this?"** If the answer is "nothing", do not add it.
-
-```swift
-// Decorative elements → hide from VoiceOver
-icon.accessibilityHidden(true)
-
-// Group children into single VoiceOver stop
-// SwiftUI reads visible Text automatically  -  do NOT add .accessibilityLabel on top
-.accessibilityElement(children: .combine)
-
-// Do NOT add .accessibilityLabel when SwiftUI reads visible text correctly
-// Do NOT add .accessibilityAddTraits(.isStaticText) to Text  -  SwiftUI already knows
-// Do NOT add .accessibilityRemoveTraits(.isButton) when there is no Button
-// Do NOT announce visual state (color) for non-interactive display components
-```
-
-### 5.4 Analytics
-
-```swift
-// Button tracking (from snippet in utility_integration)
-.analyticsButton(
-    id: UITestingIdentifierKey.{ComponentName}.submitButton.description,
-    label: "Submit",
-    type: .primary
-)
-```
-
-If utility_integration says "No analytics events" → skip.
-
-### 5.5 NO utilities
-
-If `pass3/08_utility_integration.md` shows all counts as 0, skip all utility modifiers.
-Do NOT invent utility modifiers that weren't specified in the analysis.
-
----
-
-## VALIDATION CHECKLIST
-
-Before marking complete, verify:
-
-```
-[ ] File exists at {componentLocation}/{ComponentName}.swift
-[ ] Correct file header (author, date, module name)
-[ ] Correct imports (UIMacros if COMPLEX, UIAssetTokens, UIComponentUtilities if needed)
-[ ] @GenerateViewConfiguration applied (if COMPLEX)
-[ ] Custom init present with required dynamic props + required closures (if COMPLEX)
-[ ] Paired modifiers present for each PAIRED_ACTION_SUBCOMPONENT from 3H
-[ ] Every config property (including data props from paired modifiers) will get a forwarding modifier in Phase 4E
-[ ] Static sub-component props hardcoded in body (from 3H staticProps)
-[ ] Manual init present (if SIMPLE  -  no macro)
-[ ] SwiftDoc with Figma link above struct declaration
-[ ] Constants enum: private, nested inside View struct, no raw numbers in body (or omitted if no component-specific constants)
-[ ] ALL tokens from pass3/02_token_mapping.md applied (no hardcoded colors/spacing/fonts)
-[ ] No hardcoded sample/placeholder text  -  all DYNAMIC layer texts use configuration properties (per pass3/04_patterns.md classification)
-[ ] Layout matches Figma: correct stacks, spacing, alignment, padding
-[ ] State-driven styling via computed properties (not inline switch in body)
-[ ] Nested components use exact init signatures from pass3/03_nested_components.md
-[ ] Testing identifiers applied per pass3/08_utility_integration.md (or skipped if 0)
-[ ] Accessibility modifiers applied per pass3/08_utility_integration.md (or skipped if 0)
-[ ] Analytics modifiers applied per pass3/08_utility_integration.md (or skipped if 0)
-[ ] No invented utility modifiers  -  only what analysis specifies
-[ ] NO Preview code in this file  -  Phase 4D handles Preview separately
-[ ] Every IMPLEMENT property from 00_property_coverage.json has a Swift init parameter (if coverage file exists)
-[ ] ALL types nested inside View or Configuration struct  -  no top-level enums
-```
-
----
-
-## SUCCESS OUTPUT
-
-```
-STATUS: COMPLETE
-PHASE: phase-4b
-GATES_PASSED: [PRE_CHECK, FILE_HEADER, CONSTANTS, VIEW_STRUCT, BODY_IMPLEMENTATION, UTILITY_INTEGRATION]
-ARTIFACTS_CREATED:
-  - {componentLocation}/{ComponentName}.swift
-SUMMARY: View implementation complete. {COMPLEXITY} component. {TOKEN_COUNT} tokens applied. {UTILITY_COUNT} utility modifiers. Preview handled by Phase 4D.
-```