Skip to content

馃幆 IMPLEMENTATION PLAN: UI Composition System (08_04)

馃搷 UBICACI脫N

Carpeta: 4 - INTEGRATION/08_PLUGINS/08_04_ui_composition_system/

馃 PROMPT INICIAL

"Estoy en 08_04_ui_composition_system. Implementar茅 el sistema de composici贸n de UI. Leo IMPLEMENTATION_PLAN.md y me organizo."

馃搳 FASES (5 prompts, 18-24h total)

FASE 1: Layout Framework (4-5h)

Objetivo: Sistema de layouts responsive

Tareas: 1. Crear 08_04_00_layout_framework/ 2. FlexLayout.hpp/.cpp - Flexbox layout 3. GridLayout.hpp/.cpp - Grid layout 4. ConstraintLayout.hpp/.cpp - Constraint-based 5. ResponsiveEngine.hpp/.cpp - Responsive sizing 6. Tests + CMakeLists

Checklist: - [ ] FlexLayout funciona (row/column) - [ ] GridLayout con filas/columnas - [ ] ConstraintLayout con relaciones - [ ] ResponsiveEngine adapta tama帽os - [ ] Tests pasan

FASE 2: Widget Library (4-5h)

Objetivo: Biblioteca de widgets comunes

Tareas: 1. Crear 08_04_01_widget_library/ 2. Knob.hpp/.cpp - Rotary knob 3. Slider.hpp/.cpp - Linear slider 4. Button.hpp/.cpp - Push button 5. Meter.hpp/.cpp - Level meter 6. Visualizer.hpp/.cpp - Waveform/spectrum 7. Label.hpp/.cpp - Text label 8. Tests de rendering

Checklist: - [ ] Knob con drag rotacional - [ ] Slider horizontal/vertical - [ ] Button con estados - [ ] Meter con decay - [ ] Visualizer eficiente - [ ] Todos renderizan correctamente

FASE 3: Design Tokens (3-4h)

Objetivo: Sistema de tokens de dise帽o

Tareas: 1. Crear 08_04_02_design_tokens/ 2. ColorPalette.hpp/.cpp - Paletas de colores 3. Typography.hpp/.cpp - Escalas tipogr谩ficas 4. Spacing.hpp/.cpp - Sistema de espaciado 5. ThemeManager.hpp/.cpp - Gesti贸n de temas 6. design_tokens.json - Definici贸n JSON 7. Tests de temas

Checklist: - [ ] ColorPalette con m煤ltiples temas - [ ] Typography con escalas - [ ] Spacing consistente - [ ] ThemeManager cambia temas - [ ] JSON se carga correctamente

FASE 4: Binding System (4-5h)

Objetivo: Data binding bidireccional

Tareas: 1. Crear 08_04_03_binding_system/ 2. Binding.hpp/.cpp - Binding base 3. ParameterBinding.hpp/.cpp - Parameter鈫擶idget 4. TwoWayBinding.hpp/.cpp - Bidirectional sync 5. ChangeNotifier.hpp/.cpp - Propagaci贸n de cambios 6. Tests de sincronizaci贸n

Checklist: - [ ] Binding conecta datos鈫擴I - [ ] ParameterBinding actualiza ambos - [ ] TwoWayBinding sin loops - [ ] ChangeNotifier notifica correctamente - [ ] Tests de sync pasan

FASE 5: Gesture System + Tests (3-5h)

Objetivo: Sistema de gestos e integraci贸n

Tareas: 1. Crear 08_04_04_gesture_system/ 2. MouseHandler.hpp/.cpp - Mouse events 3. TouchHandler.hpp/.cpp - Touch/multi-touch 4. KeyboardHandler.hpp/.cpp - Keyboard 5. AccessibilityHelper.hpp/.cpp - A11y 6. Tests completos 7. Documentaci贸n 8. Ejemplos

Checklist: - [ ] MouseHandler todos los eventos - [ ] TouchHandler multi-touch - [ ] KeyboardHandler con shortcuts - [ ] AccessibilityHelper WAI-ARIA - [ ] Tests pasan - [ ] Docs completas - [ ] Ejemplos funcionan

馃摑 C脫DIGO CLAVE

FlexLayout.hpp

class FlexLayout {
public:
    enum class Direction { Row, Column };
    enum class Justify { Start, End, Center, SpaceBetween };
    enum class Align { Start, End, Center, Stretch };

    void setDirection(Direction dir);
    void setJustify(Justify j);
    void setAlign(Align a);

    void addChild(Widget* widget, float flexGrow = 0.0f);
    void layout(const Rect& bounds);
};

ParameterBinding.hpp

class ParameterBinding : public Binding {
public:
    ParameterBinding(Parameter* param, Widget* widget);

    void parameterChanged(float value) override;
    void widgetChanged(float value) override;

    void bind();
    void unbind();
};

馃幆 CRITERIOS

  • Layouts responsive funcionan
  • Widgets renderizan correctamente
  • Temas se aplican globalmente
  • Bindings sincronizan sin lag
  • Gestos responsive (< 16ms)
  • Cobertura tests > 75%

馃摝 DEPENDENCIAS

Depende: 08_00 (IUIController), 08_03 (Parameters) Bloquea: 08_10, 08_11 (UIs de plugins)

馃捑 COMMITS

git commit -m "feat(08_04): add layout framework"
git commit -m "feat(08_04): add widget library"
git commit -m "feat(08_04): add design tokens"
git commit -m "feat(08_04): add binding system"
git commit -m "feat(08_04): add gesture system"

Estado: 馃摑 LISTO | Estimaci贸n: 18-24h