...

ui/font.sx

@@ -1,95 +1,11 @@
 #import "modules/std.sx";
 #import "ui/types.sx";
+#import "ui/glyph_cache.sx";
 
-FIRST_CHAR :s32: 32;
-NUM_CHARS  :s32: 96;
-ATLAS_W    :s32: 512;
-ATLAS_H    :s32: 512;
+// Global glyph cache pointer for views (Label, Button) to access
+g_font : *GlyphCache = xx 0;
 
-// Matches stbtt_bakedchar memory layout
-BakedChar :: struct {
-    x0, y0, x1, y1: u16;
-    xoff, yoff, xadvance: f32;
-}
-
-// Matches stbtt_aligned_quad memory layout
-AlignedQuad :: struct {
-    x0, y0, s0, t0: f32;
-    x1, y1, s1, t1: f32;
-}
-
-FontAtlas :: struct {
-    texture_id: u32;
-    font_size: f32;
-    char_data: [*]BakedChar;
-    bitmap: [*]u8;
-    ascent: f32;
-    descent: f32;
-    line_height: f32;
-
-    // Bake font glyphs into a bitmap. Call upload_texture() after GL is ready.
-    init :: (self: *FontAtlas, path: [:0]u8, size: f32) {
-        file_size : s32 = 0;
-        font_data := read_file_bytes(path, @file_size);
-        if xx font_data == 0 {
-            out("Failed to load font: ");
-            out(path);
-            out("\n");
-            return;
-        }
-
-        self.font_size = size;
-
-        // Allocate baked char data (96 entries for ASCII 32..127)
-        self.char_data = xx context.allocator.alloc(xx NUM_CHARS * size_of(BakedChar));
-
-        // Bake font bitmap (512x512 single-channel alpha)
-        bitmap_size : s64 = xx ATLAS_W * xx ATLAS_H;
-        self.bitmap = xx context.allocator.alloc(bitmap_size);
-        stbtt_BakeFontBitmap(font_data, 0, size, self.bitmap, ATLAS_W, ATLAS_H, FIRST_CHAR, NUM_CHARS, xx self.char_data);
-
-        // Get font vertical metrics
-        fontinfo : [256]u8 = ---;
-        stbtt_InitFont(xx @fontinfo, font_data, 0);
-        ascent_i : s32 = 0;
-        descent_i : s32 = 0;
-        linegap_i : s32 = 0;
-        stbtt_GetFontVMetrics(xx @fontinfo, @ascent_i, @descent_i, @linegap_i);
-        scale := stbtt_ScaleForPixelHeight(xx @fontinfo, size);
-        self.ascent = xx ascent_i * scale;
-        self.descent = xx descent_i * scale;
-        self.line_height = self.ascent - self.descent + xx linegap_i * scale;
-
-        font_data_ptr : *void = xx font_data;
-        free(font_data_ptr);
-
-        out("Font loaded: ");
-        out(path);
-        out("\n");
-    }
-
-    measure_text :: (self: *FontAtlas, text: string, font_size: f32) -> Size {
-        if self.char_data == null { return Size.zero(); }
-        scale := font_size / self.font_size;
-        xpos : f32 = 0.0;
-        ypos : f32 = 0.0;
-        q : AlignedQuad = ---;
-        i : s64 = 0;
-        while i < text.len {
-            ch : s32 = xx text[i];
-            if ch >= FIRST_CHAR and ch < FIRST_CHAR + NUM_CHARS {
-                stbtt_GetBakedQuad(xx self.char_data, ATLAS_W, ATLAS_H, ch - FIRST_CHAR, @xpos, @ypos, xx @q, 1);
-            }
-            i += 1;
-        }
-        Size.{ width = xpos * scale, height = self.line_height * scale };
-    }
-}
-
-// Global font atlas pointer for views (Label, Button) to access
-g_font : *FontAtlas = xx 0;
-
-set_global_font :: (font: *FontAtlas) {
+set_global_font :: (font: *GlyphCache) {
     g_font = font;
 }
 

ui/glyph_cache.sx

@@ -0,0 +1,532 @@
+#import "modules/std.sx";
+#import "modules/opengl.sx";
+#import "ui/types.sx";
+
+// Cached glyph data with UV coordinates into the atlas texture
+CachedGlyph :: struct {
+    uv_x: f32;
+    uv_y: f32;
+    uv_w: f32;
+    uv_h: f32;
+    width: f32;
+    height: f32;
+    offset_x: f32;
+    offset_y: f32;
+    advance: f32;
+}
+
+// Cache entry: key + glyph data
+GlyphEntry :: struct {
+    key: u32;
+    glyph: CachedGlyph;
+}
+
+// Quantize font size to half-point increments to limit cache entries.
+// e.g., 13.0 -> 26, 13.5 -> 27, 14.0 -> 28
+quantize_size :: (font_size: f32) -> u16 {
+    xx (font_size * 2.0 + 0.5);
+}
+
+dequantize_size :: (q: u16) -> f32 {
+    xx q / 2.0;
+}
+
+// Pack (glyph_index, size_quantized) into a single u32 for fast comparison
+make_glyph_key :: (glyph_index: u16, size_quantized: u16) -> u32 {
+    (xx glyph_index << 16) | xx size_quantized;
+}
+
+// Shaped glyph — output of text shaping (positioned glyph with index)
+ShapedGlyph :: struct {
+    glyph_index: u16;
+    x: f32;       // horizontal position (logical units, cumulative)
+    y: f32;       // vertical offset (logical units)
+    advance: f32; // advance width (logical units)
+}
+
+is_ascii :: (text: string) -> bool {
+    i : s64 = 0;
+    while i < text.len {
+        if text[i] >= 128 { return false; }
+        i += 1;
+    }
+    true;
+}
+
+// kbts constants (C enum values)
+KBTS_DIRECTION_DONT_KNOW                  :u32: 0;
+KBTS_LANGUAGE_DONT_KNOW                   :u32: 0;
+KBTS_USER_ID_GENERATION_MODE_CODEPOINT_INDEX :u32: 0;
+
+// SX structs matching kbts C struct layouts (64-bit).
+// We define these in SX to access fields directly, casting from opaque C pointers.
+
+KbtsGlyphIterator :: struct {
+    glyph_storage: *void;
+    current_glyph: *void;
+    last_advance_x: s32;
+    x: s32;
+    y: s32;
+}
+
+KbtsRun :: struct {
+    font: *void;
+    script: u32;
+    paragraph_direction: u32;
+    direction: u32;
+    flags: u32;
+    glyphs: KbtsGlyphIterator;
+}
+
+KbtsGlyph :: struct {
+    prev: *void;
+    next: *void;
+    codepoint: u32;
+    id: u16;
+    uid: u16;
+    user_id_or_codepoint_index: s32;
+    offset_x: s32;
+    offset_y: s32;
+    advance_x: s32;
+    advance_y: s32;
+}
+
+// kbts_font_info2 base (simplified — we only need the Size field for dispatch)
+KBTS_FONT_INFO_STRING_ID_COUNT :s32: 7;
+
+KbtsFontInfo2 :: struct {
+    size: u32;
+    strings: [7]*void;     // char* array
+    string_lengths: [7]u16;
+    style_flags: u32;
+    weight: u32;
+    width: u32;
+}
+
+KbtsFontInfo2_1 :: struct {
+    base: KbtsFontInfo2;
+    units_per_em: u16;
+    x_min: s16;
+    y_min: s16;
+    x_max: s16;
+    y_max: s16;
+    ascent: s16;
+    descent: s16;
+    line_gap: s16;
+}
+
+GLYPH_ATLAS_W :s32: 1024;
+GLYPH_ATLAS_H :s32: 1024;
+FONTINFO_SIZE  :s64: 256;
+
+PackResult :: struct {
+    x, y: s32;
+}
+
+// Dynamic glyph cache with on-demand rasterization and texture atlas packing.
+GlyphCache :: struct {
+    // Font data
+    font_info: *void;   // heap-allocated stbtt_fontinfo (256 bytes)
+    font_data: *void;   // raw TTF file bytes (kept alive for stbtt)
+
+    // Atlas texture (GPU)
+    texture_id: u32;
+    atlas_width: s32;
+    atlas_height: s32;
+
+    // Atlas bitmap (CPU-side for updates)
+    bitmap: [*]u8;
+
+    // Shelf packer state
+    shelf_y: s32;
+    shelf_height: s32;
+    cursor_x: s32;
+    padding: s32;
+
+    // Glyph lookup cache (flat list, linear scan)
+    entries: List(GlyphEntry);
+
+    // Dirty tracking for texture upload
+    dirty: bool;
+
+    // Font vertical metrics (at reference size 1.0 — scale by font_size)
+    ascent: f32;
+    descent: f32;
+    line_gap: f32;
+
+    // HiDPI: physical pixels per logical pixel (e.g. 2.0 on Retina)
+    dpi_scale: f32;
+    inv_dpi: f32;
+
+    // Text shaping (kb_text_shape)
+    shape_ctx: *void;
+    shape_font: *void;
+    units_per_em: u16;
+    font_data_size: s32;
+    shaped_buf: List(ShapedGlyph);
+
+    init :: (self: *GlyphCache, path: [:0]u8, default_size: f32) {
+        // Zero out the entire struct first (parent may be uninitialized with = ---)
+        memset(self, 0, size_of(GlyphCache));
+
+        // Load font file
+        file_size : s32 = 0;
+        font_data := read_file_bytes(path, @file_size);
+        if xx font_data == 0 {
+            out("Failed to load font: ");
+            out(path);
+            out("\n");
+            return;
+        }
+        self.font_data = xx font_data;
+        self.font_data_size = file_size;
+
+        // Init stbtt_fontinfo
+        self.font_info = context.allocator.alloc(FONTINFO_SIZE);
+        memset(self.font_info, 0, FONTINFO_SIZE);
+        stbtt_InitFont(self.font_info, font_data, 0);
+
+        // Get font vertical metrics (in unscaled font units)
+        ascent_i : s32 = 0;
+        descent_i : s32 = 0;
+        linegap_i : s32 = 0;
+        stbtt_GetFontVMetrics(self.font_info, @ascent_i, @descent_i, @linegap_i);
+
+        // Store unscaled metrics — we'll scale per font_size in measure_text
+        self.ascent = xx ascent_i;
+        self.descent = xx descent_i;
+        self.line_gap = xx linegap_i;
+
+        // Init text shaping context
+        self.shape_ctx = xx kbts_CreateShapeContext(xx 0, xx 0);
+        if xx self.shape_ctx != 0 {
+            self.shape_font = xx kbts_ShapePushFontFromMemory(xx self.shape_ctx, self.font_data, file_size, 0);
+            // Get font metrics (units_per_em) from kbts
+            kb_info : KbtsFontInfo2_1 = ---;
+            memset(@kb_info, 0, size_of(KbtsFontInfo2_1));
+            kb_info.base.size = xx size_of(KbtsFontInfo2_1);
+            kbts_GetFontInfo2(xx self.shape_font, xx @kb_info);
+            self.units_per_em = kb_info.units_per_em;
+        }
+
+        // Allocate atlas bitmap
+        self.atlas_width = GLYPH_ATLAS_W;
+        self.atlas_height = GLYPH_ATLAS_H;
+        bitmap_size : s64 = xx self.atlas_width * xx self.atlas_height;
+        self.bitmap = xx context.allocator.alloc(bitmap_size);
+        memset(self.bitmap, 0, bitmap_size);
+
+        // Shelf packer init
+        self.shelf_y = 0;
+        self.shelf_height = 0;
+        self.cursor_x = 0;
+        self.padding = 1;
+
+        self.dirty = false;
+        self.dpi_scale = 1.0;
+        self.inv_dpi = 1.0;
+
+        // Create OpenGL texture
+        glGenTextures(1, @self.texture_id);
+        glBindTexture(GL_TEXTURE_2D, self.texture_id);
+        glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
+        glTexImage2D(GL_TEXTURE_2D, 0, xx GL_R8, self.atlas_width, self.atlas_height, 0, GL_RED, GL_UNSIGNED_BYTE, self.bitmap);
+        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, xx GL_LINEAR);
+        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, xx GL_LINEAR);
+        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, xx GL_CLAMP_TO_EDGE);
+        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, xx GL_CLAMP_TO_EDGE);
+
+        out("GlyphCache initialized: ");
+        out(path);
+        out("\n");
+    }
+
+    // Look up or rasterize a glyph, returning a pointer to its cached entry.
+    // Returns null for glyphs with no outline AND zero advance (shouldn't happen for valid chars).
+    get_or_rasterize :: (self: *GlyphCache, glyph_index: u16, font_size: f32) -> *CachedGlyph {
+        size_q := quantize_size(font_size);
+        key := make_glyph_key(glyph_index, size_q);
+
+        // Cache lookup (linear scan)
+        i : s64 = 0;
+        while i < self.entries.len {
+            if self.entries.items[i].key == key {
+                return @self.entries.items[i].glyph;
+            }
+            i += 1;
+        }
+
+        // Cache miss — rasterize
+        actual_size := dequantize_size(size_q);
+        scale := stbtt_ScaleForPixelHeight(self.font_info, actual_size);
+
+        // Get glyph bounding box
+        x0 : s32 = 0;
+        y0 : s32 = 0;
+        x1 : s32 = 0;
+        y1 : s32 = 0;
+        stbtt_GetGlyphBitmapBox(self.font_info, xx glyph_index, scale, scale, @x0, @y0, @x1, @y1);
+
+        glyph_w := if x1 > x0 then x1 - x0 else 0;
+        glyph_h := if y1 > y0 then y1 - y0 else 0;
+
+        // Get horizontal metrics
+        advance_i : s32 = 0;
+        lsb_i : s32 = 0;
+        stbtt_GetGlyphHMetrics(self.font_info, xx glyph_index, @advance_i, @lsb_i);
+        advance : f32 = xx advance_i * scale;
+
+        // Zero-size glyph (e.g. space) — cache with advance only
+        if glyph_w == 0 or glyph_h == 0 {
+            entry := GlyphEntry.{
+                key = key,
+                glyph = CachedGlyph.{
+                    uv_x = 0.0, uv_y = 0.0, uv_w = 0.0, uv_h = 0.0,
+                    width = 0.0, height = 0.0,
+                    offset_x = xx x0, offset_y = xx y0,
+                    advance = advance
+                }
+            };
+            self.entries.append(entry);
+            return @self.entries.items[self.entries.len - 1].glyph;
+        }
+
+        // Pack into atlas
+        pack := self.try_pack(glyph_w, glyph_h);
+        if pack.x < 0 {
+            // Atlas full — grow and retry
+            self.grow();
+            return self.get_or_rasterize(glyph_index, font_size);
+        }
+
+        // Rasterize directly into atlas bitmap
+        dest_offset : s64 = xx pack.y * xx self.atlas_width + xx pack.x;
+        stbtt_MakeGlyphBitmap(
+            self.font_info,
+            @self.bitmap[dest_offset],
+            glyph_w, glyph_h,
+            self.atlas_width,
+            scale, scale,
+            xx glyph_index
+        );
+        self.dirty = true;
+
+        // Compute normalized UV coordinates
+        atlas_wf : f32 = xx self.atlas_width;
+        atlas_hf : f32 = xx self.atlas_height;
+
+        entry := GlyphEntry.{
+            key = key,
+            glyph = CachedGlyph.{
+                uv_x = xx pack.x / atlas_wf,
+                uv_y = xx pack.y / atlas_hf,
+                uv_w = xx glyph_w / atlas_wf,
+                uv_h = xx glyph_h / atlas_hf,
+                width = xx glyph_w,
+                height = xx glyph_h,
+                offset_x = xx x0,
+                offset_y = xx y0,
+                advance = advance
+            }
+        };
+        self.entries.append(entry);
+        return @self.entries.items[self.entries.len - 1].glyph;
+    }
+
+    // Upload dirty atlas to GPU
+    flush :: (self: *GlyphCache) {
+        if self.dirty == false { return; }
+        glBindTexture(GL_TEXTURE_2D, self.texture_id);
+        glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
+        glTexSubImage2D(GL_TEXTURE_2D, 0, 0, 0, self.atlas_width, self.atlas_height, GL_RED, GL_UNSIGNED_BYTE, self.bitmap);
+        self.dirty = false;
+    }
+
+    // Shelf-based rectangle packer.
+    // Returns PackResult with x >= 0 on success, x = -1 if no space.
+    try_pack :: (self: *GlyphCache, w: s32, h: s32) -> PackResult {
+        padded_w := w + self.padding;
+        padded_h := h + self.padding;
+
+        // Try fitting on the current shelf
+        eff_h := if self.shelf_height > padded_h then self.shelf_height else padded_h;
+        if self.cursor_x + padded_w <= self.atlas_width and self.shelf_y + eff_h <= self.atlas_height {
+            result := PackResult.{ x = self.cursor_x, y = self.shelf_y };
+            self.cursor_x += padded_w;
+            if padded_h > self.shelf_height {
+                self.shelf_height = padded_h;
+            }
+            return result;
+        }
+
+        // Start a new shelf
+        new_shelf_y := self.shelf_y + self.shelf_height;
+        if new_shelf_y + padded_h <= self.atlas_height and padded_w <= self.atlas_width {
+            self.shelf_y = new_shelf_y;
+            self.shelf_height = padded_h;
+            self.cursor_x = padded_w;
+            return PackResult.{ x = 0, y = new_shelf_y };
+        }
+
+        // No space
+        PackResult.{ x = 0 - 1, y = 0 - 1 };
+    }
+
+    // Grow the atlas by doubling dimensions
+    grow :: (self: *GlyphCache) {
+        new_w := self.atlas_width * 2;
+        new_h := self.atlas_height * 2;
+        new_size : s64 = xx new_w * xx new_h;
+        new_bitmap : [*]u8 = xx context.allocator.alloc(new_size);
+        memset(new_bitmap, 0, new_size);
+
+        // Copy old rows into new bitmap
+        y : s32 = 0;
+        while y < self.atlas_height {
+            old_off : s64 = xx y * xx self.atlas_width;
+            new_off : s64 = xx y * xx new_w;
+            memcpy(@new_bitmap[new_off], @self.bitmap[old_off], xx self.atlas_width);
+            y += 1;
+        }
+
+        context.allocator.dealloc(self.bitmap);
+        self.bitmap = new_bitmap;
+        self.atlas_width = new_w;
+        self.atlas_height = new_h;
+
+        // Recreate GL texture
+        glDeleteTextures(1, @self.texture_id);
+        glGenTextures(1, @self.texture_id);
+        glBindTexture(GL_TEXTURE_2D, self.texture_id);
+        glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
+        glTexImage2D(GL_TEXTURE_2D, 0, xx GL_R8, new_w, new_h, 0, GL_RED, GL_UNSIGNED_BYTE, new_bitmap);
+        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, xx GL_LINEAR);
+        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, xx GL_LINEAR);
+        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, xx GL_CLAMP_TO_EDGE);
+        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, xx GL_CLAMP_TO_EDGE);
+
+        // Recompute UV coordinates for all cached glyphs
+        atlas_wf : f32 = xx new_w;
+        atlas_hf : f32 = xx new_h;
+        i : s64 = 0;
+        while i < self.entries.len {
+            g := @self.entries.items[i].glyph;
+            if g.width > 0.0 {
+                g.uv_x = g.uv_x / 2.0;
+                g.uv_y = g.uv_y / 2.0;
+                g.uv_w = g.width / atlas_wf;
+                g.uv_h = g.height / atlas_hf;
+            }
+            i += 1;
+        }
+
+        self.dirty = false;
+        out("GlyphCache atlas grown\n");
+    }
+
+    set_dpi_scale :: (self: *GlyphCache, scale: f32) {
+        self.dpi_scale = scale;
+        self.inv_dpi = 1.0 / scale;
+    }
+
+    // Get the scale factor for a logical font size
+    scale_for_size :: (self: *GlyphCache, font_size: f32) -> f32 {
+        stbtt_ScaleForPixelHeight(self.font_info, font_size);
+    }
+
+    // Get scaled ascent for a logical font size
+    get_ascent :: (self: *GlyphCache, font_size: f32) -> f32 {
+        self.ascent * self.scale_for_size(font_size);
+    }
+
+    // Get scaled line height for a logical font size
+    get_line_height :: (self: *GlyphCache, font_size: f32) -> f32 {
+        s := self.scale_for_size(font_size);
+        (self.ascent - self.descent + self.line_gap) * s;
+    }
+
+    // Shape text into positioned glyphs.
+    // Uses ASCII fast-path (stbtt byte-by-byte) for pure ASCII,
+    // full kb_text_shape pipeline for Unicode/complex scripts.
+    // Results stored in self.shaped_buf (reused across calls).
+    shape_text :: (self: *GlyphCache, text: string, font_size: f32) {
+        self.shaped_buf.len = 0;
+        if text.len == 0 { return; }
+
+        if is_ascii(text) {
+            self.shape_ascii(text, font_size);
+        } else {
+            self.shape_with_kb(text, font_size);
+        }
+    }
+
+    shape_ascii :: (self: *GlyphCache, text: string, font_size: f32) {
+        scale := stbtt_ScaleForPixelHeight(self.font_info, font_size);
+        total : f32 = 0.0;
+        i : s64 = 0;
+        while i < text.len {
+            ch : s32 = xx text[i];
+            glyph_index : u16 = xx stbtt_FindGlyphIndex(self.font_info, ch);
+
+            advance_i : s32 = 0;
+            lsb_i : s32 = 0;
+            stbtt_GetGlyphHMetrics(self.font_info, xx glyph_index, @advance_i, @lsb_i);
+            adv : f32 = xx advance_i * scale;
+
+            self.shaped_buf.append(ShapedGlyph.{
+                glyph_index = glyph_index,
+                x = total,
+                y = 0.0,
+                advance = adv
+            });
+            total += adv;
+            i += 1;
+        }
+    }
+
+    shape_with_kb :: (self: *GlyphCache, text: string, font_size: f32) {
+        if xx self.shape_ctx == 0 {
+            self.shape_ascii(text, font_size);
+            return;
+        }
+
+        scale : f32 = font_size / xx self.units_per_em;
+        total : f32 = 0.0;
+
+        kbts_ShapeBegin(xx self.shape_ctx, KBTS_DIRECTION_DONT_KNOW, KBTS_LANGUAGE_DONT_KNOW);
+        kbts_ShapeUtf8(xx self.shape_ctx, xx text.ptr, xx text.len, KBTS_USER_ID_GENERATION_MODE_CODEPOINT_INDEX);
+        kbts_ShapeEnd(xx self.shape_ctx);
+
+        run : KbtsRun = ---;
+        while kbts_ShapeRun(xx self.shape_ctx, xx @run) != 0 {
+            glyph_ptr : *KbtsGlyph = xx 0;
+            while kbts_GlyphIteratorNext(xx @run.glyphs, xx @glyph_ptr) != 0 {
+                if xx glyph_ptr == 0 { continue; }
+                gx := total + xx glyph_ptr.offset_x * scale;
+                gy : f32 = xx glyph_ptr.offset_y * scale;
+                adv : f32 = xx glyph_ptr.advance_x * scale;
+
+                self.shaped_buf.append(ShapedGlyph.{
+                    glyph_index = glyph_ptr.id,
+                    x = gx,
+                    y = gy,
+                    advance = adv
+                });
+                total += adv;
+            }
+        }
+    }
+
+    // Measure text at a logical font size using text shaping.
+    // Rasterizes at physical resolution (font_size * dpi_scale), returns logical dimensions.
+    measure_text :: (self: *GlyphCache, text: string, font_size: f32) -> Size {
+        self.shape_text(text, font_size);
+        width : f32 = 0.0;
+        i : s64 = 0;
+        while i < self.shaped_buf.len {
+            width += self.shaped_buf.items[i].advance;
+            i += 1;
+        }
+        Size.{ width = width, height = self.get_line_height(font_size) };
+    }
+}

