docs(issues): marcar 0025 y 0026 como completados + WIP master

Wave 1 de parallel-fix-issues integrada a master:
- 0025: text_editor_cpp_core + file_watcher_cpp_core
- 0026: gl_texture_load_cpp_gfx (vendor: stb_image v2.30)

Ademas se commitea WIP previo de master que estaba sin commitear (cambios
en shaders_lab, dag_*, framework, tokens, kpi_card, gl_loader.md, etc.)
para dejar HEAD buildable.

Notas:
- Algunos deps del gallery (button.cpp, toolbar.cpp, modal_dialog.cpp...)
  siguen UNTRACKED — gating con FN_BUILD_GALLERY=ON (default OFF) para
  que master build (sin flag) no los necesite.
- Build OK con y sin flag. fn index registra 904 functions.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-25 21:11:26 +02:00
parent d3d5af51f2
commit b093c898a8
37 changed files with 1819 additions and 342 deletions
+18
View File
@@ -28,3 +28,21 @@ output: "Renderiza el overlay de FPS en el frame ImGui actual"
Muestra FPS y frametime (ms) en una ventana semi-transparente en la esquina superior derecha.
Si se compila con `TRACY_ENABLE`, incluye un `ZoneScoped` para profiling con Tracy.
## Notas — Auto-render via app_settings (sesion 2026-04-25)
A partir de la integracion del sistema `app_settings`, las apps NO deben llamar `fps_overlay()` directamente. `fn::run_app` consulta `fn_ui::settings().show_fps` cada frame, y si esta activo invoca `fps_overlay()` automaticamente despues del `render_fn` de la app. El usuario controla el toggle desde `Settings... → Display → Show FPS overlay`, persistido en `app_settings.ini` junto al exe.
Anti-patron eliminado:
```cpp
// ❌ Hardcoded — ignora el toggle de Settings, siempre se ve
static void render() {
fps_overlay();
// ...
}
// ✅ No hace falta llamarla. fn::run_app la dispara segun settings.
```
Si una app no usa `fn::run_app` (raro), debe llamar manualmente `fps_overlay()` segun su criterio.
+127 -35
View File
@@ -1,50 +1,142 @@
#include "tokens.h"
#if __has_include("implot.h")
#include "implot.h"
#define FN_HAS_IMPLOT 1
#endif
namespace fn_tokens {
void apply_dark_theme() {
ImGuiStyle& s = ImGui::GetStyle();
// Colors
s.Colors[ImGuiCol_WindowBg] = colors::bg;
s.Colors[ImGuiCol_ChildBg] = colors::surface;
s.Colors[ImGuiCol_PopupBg] = colors::surface;
s.Colors[ImGuiCol_FrameBg] = colors::surface;
s.Colors[ImGuiCol_FrameBgHovered] = colors::surface_hover;
s.Colors[ImGuiCol_FrameBgActive] = colors::surface_hover;
s.Colors[ImGuiCol_Border] = colors::border;
s.Colors[ImGuiCol_BorderShadow] = ImVec4(0, 0, 0, 0);
s.Colors[ImGuiCol_Text] = colors::text;
s.Colors[ImGuiCol_TextDisabled] = colors::text_dim;
s.Colors[ImGuiCol_Button] = colors::primary;
s.Colors[ImGuiCol_ButtonHovered] = colors::primary_hover;
s.Colors[ImGuiCol_ButtonActive] = colors::primary;
s.Colors[ImGuiCol_Header] = colors::surface_hover;
s.Colors[ImGuiCol_HeaderHovered] = colors::primary;
s.Colors[ImGuiCol_HeaderActive] = colors::primary_hover;
s.Colors[ImGuiCol_Tab] = colors::surface;
s.Colors[ImGuiCol_TabHovered] = colors::primary_hover;
s.Colors[ImGuiCol_TabActive] = colors::primary;
s.Colors[ImGuiCol_Separator] = colors::border;
s.Colors[ImGuiCol_TableHeaderBg] = colors::surface_hover;
s.Colors[ImGuiCol_TableBorderLight]= colors::border;
s.Colors[ImGuiCol_TableBorderStrong]= colors::border;
// ---------- Colors ----------
auto& c = s.Colors;
c[ImGuiCol_WindowBg] = colors::bg;
c[ImGuiCol_ChildBg] = colors::surface;
c[ImGuiCol_PopupBg] = colors::surface;
c[ImGuiCol_MenuBarBg] = colors::surface;
c[ImGuiCol_FrameBg] = colors::surface;
c[ImGuiCol_FrameBgHovered] = colors::surface_hover;
c[ImGuiCol_FrameBgActive] = colors::surface_active;
// Radius
s.FrameRounding = radius::sm;
s.ChildRounding = radius::md;
s.WindowRounding = radius::md;
s.PopupRounding = radius::md;
s.TabRounding = radius::sm;
s.GrabRounding = radius::sm;
c[ImGuiCol_TitleBg] = colors::bg;
c[ImGuiCol_TitleBgActive] = colors::surface;
c[ImGuiCol_TitleBgCollapsed] = colors::bg;
c[ImGuiCol_Border] = colors::border;
c[ImGuiCol_BorderShadow] = ImVec4(0, 0, 0, 0);
c[ImGuiCol_Text] = colors::text;
c[ImGuiCol_TextDisabled] = colors::text_dim;
c[ImGuiCol_TextSelectedBg] = ImVec4(colors::primary.x, colors::primary.y, colors::primary.z, 0.35f);
c[ImGuiCol_Button] = colors::primary;
c[ImGuiCol_ButtonHovered] = colors::primary_hover;
c[ImGuiCol_ButtonActive] = colors::primary_active;
c[ImGuiCol_CheckMark] = colors::primary_light;
c[ImGuiCol_SliderGrab] = colors::primary;
c[ImGuiCol_SliderGrabActive] = colors::primary_hover;
c[ImGuiCol_Header] = colors::surface_hover;
c[ImGuiCol_HeaderHovered] = colors::primary;
c[ImGuiCol_HeaderActive] = colors::primary_hover;
c[ImGuiCol_Tab] = colors::surface;
c[ImGuiCol_TabHovered] = colors::primary_hover;
c[ImGuiCol_TabActive] = colors::primary;
c[ImGuiCol_TabUnfocused] = colors::bg;
c[ImGuiCol_TabUnfocusedActive] = colors::surface_hover;
c[ImGuiCol_Separator] = colors::border;
c[ImGuiCol_SeparatorHovered] = colors::primary_light;
c[ImGuiCol_SeparatorActive] = colors::primary;
c[ImGuiCol_ResizeGrip] = ImVec4(colors::primary.x, colors::primary.y, colors::primary.z, 0.25f);
c[ImGuiCol_ResizeGripHovered] = colors::primary_hover;
c[ImGuiCol_ResizeGripActive] = colors::primary_active;
c[ImGuiCol_ScrollbarBg] = colors::bg;
c[ImGuiCol_ScrollbarGrab] = colors::surface_hover;
c[ImGuiCol_ScrollbarGrabHovered] = colors::surface_active;
c[ImGuiCol_ScrollbarGrabActive] = colors::border_strong;
c[ImGuiCol_TableHeaderBg] = colors::surface_hover;
c[ImGuiCol_TableBorderLight] = colors::border;
c[ImGuiCol_TableBorderStrong] = colors::border;
c[ImGuiCol_TableRowBg] = ImVec4(0, 0, 0, 0);
c[ImGuiCol_TableRowBgAlt] = ImVec4(colors::surface.x, colors::surface.y, colors::surface.z, 0.40f);
c[ImGuiCol_DockingPreview] = ImVec4(colors::primary.x, colors::primary.y, colors::primary.z, 0.60f);
c[ImGuiCol_DockingEmptyBg] = colors::bg;
c[ImGuiCol_PlotLines] = colors::primary_light;
c[ImGuiCol_PlotLinesHovered] = colors::primary;
c[ImGuiCol_PlotHistogram] = colors::primary_light;
c[ImGuiCol_PlotHistogramHovered] = colors::primary;
c[ImGuiCol_DragDropTarget] = colors::primary_light;
c[ImGuiCol_NavHighlight] = colors::primary_light;
c[ImGuiCol_NavWindowingHighlight]= ImVec4(1, 1, 1, 0.70f);
c[ImGuiCol_NavWindowingDimBg] = ImVec4(0, 0, 0, 0.40f);
c[ImGuiCol_ModalWindowDimBg] = ImVec4(0, 0, 0, 0.55f);
// ---------- Radius ----------
s.WindowRounding = radius::md;
s.ChildRounding = radius::md;
s.PopupRounding = radius::md;
s.FrameRounding = radius::md;
s.GrabRounding = radius::sm;
s.ScrollbarRounding = radius::md;
s.TabRounding = radius::sm;
// Spacing
// ---------- Spacing & padding ----------
s.WindowPadding = ImVec2(spacing::md, spacing::md);
s.FramePadding = ImVec2(spacing::sm, spacing::xs + 2.0f);
s.CellPadding = ImVec2(spacing::sm, spacing::xs);
s.ItemSpacing = ImVec2(spacing::sm, spacing::sm);
s.ItemInnerSpacing = ImVec2(spacing::xs, spacing::xs);
s.FramePadding = ImVec2(spacing::sm, spacing::xs + 2.0f);
s.WindowPadding = ImVec2(spacing::md, spacing::md);
s.CellPadding = ImVec2(spacing::sm, spacing::xs);
s.IndentSpacing = spacing::lg;
s.ScrollbarSize = 14.0f;
s.GrabMinSize = 12.0f;
// ---------- Borders ----------
s.WindowBorderSize = 1.0f;
s.ChildBorderSize = 1.0f;
s.PopupBorderSize = 1.0f;
s.FrameBorderSize = 0.0f; // Mantine no pinta borde en frames (usa bg sutil)
s.TabBorderSize = 0.0f;
// ---------- Viewports (multi-OS-window) ----------
// Cuando ImGuiConfigFlags_ViewportsEnable esta activo las ventanas pueden
// salirse del monitor principal; en ese caso WindowRounding debe ser 0
// y alpha 1.0 para que los compositors no muestren esquinas raras.
// app_base gestiona este caso; aqui dejamos los valores para single-viewport.
// ---------- ImPlot ----------
#ifdef FN_HAS_IMPLOT
if (ImPlot::GetCurrentContext() != nullptr) {
ImPlotStyle& p = ImPlot::GetStyle();
p.Colors[ImPlotCol_FrameBg] = colors::surface;
p.Colors[ImPlotCol_PlotBg] = colors::bg;
p.Colors[ImPlotCol_PlotBorder] = colors::border;
p.Colors[ImPlotCol_LegendBg] = colors::surface;
p.Colors[ImPlotCol_LegendBorder] = colors::border;
p.Colors[ImPlotCol_LegendText] = colors::text;
p.Colors[ImPlotCol_TitleText] = colors::text;
p.Colors[ImPlotCol_InlayText] = colors::text_muted;
p.Colors[ImPlotCol_AxisText] = colors::text_muted;
p.Colors[ImPlotCol_AxisGrid] = colors::border;
p.Colors[ImPlotCol_AxisTick] = colors::border;
p.Colors[ImPlotCol_AxisBg] = ImVec4(0, 0, 0, 0);
p.Colors[ImPlotCol_Selection] = colors::primary_light;
p.Colors[ImPlotCol_Crosshairs] = colors::text_muted;
p.PlotPadding = ImVec2(spacing::sm, spacing::sm);
p.LabelPadding = ImVec2(spacing::xs, spacing::xs);
p.LegendPadding = ImVec2(spacing::sm, spacing::sm);
}
#endif
}
} // namespace fn_tokens
+44 -27
View File
@@ -1,37 +1,49 @@
#pragma once
#include "imgui.h"
// Design tokens — colores, spacing, radius, font-size.
// Inspirados en el DESIGN_SYSTEM de @fn_library (Mantine v9 dark + indigo primary).
// Reemplaza hardcode disperso de ImVec4(...) por constantes semánticas.
// Design tokens — identidad visual unica para todas las apps C++ del registry.
// Alineados 1:1 con @fn_library (Mantine v9 dark + indigo primary).
// Ver cpp/DESIGN_SYSTEM.md para la especificacion completa.
//
// Equivalencias frontend -> C++:
// createTheme({ primaryColor: 'indigo', primaryShade: {dark:4},
// defaultRadius: 'md', defaultColorScheme: 'dark' })
// se corresponde con los valores de este header.
namespace fn_tokens {
namespace colors {
// Primary (indigo-inspired, Mantine indigo.6)
constexpr ImVec4 primary {0.25f, 0.37f, 0.85f, 1.0f};
constexpr ImVec4 primary_hover {0.30f, 0.42f, 0.90f, 1.0f};
// Primary — Mantine indigo (primaryShade dark = 4)
// indigo.4 = #748FFC indigo.5 = #5C7CFA indigo.6 = #4C6EF5 indigo.7 = #4263EB
constexpr ImVec4 primary {0.298f, 0.431f, 0.961f, 1.0f}; // indigo.6 (base)
constexpr ImVec4 primary_hover {0.361f, 0.486f, 0.980f, 1.0f}; // indigo.5
constexpr ImVec4 primary_light {0.455f, 0.561f, 0.988f, 1.0f}; // indigo.4 (dark mode accent)
constexpr ImVec4 primary_active {0.259f, 0.388f, 0.922f, 1.0f}; // indigo.7
// Semantic
constexpr ImVec4 success {0.13f, 0.70f, 0.42f, 1.0f};
constexpr ImVec4 warning {0.95f, 0.60f, 0.20f, 1.0f};
constexpr ImVec4 error {0.87f, 0.26f, 0.30f, 1.0f};
constexpr ImVec4 info {0.22f, 0.55f, 0.95f, 1.0f};
// Semantic — colores Mantine oficiales
constexpr ImVec4 success {0.251f, 0.753f, 0.341f, 1.0f}; // green.6 #40C057
constexpr ImVec4 warning {0.980f, 0.690f, 0.020f, 1.0f}; // yellow.6 #FAB005
constexpr ImVec4 error {0.980f, 0.322f, 0.322f, 1.0f}; // red.6 #FA5252
constexpr ImVec4 info {0.133f, 0.545f, 0.902f, 1.0f}; // blue.6 #228BE6
// Background (dark by default — matches DESIGN_SYSTEM.md §2 & §8)
constexpr ImVec4 bg {0.08f, 0.08f, 0.10f, 1.0f}; // window bg
constexpr ImVec4 surface {0.12f, 0.12f, 0.15f, 1.0f}; // panels/cards
constexpr ImVec4 surface_hover {0.16f, 0.16f, 0.20f, 1.0f};
// Text
constexpr ImVec4 text {0.95f, 0.95f, 0.95f, 1.0f};
constexpr ImVec4 text_muted {0.60f, 0.60f, 0.65f, 1.0f};
constexpr ImVec4 text_dim {0.40f, 0.40f, 0.45f, 1.0f};
// Surfaces — escala dark Mantine (oscuro a claro: dark.9 -> dark.0)
constexpr ImVec4 bg {0.102f, 0.106f, 0.118f, 1.0f}; // dark.7 #1A1B1E body bg
constexpr ImVec4 surface {0.145f, 0.149f, 0.169f, 1.0f}; // dark.6 #25262B Paper/Card
constexpr ImVec4 surface_hover {0.173f, 0.180f, 0.200f, 1.0f}; // dark.5 #2C2E33
constexpr ImVec4 surface_active{0.216f, 0.227f, 0.251f, 1.0f}; // dark.4 #373A40
// Border
constexpr ImVec4 border {0.20f, 0.20f, 0.25f, 1.0f};
constexpr ImVec4 border {0.216f, 0.227f, 0.251f, 1.0f}; // dark.4 #373A40
constexpr ImVec4 border_strong {0.361f, 0.373f, 0.400f, 1.0f}; // dark.3 #5C5F66
// Text (escala dark inversa: dark.0 mas claro)
constexpr ImVec4 text {0.757f, 0.761f, 0.773f, 1.0f}; // dark.0 #C1C2C5 texto primario
constexpr ImVec4 text_muted {0.565f, 0.573f, 0.588f, 1.0f}; // dark.2 #909296 subtitulos
constexpr ImVec4 text_dim {0.361f, 0.373f, 0.400f, 1.0f}; // dark.3 #5C5F66 disabled
}
// Spacing — adaptado para ImGui (densidad mayor que CSS).
// Mantine usa 10/12/16/20/32 px, aqui densificamos al estilo TUI clasico.
namespace spacing {
constexpr float xs = 4.0f;
constexpr float sm = 8.0f;
@@ -40,12 +52,14 @@ namespace spacing {
constexpr float xl = 24.0f;
}
// Radius — mapeo directo Mantine (defaultRadius: 'md' = 8px).
namespace radius {
constexpr float none = 0.0f;
constexpr float sm = 3.0f;
constexpr float md = 5.0f;
constexpr float lg = 8.0f;
constexpr float xl = 12.0f;
constexpr float xs = 2.0f;
constexpr float sm = 4.0f;
constexpr float md = 8.0f; // default para Paper/Card/Button/Input
constexpr float lg = 12.0f;
constexpr float xl = 16.0f;
}
namespace font_size {
@@ -57,8 +71,11 @@ namespace font_size {
constexpr float xxl = 32.0f;
}
// Aplica los tokens al ImGuiStyle global. Llamar una vez al arrancar la app,
// después de ImGui::CreateContext() y antes del primer frame.
// Aplica la identidad visual al ImGuiStyle y a los estilos de ImPlot (si
// esta enlazado). Se invoca automaticamente desde fn::run_app() (app_base.h)
// salvo que AppConfig::theme sea ImGuiDark/ImGuiLight/None.
// Idempotente: se puede llamar varias veces sin efectos secundarios.
// No desactiva ninguna feature de ImGui (docking, viewports, etc).
void apply_dark_theme();
} // namespace fn_tokens
+26 -15
View File
@@ -3,10 +3,10 @@ name: tokens
kind: component
lang: cpp
domain: core
version: "1.0.0"
version: "2.0.0"
purity: pure
signature: "namespace fn_tokens { namespace colors/spacing/radius/font_size { constexpr ... }; void apply_dark_theme(); }"
description: "Design tokens (colors, spacing, radius, font_size) para dashboards ImGui. Inspirados en @fn_library (Mantine v9) — dark theme con indigo primary. Reemplaza hardcode de ImVec4(...) por constantes semánticas."
description: "Design tokens (colors, spacing, radius, font_size) para apps ImGui. Valores exactos de Mantine v9 dark + indigo — identidad unica del registry. Aplicados por defecto via fn::run_app. Ver cpp/DESIGN_SYSTEM.md."
tags: [imgui, theme, tokens, colors, spacing, radius, dark, design-system]
uses_functions: []
uses_types: []
@@ -31,28 +31,39 @@ Design tokens para todos los dashboards ImGui del registry. Traducción del DESI
| Namespace | Valores |
|-----------|---------|
| `fn_tokens::colors` | `primary`, `primary_hover`, `success`, `warning`, `error`, `info`, `bg`, `surface`, `surface_hover`, `text`, `text_muted`, `text_dim`, `border` |
| `fn_tokens::spacing` | `xs=4`, `sm=8`, `md=12`, `lg=16`, `xl=24` (px) |
| `fn_tokens::radius` | `none=0`, `sm=3`, `md=5`, `lg=8`, `xl=12` (px) |
| `fn_tokens::font_size` | `xs=10`, `sm=12`, `md=14`, `lg=18`, `xl=24`, `xxl=32` (px) |
| `fn_tokens::colors` | `primary` (indigo.6), `primary_hover` (indigo.5), `primary_light` (indigo.4), `primary_active` (indigo.7), `success` (green.6), `warning` (yellow.6), `error` (red.6), `info` (blue.6), `bg` (dark.7), `surface` (dark.6), `surface_hover` (dark.5), `surface_active` (dark.4), `border` (dark.4), `border_strong` (dark.3), `text` (dark.0), `text_muted` (dark.2), `text_dim` (dark.3) |
| `fn_tokens::spacing` | `xs=4`, `sm=8`, `md=12`, `lg=16`, `xl=24` (densificado respecto a CSS Mantine) |
| `fn_tokens::radius` | `none=0`, `xs=2`, `sm=4`, `md=8`, `lg=12`, `xl=16` (md = defaultRadius Mantine) |
| `fn_tokens::font_size` | `xs=10`, `sm=12`, `md=14`, `lg=18`, `xl=24`, `xxl=32` |
## Uso
## Uso normal: nada, lo aplica el framework
```cpp
#include "app_base.h"
fn::run_app({.title="app", .width=1400, .height=900}, render);
// run_app llama a fn_tokens::apply_dark_theme() una vez. No hace falta mas.
```
## Uso en componentes
```cpp
#include "core/tokens.h"
// Al arrancar la app (una vez, después de ImGui::CreateContext)
fn_tokens::apply_dark_theme();
// En componentes
ImGui::PushStyleColor(ImGuiCol_Text, fn_tokens::colors::text_muted);
ImGui::Dummy(ImVec2(0, fn_tokens::spacing::md));
ImGui::PopStyleColor();
```
## Detalles de `apply_dark_theme()`
- Valores alineados 1:1 con Mantine v9 dark (dark.0-9) + indigo (4-7).
- Aplica ~50 ImGuiCol_*, rounding (Window/Child/Popup/Frame/Grab/Scrollbar/Tab), paddings y bordes.
- Si `ImPlot` esta linkado, tambien estiliza su frame/plot/axis/legend.
- No toca `io.ConfigFlags`, backends, fuentes ni contexto — las capacidades de ImGui (docking, viewports, nav teclado) quedan intactas.
- Idempotente.
## Notas
- **Dark by default** como en el DESIGN_SYSTEM (§2, §8). Si algún día queremos light, se añade `apply_light_theme()`.
- Los valores semánticos (success/warning/error/info) se usan en `badge`, `kpi_card` para deltas, y gráficos de estado.
- **No duplicar** estas constantes en componentes — siempre importar de aquí. Si se detecta un `ImVec4` hardcodeado en un componente del registry es candidato a migrar.
- Compatible con `plot_theme_cpp_core` (para ImPlot charts) — los colors del palette se pueden derivar de estos tokens si se quiere coherencia total.
- **No duplicar** constantes en componentes — importar siempre de aqui. Si detectas un `ImVec4(...)` hardcoded en el registry, es candidato a migrar.
- Para temas alternativos (dev/debug) usar `fn::AppConfig::theme = fn::ThemeMode::ImGuiDark`.
- Compatible con `plot_theme_cpp_core``apply_dark_theme` ya setea los `ImPlotCol_*` base.