graph TB
    subgraph "Pillar 1: STATE"
        VALUES[values<br/>User Input]
        COMPUTED[computedValues<br/>Derived Data]
    end
    
    subgraph "Pillar 2: STRUCTURE"
        LAYOUT[layout<br/>LayoutNode Tree]
        REGISTRY[COMPONENT_REGISTRY<br/>String → Component]
    end
    
    subgraph "Pillar 3: BEHAVIOR"
        RULES[rules<br/>Rule Definitions]
        FUNCTIONS[FUNCTION_REGISTRY<br/>String → Function]
        ENGINE[Rule Engine<br/>Creates Reactive Graph]
    end
    
    VALUES --> ENGINE
    COMPUTED --> ENGINE
    RULES --> ENGINE
    FUNCTIONS --> ENGINE
    ENGINE --> COMPUTED
    LAYOUT --> REGISTRY
    REGISTRY --> UI[Rendered UI]
    VALUES --> UI
    COMPUTED --> UI

sequenceDiagram
    participant App
    participant Store
    participant RuleEngine
    participant Layout
    participant UI

    App->>Store: Load INITIAL_STATE
    App->>RuleEngine: initializeRuleEngine()
    RuleEngine->>Store: Read values & computedValues
    RuleEngine->>RuleEngine: Create reactive accessors
    loop For each rule
        RuleEngine->>RuleEngine: Create createMemo/createEffect
    end
    RuleEngine->>Store: Write initial computed values
    App->>Layout: Render layout tree
    Layout->>UI: Instantiate components
    UI->>Store: Read values (track dependencies)

sequenceDiagram
    participant User
    participant Component as Field Component
    participant Store
    participant Memo as Rule Engine Memo
    participant Effect as Rule Engine Effect
    participant UI as Dependent UI

    User->>Component: Changes value
    Component->>Component: onUpdate(newValue)
    Component->>Store: updateValue(key, newValue)
    Store->>Store: setFormState("values", key, newValue)
    Store->>Memo: Triggers re-evaluation
    Note over Memo: Dependencies changed
    Memo->>Memo: Recompute output
    Memo->>Effect: New value available
    Effect->>Store: setComputedValue(outputKey, result)
    Store->>UI: Triggers re-render
    UI->>UI: Display updated value

graph LR
    A[User changes<br/>system.beginn] --> B[updateValue]
    B --> C[Store Update]
    C --> D[Memo 1 Recomputes]
    D --> E[calculateDifferenceInMinutes]
    E --> F[Effect 1 Writes]
    F --> G[derived.durationInMinutes<br/>updated]
    G --> H[Memo 2 Recomputes]
    H --> I[convertMinutesToHours]
    I --> J[Effect 2 Writes]
    J --> K[derived.stunden<br/>updated]
    K --> L[NumberField<br/>Re-renders]

graph TD
    BEGIN[system.beginn] -->|calculateDifferenceInMinutes| DURATION[derived.durationInMinutes]
    END[system.ende] -->|calculateDifferenceInMinutes| DURATION
    DURATION -->|convertMinutesToHours| HOURS[derived.stunden]
    HOURS -->|calculateSessionCount| SESSIONS[derived.anzahl_sitzungen]
    SESSIONLEN[system.sitzungslaenge] -->|calculateSessionCount| SESSIONS
    KLIENT[system.klient] -->|updateFormTitle| TITLE[derived.form_title]

graph TB
    FORM[ExtensibleDnDForm] --> RENDERER[LayoutNodeRenderer]
    RENDERER --> FOR["<For each={layout}>"]
    FOR --> SHOW1["<Show when={isVisible()}>"]
    SHOW1 --> CHECK{Is Section?}
    CHECK -->|Yes| SECTION[Render Section]
    CHECK -->|No| FIELD[SortableFieldRow]
    SECTION --> RECURSIVE[Recursive LayoutNodeRenderer]
    FIELD --> COMPONENT[Get component from registry]
    COMPONENT --> INSTANCE[Render field component]
    INSTANCE --> VALUE[Read value from store]

graph TB
    subgraph "User Action"
        USER[User Input]
    end
    
    subgraph "State Layer"
        STORE[SolidJS Store<br/>values & computedValues]
    end
    
    subgraph "Behavior Layer"
        RULES[Rule Definitions]
        ENGINE[Rule Engine]
        MEMOS[createMemo]
        EFFECTS[createEffect]
    end
    
    subgraph "Structure Layer"
        LAYOUT[Layout Tree]
        REGISTRY[Component Registry]
        RENDERER[Recursive Renderer]
    end
    
    subgraph "Presentation"
        UI[UI Components]
    end
    
    USER --> UI
    UI --> STORE
    STORE --> MEMOS
    RULES --> ENGINE
    ENGINE --> MEMOS
    ENGINE --> EFFECTS
    MEMOS --> EFFECTS
    EFFECTS --> STORE
    STORE --> UI
    LAYOUT --> REGISTRY
    REGISTRY --> RENDERER
    RENDERER --> UI