luajitos

render.lua (113477B)

---

 -- Pure Lua HTML Parser and Renderer
 -- No external dependencies, just pure Lua!
 
 local dom_module = require("dom")
 local style_module = require("style")
 local document_module = require("document")
 local lua_engine_module = require("lua_engine")
 -- local image_parser = require("image_parser")
 local image_parser = { load_image = function() return nil, "disabled" end }
 
 local DOM = dom_module.DOM
 local Element = dom_module.Element
 local Style = style_module.Style
 local Document = document_module.Document
 local LuaEngine = lua_engine_module.LuaEngine
 
 -- ============================================================================
 -- PNG Encoder (Pure Lua)
 -- ============================================================================
 
 local function write_u32_be(value)
     return string.char(
         bit.band(bit.rshift(value, 24), 0xFF),
         bit.band(bit.rshift(value, 16), 0xFF),
         bit.band(bit.rshift(value, 8), 0xFF),
         bit.band(value, 0xFF)
     )
 end
 
 local function crc32(data)
     local crc = 0xFFFFFFFF
     for i = 1, #data do
         local byte = string.byte(data, i)
         crc = bit.bxor(crc, byte)
         for _ = 1, 8 do
             if bit.band(crc, 1) ~= 0 then
                 crc = bit.bxor(bit.rshift(crc, 1), 0xEDB88320)
             else
                 crc = bit.rshift(crc, 1)
             end
         end
     end
     return bit.bxor(crc, 0xFFFFFFFF)
 end
 
 local function create_png_chunk(chunk_type, data)
     local length = write_u32_be(#data)
     local chunk_data = chunk_type .. data
     local crc = write_u32_be(crc32(chunk_data))
     return length .. chunk_data .. crc
 end
 
 local function compress_zlib(data)
     -- Simple DEFLATE with no compression (store only)
     local compressed = string.char(0x78, 0x01) -- zlib header
 
     local block_size = 65535
     local pos = 1
     local blocks = {}
 
     while pos <= #data do
         local remaining = #data - pos + 1
         local size = math.min(block_size, remaining)
         local is_final = (pos + size - 1 >= #data) and 1 or 0
 
         local block = string.char(is_final) -- BFINAL and BTYPE (00 = no compression)
         block = block .. string.char(bit.band(size, 0xFF), bit.rshift(size, 8))
         block = block .. string.char(bit.band(bit.bnot(size), 0xFF), bit.band(bit.rshift(bit.bnot(size), 8), 0xFF))
         block = block .. data:sub(pos, pos + size - 1)
 
         table.insert(blocks, block)
         pos = pos + size
     end
 
     compressed = compressed .. table.concat(blocks)
 
     -- Adler-32 checksum
     local s1, s2 = 1, 0
     for i = 1, #data do
         s1 = (s1 + string.byte(data, i)) % 65521
         s2 = (s2 + s1) % 65521
     end
     local adler = bit.lshift(s2, 16) + s1
     compressed = compressed .. write_u32_be(adler)
 
     return compressed
 end
 
 local function save_png(filename, width, height, pixels)
     local f = io.open(filename, "wb")
     if not f then
         error("Could not open file for writing: " .. filename)
     end
 
     -- PNG signature
     f:write(string.char(0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A))
 
     -- IHDR chunk
     local ihdr = write_u32_be(width) .. write_u32_be(height)
     ihdr = ihdr .. string.char(8)  -- bit depth
     ihdr = ihdr .. string.char(2)  -- color type (2 = RGB)
     ihdr = ihdr .. string.char(0)  -- compression
     ihdr = ihdr .. string.char(0)  -- filter
     ihdr = ihdr .. string.char(0)  -- interlace
     f:write(create_png_chunk("IHDR", ihdr))
 
     -- IDAT chunk (image data)
     local raw_data = {}
     for y = 0, height - 1 do
         table.insert(raw_data, string.char(0)) -- filter type (0 = none)
         for x = 0, width - 1 do
             local idx = y * width + x + 1
             local pixel = pixels[idx] or {255, 255, 255}
             table.insert(raw_data, string.char(pixel[1], pixel[2], pixel[3]))
         end
     end
 
     local raw = table.concat(raw_data)
     local compressed = compress_zlib(raw)
     f:write(create_png_chunk("IDAT", compressed))
 
     -- IEND chunk
     f:write(create_png_chunk("IEND", ""))
 
     f:close()
 end
 
 -- ============================================================================
 -- Simple Bitmap Font (8x8 pixels)
 -- ============================================================================
 
 local function get_char_bitmap(char)
     -- Simple 8x8 bitmap font for basic ASCII characters
     -- Returns a table of 8 bytes, each byte represents a row
     local fonts = {
         [" "] = {0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00},
         ["!"] = {0x18, 0x18, 0x18, 0x18, 0x00, 0x00, 0x18, 0x00},
         [":"] = {0x00, 0x18, 0x18, 0x00, 0x18, 0x18, 0x00, 0x00},
         ["."] = {0x00, 0x00, 0x00, 0x00, 0x00, 0x18, 0x18, 0x00},
         ["•"] = {0x00, 0x00, 0x00, 0x18, 0x18, 0x00, 0x00, 0x00},
         ["0"] = {0x3C, 0x46, 0x4A, 0x52, 0x62, 0x3C, 0x00, 0x00},
         ["1"] = {0x18, 0x28, 0x08, 0x08, 0x08, 0x3E, 0x00, 0x00},
         ["2"] = {0x3C, 0x42, 0x02, 0x3C, 0x40, 0x7E, 0x00, 0x00},
         ["3"] = {0x3C, 0x42, 0x0C, 0x02, 0x42, 0x3C, 0x00, 0x00},
         ["a"] = {0x00, 0x00, 0x3C, 0x42, 0x42, 0x46, 0x3A, 0x00},
         ["b"] = {0x40, 0x40, 0x5C, 0x62, 0x42, 0x42, 0x7C, 0x00},
         ["c"] = {0x00, 0x00, 0x3C, 0x42, 0x40, 0x42, 0x3C, 0x00},
         ["d"] = {0x02, 0x02, 0x3A, 0x46, 0x42, 0x42, 0x3E, 0x00},
         ["e"] = {0x00, 0x00, 0x3C, 0x42, 0x7E, 0x40, 0x3C, 0x00},
         ["f"] = {0x0E, 0x10, 0x10, 0x7C, 0x10, 0x10, 0x10, 0x00},
         ["g"] = {0x00, 0x00, 0x3E, 0x42, 0x42, 0x3E, 0x02, 0x3C},
         ["h"] = {0x40, 0x40, 0x5C, 0x62, 0x42, 0x42, 0x42, 0x00},
         ["i"] = {0x10, 0x00, 0x30, 0x10, 0x10, 0x10, 0x38, 0x00},
         ["j"] = {0x04, 0x00, 0x0C, 0x04, 0x04, 0x04, 0x44, 0x38},
         ["k"] = {0x40, 0x40, 0x44, 0x48, 0x70, 0x48, 0x44, 0x00},
         ["l"] = {0x30, 0x10, 0x10, 0x10, 0x10, 0x10, 0x38, 0x00},
         ["m"] = {0x00, 0x00, 0x6C, 0x92, 0x92, 0x92, 0x92, 0x00},
         ["n"] = {0x00, 0x00, 0x5C, 0x62, 0x42, 0x42, 0x42, 0x00},
         ["o"] = {0x00, 0x00, 0x3C, 0x42, 0x42, 0x42, 0x3C, 0x00},
         ["p"] = {0x00, 0x00, 0x5C, 0x62, 0x62, 0x5C, 0x40, 0x40},
         ["r"] = {0x00, 0x00, 0x5C, 0x62, 0x40, 0x40, 0x40, 0x00},
         ["s"] = {0x00, 0x00, 0x3E, 0x40, 0x3C, 0x02, 0x7C, 0x00},
         ["q"] = {0x00, 0x00, 0x3A, 0x46, 0x42, 0x3A, 0x02, 0x02},
         ["t"] = {0x10, 0x10, 0x7C, 0x10, 0x10, 0x10, 0x0E, 0x00},
         ["u"] = {0x00, 0x00, 0x42, 0x42, 0x42, 0x46, 0x3A, 0x00},
         ["v"] = {0x00, 0x00, 0x42, 0x42, 0x42, 0x24, 0x18, 0x00},
         ["w"] = {0x00, 0x00, 0x92, 0x92, 0x92, 0x54, 0x28, 0x00},
         ["x"] = {0x00, 0x00, 0x42, 0x24, 0x18, 0x24, 0x42, 0x00},
         ["y"] = {0x00, 0x00, 0x42, 0x42, 0x42, 0x3E, 0x02, 0x3C},
         ["z"] = {0x00, 0x00, 0x7E, 0x04, 0x18, 0x20, 0x7E, 0x00},
         ["A"] = {0x18, 0x24, 0x42, 0x7E, 0x42, 0x42, 0x42, 0x00},
         ["B"] = {0x7C, 0x42, 0x42, 0x7C, 0x42, 0x42, 0x7C, 0x00},
         ["E"] = {0x7E, 0x40, 0x40, 0x7C, 0x40, 0x40, 0x7E, 0x00},
         ["H"] = {0x42, 0x42, 0x42, 0x7E, 0x42, 0x42, 0x42, 0x00},
         ["I"] = {0x3E, 0x08, 0x08, 0x08, 0x08, 0x08, 0x3E, 0x00},
         ["M"] = {0x42, 0x66, 0x5A, 0x42, 0x42, 0x42, 0x42, 0x00},
         ["D"] = {0x78, 0x44, 0x42, 0x42, 0x42, 0x44, 0x78, 0x00},
         ["O"] = {0x3C, 0x42, 0x42, 0x42, 0x42, 0x42, 0x3C, 0x00},
         ["P"] = {0x7C, 0x42, 0x42, 0x7C, 0x40, 0x40, 0x40, 0x00},
         ["S"] = {0x3C, 0x42, 0x40, 0x3C, 0x02, 0x42, 0x3C, 0x00},
         ["T"] = {0x7F, 0x08, 0x08, 0x08, 0x08, 0x08, 0x08, 0x00},
         ["U"] = {0x42, 0x42, 0x42, 0x42, 0x42, 0x42, 0x3C, 0x00},
         ["W"] = {0x42, 0x42, 0x42, 0x92, 0x92, 0x92, 0x6C, 0x00},
         ["Y"] = {0x42, 0x42, 0x42, 0x24, 0x18, 0x08, 0x08, 0x00},
     }
 
     return fonts[char] or {0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00}
 end
 
 -- ============================================================================
 -- Image Buffer
 -- ============================================================================
 
 local ImageBuffer = {}
 ImageBuffer.__index = ImageBuffer
 
 function ImageBuffer:new(width, height)
     local pixels = {}
     for i = 1, width * height do
         pixels[i] = {255, 255, 255} -- white background
     end
 
     return setmetatable({
         width = width,
         height = height,
         pixels = pixels
     }, self)
 end
 
 function ImageBuffer:set_pixel(x, y, r, g, b)
     if x >= 0 and x < self.width and y >= 0 and y < self.height then
         -- Clamp RGB values to 0-255 range
         r = math.max(0, math.min(255, math.floor(r)))
         g = math.max(0, math.min(255, math.floor(g)))
         b = math.max(0, math.min(255, math.floor(b)))
         local idx = y * self.width + x + 1
         self.pixels[idx] = {r, g, b}
     end
 end
 
 function ImageBuffer:draw_char(char, x, y, size, r, g, b)
     local bitmap = get_char_bitmap(char)
     local scale = math.floor(size / 8)
     if scale < 1 then scale = 1 end
 
     for row = 0, 7 do
         local byte = bitmap[row + 1]
         for col = 0, 7 do
             if bit.band(bit.rshift(byte, 7 - col), 1) == 1 then
                 -- Draw scaled pixel
                 for dy = 0, scale - 1 do
                     for dx = 0, scale - 1 do
                         self:set_pixel(x + col * scale + dx, y + row * scale + dy, r, g, b)
                     end
                 end
             end
         end
     end
 end
 
 function ImageBuffer:draw_text(text, x, y, size, r, g, b)
     local scale = math.floor(size / 8)
     if scale < 1 then scale = 1 end
     local char_width = 8 * scale
 
     local cursor_x = x
     for i = 1, #text do
         local char = text:sub(i, i)
         self:draw_char(char, cursor_x, y, size, r, g, b)
         cursor_x = cursor_x + char_width
     end
 end
 
 function ImageBuffer:get_text_width(text, size)
     local scale = math.floor(size / 8)
     if scale < 1 then scale = 1 end
     local char_width = 8 * scale
     return #text * char_width
 end
 
 function ImageBuffer:fill_rect(x, y, width, height, r, g, b)
     for py = y, y + height - 1 do
         for px = x, x + width - 1 do
             self:set_pixel(px, py, r, g, b)
         end
     end
 end
 
 function ImageBuffer:draw_image(image_data, x, y, width, height)
     -- Draw image at position (x, y)
     -- image_data can be:
     --   1. An Image object (table with getPixel method)
     --   2. A C image handle (userdata) - use ImageGetPixel
     --   3. A 2D array [y][x] = {r, g, b} (legacy Lua format)
 
     if type(image_data) == "table" and image_data.getPixel then
         -- Image library object - use getPixel method
         local orig_width, orig_height = image_data:getSize()
 
         for py = 0, height - 1 do
             local src_y = math.floor(py * orig_height / height)
             for px = 0, width - 1 do
                 local src_x = math.floor(px * orig_width / width)
                 local pixel = image_data:getPixel(src_x, src_y)
                 if pixel then
                     self:set_pixel(x + px, y + py, pixel.r, pixel.g, pixel.b)
                 end
             end
         end
     elseif type(image_data) == "userdata" and ImageGetPixel then
         -- C image handle - use ImageGetPixel for each pixel
         local orig_width = ImageGetWidth and ImageGetWidth(image_data) or width
         local orig_height = ImageGetHeight and ImageGetHeight(image_data) or height
 
         for py = 0, height - 1 do
             local src_y = math.floor(py * orig_height / height)
             for px = 0, width - 1 do
                 local src_x = math.floor(px * orig_width / width)
                 local r, g, b = ImageGetPixel(image_data, src_x, src_y)
                 if r then
                     self:set_pixel(x + px, y + py, r, g, b)
                 end
             end
         end
     elseif type(image_data) == "table" then
         -- Legacy Lua pixel table format
         for py = 1, height do
             for px = 1, width do
                 if image_data[py] and image_data[py][px] then
                     local pixel = image_data[py][px]
                     self:set_pixel(x + px - 1, y + py - 1, pixel.r, pixel.g, pixel.b)
                 end
             end
         end
     end
 end
 
 function ImageBuffer:draw_rect_outline(x, y, width, height, r, g, b)
     -- Top and bottom edges
     for px = x, x + width - 1 do
         self:set_pixel(px, y, r, g, b)
         self:set_pixel(px, y + height - 1, r, g, b)
     end
     -- Left and right edges
     for py = y, y + height - 1 do
         self:set_pixel(x, py, r, g, b)
         self:set_pixel(x + width - 1, py, r, g, b)
     end
 end
 
 function ImageBuffer:save(filename)
     save_png(filename, self.width, self.height, self.pixels)
 end
 
 function ImageBuffer:drawToScreen(gfx)
     -- Draw the image buffer to a SafeGFX instance
     -- gfx is expected to have setPixel or fillRect methods
     if not gfx then
         error("drawToScreen requires a valid graphics context")
     end
 
     -- Draw each pixel
     for y = 0, self.height - 1 do
         for x = 0, self.width - 1 do
             local idx = y * self.width + x + 1
             local pixel = self.pixels[idx]
             if pixel then
                 local r, g, b = pixel[1], pixel[2], pixel[3]
                 -- Convert RGB to 24-bit color value (0xRRGGBB)
                 local color = bit.lshift(r, 16) + bit.lshift(g, 8) + b
 
                 -- Use setPixel if available (slower but more compatible)
                 if gfx.setPixel then
                     gfx:setPixel(x, y, color)
                 -- Fallback to fillRect for single pixels
                 elseif gfx.fillRect then
                     gfx:fillRect(x, y, 1, 1, color)
                 end
             end
         end
     end
 end
 
 -- ============================================================================
 -- HTML Parser
 -- ============================================================================
 
 local HTMLParser = {}
 HTMLParser.__index = HTMLParser
 
 function HTMLParser:new()
     return setmetatable({
         dom = DOM:new(),
         pos = 1,
         html = ""
     }, self)
 end
 
 function HTMLParser:peek(len)
     return self.html:sub(self.pos, self.pos + (len or 1) - 1)
 end
 
 function HTMLParser:advance(len)
     self.pos = self.pos + (len or 1)
 end
 
 function HTMLParser:skip_whitespace()
     local _, end_pos = self.html:find("^%s+", self.pos)
     if end_pos then
         self.pos = end_pos + 1
     end
 end
 
 function HTMLParser:parse_tag_name()
     local tag = self.html:match("^([%w]+)", self.pos)
     if tag then
         self.pos = self.pos + #tag
         return tag:lower()
     end
     return nil
 end
 
 function HTMLParser:parse_attributes()
     local attrs = {}
 
     while self.pos <= #self.html do
         self:skip_whitespace()
 
         -- Check if we've reached the end of the tag
         if self:peek(1) == ">" or self:peek(2) == "/>" then
             break
         end
 
         -- Parse attribute name
         local attr_name = self.html:match("^([%w-]+)", self.pos)
         if not attr_name then
             break
         end
         self.pos = self.pos + #attr_name
 
         self:skip_whitespace()
 
         -- Check for '='
         if self:peek(1) ~= "=" then
             attrs[attr_name] = true
             goto continue
         end
         self:advance(1)
 
         self:skip_whitespace()
 
         -- Parse attribute value
         local quote = self:peek(1)
         if quote == '"' or quote == "'" then
             self:advance(1)
             local value_start = self.pos
             local value_end = self.html:find(quote, self.pos, true)
             if value_end then
                 attrs[attr_name] = self.html:sub(value_start, value_end - 1)
                 self.pos = value_end + 1
             end
         else
             -- Unquoted value
             local value = self.html:match("^([^%s>]+)", self.pos)
             if value then
                 attrs[attr_name] = value
                 self.pos = self.pos + #value
             end
         end
 
         ::continue::
     end
 
     return attrs
 end
 
 function HTMLParser:parse_text()
     local text = self.html:match("^([^<]+)", self.pos)
     if text then
         self.pos = self.pos + #text
         -- Collapse whitespace (like browsers do): multiple spaces/newlines become single space
         text = text:gsub("%s+", " ")
         return text
     end
     return nil
 end
 
 function HTMLParser:parse_element()
     self:skip_whitespace()
 
     -- Check for opening tag
     if self:peek(1) ~= "<" then
         return nil
     end
 
     self:advance(1) -- skip '<'
 
     -- Check for closing tag
     if self:peek(1) == "/" then
         return nil -- caller should handle closing tags
     end
 
     -- Parse tag name
     local tag = self:parse_tag_name()
     if not tag then
         return nil
     end
 
     -- Parse attributes
     local attrs = self:parse_attributes()
 
     -- Skip to end of opening tag
     local _, end_pos = self.html:find(">", self.pos)
     if not end_pos then
         return nil
     end
     self.pos = end_pos + 1
 
     -- Create element with attributes
     local elem = Element:new(tag, attrs)
 
     -- Self-closing tags
     if tag == "br" or tag == "input" or tag == "img" or tag == "hr" then
         return elem
     end
 
     -- Skip content for script and style tags (but still parse the closing tag)
     if tag == "script" or tag == "style" then
         -- Find the closing tag and skip all content
         local closing_pattern = "</%s*" .. tag .. "%s*>"
         local _, close_end = self.html:find(closing_pattern, self.pos)
         if close_end then
             self.pos = close_end + 1
         end
         return elem
     end
 
     -- Parse children and text content
     local last_pos = self.pos
 
     while self.pos <= #self.html do
         -- Check for closing tag first
         if self:peek(2) == "</" then
             local save_pos = self.pos
             self:advance(2)
             local close_tag = self:parse_tag_name()
             if close_tag == tag then
                 -- Skip '>'
                 local _, close_end = self.html:find(">", self.pos)
                 if close_end then
                     self.pos = close_end + 1
                 end
                 break
             else
                 -- Not our closing tag, restore position
                 self.pos = save_pos
             end
         end
 
         -- Try to parse child element
         if self:peek(1) == "<" then
             local child = self:parse_element()
             if child then
                 elem:add_child(child)
                 last_pos = self.pos
             else
                 -- Failed to parse element, skip this character
                 self:advance(1)
             end
         else
             -- Parse text content and create text node
             local text = self:parse_text()
             if text and text ~= "" then
                 -- Create a text pseudo-element
                 local text_node = Element:new("text", {})
                 text_node:set_content(text)
                 elem:add_child(text_node)
                 last_pos = self.pos
             else
                 -- No progress, advance to avoid infinite loop
                 if self.pos == last_pos then
                     self:advance(1)
                 end
             end
         end
     end
 
     return elem
 end
 
 function HTMLParser:parse(html)
     self.html = html
     self.pos = 1
 
     local body = Element:new("body", {})
 
     -- Find body tag content
     local body_start = html:find("<body")
     local body_end = html:find("</body>")
 
     if body_start and body_end then
         -- Start parsing after <body>
         local _, body_open_end = html:find(">", body_start)
         if body_open_end then
             self.pos = body_open_end + 1
 
             -- Parse all elements until </body>
             while self.pos < body_end do
                 self:skip_whitespace()
                 local elem = self:parse_element()
                 if elem then
                     body:add_child(elem)
                 else
                     break
                 end
             end
         end
     end
 
     self.dom:set_root(body)
     return self.dom
 end
 
 -- ============================================================================
 -- HTML Renderer
 -- ============================================================================
 
 local HTMLRenderer = {}
 HTMLRenderer.__index = HTMLRenderer
 
 function HTMLRenderer:new(width, height, style_manager, document)
     return setmetatable({
         width = width,
         height = height,
         buffer = ImageBuffer:new(width, height),
         style = style_manager,
         document = document,  -- Document for state (focus, input values)
         y_offset = 8,  -- body margin
         x_offset = 20, -- current x position for inline elements
         line_height = 0, -- current line height for inline elements
         max_x = nil, -- maximum x position for current context (for nested elements with padding)
         text_align = "left", -- current text alignment context
         content_start_x = nil, -- start x for line (for alignment calculation)
         content_width_for_align = nil -- available width for alignment
     }, self)
 end
 
 -- Parse color string to RGB (returns r, g, b, alpha)
 function HTMLRenderer:parse_color(color_str)
     if not color_str then return 0, 0, 0, 1 end
 
     -- Handle rgba() format: rgba(255, 128, 64, 0.5)
     local r_val, g_val, b_val, a_val = color_str:match("rgba%s*%((%d+)%s*,%s*(%d+)%s*,%s*(%d+)%s*,%s*([%d.]+)%)")
     if r_val then
         return tonumber(r_val), tonumber(g_val), tonumber(b_val), tonumber(a_val)
     end
 
     -- Handle rgb() format: rgb(255, 128, 64)
     r_val, g_val, b_val = color_str:match("rgb%s*%((%d+)%s*,%s*(%d+)%s*,%s*(%d+)%)")
     if r_val then
         return tonumber(r_val), tonumber(g_val), tonumber(b_val), 1
     end
 
     -- Handle hex colors
     if color_str:match("^#") then
         local hex = color_str:sub(2)
         if #hex == 6 then
             local r = tonumber(hex:sub(1, 2), 16)
             local g = tonumber(hex:sub(3, 4), 16)
             local b = tonumber(hex:sub(5, 6), 16)
             return r, g, b, 1
         end
     end
 
     -- Handle named colors (standard HTML/CSS color names)
     local named_colors = {
         aliceblue = {240, 248, 255},
         antiquewhite = {250, 235, 215},
         aqua = {0, 255, 255},
         aquamarine = {127, 255, 212},
         azure = {240, 255, 255},
         beige = {245, 245, 220},
         bisque = {255, 228, 196},
         black = {0, 0, 0},
         blanchedalmond = {255, 235, 205},
         blue = {0, 0, 255},
         blueviolet = {138, 43, 226},
         brown = {165, 42, 42},
         burlywood = {222, 184, 135},
         cadetblue = {95, 158, 160},
         chartreuse = {127, 255, 0},
         chocolate = {210, 105, 30},
         coral = {255, 127, 80},
         cornflowerblue = {100, 149, 237},
         cornsilk = {255, 248, 220},
         crimson = {220, 20, 60},
         cyan = {0, 255, 255},
         darkblue = {0, 0, 139},
         darkcyan = {0, 139, 139},
         darkgoldenrod = {184, 134, 11},
         darkgray = {169, 169, 169},
         darkgrey = {169, 169, 169},
         darkgreen = {0, 100, 0},
         darkkhaki = {189, 183, 107},
         darkmagenta = {139, 0, 139},
         darkolivegreen = {85, 107, 47},
         darkorange = {255, 140, 0},
         darkorchid = {153, 50, 204},
         darkred = {139, 0, 0},
         darksalmon = {233, 150, 122},
         darkseagreen = {143, 188, 143},
         darkslateblue = {72, 61, 139},
         darkslategray = {47, 79, 79},
         darkslategrey = {47, 79, 79},
         darkturquoise = {0, 206, 209},
         darkviolet = {148, 0, 211},
         deeppink = {255, 20, 147},
         deepskyblue = {0, 191, 255},
         dimgray = {105, 105, 105},
         dimgrey = {105, 105, 105},
         dodgerblue = {30, 144, 255},
         firebrick = {178, 34, 34},
         floralwhite = {255, 250, 240},
         forestgreen = {34, 139, 34},
         fuchsia = {255, 0, 255},
         gainsboro = {220, 220, 220},
         ghostwhite = {248, 248, 255},
         gold = {255, 215, 0},
         goldenrod = {218, 165, 32},
         gray = {128, 128, 128},
         grey = {128, 128, 128},
         green = {0, 128, 0},
         greenyellow = {173, 255, 47},
         honeydew = {240, 255, 240},
         hotpink = {255, 105, 180},
         indianred = {205, 92, 92},
         indigo = {75, 0, 130},
         ivory = {255, 255, 240},
         khaki = {240, 230, 140},
         lavender = {230, 230, 250},
         lavenderblush = {255, 240, 245},
         lawngreen = {124, 252, 0},
         lemonchiffon = {255, 250, 205},
         lightblue = {173, 216, 230},
         lightcoral = {240, 128, 128},
         lightcyan = {224, 255, 255},
         lightgoldenrodyellow = {250, 250, 210},
         lightgray = {211, 211, 211},
         lightgrey = {211, 211, 211},
         lightgreen = {144, 238, 144},
         lightpink = {255, 182, 193},
         lightsalmon = {255, 160, 122},
         lightseagreen = {32, 178, 170},
         lightskyblue = {135, 206, 250},
         lightslategray = {119, 136, 153},
         lightslategrey = {119, 136, 153},
         lightsteelblue = {176, 196, 222},
         lightyellow = {255, 255, 224},
         lime = {0, 255, 0},
         limegreen = {50, 205, 50},
         linen = {250, 240, 230},
         magenta = {255, 0, 255},
         maroon = {128, 0, 0},
         mediumaquamarine = {102, 205, 170},
         mediumblue = {0, 0, 205},
         mediumorchid = {186, 85, 211},
         mediumpurple = {147, 112, 219},
         mediumseagreen = {60, 179, 113},
         mediumslateblue = {123, 104, 238},
         mediumspringgreen = {0, 250, 154},
         mediumturquoise = {72, 209, 204},
         mediumvioletred = {199, 21, 133},
         midnightblue = {25, 25, 112},
         mintcream = {245, 255, 250},
         mistyrose = {255, 228, 225},
         moccasin = {255, 228, 181},
         navajowhite = {255, 222, 173},
         navy = {0, 0, 128},
         oldlace = {253, 245, 230},
         olive = {128, 128, 0},
         olivedrab = {107, 142, 35},
         orange = {255, 165, 0},
         orangered = {255, 69, 0},
         orchid = {218, 112, 214},
         palegoldenrod = {238, 232, 170},
         palegreen = {152, 251, 152},
         paleturquoise = {175, 238, 238},
         palevioletred = {219, 112, 147},
         papayawhip = {255, 239, 213},
         peachpuff = {255, 218, 185},
         peru = {205, 133, 63},
         pink = {255, 192, 203},
         plum = {221, 160, 221},
         powderblue = {176, 224, 230},
         purple = {128, 0, 128},
         rebeccapurple = {102, 51, 153},
         red = {255, 0, 0},
         rosybrown = {188, 143, 143},
         royalblue = {65, 105, 225},
         saddlebrown = {139, 69, 19},
         salmon = {250, 128, 114},
         sandybrown = {244, 164, 96},
         seagreen = {46, 139, 87},
         seashell = {255, 245, 238},
         sienna = {160, 82, 45},
         silver = {192, 192, 192},
         skyblue = {135, 206, 235},
         slateblue = {106, 90, 205},
         slategray = {112, 128, 144},
         slategrey = {112, 128, 144},
         snow = {255, 250, 250},
         springgreen = {0, 255, 127},
         steelblue = {70, 130, 180},
         tan = {210, 180, 140},
         teal = {0, 128, 128},
         thistle = {216, 191, 216},
         tomato = {255, 99, 71},
         turquoise = {64, 224, 208},
         violet = {238, 130, 238},
         wheat = {245, 222, 179},
         white = {255, 255, 255},
         whitesmoke = {245, 245, 245},
         yellow = {255, 255, 0},
         yellowgreen = {154, 205, 50},
     }
 
     local color = named_colors[color_str:lower()]
     if color then
         return color[1], color[2], color[3], 1
     end
 
     -- Default to black
     return 0, 0, 0, 1
 end
 
 -- Apply text-transform to text content
 function HTMLRenderer:apply_text_transform(text, transform)
     if not text or not transform then return text end
 
     if transform == "uppercase" then
         return text:upper()
     elseif transform == "lowercase" then
         return text:lower()
     elseif transform == "capitalize" then
         -- Capitalize first letter of each word
         return text:gsub("(%a)([%w_']*)", function(first, rest)
             return first:upper() .. rest:lower()
         end)
     end
 
     return text
 end
 
 -- Parse size (px or em)
 function HTMLRenderer:parse_size(size_str, base_size, parent_size)
     if not size_str then return 16 end
 
     base_size = base_size or 16
     parent_size = parent_size or nil
 
     -- Handle px
     local px = size_str:match("^([%d.]+)px")
     if px then return math.floor(tonumber(px)) end
 
     -- Handle em
     local em = size_str:match("^([%d.]+)em")
     if em then return math.floor(tonumber(em) * base_size) end
 
     -- Handle percentage (requires parent_size)
     local percent = size_str:match("^([%d.]+)%%")
     if percent and parent_size then
         return math.floor(tonumber(percent) * parent_size / 100)
     end
 
     -- Handle vw (viewport width)
     local vw = size_str:match("^([%d.]+)vw")
     if vw then
         return math.floor(tonumber(vw) * self.width / 100)
     end
 
     -- Handle vh (viewport height)
     local vh = size_str:match("^([%d.]+)vh")
     if vh then
         return math.floor(tonumber(vh) * self.height / 100)
     end
 
     -- Handle bare numbers
     local num = tonumber(size_str)
     if num then return math.floor(num) end
 
     return base_size
 end
 
 -- Draw text with word wrapping and optional decorations
 -- Supports CSS properties: white-space, word-wrap/overflow-wrap, word-break
 function HTMLRenderer:draw_wrapped_text(text, start_x, start_y, max_width, font_size, r, g, b, decoration, base_x, wrap_mode)
     base_x = base_x or start_x
     wrap_mode = wrap_mode or "normal"  -- normal, nowrap, break-word, break-all
 
     local current_x = start_x
     local current_y = start_y
     local line_started = (current_x > base_x)
 
     -- Handle nowrap - no wrapping at all
     if wrap_mode == "nowrap" then
         self.buffer:draw_text(text, current_x, current_y, font_size, r, g, b)
         local text_width = self.buffer:get_text_width(text, font_size)
 
         if decoration == "underline" then
             local underline_y = current_y + font_size + 1
             self.buffer:fill_rect(current_x, underline_y, text_width, 1, r, g, b)
         elseif decoration == "line-through" then
             local line_y = current_y + math.floor(font_size / 2)
             self.buffer:fill_rect(current_x, line_y, text_width, 1, r, g, b)
         elseif decoration == "overline" then
             self.buffer:fill_rect(current_x, current_y, text_width, 1, r, g, b)
         end
 
         self.x_offset = current_x + text_width
         self.y_offset = current_y
         self.line_height = math.max(self.line_height, font_size)
         return text_width
     end
 
     -- Handle break-all - break anywhere, even in middle of words
     if wrap_mode == "break-all" then
         for i = 1, #text do
             local char = text:sub(i, i)
             local char_width = self.buffer:get_text_width(char, font_size)
 
             -- Check if character fits on current line
             if current_x + char_width > base_x + max_width and line_started then
                 -- Character doesn't fit, wrap to next line
                 local advance_y = math.max(font_size + 2, self.line_height > 0 and self.line_height or 0)
                 current_y = current_y + advance_y
                 current_x = base_x
                 line_started = false
                 self.line_height = 0
             end
 
             -- Draw the character
             self.buffer:draw_text(char, current_x, current_y, font_size, r, g, b)
 
             -- Apply text decorations
             if decoration == "underline" then
                 local underline_y = current_y + font_size + 1
                 self.buffer:fill_rect(current_x, underline_y, char_width, 1, r, g, b)
             elseif decoration == "line-through" then
                 local line_y = current_y + math.floor(font_size / 2)
                 self.buffer:fill_rect(current_x, line_y, char_width, 1, r, g, b)
             elseif decoration == "overline" then
                 self.buffer:fill_rect(current_x, current_y, char_width, 1, r, g, b)
             end
 
             current_x = current_x + char_width
             line_started = true
         end
 
         self.x_offset = current_x
         self.y_offset = current_y
         self.line_height = math.max(self.line_height, font_size)
         return current_x - start_x
     end
 
     -- Normal and break-word modes - split by words
     local words = {}
     for word in text:gmatch("%S+") do
         table.insert(words, word)
     end
 
     for i, word in ipairs(words) do
         local word_width = self.buffer:get_text_width(word, font_size)
         local space_width = self.buffer:get_text_width(" ", font_size)
 
         -- Check if we need to add a space before this word
         local need_space = line_started and i > 1
         local total_width = word_width + (need_space and space_width or 0)
 
         -- Check if word fits on current line
         if current_x + total_width > base_x + max_width and line_started then
             -- Word doesn't fit - wrap to next line
             -- Use line_height if it's set (accounts for tall elements like images)
             local advance_y = math.max(font_size + 2, self.line_height > 0 and self.line_height or 0)
             current_y = current_y + advance_y
             current_x = base_x
             line_started = false
             need_space = false
             total_width = word_width
             -- Reset line_height since we've moved to a new line
             self.line_height = 0
 
             if wrap_mode == "break-word" and word_width > max_width then
                 -- Word is too long for a line, break it character by character
                 for j = 1, #word do
                     local char = word:sub(j, j)
                     local char_width = self.buffer:get_text_width(char, font_size)
 
                     if current_x + char_width > base_x + max_width and line_started then
                         local advance_y = math.max(font_size + 2, self.line_height > 0 and self.line_height or 0)
                         current_y = current_y + advance_y
                         current_x = base_x
                         line_started = false
                         self.line_height = 0
                     end
 
                     self.buffer:draw_text(char, current_x, current_y, font_size, r, g, b)
 
                     if decoration == "underline" then
                         local underline_y = current_y + font_size + 1
                         self.buffer:fill_rect(current_x, underline_y, char_width, 1, r, g, b)
                     elseif decoration == "line-through" then
                         local line_y = current_y + math.floor(font_size / 2)
                         self.buffer:fill_rect(current_x, line_y, char_width, 1, r, g, b)
                     elseif decoration == "overline" then
                         self.buffer:fill_rect(current_x, current_y, char_width, 1, r, g, b)
                     end
 
                     current_x = current_x + char_width
                     line_started = true
                 end
                 goto continue
             end
         end
 
         -- Draw space if needed
         if need_space then
             self.buffer:draw_text(" ", current_x, current_y, font_size, r, g, b)
             current_x = current_x + space_width
         end
 
         -- Draw the word
         self.buffer:draw_text(word, current_x, current_y, font_size, r, g, b)
 
         -- Apply text decorations to this word
         if decoration == "underline" then
             local underline_y = current_y + font_size + 1
             self.buffer:fill_rect(current_x, underline_y, word_width, 1, r, g, b)
         elseif decoration == "line-through" then
             local line_y = current_y + math.floor(font_size / 2)
             self.buffer:fill_rect(current_x, line_y, word_width, 1, r, g, b)
         elseif decoration == "overline" then
             self.buffer:fill_rect(current_x, current_y, word_width, 1, r, g, b)
         end
 
         current_x = current_x + word_width
         line_started = true
 
         ::continue::
     end
 
     -- Update renderer state
     self.x_offset = current_x
     self.y_offset = current_y
     self.line_height = math.max(self.line_height, font_size)
 
     return current_x - start_x
 end
 
 -- Draw text with optional decorations (underline, line-through)
 function HTMLRenderer:draw_decorated_text(text, x, y, font_size, r, g, b, decoration)
     -- Draw the text
     self.buffer:draw_text(text, x, y, font_size, r, g, b)
 
     -- Calculate text width for decorations
     local text_width = self.buffer:get_text_width(text, font_size)
 
     -- Apply text decorations
     if decoration == "underline" then
         local underline_y = y + font_size + 1
         self.buffer:fill_rect(x, underline_y, text_width, 1, r, g, b)
     elseif decoration == "line-through" then
         local line_y = y + math.floor(font_size / 2)
         self.buffer:fill_rect(x, line_y, text_width, 1, r, g, b)
     elseif decoration == "overline" then
         self.buffer:fill_rect(x, y, text_width, 1, r, g, b)
     end
 
     return text_width
 end
 
 -- Draw border with optional border-radius
 function HTMLRenderer:draw_border(x, y, width, height, border_width, r, g, b, border_radius)
     border_radius = border_radius or 0
 
     if border_radius > 0 then
         -- Simple rounded corners (just draw at corners, not perfect but functional)
         -- Draw top border
         self.buffer:fill_rect(x + border_radius, y, width - 2 * border_radius, border_width, r, g, b)
         -- Draw bottom border
         self.buffer:fill_rect(x + border_radius, y + height - border_width, width - 2 * border_radius, border_width, r, g, b)
         -- Draw left border
         self.buffer:fill_rect(x, y + border_radius, border_width, height - 2 * border_radius, r, g, b)
         -- Draw right border
         self.buffer:fill_rect(x + width - border_width, y + border_radius, border_width, height - 2 * border_radius, r, g, b)
 
         -- Draw corner squares (simplified)
         self.buffer:fill_rect(x, y, border_radius, border_radius, r, g, b)
         self.buffer:fill_rect(x + width - border_radius, y, border_radius, border_radius, r, g, b)
         self.buffer:fill_rect(x, y + height - border_radius, border_radius, border_radius, r, g, b)
         self.buffer:fill_rect(x + width - border_radius, y + height - border_radius, border_radius, border_radius, r, g, b)
     else
         -- Regular rectangular border
         -- Top
         self.buffer:fill_rect(x, y, width, border_width, r, g, b)
         -- Bottom
         self.buffer:fill_rect(x, y + height - border_width, width, border_width, r, g, b)
         -- Left
         self.buffer:fill_rect(x, y, border_width, height, r, g, b)
         -- Right
         self.buffer:fill_rect(x + width - border_width, y, border_width, height, r, g, b)
     end
 end
 
 function HTMLRenderer:render_element(element, base_x, list_index)
     base_x = base_x or 20
     local style = self.style:get(element)
 
     -- Skip if display is none or if it's a non-rendered element
     if style.display == "none" or element.tag == "title" or element.tag == "head" or
        element.tag == "script" or element.tag == "style" then
         return
     end
 
     local font_size = self:parse_size(style["font-size"], 16)
     local margin_top = self:parse_size(style["margin-top"], font_size)
     local margin_bottom = self:parse_size(style["margin-bottom"], font_size)
 
     -- Parse padding from shorthand or individual properties
     local padding = self:parse_size(style.padding, font_size) or 0
     local padding_top = self:parse_size(style["padding-top"], font_size) or padding
     local padding_right = self:parse_size(style["padding-right"], font_size) or padding
     local padding_bottom = self:parse_size(style["padding-bottom"], font_size) or padding
     local padding_left = self:parse_size(style["padding-left"], font_size) or padding
 
     local text_r, text_g, text_b, text_a = self:parse_color(style.color)
     local bg_r, bg_g, bg_b, bg_a = self:parse_color(style["background-color"])
     local display = style.display or "block"
     local position = style.position or "static"
 
     -- Parse opacity property (overrides alpha from colors)
     local opacity = 1
     if style.opacity then
         opacity = tonumber(style.opacity) or 1
         if opacity < 0 then opacity = 0 end
         if opacity > 1 then opacity = 1 end
     end
 
     -- Apply opacity to colors
     text_a = (text_a or 1) * opacity
     bg_a = (bg_a or 1) * opacity
 
     -- Parse text-transform property
     local text_transform = style["text-transform"]
 
     -- Parse overflow property
     local overflow = style["overflow"] or "visible"
 
     -- Parse border properties
     local border_width = 0
     local border_r, border_g, border_b = 0, 0, 0
     local border_radius = 0
     if style.border or style["border-width"] then
         -- Parse border-width
         local border_str = style.border or style["border-width"] or "1px"
         border_width = self:parse_size(border_str:match("(%d+px)") or "1px", font_size)
 
         -- Parse border-color
         local border_color = style["border-color"]
         if style.border and not border_color then
             -- Try to extract color from shorthand
             border_color = style.border:match("#%x+") or style.border:match("%a+")
         end
         border_r, border_g, border_b = self:parse_color(border_color or "#000000")
 
         -- Parse border-radius
         if style["border-radius"] then
             border_radius = self:parse_size(style["border-radius"], font_size)
         end
     end
 
     -- Handle position: fixed (and absolute)
     if position == "fixed" or position == "absolute" then
         -- Calculate fixed position
         local fixed_x = base_x
         local fixed_y = self.y_offset
 
         -- Parse positioning properties
         if style.left then
             fixed_x = self:parse_size(style.left, font_size, self.width)
         elseif style.right then
             local right_offset = self:parse_size(style.right, font_size, self.width)
             -- Will calculate x after we know width
             fixed_x = nil  -- Mark as right-aligned
         end
 
         if style.top then
             fixed_y = self:parse_size(style.top, font_size, self.height)
         elseif style.bottom then
             local bottom_offset = self:parse_size(style.bottom, font_size, self.height)
             -- Will calculate y after we know height
             fixed_y = nil  -- Mark as bottom-aligned
         end
 
         -- Parse width and height
         local fixed_width = style.width and self:parse_size(style.width, font_size, self.width) or 100
         local fixed_height = style.height and self:parse_size(style.height, font_size, self.height) or 100
 
         -- Apply min/max width constraints
         if style["min-width"] then
             local min_width = self:parse_size(style["min-width"], font_size, self.width)
             fixed_width = math.max(fixed_width, min_width)
         end
         if style["max-width"] then
             local max_width = self:parse_size(style["max-width"], font_size, self.width)
             fixed_width = math.min(fixed_width, max_width)
         end
 
         -- Apply min/max height constraints
         if style["min-height"] then
             local min_height = self:parse_size(style["min-height"], font_size, self.height)
             fixed_height = math.max(fixed_height, min_height)
         end
         if style["max-height"] then
             local max_height = self:parse_size(style["max-height"], font_size, self.height)
             fixed_height = math.min(fixed_height, max_height)
         end
 
         -- Handle right positioning
         if not fixed_x and style.right then
             local right_offset = self:parse_size(style.right, font_size, self.width)
             fixed_x = self.width - fixed_width - right_offset
         end
 
         -- Handle bottom positioning
         if not fixed_y and style.bottom then
             local bottom_offset = self:parse_size(style.bottom, font_size, self.height)
             fixed_y = self.height - fixed_height - bottom_offset
         end
 
         -- Render the fixed element
         -- Draw background
         if bg_r and bg_g and bg_b then
             self.buffer:fill_rect(fixed_x, fixed_y, fixed_width, fixed_height, bg_r, bg_g, bg_b)
         end
 
         -- Draw content (simple text rendering for now)
         if #element.children > 0 then
             for _, child in ipairs(element.children) do
                 if child.tag == "text" and child.content then
                     self.buffer:draw_text(child.content, fixed_x + padding_left, fixed_y + padding_top, font_size, text_r, text_g, text_b)
                 end
             end
         elseif element.content then
             self.buffer:draw_text(element.content, fixed_x + padding_left, fixed_y + padding_top, font_size, text_r, text_g, text_b)
         end
 
         -- Set layout for click detection
         element:set_layout(fixed_x, fixed_y, fixed_width, fixed_height)
 
         -- Don't affect flow
         return
     end
 
     -- Handle block vs inline
     -- Treat inputs as block even though they're inline-block
     -- Text nodes and images are always inline (unless display:block is explicitly set)
     local is_block = (display == "block" or display == "list-item" or
                      (display == "inline-block" and element.tag == "input")) and
                      element.tag ~= "text" and element.tag ~= "img"
 
     if is_block then
         -- Block element - start new line
         if self.line_height > 0 then
             self.y_offset = self.y_offset + self.line_height
             self.line_height = 0
         end
         self.y_offset = self.y_offset + margin_top
         self.x_offset = base_x
 
         -- Handle specific block elements
         if element.tag == "ul" then
             for _, child in ipairs(element.children) do
                 if child.tag == "li" then
                     self:render_element(child, base_x + padding_left, nil) -- nil for bullets
                 end
                 -- Skip text nodes (whitespace between li elements)
             end
         elseif element.tag == "ol" then
             local li_index = 0
             for _, child in ipairs(element.children) do
                 if child.tag == "li" then
                     li_index = li_index + 1
                     self:render_element(child, base_x + padding_left, li_index)
                 end
                 -- Skip text nodes (whitespace between li elements)
             end
         elseif element.tag == "form" then
             for _, child in ipairs(element.children) do
                 self:render_element(child, base_x)
             end
         elseif element.tag == "table" then
             -- Render table
             -- Apply margins
             local margin_left = self:parse_size(style["margin-left"], font_size)
             local margin_right = self:parse_size(style["margin-right"], font_size)
 
             local table_x = self.x_offset + margin_left
             local table_y = self.y_offset
             local border_width = 1
 
             -- Parse border if present
             if style.border or style["border-width"] then
                 border_width = self:parse_size(style["border-width"], 1) or 1
             end
 
             -- Get border color
             local border_r, border_g, border_b = 0, 0, 0
             if style["border-color"] then
                 border_r, border_g, border_b = self:parse_color(style["border-color"])
             end
 
             -- Track table dimensions
             local max_width = 0
             local row_heights = {}
             local col_widths = {}
 
             -- Calculate column widths and row heights
             for _, row in ipairs(element.children) do
                 if row.tag == "tr" then
                     local col_index = 0
                     for _, cell in ipairs(row.children) do
                         if cell.tag == "td" or cell.tag == "th" then
                             col_index = col_index + 1
 
                             -- Check if cell has button or other interactive elements
                             local cell_width = 0
                             local has_button = false
 
                             for _, child in ipairs(cell.children) do
                                 if child.tag == "button" then
                                     has_button = true
                                     -- Get button style to calculate width
                                     local button_style = self.style:get(child)
                                     local button_width = button_style.width and self:parse_size(button_style.width, font_size, self.width) or 100
 
                                     -- Get button padding
                                     local button_padding = self:parse_size(button_style.padding, font_size) or 0
 
                                     -- Get button border width
                                     local button_border_width = 0
                                     if button_style.border or button_style["border-width"] then
                                         local border_str = button_style.border or button_style["border-width"] or "1px"
                                         button_border_width = self:parse_size(border_str:match("(%d+px)") or "1px", font_size)
                                     end
 
                                     -- Get button text
                                     local button_text = ""
                                     if #child.children > 0 then
                                         for _, btn_child in ipairs(child.children) do
                                             if btn_child.tag == "text" and btn_child.content then
                                                 button_text = button_text .. btn_child.content
                                             end
                                         end
                                     else
                                         button_text = child.content or ""
                                     end
 
                                     local text_width = self.buffer:get_text_width(button_text, font_size)
                                     local btn_total_width = math.max(button_width, text_width + button_padding * 2)
 
                                     -- Add button border (left + right)
                                     btn_total_width = btn_total_width + button_border_width * 2
 
                                     -- Add button margin
                                     local button_margin = self:parse_size(button_style.margin, font_size) or 0
                                     btn_total_width = btn_total_width + button_margin * 2
 
                                     cell_width = math.max(cell_width, btn_total_width + 10)
                                 end
                             end
 
                             if not has_button then
                                 -- Get cell content width (text only)
                                 local cell_text = ""
                                 if #cell.children > 0 and cell.children[1].tag == "text" then
                                     cell_text = cell.children[1].content or ""
                                 else
                                     cell_text = cell.content or ""
                                 end
 
                                 local text_width = self.buffer:get_text_width(cell_text, font_size)
                                 cell_width = text_width + 10  -- padding
                             end
 
                             col_widths[col_index] = math.max(col_widths[col_index] or 0, cell_width)
                         end
                     end
                 end
             end
 
             -- Render table cells
             local current_y = table_y
             local row_index = 0
 
             for _, row in ipairs(element.children) do
                 if row.tag == "tr" then
                     row_index = row_index + 1
                     local current_x = table_x
                     local row_height = font_size + 8
 
                     -- Calculate row height based on content
                     for _, cell in ipairs(row.children) do
                         if cell.tag == "td" or cell.tag == "th" then
                             for _, child in ipairs(cell.children) do
                                 if child.tag == "button" then
                                     local button_style = self.style:get(child)
                                     local button_height = button_style["min-height"] and self:parse_size(button_style["min-height"], font_size, self.height) or 50
                                     local button_padding = self:parse_size(button_style.padding, font_size) or 0
                                     local button_margin = self:parse_size(button_style.margin, font_size) or 0
 
                                     -- Get button border width
                                     local button_border_width = 0
                                     if button_style.border or button_style["border-width"] then
                                         local border_str = button_style.border or button_style["border-width"] or "1px"
                                         button_border_width = self:parse_size(border_str:match("(%d+px)") or "1px", font_size)
                                     end
 
                                     local total_height = button_height + button_margin * 2 + button_border_width * 2 + 10
                                     row_height = math.max(row_height, total_height)
                                 end
                             end
                         end
                     end
 
                     local col_index = 0
 
                     for _, cell in ipairs(row.children) do
                         if cell.tag == "td" or cell.tag == "th" then
                             col_index = col_index + 1
                             local cell_width = col_widths[col_index]
 
                             -- Draw cell background
                             if cell.tag == "th" then
                                 self.buffer:fill_rect(current_x, current_y, cell_width, row_height, 240, 240, 240)
                             else
                                 self.buffer:fill_rect(current_x, current_y, cell_width, row_height, 255, 255, 255)
                             end
 
                             -- Draw cell border
                             if border_width > 0 then
                                 for i = 0, border_width - 1 do
                                     self.buffer:draw_rect_outline(
                                         current_x + i, current_y + i,
                                         cell_width - i * 2, row_height - i * 2,
                                         border_r, border_g, border_b
                                     )
                                 end
                             end
 
                             -- Render cell contents (text or interactive elements)
                             -- Save current position
                             local saved_x = self.x_offset
                             local saved_y = self.y_offset
                             local saved_line_height = self.line_height
 
                             -- Set position for cell contents
                             self.x_offset = current_x + 5
                             self.y_offset = current_y + 4
                             self.line_height = 0
 
                             -- Check if cell has interactive elements
                             local has_interactive = false
                             for _, child in ipairs(cell.children) do
                                 if child.tag == "button" or child.tag == "input" or child.tag == "select" or child.tag == "textarea" then
                                     has_interactive = true
                                     break
                                 end
                             end
 
                             if has_interactive then
                                 -- Render children (buttons, inputs, etc.)
                                 for _, child in ipairs(cell.children) do
                                     self:render_element(child, current_x + 5)
                                 end
                             else
                                 -- Just draw text
                                 local cell_text = ""
                                 if #cell.children > 0 and cell.children[1].tag == "text" then
                                     cell_text = cell.children[1].content or ""
                                 else
                                     cell_text = cell.content or ""
                                 end
 
                                 if cell_text ~= "" then
                                     local text_r_cell, text_g_cell, text_b_cell = text_r, text_g, text_b
                                     if cell.tag == "th" then
                                         -- Bold effect for headers (draw twice with offset)
                                         self.buffer:draw_text(cell_text, current_x + 5, current_y + 4, font_size, text_r_cell, text_g_cell, text_b_cell)
                                         self.buffer:draw_text(cell_text, current_x + 6, current_y + 4, font_size, text_r_cell, text_g_cell, text_b_cell)
                                     else
                                         self.buffer:draw_text(cell_text, current_x + 5, current_y + 4, font_size, text_r_cell, text_g_cell, text_b_cell)
                                     end
                                 end
                             end
 
                             -- Restore position
                             self.x_offset = saved_x
                             self.y_offset = saved_y
                             self.line_height = saved_line_height
 
                             current_x = current_x + cell_width
                         end
                     end
 
                     max_width = math.max(max_width, current_x - table_x)
                     current_y = current_y + row_height
                 end
             end
 
             self.y_offset = current_y + margin_bottom
             self.x_offset = base_x
         elseif element.tag == "li" then
             -- Draw bullet or number
             if list_index then
                 -- Numbered list (OL)
                 local number_text = tostring(list_index) .. "."
                 self.buffer:draw_text(number_text, base_x - 25, self.y_offset, font_size, text_r, text_g, text_b)
             else
                 -- Bullet list (UL) - use "•" character
                 self.buffer:draw_text("•", base_x - 10, self.y_offset, font_size, text_r, text_g, text_b)
             end
 
             -- Get content from text nodes
             local content = ""
             if #element.children > 0 then
                 for _, child in ipairs(element.children) do
                     if child.tag == "text" and child.content then
                         content = content .. child.content
                     end
                 end
             else
                 content = element.content or ""
             end
 
             -- Apply text-transform
             content = self:apply_text_transform(content, text_transform)
 
             if content ~= "" then
                 self.buffer:draw_text(content, base_x, self.y_offset, font_size, text_r, text_g, text_b)
             end
             self.y_offset = self.y_offset + font_size + 2
         elseif element.tag == "br" then
             if self.line_height > 0 then
                 self.y_offset = self.y_offset + self.line_height
                 self.line_height = 0
             end
             self.y_offset = self.y_offset + font_size
             self.x_offset = base_x
         elseif element.tag == "hr" then
             -- Render horizontal rule
             if self.line_height > 0 then
                 self.y_offset = self.y_offset + self.line_height
                 self.line_height = 0
             end
             self.y_offset = self.y_offset + 10  -- Space before hr
 
             local hr_width = self.buffer.width - base_x - 20  -- Full width minus margins
             local hr_height = 1  -- Line thickness
 
             element:set_layout(base_x, self.y_offset, hr_width, hr_height)
 
             -- Draw horizontal line (gray color: 128, 128, 128)
             self.buffer:fill_rect(base_x, self.y_offset, hr_width, hr_height, 128, 128, 128)
 
             self.y_offset = self.y_offset + hr_height + 10  -- Space after hr
             self.x_offset = base_x
         elseif element.tag == "input" then
             local input_type = element.attributes.type or "text"
 
             if input_type == "checkbox" then
                 -- Render checkbox inline
                 local box_size = font_size + 2
                 element:set_layout(self.x_offset, self.y_offset, box_size, box_size)
 
                 -- Draw checkbox box
                 self.buffer:draw_rect_outline(self.x_offset, self.y_offset, box_size, box_size, 0, 0, 0)
                 self.buffer:fill_rect(self.x_offset + 1, self.y_offset + 1, box_size - 2, box_size - 2, 255, 255, 255)
 
                 -- Draw checkmark if checked
                 if self.document and self.document:is_checked(element) then
                     -- Draw an X checkmark
                     local cx = self.x_offset + 3
                     local cy = self.y_offset + 3
                     local csize = box_size - 6
                     -- Diagonal lines for checkmark
                     for i = 0, csize do
                         self.buffer:set_pixel(cx + i, cy + i, 0, 0, 0)
                         self.buffer:set_pixel(cx + i + 1, cy + i, 0, 0, 0)
                         self.buffer:set_pixel(cx + csize - i, cy + i, 0, 0, 0)
                         self.buffer:set_pixel(cx + csize - i - 1, cy + i, 0, 0, 0)
                     end
                 end
 
                 self.x_offset = self.x_offset + box_size + 4
                 self.line_height = math.max(self.line_height, box_size)
 
             elseif input_type == "radio" then
                 -- Render radio button inline
                 local radio_size = font_size + 2
                 element:set_layout(self.x_offset, self.y_offset, radio_size, radio_size)
 
                 -- Draw radio circle (outline)
                 local center_x = self.x_offset + radio_size / 2
                 local center_y = self.y_offset + radio_size / 2
                 local radius = radio_size / 2 - 1
 
                 -- Draw circle outline
                 for angle = 0, 360, 5 do
                     local rad = math.rad(angle)
                     local x = center_x + radius * math.cos(rad)
                     local y = center_y + radius * math.sin(rad)
                     self.buffer:set_pixel(math.floor(x), math.floor(y), 0, 0, 0)
                 end
 
                 -- Fill circle with white
                 for dy = -radius, radius do
                     for dx = -radius, radius do
                         if dx * dx + dy * dy < radius * radius then
                             self.buffer:set_pixel(
                                 math.floor(center_x + dx),
                                 math.floor(center_y + dy),
                                 255, 255, 255
                             )
                         end
                     end
                 end
 
                 -- Redraw outline
                 for angle = 0, 360, 5 do
                     local rad = math.rad(angle)
                     local x = center_x + radius * math.cos(rad)
                     local y = center_y + radius * math.sin(rad)
                     self.buffer:set_pixel(math.floor(x), math.floor(y), 0, 0, 0)
                 end
 
                 -- Draw filled circle if checked
                 if self.document and self.document:is_checked(element) then
                     local inner_radius = radius - 3
                     for dy = -inner_radius, inner_radius do
                         for dx = -inner_radius, inner_radius do
                             if dx * dx + dy * dy < inner_radius * inner_radius then
                                 self.buffer:set_pixel(
                                     math.floor(center_x + dx),
                                     math.floor(center_y + dy),
                                     0, 0, 0
                                 )
                             end
                         end
                     end
                 end
 
                 self.x_offset = self.x_offset + radio_size + 4
                 self.line_height = math.max(self.line_height, radio_size)
 
             else
                 -- Text input (or other input types) - render as block
                 if self.line_height > 0 then
                     self.y_offset = self.y_offset + self.line_height
                     self.line_height = 0
                 end
                 self.x_offset = base_x
 
                 -- Update element position for click detection
                 local input_width = 200
                 local input_height = font_size + 8
                 element:set_layout(self.x_offset, self.y_offset, input_width, input_height)
 
                 self.buffer:draw_rect_outline(self.x_offset, self.y_offset, input_width, input_height, 0, 0, 0)
 
                 -- Check if focused
                 local is_focused = self.document and self.document:is_focused(element)
                 local text = ""
                 local text_color_r, text_color_g, text_color_b = 0, 0, 0
 
                 if is_focused then
                     -- Show actual value (black text)
                     text = self.document:get_input_value(element) or ""
                     text_color_r, text_color_g, text_color_b = 0, 0, 0
 
                     -- Draw cursor (2 pixels wide)
                     local cursor_pos = self.document:get_cursor_position(element) or 0
                     local text_before_cursor = text:sub(1, cursor_pos)
                     local cursor_x = self.x_offset + 4 + self.buffer:get_text_width(text_before_cursor, font_size)
 
                     -- Draw cursor line (2 pixels wide for visibility)
                     for i = 0, font_size do
                         self.buffer:set_pixel(cursor_x, self.y_offset + 4 + i, 0, 0, 0)
                         self.buffer:set_pixel(cursor_x + 1, self.y_offset + 4 + i, 0, 0, 0)
                     end
                 else
                     -- Show placeholder (gray) or value
                     if self.document then
                         local value = self.document:get_input_value(element)
                         if value and value ~= "" then
                             text = value
                             text_color_r, text_color_g, text_color_b = 0, 0, 0
                         else
                             text = element.attributes.placeholder or ""
                             text_color_r, text_color_g, text_color_b = 100, 100, 100
                         end
                     else
                         -- No document, show placeholder or attribute value
                         text = element.attributes.value or element.attributes.placeholder or ""
                         text_color_r, text_color_g, text_color_b = 100, 100, 100
                     end
                 end
 
                 if text ~= "" then
                     self.buffer:draw_text(text, self.x_offset + 4, self.y_offset + 4, font_size, text_color_r, text_color_g, text_color_b)
                 end
 
                 self.y_offset = self.y_offset + input_height + 2
                 self.x_offset = base_x
             end
         elseif element.tag == "textarea" then
             -- Render textarea as block
             if self.line_height > 0 then
                 self.y_offset = self.y_offset + self.line_height
                 self.line_height = 0
             end
             self.x_offset = base_x
 
             -- Textarea dimensions (larger than input)
             local textarea_width = 300
             local textarea_height = font_size * 4 + 8  -- 4 lines tall
             element:set_layout(self.x_offset, self.y_offset, textarea_width, textarea_height)
 
             self.buffer:draw_rect_outline(self.x_offset, self.y_offset, textarea_width, textarea_height, 0, 0, 0)
 
             -- Check if focused
             local is_focused = self.document and self.document:is_focused(element)
             local text = ""
             local text_color_r, text_color_g, text_color_b = 0, 0, 0
 
             if is_focused then
                 -- Show actual value (black text)
                 text = self.document:get_input_value(element) or ""
                 text_color_r, text_color_g, text_color_b = 0, 0, 0
 
                 -- Draw cursor (2 pixels wide)
                 local cursor_pos = self.document:get_cursor_position(element) or 0
                 local text_before_cursor = text:sub(1, cursor_pos)
                 local cursor_x = self.x_offset + 4 + self.buffer:get_text_width(text_before_cursor, font_size)
 
                 -- Draw cursor line (2 pixels wide for visibility)
                 for i = 0, font_size do
                     self.buffer:set_pixel(cursor_x, self.y_offset + 4 + i, 0, 0, 0)
                     self.buffer:set_pixel(cursor_x + 1, self.y_offset + 4 + i, 0, 0, 0)
                 end
             else
                 -- Show placeholder (gray) or value
                 if self.document then
                     local value = self.document:get_input_value(element)
                     if value and value ~= "" then
                         text = value
                         text_color_r, text_color_g, text_color_b = 0, 0, 0
                     else
                         text = element.attributes.placeholder or ""
                         text_color_r, text_color_g, text_color_b = 100, 100, 100
                     end
                 else
                     -- No document, show placeholder or content
                     text = element.content or element.attributes.placeholder or ""
                     text_color_r, text_color_g, text_color_b = 100, 100, 100
                 end
             end
 
             if text ~= "" then
                 self.buffer:draw_text(text, self.x_offset + 4, self.y_offset + 4, font_size, text_color_r, text_color_g, text_color_b)
             end
 
             self.y_offset = self.y_offset + textarea_height + 2
             self.x_offset = base_x
         elseif element.tag == "select" then
             -- Render select dropdown
             if self.line_height > 0 then
                 self.y_offset = self.y_offset + self.line_height
                 self.line_height = 0
             end
             self.x_offset = base_x
 
             -- Helper to get option text
             local function get_option_text(option)
                 if not option then return "" end
                 -- Try text child first
                 if #option.children > 0 and option.children[1].tag == "text" then
                     return option.children[1].content or ""
                 end
                 -- Fall back to content or value attribute
                 return option.content or option.attributes.value or ""
             end
 
             -- Get selected option text
             local selected_text = ""
             if self.document then
                 local selected_option = self.document:get_selected_option(element)
                 if selected_option then
                     selected_text = get_option_text(selected_option)
                 else
                     -- No selection, try to find first option or default selected
                     for _, child in ipairs(element.children) do
                         if child.tag == "option" then
                             if child.attributes.selected then
                                 selected_text = get_option_text(child)
                                 self.document:set_selected_option(element, child)
                                 break
                             elseif selected_text == "" then
                                 -- Use first option as fallback
                                 selected_text = get_option_text(child)
                                 self.document:set_selected_option(element, child)
                             end
                         end
                     end
                 end
             else
                 -- No document, find first/selected option
                 for _, child in ipairs(element.children) do
                     if child.tag == "option" then
                         if child.attributes.selected or selected_text == "" then
                             selected_text = get_option_text(child)
                             if child.attributes.selected then break end
                         end
                     end
                 end
             end
 
             -- Dropdown dimensions
             local select_width = 200
             local select_height = font_size + 8
             element:set_layout(self.x_offset, self.y_offset, select_width, select_height)
 
             -- Draw select box
             self.buffer:fill_rect(self.x_offset, self.y_offset, select_width, select_height, 255, 255, 255)
             self.buffer:draw_rect_outline(self.x_offset, self.y_offset, select_width, select_height, 0, 0, 0)
 
             -- Draw selected text
             if selected_text ~= "" then
                 self.buffer:draw_text(selected_text, self.x_offset + 4, self.y_offset + 4, font_size, 0, 0, 0)
             end
 
             -- Draw dropdown arrow
             local arrow_x = self.x_offset + select_width - 20
             local arrow_y = self.y_offset + select_height / 2
             -- Simple down arrow (triangle)
             for i = 0, 5 do
                 for j = -i, i do
                     self.buffer:set_pixel(arrow_x + j, math.floor(arrow_y + i), 0, 0, 0)
                 end
             end
 
             self.y_offset = self.y_offset + select_height + 2
             self.x_offset = base_x
         else
             -- Regular block element (h1, p, div, etc)
             local start_y = self.y_offset
             local content_x = base_x + padding_left
             local content_width = 0
             local content_height = 0
 
             -- Check if element has explicit height and vertical-align
             local explicit_height = style.height and self:parse_size(style.height, font_size, self.height)
 
             -- Apply min/max height constraints
             if explicit_height then
                 if style["min-height"] then
                     local min_height = self:parse_size(style["min-height"], font_size, self.height)
                     explicit_height = math.max(explicit_height, min_height)
                 end
                 if style["max-height"] then
                     local max_height = self:parse_size(style["max-height"], font_size, self.height)
                     explicit_height = math.min(explicit_height, max_height)
                 end
             end
 
             local vertical_align = style["vertical-align"] or "top"
             local vertical_offset = 0
 
             -- Apply top padding
             self.y_offset = self.y_offset + padding_top
             local content_start_y = self.y_offset
 
             if #element.children > 0 then
                 -- Calculate available width for this element
                 local available_width
 
                 -- Check if element has explicit width
                 if style.width then
                     -- Parent width for percentage calculation
                     local parent_width
                     if self.max_x then
                         parent_width = self.max_x - base_x
                     else
                         parent_width = self.buffer.width - base_x - 20
                     end
 
                     -- Parse width (supports px, %, vw, vh, em)
                     local explicit_width = self:parse_size(style.width, font_size, parent_width)
 
                     -- Apply min/max width constraints
                     if style["min-width"] then
                         local min_width = self:parse_size(style["min-width"], font_size, parent_width)
                         explicit_width = math.max(explicit_width, min_width)
                     end
                     if style["max-width"] then
                         local max_width = self:parse_size(style["max-width"], font_size, parent_width)
                         explicit_width = math.min(explicit_width, max_width)
                     end
 
                     available_width = explicit_width - padding_left - padding_right
                 elseif self.max_x then
                     -- If there's a constrained width from parent, use it
                     available_width = self.max_x - base_x - padding_right
                 else
                     -- Otherwise use full buffer width
                     available_width = self.buffer.width - base_x - padding_right - 20
                 end
 
                 -- Set max_x for children (they should not exceed this element's content area)
                 -- Content area ends at: base_x + padding_left + (available_width - padding_left) = base_x + available_width
                 local saved_max_x = self.max_x
                 self.max_x = base_x + available_width
 
                 -- Handle text-align
                 local text_align = style["text-align"] or "left"
                 local align_offset = 0
 
                 if text_align == "center" or text_align == "right" then
                     -- Calculate total content width
                     local temp_x = content_x
                     for _, child in ipairs(element.children) do
                         if child.tag == "text" and child.content then
                             local text_width = self.buffer:get_text_width(child.content, font_size)
                             temp_x = temp_x + text_width
                         end
                     end
                     local total_content_width = temp_x - content_x
 
                     if text_align == "center" then
                         align_offset = math.floor((available_width - total_content_width) / 2)
                     elseif text_align == "right" then
                         align_offset = available_width - total_content_width - padding_right
                     end
                 end
 
                 -- Element with children - render children inline with padding
                 self.x_offset = content_x + align_offset
                 for _, child in ipairs(element.children) do
                     self:render_element(child, content_x + align_offset)
                 end
 
                 -- Advance by line_height to account for the last line
                 if self.line_height > 0 then
                     self.y_offset = self.y_offset + self.line_height
                     self.line_height = 0
                 end
 
                 -- Restore max_x
                 self.max_x = saved_max_x
 
                 -- Calculate actual content height (without padding)
                 local actual_content_height = self.y_offset - content_start_y
 
                 -- Handle vertical-align if explicit height is set
                 if explicit_height and vertical_align == "middle" then
                     local available_height = explicit_height - padding_top - padding_bottom
                     if actual_content_height < available_height then
                         vertical_offset = math.floor((available_height - actual_content_height) / 2)
                     end
                 end
 
                 -- Apply bottom padding (or use explicit height)
                 if explicit_height then
                     self.y_offset = start_y + explicit_height
                 else
                     self.y_offset = self.y_offset + padding_bottom
                 end
 
                 content_height = self.y_offset - start_y
                 content_width = available_width
 
                 -- Draw box-shadow if specified
                 if style["box-shadow"] then
                     -- Simple parsing: "2px 2px 4px #000000" or "2px 2px 4px rgba(0,0,0,0.5)"
                     local shadow_match = style["box-shadow"]:match("([%d]+)px%s+([%d]+)px%s+([%d]+)px%s+(#%x+)")
                     if shadow_match then
                         local offset_x, offset_y, blur, color = shadow_match:match("([%d]+)px%s+([%d]+)px%s+([%d]+)px%s+(#%x+)")
                         if offset_x then
                             offset_x = tonumber(offset_x) or 2
                             offset_y = tonumber(offset_y) or 2
                             blur = tonumber(blur) or 4
                             local shadow_r, shadow_g, shadow_b = self:parse_color(color or "#808080")
                             -- Simple shadow - just draw a slightly offset darker rectangle
                             self.buffer:fill_rect(base_x + offset_x, start_y + offset_y, content_width, content_height, shadow_r, shadow_g, shadow_b)
                         end
                     end
                 end
 
                 -- Draw background if specified and not transparent
                 if style["background-color"] and style["background-color"] ~= "transparent" and bg_r and bg_g and bg_b then
                     -- Draw background rectangle behind the content (includes padding area)
                     self.buffer:fill_rect(base_x, start_y, content_width, content_height, bg_r, bg_g, bg_b)
 
                     -- Re-render children on top of background
                     local saved_y = self.y_offset
                     self.y_offset = start_y + padding_top + vertical_offset
                     self.x_offset = content_x + align_offset
                     -- Re-set max_x for children during re-render
                     self.max_x = base_x + available_width
                     for _, child in ipairs(element.children) do
                         self:render_element(child, content_x + align_offset)
                     end
                     self.y_offset = saved_y
                     self.max_x = saved_max_x  -- Restore again after re-render
                 end
 
                 -- Draw border if specified
                 if border_width > 0 then
                     self:draw_border(base_x, start_y, content_width, content_height, border_width, border_r, border_g, border_b, border_radius)
                 end
 
                 self.x_offset = base_x
             elseif element.content and element.content ~= "" then
                 -- Simple element with just text content
                 local text_width = self.buffer:get_text_width(element.content, font_size)
                 content_height = padding_top + font_size + padding_bottom
                 content_width = padding_left + text_width + padding_right
 
                 -- Draw background if specified
                 if style["background-color"] and style["background-color"] ~= "transparent" and bg_r and bg_g and bg_b then
                     self.buffer:fill_rect(base_x, start_y, content_width, content_height, bg_r, bg_g, bg_b)
                 end
 
                 -- Draw border if specified
                 if border_width > 0 then
                     self:draw_border(base_x, start_y, content_width, content_height, border_width, border_r, border_g, border_b, border_radius)
                 end
 
                 local text_y = self.y_offset
                 self.buffer:draw_text(element.content, content_x, text_y, font_size, text_r, text_g, text_b)
                 self.y_offset = self.y_offset + font_size + padding_bottom
                 self.x_offset = base_x
                 -- Debug h3
                 if element.tag == "h3" then
                     print(string.format("H3 '%s': drew at y=%d, after y_offset=%d", element.content or "", text_y, self.y_offset))
                 end
             end
         end
 
         self.y_offset = self.y_offset + margin_bottom
     else
         -- Inline element - stay on current line
         if element.tag == "text" then
             -- Text node - render inline
             if element.content and element.content ~= "" then
                 -- Get parent's style for text nodes
                 local parent_style = element.parent and self.style:get(element.parent) or style
                 local parent_r, parent_g, parent_b = self:parse_color(parent_style.color)
                 local text_decoration = parent_style["text-decoration"]
                 local parent_text_transform = parent_style["text-transform"]
 
                 -- Debug h3 text
                 if element.parent and element.parent.tag == "h3" then
                     print(string.format("H3 TEXT '%s': drawing at x=%d, y=%d", element.content:sub(1, 20), self.x_offset, self.y_offset))
                 end
 
                 -- Apply text-transform from parent
                 local transformed_content = self:apply_text_transform(element.content, parent_text_transform)
 
                 -- Calculate available width for wrapping
                 local max_width = (self.max_x or self.width) - base_x
 
                 -- Determine wrap mode from CSS properties
                 local wrap_mode = "normal"  -- default
 
                 -- Check white-space property
                 local white_space = parent_style["white-space"]
                 if white_space == "nowrap" or white_space == "pre" then
                     wrap_mode = "nowrap"
                 end
 
                 -- Check word-break property (takes precedence over word-wrap)
                 local word_break = parent_style["word-break"]
                 if word_break == "break-all" then
                     wrap_mode = "break-all"
                 elseif word_break == "break-word" then
                     wrap_mode = "break-word"
                 end
 
                 -- Check word-wrap / overflow-wrap property
                 local word_wrap = parent_style["word-wrap"] or parent_style["overflow-wrap"]
                 if word_wrap == "break-word" and wrap_mode == "normal" then
                     wrap_mode = "break-word"
                 end
 
                 -- Use word wrapping for text
                 self:draw_wrapped_text(transformed_content, self.x_offset, self.y_offset, max_width, font_size, parent_r, parent_g, parent_b, text_decoration, base_x, wrap_mode)
             end
             self.line_height = math.max(self.line_height, font_size)
         elseif element.tag == "button" then
             local padding = self:parse_size(style.padding, font_size)
 
             -- Get button border width
             local btn_border_width = 0
             if style.border or style["border-width"] then
                 local border_str = style.border or style["border-width"] or "1px"
                 btn_border_width = self:parse_size(border_str:match("(%d+px)") or "1px", font_size)
             end
 
             -- Get button content from text nodes
             local content = ""
             if #element.children > 0 then
                 for _, child in ipairs(element.children) do
                     if child.tag == "text" and child.content then
                         content = content .. child.content
                     end
                 end
             else
                 content = element.content or ""
             end
 
             -- Apply text-transform
             content = self:apply_text_transform(content, text_transform)
 
             local text_width = self.buffer:get_text_width(content, font_size)
 
             -- CSS Box Model: width property specifies content width (not including padding/border)
             local content_width, content_height
 
             if style.width then
                 -- Explicit width is content width (CSS standard box model)
                 content_width = self:parse_size(style.width, font_size, self.width)
             else
                 -- Auto width: size to fit text + padding
                 content_width = text_width
             end
 
             if style.height or style["min-height"] then
                 content_height = style.height and self:parse_size(style.height, font_size, self.height) or self:parse_size(style["min-height"], font_size, self.height)
             else
                 -- Auto height: size to fit text
                 content_height = font_size
             end
 
             -- Apply min/max constraints to content dimensions
             if style["min-width"] then
                 local min_width = self:parse_size(style["min-width"], font_size, self.width)
                 content_width = math.max(content_width, min_width)
             end
             if style["max-width"] then
                 local max_width = self:parse_size(style["max-width"], font_size, self.width)
                 content_width = math.min(content_width, max_width)
             end
 
             -- Total button size = content + padding + border (CSS box model)
             local btn_width = content_width + padding * 2 + btn_border_width * 2
             local btn_height = content_height + padding * 2 + btn_border_width * 2
 
             -- Set layout for click detection
             element:set_layout(self.x_offset, self.y_offset, btn_width, btn_height)
 
             -- Check if button is pressed
             local is_pressed = self.document and self.document:is_pressed(element)
             local final_bg_r, final_bg_g, final_bg_b
 
             if is_pressed then
                 -- Dark grey when pressed
                 final_bg_r, final_bg_g, final_bg_b = 85, 85, 85
             else
                 final_bg_r, final_bg_g, final_bg_b = bg_r, bg_g, bg_b
             end
 
             -- Draw border first (full button size)
             if btn_border_width > 0 then
                 -- Fill the entire button area with border color
                 self.buffer:fill_rect(self.x_offset, self.y_offset, btn_width, btn_height, border_r, border_g, border_b)
             end
 
             -- Draw background (inside border, includes padding area)
             if style["background-color"] ~= "transparent" then
                 self.buffer:fill_rect(
                     self.x_offset + btn_border_width,
                     self.y_offset + btn_border_width,
                     content_width + padding * 2,
                     content_height + padding * 2,
                     final_bg_r, final_bg_g, final_bg_b
                 )
             end
 
             -- Draw text (inside border and padding)
             self.buffer:draw_text(
                 content,
                 self.x_offset + btn_border_width + padding,
                 self.y_offset + btn_border_width + padding,
                 font_size,
                 text_r, text_g, text_b
             )
 
             self.x_offset = self.x_offset + btn_width + 2  -- Small gap after button
             self.line_height = math.max(self.line_height, btn_height)
         elseif element.tag == "img" then
             -- Render image
             local src = element.attributes.src
             if src then
                 -- Debug: check position
                 print(string.format("IMG: x_offset=%d, y_offset=%d, line_height=%d, base_x=%d",
                     self.x_offset, self.y_offset, self.line_height, base_x))
 
                 -- Resolve image path relative to base_path
                 local image_path = src
                 if self.document and self.document.base_path then
                     image_path = self.document.base_path .. src
                 end
 
                 -- Parse width and height attributes
                 local img_width = element.attributes.width and tonumber(element.attributes.width)
                 local img_height = element.attributes.height and tonumber(element.attributes.height)
 
                 -- Load and parse image
                 local image, err = image_parser.load_image(image_path, img_width, img_height)
 
                 if image then
                     local actual_width = image.width
                     local actual_height = image.height
 
                     -- Check parent's white-space property
                     local parent_style = element.parent and self.style:get(element.parent) or style
                     local white_space = parent_style["white-space"]
                     local should_wrap = (white_space ~= "nowrap" and white_space ~= "pre")
 
                     -- Check if we need to wrap to next line (only if wrapping is allowed)
                     if should_wrap and self.x_offset + actual_width > self.width then
                         self.y_offset = self.y_offset + self.line_height
                         self.line_height = 0
                         self.x_offset = base_x
                     end
 
                     -- Set layout for potential click detection
                     element:set_layout(self.x_offset, self.y_offset, actual_width, actual_height)
 
                     -- Draw the image (use Image object if available, otherwise pixels)
                     local image_data = image.image or image.pixels
                     self.buffer:draw_image(image_data, self.x_offset, self.y_offset, actual_width, actual_height)
 
                     self.x_offset = self.x_offset + actual_width + 2
                     self.line_height = math.max(self.line_height, actual_height)
                 else
                     -- Image failed to load - draw a placeholder
                     local placeholder_width = img_width or 100
                     local placeholder_height = img_height or 100
 
                     -- Draw gray box with X
                     self.buffer:fill_rect(self.x_offset, self.y_offset, placeholder_width, placeholder_height, 200, 200, 200)
                     self.buffer:draw_rect_outline(self.x_offset, self.y_offset, placeholder_width, placeholder_height, 128, 128, 128)
 
                     -- Draw X
                     for i = 0, math.min(placeholder_width, placeholder_height) - 1 do
                         self.buffer:set_pixel(self.x_offset + i, self.y_offset + i, 255, 0, 0)
                         self.buffer:set_pixel(self.x_offset + placeholder_width - 1 - i, self.y_offset + i, 255, 0, 0)
                     end
 
                     element:set_layout(self.x_offset, self.y_offset, placeholder_width, placeholder_height)
                     self.x_offset = self.x_offset + placeholder_width + 2
                     self.line_height = math.max(self.line_height, placeholder_height)
                 end
             end
         elseif element.tag == "a" then
             -- Render anchor link (underlined, blue text)
             local link_r, link_g, link_b = 0, 0, 255  -- Blue color for links
 
             -- Get link text content
             local content = ""
             if #element.children > 0 then
                 for _, child in ipairs(element.children) do
                     if child.tag == "text" and child.content then
                         content = content .. child.content
                     end
                 end
             else
                 content = element.content or element.attributes.href or "link"
             end
 
             local text_width = self.buffer:get_text_width(content, font_size)
 
             -- Set layout for click detection
             element:set_layout(self.x_offset, self.y_offset, text_width, font_size)
 
             -- Draw link text in blue
             self.buffer:draw_text(content, self.x_offset, self.y_offset, font_size, link_r, link_g, link_b)
 
             -- Draw underline
             local underline_y = self.y_offset + font_size + 1
             self.buffer:fill_rect(self.x_offset, underline_y, text_width, 1, link_r, link_g, link_b)
 
             self.x_offset = self.x_offset + text_width + 2
             self.line_height = math.max(self.line_height, font_size)
         else
             -- Regular inline element (span, label, em, strong, etc)
             local start_x = self.x_offset
             local content_width = 0
             local has_padding = (padding_left > 0 or padding_right > 0 or padding_top > 0 or padding_bottom > 0)
 
             -- Apply left padding
             self.x_offset = self.x_offset + padding_left
 
             -- First pass: calculate width and render content
             if #element.children > 0 then
                 for _, child in ipairs(element.children) do
                     self:render_element(child, base_x)
                 end
                 content_width = self.x_offset - start_x
             elseif element.content and element.content ~= "" then
                 local text_width = self.buffer:get_text_width(element.content, font_size)
                 self.buffer:draw_text(element.content, self.x_offset, self.y_offset, font_size, text_r, text_g, text_b)
                 self.x_offset = self.x_offset + text_width
                 content_width = padding_left + text_width + padding_right
             end
 
             -- Apply right padding
             self.x_offset = self.x_offset + padding_right
 
             -- Draw background if specified
             if style["background-color"] and style["background-color"] ~= "transparent" and bg_r and bg_g and bg_b then
                 local total_width = self.x_offset - start_x
                 local total_height = font_size + padding_top + padding_bottom
 
                 -- Draw background rectangle (includes padding)
                 self.buffer:fill_rect(start_x, self.y_offset - padding_top, total_width, total_height, bg_r, bg_g, bg_b)
 
                 -- Re-render content on top
                 self.x_offset = start_x + padding_left
                 if #element.children > 0 then
                     for _, child in ipairs(element.children) do
                         self:render_element(child, base_x)
                     end
                 elseif element.content and element.content ~= "" then
                     self.buffer:draw_text(element.content, self.x_offset, self.y_offset, font_size, text_r, text_g, text_b)
                 end
 
                 -- Restore position after re-render
                 self.x_offset = start_x + total_width
             end
 
             self.line_height = math.max(self.line_height, font_size + padding_top + padding_bottom)
         end
     end
 end
 
 function HTMLRenderer:render(dom)
     if not dom.root then return end
 
     -- Render all children of root
     for _, child in ipairs(dom.root.children) do
         self:render_element(child)
     end
 end
 
 function HTMLRenderer:save(filename)
     self.buffer:save(filename)
 end
 
 function HTMLRenderer:drawToScreen(gfx)
     self.buffer:drawToScreen(gfx)
 end
 
 -- ============================================================================
 -- Module API
 -- ============================================================================
 
 -- Extract scripts and styles from HTML content
 local function extract_resources(html_content, base_path)
     base_path = base_path or "input/"
 
     local scripts = {}
     local styles = {}
 
     -- Extract inline <script> tags (with or without attributes)
     for script_content in html_content:gmatch("<script[^>]*>%s*(.-)%s*</script>") do
         table.insert(scripts, {
             type = "inline",
             code = script_content
         })
     end
 
     -- Extract external <script src="..."> tags
     for src in html_content:gmatch('<script%s+src="([^"]+)"') do
         local script_path = base_path .. src
         local file = io.open(script_path, "r")
         if file then
             local code = file:read("*all")
             file:close()
             table.insert(scripts, {
                 type = "external",
                 src = src,
                 code = code
             })
         else
             print("Warning: Could not load script: " .. script_path)
         end
     end
 
     -- Extract inline <style> tags (with or without attributes)
     for style_content in html_content:gmatch("<style[^>]*>%s*(.-)%s*</style>") do
         table.insert(styles, {
             type = "inline",
             css = style_content
         })
     end
 
     -- Extract external <link href="..." rel="stylesheet"> tags
     for href in html_content:gmatch('<link%s+[^>]*href="([^"]+)"[^>]*>') do
         -- Check if it's a stylesheet
         local tag = html_content:match('<link%s+[^>]*href="' .. href:gsub("%-", "%%-") .. '"[^>]*>')
         if tag and tag:match('rel="stylesheet"') then
             local css_path = base_path .. href
             local file = io.open(css_path, "r")
             if file then
                 local css = file:read("*all")
                 file:close()
                 table.insert(styles, {
                     type = "external",
                     href = href,
                     css = css
                 })
             else
                 print("Warning: Could not load stylesheet: " .. css_path)
             end
         end
     end
 
     return scripts, styles
 end
 
 -- Open HTML file with all resources (scripts and styles)
 local function openAll(html_path)
     -- Determine base path
     local base_path = html_path:match("^(.*/)")
     if not base_path then
         base_path = ""
     end
 
     -- Read HTML
     local html_file = io.open(html_path, "r")
     if not html_file then
         error("Could not open HTML file: " .. html_path)
     end
     local html_content = html_file:read("*all")
     html_file:close()
 
     -- Extract all resources
     local scripts, styles = extract_resources(html_content, base_path)
 
     -- Parse HTML
     local parser = HTMLParser:new()
     local dom = parser:parse(html_content)
 
     -- Load default styles
     local style_manager = Style:new(dom)
 
     -- Load all extracted styles
     for _, style in ipairs(styles) do
         style_manager:load(style.css)
     end
 
     -- Create Lua engine first (without document)
     local engine = LuaEngine:new(nil)
 
     -- Create Document with lua_engine
     local doc = Document:new(dom, style_manager, engine)
 
     -- Store base path for resolving relative references when saving
     doc.base_path = base_path
 
     -- Store external styles for inlining when saving
     doc.external_styles = {}
     for _, style in ipairs(styles) do
         if style.type == "external" then
             table.insert(doc.external_styles, style.css)
         end
     end
 
     -- Now update engine's document reference
     engine.document = doc
 
     -- Add render method to Document
     function doc:render(output_path, width, height)
         width = width or 1200
         height = height or 900
 
         local renderer = HTMLRenderer:new(width, height, self.style, self)
         renderer:render(self.dom)
 
         -- If output_path is a table with a drawToScreen method, it's a SafeGFX instance
         if type(output_path) == "table" and (output_path.setPixel or output_path.fillRect) then
             renderer:drawToScreen(output_path)
         else
             -- Otherwise save to PNG file
             renderer:save(output_path)
         end
     end
 
     -- Override save_dom to use stored base_path
     local original_save_dom = doc.save_dom
     function doc:save_dom(filename, custom_base_path)
         original_save_dom(self, filename, custom_base_path or self.base_path)
     end
 
     -- Add all scripts to engine
     for i, script in ipairs(scripts) do
         local name = script.src or ("inline_script_" .. i)
         engine:add_script(script.code, name)
     end
 
     -- Run all scripts
     engine:run_all_scripts()
 
     -- Execute onload handler if present on body element
     local function find_body(element)
         if element.tag == "body" then
             return element
         end
         if element.children then
             for _, child in ipairs(element.children) do
                 local body = find_body(child)
                 if body then return body end
             end
         end
         return nil
     end
 
     local body = find_body(dom)
     if body and body.attributes and body.attributes.onload then
         local success, err = pcall(function()
             engine:run_script(body.attributes.onload, "onload_handler")
         end)
         if not success then
             print("Error in onload handler: " .. tostring(err))
         end
     end
 
     return doc
 end
 
 -- Open an HTML file and return a Document
 local function open(html_path, css_path)
     -- Read HTML
     local html_file = io.open(html_path, "r")
     if not html_file then
         error("Could not open HTML file: " .. html_path)
     end
     local html_content = html_file:read("*all")
     html_file:close()
 
     -- Parse HTML
     local parser = HTMLParser:new()
     local dom = parser:parse(html_content)
 
     -- Load styles
     local style_manager = Style:new(dom)
 
     -- Extract and load inline <style> tags
     for style_content in html_content:gmatch("<style[^>]*>%s*(.-)%s*</style>") do
         style_manager:load(style_content)
     end
 
     -- Load custom CSS if provided
     if css_path then
         local css_file = io.open(css_path, "r")
         if css_file then
             local css_content = css_file:read("*all")
             css_file:close()
             style_manager:load(css_content)
         end
     end
 
     -- Create and return Document
     local doc = Document:new(dom, style_manager)
 
     -- Add render method to Document
     function doc:render(output_path, width, height)
         width = width or 1200
         height = height or 900
 
         local renderer = HTMLRenderer:new(width, height, self.style, self)
         renderer:render(self.dom)
 
         -- If output_path is a table with a drawToScreen method, it's a SafeGFX instance
         if type(output_path) == "table" and (output_path.setPixel or output_path.fillRect) then
             renderer:drawToScreen(output_path)
         else
             -- Otherwise save to PNG file
             renderer:save(output_path)
         end
     end
 
     return doc
 end
 
 -- Export module
 -- Resume state from a state file
 local function resumeState(state_name)
     local state_file = "states/" .. state_name .. ".lua"
 
     -- Check if file exists
     local test_file = io.open(state_file, "r")
     if not test_file then
         return false, "State file not found: " .. state_file
     end
     test_file:close()
 
     -- Load state file
     local state_fn, err = loadfile(state_file)
     if not state_fn then
         return false, "Could not load state file: " .. tostring(err)
     end
 
     local state = state_fn()
     if not state then
         return false, "State file did not return a table"
     end
 
     -- Reconstruct DOM from state
     local dom_module = require("dom")
     local Element = dom_module.Element
     local DOM = dom_module.DOM
 
     local function reconstruct_element(elem_data)
         if not elem_data then return nil end
 
         local elem = Element:new(elem_data.tag, elem_data.attributes or {})
         elem.id = elem_data.id
         elem.content = elem_data.content or ""
         elem.classes = elem_data.classes or {}
 
         -- Reconstruct children recursively
         if elem_data.children then
             for _, child_data in ipairs(elem_data.children) do
                 local child = reconstruct_element(child_data)
                 elem:add_child(child)
             end
         end
 
         return elem
     end
 
     -- Create DOM
     local dom = DOM:new()
     if state.dom then
         dom.root = reconstruct_element(state.dom)
     else
         error("State file does not contain DOM tree")
     end
 
     -- Reconstruct Style manager
     local style_module = require("style")
     local Style = style_module.Style
 
     local style_manager = Style:new(dom)
 
     -- Restore style rules
     if state.style_rules then
         style_manager.rules = {}
         for _, rule_data in ipairs(state.style_rules) do
             local rule = {
                 selector = rule_data.selector,
                 declarations = rule_data.declarations,
                 specificity = rule_data.specificity,
                 important_flags = rule_data.important_flags,
             }
             table.insert(style_manager.rules, rule)
         end
     end
 
     -- Create Lua engine
     local lua_engine_module = require("lua_engine")
     local LuaEngine = lua_engine_module.LuaEngine
     local engine = LuaEngine:new(nil)
 
     -- Create Document
     local document_module = require("document")
     local Document = document_module.Document
     local doc = Document:new(dom, style_manager, engine)
 
     -- Update engine's document reference
     engine.document = doc
 
     -- Restore external styles
     if state.external_styles then
         doc.external_styles = state.external_styles
     end
 
     -- Restore base path if present
     if state.base_path then
         doc.base_path = state.base_path
     end
 
     -- Add render method to Document
     function doc:render(output_path, width, height)
         width = width or 1200
         height = height or 900
 
         local renderer = HTMLRenderer:new(width, height, self.style, self)
         renderer:render(self.dom)
 
         -- If output_path is a table with a drawToScreen method, it's a SafeGFX instance
         if type(output_path) == "table" and (output_path.setPixel or output_path.fillRect) then
             renderer:drawToScreen(output_path)
         else
             -- Otherwise save to PNG file
             renderer:save(output_path)
         end
     end
 
     -- Override save_dom to use stored base_path
     local original_save_dom = doc.save_dom
     function doc:save_dom(filename, custom_base_path)
         original_save_dom(self, filename, custom_base_path or self.base_path)
     end
 
     -- Helper to find element by ID
     local function find_by_id(elem, id)
         if elem.id == id then return elem end
         for _, child in ipairs(elem.children) do
             local found = find_by_id(child, id)
             if found then return found end
         end
         return nil
     end
 
     -- Restore input values
     if state.input_values then
         for elem_id, value in pairs(state.input_values) do
             local elem = find_by_id(doc.dom.root, elem_id)
             if elem then
                 doc.input_values[elem] = value
             end
         end
     end
 
     -- Restore cursor positions
     if state.cursor_positions then
         for elem_id, pos in pairs(state.cursor_positions) do
             local elem = find_by_id(doc.dom.root, elem_id)
             if elem then
                 doc.cursor_positions[elem] = pos
             end
         end
     end
 
     -- Restore focused element
     if state.focused_element_id then
         local elem = find_by_id(doc.dom.root, state.focused_element_id)
         if elem then
             doc.focused_element = elem
         end
     end
 
     -- Restore checked state for checkboxes and radios
     if state.checked_elements then
         for elem_id, checked in pairs(state.checked_elements) do
             local elem = find_by_id(doc.dom.root, elem_id)
             if elem then
                 doc.checked_elements[elem] = checked
             end
         end
     end
 
     -- Restore selected options for select elements (by index)
     if state.selected_options then
         for select_id, option_index in pairs(state.selected_options) do
             local select_elem = find_by_id(doc.dom.root, select_id)
             if select_elem then
                 -- Find the option at the saved index
                 local current_index = 0
                 for _, child in ipairs(select_elem.children) do
                     if child.tag == "option" then
                         current_index = current_index + 1
                         if current_index == option_index then
                             doc.selected_options[select_elem] = child
                             break
                         end
                     end
                 end
             end
         end
     end
 
     -- Restore element contents (in case they weren't in DOM)
     if state.element_contents then
         for elem_id, content in pairs(state.element_contents) do
             local elem = find_by_id(doc.dom.root, elem_id)
             if elem then
                 -- Set text child content if exists
                 if #elem.children > 0 and elem.children[1].tag == "text" then
                     elem.children[1].content = content
                 else
                     elem.content = content
                 end
             end
         end
     end
 
     -- Restore element styles (in case they weren't in DOM)
     if state.element_styles then
         for elem_id, styles in pairs(state.element_styles) do
             local elem = find_by_id(doc.dom.root, elem_id)
             if elem then
                 if not elem.attributes.style then
                     elem.attributes.style = {}
                 end
                 for prop, val in pairs(styles) do
                     elem.attributes.style[prop] = val
                 end
             end
         end
     end
 
     print("State resumed from: " .. state_file)
     return doc, nil
 end
 
 -- Save state at module level
 local function saveState(doc, state_name)
     if not doc then
         return false, "No document provided"
     end
 
     if not doc.saveState then
         return false, "Document does not have saveState method"
     end
 
     -- Call the document's saveState method
     local success, err = pcall(function()
         doc:saveState(state_name)
     end)
 
     if success then
         return true
     else
         return false, "Failed to save state: " .. tostring(err)
     end
 end
 
 return {
     open = open,
     openAll = openAll,
     saveState = saveState,
     resumeState = resumeState,
     HTMLParser = HTMLParser,
     HTMLRenderer = HTMLRenderer,
     ImageBuffer = ImageBuffer,
 }