ui/pipeline.sx

@@ -9,7 +9,7 @@
 UIPipeline :: struct {
     renderer: UIRenderer;
     render_tree: RenderTree;
-    font: FontAtlas;
+    font: GlyphCache;
     screen_width: f32;
     screen_height: f32;
     root: ViewChild;
@@ -23,9 +23,10 @@ UIPipeline :: struct {
         self.has_root = false;
     }
 
-    init_font :: (self: *UIPipeline, path: [:0]u8, size: f32) {
+    init_font :: (self: *UIPipeline, path: [:0]u8, size: f32, dpi_scale: f32) {
         self.font.init(path, size);
-        upload_font_texture(@self.font);
+        self.font.set_dpi_scale(dpi_scale);
+        self.renderer.dpi_scale = dpi_scale;
         set_global_font(@self.font);
     }
 
@@ -58,7 +59,6 @@ UIPipeline :: struct {
             origin = Point.zero(),
             size = root_size
         };
-        print("tick: computed_frame=({},{},{},{})\n", self.root.computed_frame.origin.x, self.root.computed_frame.origin.y, self.root.computed_frame.size.width, self.root.computed_frame.size.height);
         self.root.view.layout(self.root.computed_frame);
 
         // Render to tree

ui/renderer.sx

@@ -4,6 +4,8 @@
 #import "modules/math";
 #import "ui/types.sx";
 #import "ui/render.sx";
+#import "ui/glyph_cache.sx";
+#import "ui/font.sx";
 
 // Vertex: pos(2) + uv(2) + color(4) + params(4) = 12 floats
 UI_VERTEX_FLOATS :s64: 12;
@@ -20,6 +22,7 @@ UIRenderer :: struct {
     vertex_count: s64;
     screen_width: f32;
     screen_height: f32;
+    dpi_scale: f32;
     white_texture: u32;
     current_texture: u32;
 
@@ -61,6 +64,8 @@ UIRenderer :: struct {
 
         glBindVertexArray(0);
 
+        self.dpi_scale = 1.0;
+
         // 1x1 white texture for solid rects
         self.white_texture = create_white_texture();
     }
@@ -137,7 +142,7 @@ UIRenderer :: struct {
                     self.push_quad(node.frame, node.fill_color, node.corner_radius, node.stroke_width);
                 }
                 case .text: {
-                    if xx g_font != 0 and g_font.char_data != null {
+                    if xx g_font != 0 {
                         self.render_text(node);
                     }
                 }
@@ -149,11 +154,12 @@ UIRenderer :: struct {
                 case .clip_push: {
                     self.flush();
                     glEnable(GL_SCISSOR_TEST);
+                    dpi := self.dpi_scale;
                     glScissor(
-                        xx node.frame.origin.x,
-                        xx (self.screen_height - node.frame.origin.y - node.frame.size.height),
-                        xx node.frame.size.width,
-                        xx node.frame.size.height
+                        xx (node.frame.origin.x * dpi),
+                        xx ((self.screen_height - node.frame.origin.y - node.frame.size.height) * dpi),
+                        xx (node.frame.size.width * dpi),
+                        xx (node.frame.size.height * dpi)
                     );
                 }
                 case .clip_pop: {
@@ -195,8 +201,13 @@ UIRenderer :: struct {
 
     render_text :: (self: *UIRenderer, node: RenderNode) {
         font := g_font;
-        scale := node.font_size / font.font_size;
+        if xx font == 0 { return; }
 
+        // Shape text into positioned glyphs
+        font.shape_text(node.text, node.font_size);
+
+        // Flush any new glyphs to the atlas texture before rendering
+        font.flush();
         self.bind_texture(font.texture_id);
 
         r := node.text_color.rf();
@@ -204,56 +215,51 @@ UIRenderer :: struct {
         b := node.text_color.bf();
         a := node.text_color.af();
 
-        // stbtt_GetBakedQuad works at baked size; we scale output positions
-        xpos : f32 = 0.0;
-        ypos : f32 = 0.0;
-        q : AlignedQuad = ---;
+        ascent := font.get_ascent(node.font_size);
+        raster_size := node.font_size * font.dpi_scale;
+        inv_dpi := font.inv_dpi;
+
         i : s64 = 0;
-        while i < node.text.len {
-            ch : s32 = xx node.text[i];
-            if ch >= FIRST_CHAR and ch < FIRST_CHAR + NUM_CHARS {
-                stbtt_GetBakedQuad(xx font.char_data, ATLAS_W, ATLAS_H, ch - FIRST_CHAR, @xpos, @ypos, xx @q, 1);
+        while i < font.shaped_buf.len {
+            shaped := font.shaped_buf.items[i];
+            cached := font.get_or_rasterize(shaped.glyph_index, raster_size);
 
-                // Scale and offset to frame position
-                // ypos=0 means baseline is at y=0; glyphs go above (negative yoff)
-                // Add ascent so top of text aligns with frame top
-                gx0 := node.frame.origin.x + q.x0 * scale;
-                gy0 := node.frame.origin.y + font.ascent * scale + q.y0 * scale;
-                gx1 := node.frame.origin.x + q.x1 * scale;
-                gy1 := node.frame.origin.y + font.ascent * scale + q.y1 * scale;
+            if xx cached != 0 {
+                if cached.width > 0.0 {
+                    // Scale physical pixel dimensions back to logical units
+                    gx0 := node.frame.origin.x + shaped.x + cached.offset_x * inv_dpi;
+                    gy0 := node.frame.origin.y + ascent + shaped.y + cached.offset_y * inv_dpi;
+                    gx1 := gx0 + cached.width * inv_dpi;
+                    gy1 := gy0 + cached.height * inv_dpi;
 
-                if self.vertex_count + 6 > MAX_UI_VERTICES {
-                    self.flush();
+                    u0 := cached.uv_x;
+                    v0 := cached.uv_y;
+                    u1 := cached.uv_x + cached.uv_w;
+                    v1 := cached.uv_y + cached.uv_h;
+
+                    if self.vertex_count + 6 > MAX_UI_VERTICES {
+                        self.flush();
+                    }
+
+                    // corner_radius = -1.0 signals "text mode" to the fragment shader
+                    neg1 : f32 = 0.0 - 1.0;
+                    self.write_vertex(gx0, gy0, u0, v0, r, g, b, a, neg1, 0.0, 0.0, 0.0);
+                    self.write_vertex(gx1, gy0, u1, v0, r, g, b, a, neg1, 0.0, 0.0, 0.0);
+                    self.write_vertex(gx0, gy1, u0, v1, r, g, b, a, neg1, 0.0, 0.0, 0.0);
+                    self.write_vertex(gx1, gy0, u1, v0, r, g, b, a, neg1, 0.0, 0.0, 0.0);
+                    self.write_vertex(gx1, gy1, u1, v1, r, g, b, a, neg1, 0.0, 0.0, 0.0);
+                    self.write_vertex(gx0, gy1, u0, v1, r, g, b, a, neg1, 0.0, 0.0, 0.0);
                 }
-
-                // corner_radius = -1.0 signals "text mode" to the fragment shader
-                self.write_vertex(gx0, gy0, q.s0, q.t0, r, g, b, a, 0.0 - 1.0, 0.0, 0.0, 0.0);
-                self.write_vertex(gx1, gy0, q.s1, q.t0, r, g, b, a, 0.0 - 1.0, 0.0, 0.0, 0.0);
-                self.write_vertex(gx0, gy1, q.s0, q.t1, r, g, b, a, 0.0 - 1.0, 0.0, 0.0, 0.0);
-                self.write_vertex(gx1, gy0, q.s1, q.t0, r, g, b, a, 0.0 - 1.0, 0.0, 0.0, 0.0);
-                self.write_vertex(gx1, gy1, q.s1, q.t1, r, g, b, a, 0.0 - 1.0, 0.0, 0.0, 0.0);
-                self.write_vertex(gx0, gy1, q.s0, q.t1, r, g, b, a, 0.0 - 1.0, 0.0, 0.0, 0.0);
             }
             i += 1;
         }
 
+        // Flush any glyphs rasterized during this text draw
+        font.flush();
         self.bind_texture(self.white_texture);
     }
 }
 
-// Upload font atlas bitmap as GL texture (called after GL init)
-upload_font_texture :: (font: *FontAtlas) {
-    if font.bitmap == null { return; }
-    glGenTextures(1, @font.texture_id);
-    glBindTexture(GL_TEXTURE_2D, font.texture_id);
-    glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
-    glTexImage2D(GL_TEXTURE_2D, 0, xx GL_R8, ATLAS_W, ATLAS_H, 0, GL_RED, GL_UNSIGNED_BYTE, font.bitmap);
-    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, xx GL_LINEAR);
-    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, xx GL_LINEAR);
-    context.allocator.dealloc(font.bitmap);
-    font.bitmap = null;
-}
-
 create_white_texture :: () -> u32 {
     tex : u32 = 0;
     glGenTextures(1, @tex);
@@ -311,8 +317,10 @@ void main() {
     vec2 rectSize = vParams.zw;
 
     if (radius < 0.0) {
-        float textAlpha = texture(uTex, vUV).r;
-        FragColor = vec4(vColor.rgb, vColor.a * textAlpha);
+        float alpha = texture(uTex, vUV).r;
+        float ew = fwidth(alpha) * 0.7;
+        alpha = smoothstep(0.5 - ew, 0.5 + ew, alpha);
+        FragColor = vec4(vColor.rgb, vColor.a * pow(alpha, 0.9));
     } else if (radius > 0.0 || border > 0.0) {
         vec4 texColor = texture(uTex, vUV);
         vec2 half_size = rectSize * 0.5;
@@ -381,8 +389,10 @@ void main() {
     vec2 rectSize = vParams.zw;
 
     if (radius < 0.0) {
-        float textAlpha = texture(uTex, vUV).r;
-        FragColor = vec4(vColor.rgb, vColor.a * textAlpha);
+        float alpha = texture(uTex, vUV).r;
+        float ew = fwidth(alpha) * 0.7;
+        alpha = smoothstep(0.5 - ew, 0.5 + ew, alpha);
+        FragColor = vec4(vColor.rgb, vColor.a * pow(alpha, 0.9));
     } else if (radius > 0.0 || border > 0.0) {
         vec4 texColor = texture(uTex, vUV);
         vec2 half_size = rectSize * 0.5;