From 6154cb1080b0e91cad14f2b1f73341542049e119 Mon Sep 17 00:00:00 2001
From: "R.Eugenio" <yo@reugenio.com>
Date: Tue, 30 Dec 2025 15:23:22 +0100
Subject: [PATCH] =?UTF-8?q?feat(context):=20A=C3=B1adir=20drawBeveledRect/?=
 =?UTF-8?q?drawBeveledRectPressed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Helpers para dibujar rectángulos con efecto 3D:
- drawBeveledRect: luz desde arriba-izquierda (normal)
- drawBeveledRectPressed: bisel invertido (presionado)

Usa lightenHsl(10) y darkenHsl(15) para bordes.

Parte del plan 'Acabado Espectacular'.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/core/context.zig | 110 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 110 insertions(+)

diff --git a/src/core/context.zig b/src/core/context.zig
index a3c817a..e5eb0e4 100644
--- a/src/core/context.zig
+++ b/src/core/context.zig
@@ -428,6 +428,116 @@ pub const Context = struct {
         self.overlay_commands.append(self.allocator, cmd) catch {};
     }
 
+    // =========================================================================
+    // High-level Drawing Helpers
+    // =========================================================================
+
+    /// Draw a rectangle with 3D bevel effect
+    /// Creates illusion of depth with light from top-left
+    /// - Top/Left edges: lighter (raised)
+    /// - Bottom/Right edges: darker (shadow)
+    pub fn drawBeveledRect(self: *Self, x: i32, y: i32, w: u32, h: u32, base_color: Style.Color) void {
+        const light = base_color.lightenHsl(10);
+        const dark = base_color.darkenHsl(15);
+
+        // Main fill
+        self.pushCommand(.{ .rect = .{
+            .x = x,
+            .y = y,
+            .w = w,
+            .h = h,
+            .color = base_color,
+        } });
+
+        // Top edge (light)
+        self.pushCommand(.{ .rect = .{
+            .x = x,
+            .y = y,
+            .w = w,
+            .h = 1,
+            .color = light,
+        } });
+
+        // Left edge (light)
+        self.pushCommand(.{ .rect = .{
+            .x = x,
+            .y = y,
+            .w = 1,
+            .h = h,
+            .color = light,
+        } });
+
+        // Bottom edge (dark)
+        self.pushCommand(.{ .rect = .{
+            .x = x,
+            .y = y + @as(i32, @intCast(h)) - 1,
+            .w = w,
+            .h = 1,
+            .color = dark,
+        } });
+
+        // Right edge (dark)
+        self.pushCommand(.{ .rect = .{
+            .x = x + @as(i32, @intCast(w)) - 1,
+            .y = y,
+            .w = 1,
+            .h = h,
+            .color = dark,
+        } });
+    }
+
+    /// Draw a rectangle with inverted 3D bevel effect (pressed state)
+    /// Dark edges on top/left, light on bottom/right
+    pub fn drawBeveledRectPressed(self: *Self, x: i32, y: i32, w: u32, h: u32, base_color: Style.Color) void {
+        const light = base_color.lightenHsl(10);
+        const dark = base_color.darkenHsl(15);
+
+        // Main fill
+        self.pushCommand(.{ .rect = .{
+            .x = x,
+            .y = y,
+            .w = w,
+            .h = h,
+            .color = base_color,
+        } });
+
+        // Top edge (dark - inverted)
+        self.pushCommand(.{ .rect = .{
+            .x = x,
+            .y = y,
+            .w = w,
+            .h = 1,
+            .color = dark,
+        } });
+
+        // Left edge (dark - inverted)
+        self.pushCommand(.{ .rect = .{
+            .x = x,
+            .y = y,
+            .w = 1,
+            .h = h,
+            .color = dark,
+        } });
+
+        // Bottom edge (light - inverted)
+        self.pushCommand(.{ .rect = .{
+            .x = x,
+            .y = y + @as(i32, @intCast(h)) - 1,
+            .w = w,
+            .h = 1,
+            .color = light,
+        } });
+
+        // Right edge (light - inverted)
+        self.pushCommand(.{ .rect = .{
+            .x = x + @as(i32, @intCast(w)) - 1,
+            .y = y,
+            .w = 1,
+            .h = h,
+            .color = light,
+        } });
+    }
+
     /// Resize the context
     pub fn resize(self: *Self, width: u32, height: u32) void {
         self.width = width;