Fix memory leaks found by DebugAllocator.

Use leak detection of DebugAllocator.
When allocating memory it remebers where memory was allocated but it only for leaks in .deinit(). So not calling it is a sure way to miss a bunch of leaks. deinit() returns if it found leaks but we don't really care. Its usefull for tests but not here.
2026-03-04 02:00:40 +03:00 · 2026-03-04 02:00:40 +03:00 · 2026-03-04 02:00:40 +03:00 · 2026-03-04 02:00:40 +03:00 · 2026-03-04 02:00:40 +03:00 · 2026-03-04 02:00:40 +03:00
43 changed files with 2795 additions and 326 deletions
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -12,9 +12,11 @@
        },
        {
            "name": "Zig: Debug (gdb)",
-            "type": "gdb",
+            "type": "cppdbg",
            "request": "launch",
            "program": "${workspaceFolder}/zig-out/bin/Zivro",
+            "cwd": "${workspaceFolder}",
+            "MIMode": "gdb",
            "preLaunchTask": "zig: build"
        },
    ]
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -9,7 +9,6 @@
                "kind": "build",
                "isDefault": true
            },
-            "problemMatcher": ["$gcc"],
        }
    ]
 }
--- a/assets/icons/.gitkeep
+++ b/assets/icons/.gitkeep
--- a/build.zig
+++ b/build.zig
@@ -8,18 +8,19 @@ pub fn build(b: *std.Build) void {

    const exe = b.addExecutable(.{
        .name = "Zivro",
+        // .use_llvm = true,
+        // .use_lld = true,
        .root_module = b.createModule(.{
            .root_source_file = b.path("src/main.zig"),
            .target = target,
            .optimize = optimize,
-
            .imports = &.{
                .{ .name = "dvui", .module = dvui_dep.module("dvui_sdl3") },
                .{ .name = "sdl-backend", .module = dvui_dep.module("sdl3") },
            },
        }),
    });
-
+    exe.bundle_compiler_rt = true;
    b.installArtifact(exe);

    const run_step = b.step("run", "Run the app");
--- a/build.zig.zon
+++ b/build.zig.zon
@@ -33,8 +33,8 @@
    // internet connectivity.
    .dependencies = .{
        .dvui = .{
-            .url = "https://github.com/david-vanderson/dvui/archive/main.tar.gz",
-            .hash = "dvui-0.4.0-dev-AQFJmev72QC6e0ojhnW8a_wRhZDgzWWLgeyoNuIPZc2m",
+            .url = "git+https://github.com/david-vanderson/dvui#edb2d5a4cd2981fca74ee5f096277b91333c1316",
+            .hash = "dvui-0.4.0-dev-AQFJmeGB3QAwun9qF76CDE5IopA4nUVRgD-IwwTsOo4H",
        },

        // See `zig fetch --save <url>` for a command-line interface for adding dependencies.
--- a/review.txt
+++ b/review.txt
--- a/src/Canvas.zig
+++ b/src/Canvas.zig
@@ -3,14 +3,20 @@ const builtin = @import("builtin");
 const dvui = @import("dvui");
 const Document = @import("models/Document.zig");
 const RenderEngine = @import("render/RenderEngine.zig").RenderEngine;
-const ImageRect = @import("models/basic_models.zig").ImageRect;
+const basic_models = @import("models/basic_models.zig");
+const Rect_i = basic_models.Rect_i;
+const Size_i = basic_models.Size_i;
+const Point2_f = @import("models/basic_models.zig").Point2_f;
 const Color = dvui.Color;
-
+const tools = @import("toolbar/tools.zig");
+const Toolbar = @import("toolbar/Toolbar.zig");
+const random_document = @import("random_document.zig");
 const Canvas = @This();

 allocator: std.mem.Allocator,
 document: *Document,
 render_engine: RenderEngine,
+toolbar: Toolbar,
 texture: ?dvui.Texture = null,
 pos: dvui.Point = dvui.Point{ .x = 400, .y = 400 },
 scroll: dvui.ScrollInfo = .{
@@ -18,35 +24,45 @@ scroll: dvui.ScrollInfo = .{
    .horizontal = .auto,
 },
 native_scaling: bool = true,
-/// Максимальная частота перерисовки при зуме. 0 = без ограничения.
+cursor_document_point: ?Point2_f = null,
+draw_document: bool = true,
+show_render_stats: bool = true,
+/// Rect тулбара (из предыдущего кадра) для исключения кликов по нему из handleCanvasMouse.
+toolbar_rect_scale: ?dvui.RectScale = null,
+/// Rect панели свойств (из предыдущего кадра) для исключения кликов по нему из handleCanvasMouse.
+properties_rect_scale: ?dvui.RectScale = null,
 redraw_throttle_ms: u32 = 50,
-_visible_rect: ?ImageRect = null,
+frame_index: u64 = 0,
+
 _zoom: f32 = 1,
+_rendering_quality: f32 = 100.0,
+_last_redraw_time_ms: i64 = 0, // Метка последней перерисовки чтобы ограничить частоту
+_visible_rect: ?Rect_i = null,
 _redraw_pending: bool = false,
-_last_redraw_time_ms: i64 = 0,

 pub fn init(allocator: std.mem.Allocator, document: *Document, engine: RenderEngine) Canvas {
    return .{
        .allocator = allocator,
        .document = document,
        .render_engine = engine,
+        .toolbar = Toolbar.init(&tools.default_tools),
    };
 }

 pub fn deinit(self: *Canvas) void {
+    self.toolbar.deinit();
    if (self.texture) |texture| {
        dvui.Texture.destroyLater(texture);
        self.texture = null;
    }
 }

-/// Заполнить canvas градиентом
-pub fn redrawExample(self: *Canvas) !void {
-    const full = self.getScaledImageSize();
+fn redraw(self: *Canvas) !void {
+    const full = self.getZoomedImageSize();

-    const vis: ImageRect = self._visible_rect orelse ImageRect{ .x = 0, .y = 0, .w = 0, .h = 0 };
+    const vis_full: Rect_i = self._visible_rect orelse Rect_i{ .x = 0, .y = 0, .w = 0, .h = 0 };

-    if (vis.w == 0 or vis.h == 0) {
+    if (vis_full.w == 0 or vis_full.h == 0) {
        if (self.texture) |tex| {
            dvui.Texture.destroyLater(tex);
            self.texture = null;
@@ -54,10 +70,44 @@ pub fn redrawExample(self: *Canvas) !void {
        return;
    }

-    const new_texture = self.render_engine.example(.{ .w = full.w, .h = full.h }, vis) catch null;
+    // Качество рендеринга задаётся в процентах площади (1–100),
+    // при этом фактически уменьшаем ширину/высоту холста на корень из этой доли.
+    const quality_percent: f32 = self.getRenderingQuality();
+    const quality_area: f32 = quality_percent / 100.0;
+    const quality_side: f32 = std.math.sqrt(quality_area);
+    const scale: f32 = std.math.clamp(quality_side, 0.01, 1.0);
+
+    const canvas_size: Size_i = .{
+        .w = @max(@as(u32, 1), @as(u32, @intFromFloat(@as(f32, @floatFromInt(full.w)) * scale))),
+        .h = @max(@as(u32, 1), @as(u32, @intFromFloat(@as(f32, @floatFromInt(full.h)) * scale))),
+    };
+
+    var vis_scaled = Rect_i{
+        .x = @as(u32, @intFromFloat(@as(f32, @floatFromInt(vis_full.x)) * scale)),
+        .y = @as(u32, @intFromFloat(@as(f32, @floatFromInt(vis_full.y)) * scale)),
+        .w = @max(@as(u32, 1), @as(u32, @intFromFloat(@as(f32, @floatFromInt(vis_full.w)) * scale))),
+        .h = @max(@as(u32, 1), @as(u32, @intFromFloat(@as(f32, @floatFromInt(vis_full.h)) * scale))),
+    };
+
+    if (vis_scaled.x >= canvas_size.w or vis_scaled.y >= canvas_size.h) {
+        if (self.texture) |tex| {
+            dvui.Texture.destroyLater(tex);
+            self.texture = null;
+        }
+        return;
+    }
+
+    const max_vis_w: u32 = canvas_size.w - vis_scaled.x;
+    const max_vis_h: u32 = canvas_size.h - vis_scaled.y;
+    if (vis_scaled.w > max_vis_w) vis_scaled.w = max_vis_w;
+    if (vis_scaled.h > max_vis_h) vis_scaled.h = max_vis_h;
+
+    const new_texture = if (self.draw_document)
+        self.render_engine.render(self.document, canvas_size, vis_scaled) catch null
+    else
+        self.render_engine.example(canvas_size, vis_scaled) catch null;

    if (new_texture) |tex| {
-        // Удалить старую текстуру
        if (self.texture) |old_tex| {
            dvui.Texture.destroyLater(old_tex);
        }
@@ -65,12 +115,18 @@ pub fn redrawExample(self: *Canvas) !void {
        self.texture = tex;
    }
    self._last_redraw_time_ms = std.time.milliTimestamp();
+    self.frame_index += 1;
+    self.redraw_throttle_ms = @max(1, @as(u32, @intCast(self.render_engine.getStats().render_time_ns / std.time.ns_per_ms / 3)));
 }

-// Ресетнуть example изображение в renderEngine
 pub fn exampleReset(self: *Canvas) !void {
    self.render_engine.exampleReset();
-    try self.redrawExample();
+    try self.redraw();
+}
+
+pub fn addRandomShapes(self: *Canvas) !void {
+    try random_document.addRandomShapes(self.document, self.allocator, std.crypto.random);
+    self.requestRedraw();
 }

 pub fn setZoom(self: *Canvas, value: f32) void {
@@ -82,41 +138,74 @@ pub fn addZoom(self: *Canvas, value: f32) void {
    self._zoom = @max(self._zoom, 0.01);
 }

-/// Запросить перерисовку (выполнится с учётом redraw_throttle_ms при вызове processPendingRedraw).
+pub fn multZoom(self: *Canvas, value: f32) void {
+    self._zoom *= value;
+    self._zoom = @max(self._zoom, 0.01);
+}
+
+pub fn getZoom(self: Canvas) f32 {
+    return self._zoom;
+}
+
+pub fn setRenderingQuality(self: *Canvas, value: f32) void {
+    self._rendering_quality = std.math.clamp(value, 1.0, 100.0);
+    self.requestRedraw();
+}
+
+pub fn getRenderingQuality(self: Canvas) f32 {
+    return self._rendering_quality;
+}
+
 pub fn requestRedraw(self: *Canvas) void {
    self._redraw_pending = true;
 }

-/// Выполнить отложенную перерисовку, если прошло не менее redraw_throttle_ms с прошлой отрисовки.
 pub fn processPendingRedraw(self: *Canvas) !void {
    if (!self._redraw_pending) return;
    if (self.redraw_throttle_ms == 0) {
        self._redraw_pending = false;
-        try self.redrawExample();
+        try self.redraw();
        return;
    }
    const now_ms = std.time.milliTimestamp();
    const elapsed: i64 = if (self._last_redraw_time_ms == 0) self.redraw_throttle_ms else now_ms - self._last_redraw_time_ms;
    if (elapsed < @as(i64, @intCast(self.redraw_throttle_ms))) return;
    self._redraw_pending = false;
-    try self.redrawExample();
+    try self.redraw();
 }

-pub fn getScaledImageSize(self: Canvas) ImageRect {
+pub fn getZoomedImageSize(self: Canvas) Rect_i {
    const doc = self.document;
    return .{
        .x = @intFromFloat(self.pos.x),
        .y = @intFromFloat(self.pos.y),
-        .w = @intFromFloat(doc.size.width * self._zoom),
-        .h = @intFromFloat(doc.size.height * self._zoom),
+        .w = @intFromFloat(doc.size.w * self._zoom),
+        .h = @intFromFloat(doc.size.h * self._zoom),
    };
 }

-/// Обновить видимую часть изображения (в пикселях холста) и сохранить в `visible_rect`.
-///
-/// `viewport` и `scroll_offset` ожидаются в *physical* пикселях (т.е. уже умноженные на windowNaturalScale).
-///
-/// После обновления (или если текстуры ещё нет) перерисовывает текстуру, чтобы она содержала только видимую часть.
+/// Точка контента -> координаты документа.
+pub fn contentPointToDocument(self: Canvas, content_point: dvui.Point, natural_scale: f32) Point2_f {
+    const img = self.getZoomedImageSize();
+    const px_x = content_point.x * natural_scale - @as(f32, @floatFromInt(img.x));
+    const px_y = content_point.y * natural_scale - @as(f32, @floatFromInt(img.y));
+    return .{
+        .x = px_x / self._zoom,
+        .y = px_y / self._zoom,
+    };
+}
+
+/// Точка контента внутри холста.
+pub fn isContentPointOnDocument(self: Canvas, content_point: dvui.Point, natural_scale: f32) bool {
+    const img = self.getZoomedImageSize();
+    const left_n = @as(f32, @floatFromInt(img.x)) / natural_scale;
+    const top_n = @as(f32, @floatFromInt(img.y)) / natural_scale;
+    const right_n = @as(f32, @floatFromInt(img.x + img.w)) / natural_scale;
+    const bottom_n = @as(f32, @floatFromInt(img.y + img.h)) / natural_scale;
+    return content_point.x >= left_n and content_point.x < right_n and
+        content_point.y >= top_n and content_point.y < bottom_n;
+}
+
 pub fn updateVisibleImageRect(self: *Canvas, viewport: dvui.Rect, scroll_offset: dvui.Point) bool {
    const next = computeVisibleImageRect(self.*, viewport, scroll_offset);
    var changed = false;
@@ -124,33 +213,28 @@ pub fn updateVisibleImageRect(self: *Canvas, viewport: dvui.Rect, scroll_offset:
        changed |= next.x != vis.x or next.y != vis.y or next.w != vis.w or next.h != vis.h;
    }
    self._visible_rect = next;
-    if (changed) {
-        std.debug.print("Visible Image Rect: {{ x: {}, y: {}, w: {}, h: {} }}\n", .{ next.x, next.y, next.w, next.h });
-    }
    if (changed or self.texture == null) {
        return true;
    }
    return false;
 }

-fn computeVisibleImageRect(self: Canvas, viewport: dvui.Rect, scroll_offset: dvui.Point) ImageRect {
-    const image_rect = self.getScaledImageSize();
+fn computeVisibleImageRect(self: Canvas, viewport: dvui.Rect, scroll_offset: dvui.Point) Rect_i {
+    const image_rect = self.getZoomedImageSize();

    const img_w: u32 = image_rect.w;
    const img_h: u32 = image_rect.h;

-    // Видимый размер всегда равен размеру viewport, но не больше холста
    const vis_w: u32 = @min(@as(u32, @intFromFloat(viewport.w)), img_w);
    const vis_h: u32 = @min(@as(u32, @intFromFloat(viewport.h)), img_h);

-    // Вычисляем x и y на основе scroll_offset, clamped чтобы не выходить за границы
    const raw_x: i64 = @intFromFloat(scroll_offset.x - @as(f32, @floatFromInt(image_rect.x)));
    const raw_y: i64 = @intFromFloat(scroll_offset.y - @as(f32, @floatFromInt(image_rect.y)));

    const vis_x: u32 = @intCast(std.math.clamp(raw_x, 0, @as(i64, img_w) - @as(i64, vis_w)));
    const vis_y: u32 = @intCast(std.math.clamp(raw_y, 0, @as(i64, img_h) - @as(i64, vis_h)));

-    return ImageRect{
+    return Rect_i{
        .x = vis_x,
        .y = vis_y,
        .w = vis_w,
--- a/src/WindowContext.zig
+++ b/src/WindowContext.zig
@@ -3,44 +3,51 @@ const Canvas = @import("Canvas.zig");
 const CpuRenderEngine = @import("render/CpuRenderEngine.zig");
 const RenderEngine = @import("render/RenderEngine.zig").RenderEngine;
 const Document = @import("models/Document.zig");
+const random_document = @import("random_document.zig");
 const basic_models = @import("models/basic_models.zig");

 const WindowContext = @This();

-/// Один открытый документ: документ + свой холст и движок рендера
 pub const OpenDocument = struct {
    document: Document,
    cpu_render: CpuRenderEngine,
    canvas: Canvas,
+    /// Выбранный объект в дереве (id объекта).
+    selected_object_id: ?u64 = null,

-    /// Инициализировать по месту (canvas хранит указатель на cpu_render этого же экземпляра).
    pub fn init(allocator: std.mem.Allocator, self: *OpenDocument) void {
-        const default_size = basic_models.Size{ .width = 800, .height = 600 };
-        self.document = Document.init(allocator, default_size);
-        self.cpu_render = CpuRenderEngine.init(allocator, .Squares);
-        self.canvas = Canvas.init(allocator, &self.document, (&self.cpu_render).renderEngine());
+        initWithDocument(allocator, self, .init(.{
+            .w = 800,
+            .h = 600,
+        }));
    }

-    pub fn deinit(self: *OpenDocument) void {
-        self.document.deinit();
+    pub fn initWithDocument(allocator: std.mem.Allocator, self: *OpenDocument, doc: Document) void {
+        self.document = doc;
+        self.cpu_render = CpuRenderEngine.init(allocator, .Squares);
+        self.canvas = Canvas.init(
+            allocator,
+            &self.document,
+            (&self.cpu_render).renderEngine(),
+        );
+        self.selected_object_id = null;
+    }
+
+    pub fn deinit(self: *OpenDocument, allocator: std.mem.Allocator) void {
+        self.document.deinit(allocator);
        self.canvas.deinit();
    }
 };

 allocator: std.mem.Allocator,
-frame_index: u64,
-/// Список открытых документов (вкладок): указатели на документ+холст
 documents: std.ArrayList(*OpenDocument),
-/// Индекс активной вкладки; null — ни один документ не выбран
 active_document_index: ?usize,

 pub fn init(allocator: std.mem.Allocator) !WindowContext {
-    const frame_index: u64 = 0;
    const documents = std.ArrayList(*OpenDocument).empty;
    const active_document_index: ?usize = null;
    return .{
        .allocator = allocator,
-        .frame_index = frame_index,
        .documents = documents,
        .active_document_index = active_document_index,
    };
@@ -48,40 +55,47 @@ pub fn init(allocator: std.mem.Allocator) !WindowContext {

 pub fn deinit(self: *WindowContext) void {
    for (self.documents.items) |ptr| {
-        ptr.deinit();
+        ptr.deinit(self.allocator);
        self.allocator.destroy(ptr);
    }
    self.documents.deinit(self.allocator);
 }

-/// Вернуть указатель на активный открытый документ (null если нет выбранной вкладки).
 pub fn activeDocument(self: *WindowContext) ?*OpenDocument {
    const i = self.active_document_index orelse return null;
    if (i >= self.documents.items.len) return null;
    return self.documents.items[i];
 }

-/// Добавить новый документ и сделать его активным.
 pub fn addNewDocument(self: *WindowContext) !void {
    const ptr = try self.allocator.create(OpenDocument);
    errdefer self.allocator.destroy(ptr);
    OpenDocument.init(self.allocator, ptr);
+    //try random_document.addRandomShapes(&ptr.document, std.crypto.random);
+    try self.documents.append(self.allocator, ptr);
+    self.active_document_index = self.documents.items.len - 1;
+}
+
+pub fn addDocument(self: *WindowContext, doc: Document) !void {
+    const ptr = try self.allocator.create(OpenDocument);
+    errdefer self.allocator.destroy(ptr);
+    var doc_mut = doc;
+    errdefer doc_mut.deinit(self.allocator);
+    OpenDocument.initWithDocument(self.allocator, ptr, doc_mut);
    try self.documents.append(self.allocator, ptr);
    self.active_document_index = self.documents.items.len - 1;
 }

-/// Выбрать вкладку по индексу.
 pub fn setActiveDocument(self: *WindowContext, index: usize) void {
    if (index < self.documents.items.len) {
        self.active_document_index = index;
    }
 }

-/// Закрыть вкладку по индексу; активная вкладка сдвигается при необходимости.
 pub fn closeDocument(self: *WindowContext, index: usize) void {
    if (index >= self.documents.items.len) return;
    const open_doc = self.documents.items[index];
-    open_doc.deinit();
+    open_doc.deinit(self.allocator);
    self.allocator.destroy(open_doc);
    _ = self.documents.orderedRemove(index);

--- a/src/icons.zig
+++ b/src/icons.zig
@@ -0,0 +1,8 @@
+const dvui = @import("dvui");
+
+pub const line = dvui.entypo.flow_line;
+pub const ellipse = dvui.entypo.circle;
+pub const broken = dvui.entypo.line_graph;
+pub const trash = dvui.entypo.trash;
+pub const cross = dvui.entypo.cross;
+pub const plus = dvui.entypo.plus;
--- a/src/main.zig
+++ b/src/main.zig
@@ -5,7 +5,10 @@ const WindowContext = @import("WindowContext.zig");
 const ui = @import("ui/frame.zig");

 pub fn main() !void {
-    var gpa = std.heap.GeneralPurposeAllocator(.{}){};
+    // std.heap.GeneralPurposeAllocator was renamed to DebugAllocator recently.
+    var gpa: std.heap.DebugAllocator(.{}) = .init;
+    defer _ = gpa.deinit();
+
    const allocator = gpa.allocator();

    var backend = try SDLBackend.initWindow(.{
--- a/src/models/Document.zig
+++ b/src/models/Document.zig
@@ -1,134 +1,132 @@
 const std = @import("std");
 const basic_models = @import("basic_models.zig");
-const properties = @import("Property.zig");
-const Property = properties.Property;
-const Size = basic_models.Size;
+const Size_f = basic_models.Size_f;
 const Document = @This();

-size: Size,
-allocator: std.mem.Allocator,
-/// Корневые объекты документа (вложенность через Object.children).
-objects: std.ArrayList(Object),
+pub const Object = @import("Object.zig");
+const shape = @import("shape/shape.zig");

-pub fn init(allocator: std.mem.Allocator, size: Size) Document {
+size: Size_f,
+objects: std.ArrayList(Object),
+next_object_id: u64,
+
+pub fn init(size: Size_f) Document {
    return .{
        .size = size,
-        .allocator = allocator,
        .objects = std.ArrayList(Object).empty,
+        .next_object_id = 1,
    };
 }

-pub fn deinit(self: *Document) void {
-    for (self.objects.items) |*obj| obj.deinit(self.allocator);
-    self.objects.deinit(self.allocator);
+pub fn deinit(self: *Document, allocator: std.mem.Allocator) void {
+    for (self.objects.items) |*obj| obj.deinit(allocator);
+    self.objects.deinit(allocator);
 }

-/// Добавить корневой объект в документ (клонирует в allocator документа).
-pub fn addObject(self: *Document, template: Object) !void {
-    const obj = try template.clone(self.allocator);
-    try self.objects.append(self.allocator, obj);
+pub fn clone(self: *const Document, allocator: std.mem.Allocator) !Document {
+    var objects_list = std.ArrayList(Object).empty;
+    errdefer {
+        for (objects_list.items) |*obj| obj.deinit(allocator);
+        objects_list.deinit(allocator);
+    }
+    var next_id = self.next_object_id;
+    for (self.objects.items) |obj| {
+        try objects_list.append(allocator, try obj.clone(allocator, &next_id));
+    }
+    return .{
+        .size = self.size,
+        .objects = objects_list,
+        .next_object_id = next_id,
+    };
 }

-/// Тип фигуры: определяет, как RenderEngine интерпретирует свойства и рисует объект.
-pub const ShapeKind = enum {
-    rect,
-    ellipse,
-    line,
-    path,
-};
+pub fn addObject(self: *Document, allocator: std.mem.Allocator, template: Object) !void {
+    const obj = try template.clone(allocator, &self.next_object_id);
+    try self.objects.append(allocator, obj);
+}

-/// Объект документа: тип фигуры, свойства и вложенные дочерние объекты.
-/// Типы объектов задаются конструкторами; UI и RenderEngine работают с union Property.
-pub const Object = struct {
-    shape: ShapeKind,
-    properties: std.ArrayList(Property),
-    /// Вложенные объекты (дерево).
-    children: std.ArrayList(Object),
-
-    /// Найти свойство по тегу и вернуть вариант union (caller делает switch).
-    pub fn getProperty(self: Object, tag: std.meta.Tag(Property)) ?Property {
-        for (self.properties.items) |prop| {
-            if (std.meta.activeTag(prop) == tag) return prop;
-        }
-        return null;
-    }
-
-    /// Установить свойство: если уже есть с таким тегом — заменить, иначе добавить.
-    pub fn setProperty(self: *Object, allocator: std.mem.Allocator, prop: Property) !void {
-        for (self.properties.items, 0..) |*p, i| {
-            if (std.meta.activeTag(p.*) == std.meta.activeTag(prop)) {
-                self.properties.items[i] = prop;
+/// Добавляет объект в документ: как ребёнка родителя (если id найден), иначе в корень.
+pub fn addObjectUnderParentId(self: *Document, allocator: std.mem.Allocator, parent_id: ?u64, template: Object) !void {
+    if (parent_id) |id| {
+        if (self.findObjectById(id)) |parent| {
+            try parent.addChild(allocator, template, &self.next_object_id);
            return;
        }
    }
-        try self.properties.append(allocator, prop);
+    try self.addObject(allocator, template);
+}
+
+pub fn addShape(self: *Document, allocator: std.mem.Allocator, parent: ?*Object, shape_kind: Object.ShapeKind) !void {
+    const obj = try shape.createObject(allocator, shape_kind);
+    if (parent) |p| {
+        try p.addChild(allocator, obj, &self.next_object_id);
+    } else {
+        try self.addObject(allocator, obj);
    }
+}

-    /// Добавить дочерний объект (клонирует в переданный allocator).
-    pub fn addChild(self: *Object, allocator: std.mem.Allocator, template: Object) !void {
-        const obj = try template.clone(allocator);
-        try self.children.append(allocator, obj);
+/// Удаляет объект из документа (из корня или из детей родителя). Возвращает true, если объект был найден и удалён.
+pub fn removeObject(self: *Document, allocator: std.mem.Allocator, obj: *Object) bool {
+    for (self.objects.items, 0..) |*item, i| {
+        if (item == obj) {
+            var removed = self.objects.orderedRemove(i);
+            removed.deinit(allocator);
+            return true;
        }
-
-    /// Клонировать объект рекурсивно (свойства и дети).
-    pub fn clone(self: Object, allocator: std.mem.Allocator) !Object {
-        var properties_list = std.ArrayList(Property).empty;
-        errdefer properties_list.deinit(allocator);
-        try properties_list.appendSlice(allocator, self.properties.items);
-
-        var children_list = std.ArrayList(Object).empty;
-        errdefer children_list.deinit(allocator);
-        for (self.children.items) |child| {
-            try children_list.append(allocator, try child.clone(allocator));
+        if (removeFromChildren(allocator, &item.children, obj)) return true;
    }
+    return false;
+}

-        return .{
-            .shape = self.shape,
-            .properties = properties_list,
-            .children = children_list,
-        };
+/// Удаляет объект по id. Возвращает true, если объект был найден и удалён.
+pub fn removeObjectById(self: *Document, allocator: std.mem.Allocator, obj_id: u64) bool {
+    for (self.objects.items, 0..) |*item, i| {
+        if (item.id == obj_id) {
+            var removed = self.objects.orderedRemove(i);
+            removed.deinit(allocator);
+            return true;
        }
-
-    pub fn deinit(self: *Object, allocator: std.mem.Allocator) void {
-        for (self.children.items) |*child| child.deinit(allocator);
-        self.children.deinit(allocator);
-        self.properties.deinit(allocator);
-        self.* = undefined;
+        if (removeFromChildrenById(allocator, &item.children, obj_id)) return true;
    }
+    return false;
+}

-    /// Базовый объект с общим набором свойств (для внутреннего использования конструкторами).
-    fn createWithCommon(allocator: std.mem.Allocator, shape: ShapeKind) !Object {
-        const common = properties.defaultCommonProperties();
-        var properties_list = std.ArrayList(Property).empty;
-        errdefer properties_list.deinit(allocator);
-        try properties_list.appendSlice(allocator, &common);
-        return .{
-            .shape = shape,
-            .properties = properties_list,
-            .children = std.ArrayList(Object).empty,
-        };
+pub fn findObjectById(self: *Document, obj_id: u64) ?*Object {
+    for (self.objects.items) |*item| {
+        if (item.id == obj_id) return item;
+        if (findInChildrenById(&item.children, obj_id)) |found| return found;
    }
+    return null;
+}

-    // --- Публичные конструкторы: базовый объект + одно свойство фигуры ---
-
-    pub fn createRect(allocator: std.mem.Allocator) !Object {
-        var obj = try createWithCommon(allocator, .rect);
-        errdefer obj.deinit(allocator);
-        try obj.properties.append(allocator, .{ .size = .{ .width = 100, .height = 100 } });
-        return obj;
+fn removeFromChildren(allocator: std.mem.Allocator, children: *std.ArrayList(Object), obj: *Object) bool {
+    for (children.items, 0..) |*item, i| {
+        if (item == obj) {
+            var removed = children.orderedRemove(i);
+            removed.deinit(allocator);
+            return true;
        }
-
-    pub fn createEllipse(allocator: std.mem.Allocator) !Object {
-        var obj = try createWithCommon(allocator, .ellipse);
-        errdefer obj.deinit(allocator);
-        try obj.properties.append(allocator, .{ .radii = .{ .x = 50, .y = 50 } });
-        return obj;
+        if (removeFromChildren(allocator, &item.children, obj)) return true;
    }
+    return false;
+}

-    pub fn createLine(allocator: std.mem.Allocator) !Object {
-        var obj = try createWithCommon(allocator, .line);
-        errdefer obj.deinit(allocator);
-        try obj.properties.append(allocator, .{ .end_point = .{ .x = 100, .y = 0 } });
-        return obj;
+fn removeFromChildrenById(allocator: std.mem.Allocator, children: *std.ArrayList(Object), obj_id: u64) bool {
+    for (children.items, 0..) |*item, i| {
+        if (item.id == obj_id) {
+            var removed = children.orderedRemove(i);
+            removed.deinit(allocator);
+            return true;
        }
-};
+        if (removeFromChildrenById(allocator, &item.children, obj_id)) return true;
+    }
+    return false;
+}
+
+fn findInChildrenById(children: *std.ArrayList(Object), obj_id: u64) ?*Object {
+    for (children.items) |*item| {
+        if (item.id == obj_id) return item;
+        if (findInChildrenById(&item.children, obj_id)) |found| return found;
+    }
+    return null;
+}
--- a/src/models/Object.zig
+++ b/src/models/Object.zig
@@ -0,0 +1,93 @@
+const std = @import("std");
+const Property = @import("Property.zig").Property;
+const PropertyData = @import("Property.zig").Data;
+const Object = @This();
+
+pub const ShapeKind = enum {
+    line,
+    ellipse,
+    broken,
+};
+
+const default_common_data = [_]PropertyData{
+    .{ .position = .{ .x = 0, .y = 0 } },
+    .{ .angle = 0 },
+    .{ .scale = .{ .scale_x = 1, .scale_y = 1 } },
+    .{ .visible = true },
+    .{ .opacity = 1.0 },
+    .{ .locked = false },
+    .{ .stroke_rgba = 0x000000FF }, // чёрный, полная непрозрачность
+    .{ .thickness = 2.0 },
+};
+
+pub const defaultCommonProperties: [default_common_data.len]Property = blk: {
+    var result: [default_common_data.len]Property = undefined;
+    for (default_common_data, &result) |d, *p| {
+        p.* = .{ .data = d };
+    }
+    break :blk result;
+};
+
+id: u64,
+shape: ShapeKind,
+properties: std.ArrayList(Property),
+children: std.ArrayList(Object),
+
+pub fn getProperty(self: Object, comptime tag: std.meta.Tag(PropertyData)) ?@FieldType(PropertyData, @tagName(tag)) {
+    for (self.properties.items) |*prop| {
+        if (std.meta.activeTag(prop.data) == tag) return @field(prop.data, @tagName(tag));
+    }
+    return null;
+}
+
+/// Забирает владение Property
+pub fn setProperty(self: *Object, allocator: std.mem.Allocator, prop: Property) !void {
+    for (self.properties.items, 0..) |*p, i| {
+        if (std.meta.activeTag(p.data) == std.meta.activeTag(prop.data)) {
+            if (p.data == .points) allocator.free(p.data.points);
+            self.properties.items[i] = prop;
+            return;
+        }
+    }
+    return error.PropertyNotFound;
+}
+
+pub fn addChild(self: *Object, allocator: std.mem.Allocator, template: Object, next_id: *u64) !void {
+    const obj = try template.clone(allocator, next_id);
+    try self.children.append(allocator, obj);
+}
+
+pub fn clone(self: Object, allocator: std.mem.Allocator, next_id: *u64) !Object {
+    var properties_list = std.ArrayList(Property).empty;
+    errdefer properties_list.deinit(allocator);
+    for (self.properties.items) |prop| {
+        try properties_list.append(allocator, try prop.clone(allocator));
+    }
+
+    var children_list = std.ArrayList(Object).empty;
+    errdefer children_list.deinit(allocator);
+    for (self.children.items) |child| {
+        try children_list.append(allocator, try child.clone(allocator, next_id));
+    }
+
+    return .{
+        .id = allocId(next_id),
+        .shape = self.shape,
+        .properties = properties_list,
+        .children = children_list,
+    };
+}
+
+fn allocId(next_id: *u64) u64 {
+    const id = next_id.*;
+    next_id.* += 1;
+    return id;
+}
+
+pub fn deinit(self: *Object, allocator: std.mem.Allocator) void {
+    for (self.children.items) |*child| child.deinit(allocator);
+    self.children.deinit(allocator);
+    for (self.properties.items) |*prop| prop.deinit(allocator);
+    self.properties.deinit(allocator);
+    self.* = undefined;
+}
--- a/src/models/Property.zig
+++ b/src/models/Property.zig
@@ -1,62 +1,62 @@
-// Модель свойств объекта документа.
-// Каждое свойство — отдельный тип в union; UI и RenderEngine работают с полиморфным Property.
-// Комплексные значения (размер, радиусы) — один вариант свойства, а не несколько полей.
-
+const std = @import("std");
 const basic_models = @import("basic_models.zig");
-const Point2 = basic_models.Point2;
-const Scale2 = basic_models.Scale2;
-const Size = basic_models.Size;
-const Radii = basic_models.Radii;
+const Point2_f = basic_models.Point2_f;
+const Scale2_f = basic_models.Scale2_f;
+const Size_f = basic_models.Size_f;
+const Radii_f = basic_models.Radii_f;

-/// Одно свойство объекта: полиморфный union.
-/// Варианты — целостные значения (size, radii), не разбитые на отдельные поля.
-/// UI перебирает свойства и по тегу показывает нужный редактор;
-/// RenderEngine по тегу фигуры читает нужные свойства для отрисовки.
-pub const Property = union(enum) {
-    // --- Общие для всех фигур (см. defaultCommonProperties) ---
-    /// Левый верхний угол bbox для rect/path; центр для ellipse; начало для line.
-    position: Point2,
-    scale: Scale2,
+pub const Data = union(enum) {
+    position: Point2_f,
+    angle: f32,
+    scale: Scale2_f,
    visible: bool,
    opacity: f32,
    locked: bool,

-    // --- Прямоугольник: один вариант ---
-    size: Size,
+    size: Size_f,
+    radii: Radii_f,
+    /// Процент дуги эллипса: 100 — полный эллипс, 50 — полуэллипс (0..100).
+    arc_percent: f32,
+    end_point: Point2_f,

-    // --- Эллипс: один вариант ---
-    radii: Radii,
+    /// Владеет памятью; при deinit/clone — free/duplicate.
+    points: []const Point2_f,
+    /// Замкнутый контур (для ломаной: отрезок последняя–первая точка + заливка).
+    closed: bool,

-    // --- Линия: конечная точка (относительно position) ---
-    end_point: Point2,
+    /// Включена ли заливка.
+    filled: bool,

-    // --- Визуал (опционально для будущего) ---
+    /// Цвет заливки, 0xRRGGBBAA.
    fill_rgba: u32,
+    /// Цвет обводки, 0xRRGGBBAA.
    stroke_rgba: u32,
+
+    thickness: f32,
 };

-const std = @import("std");
+pub const Property = struct {
+    data: Data,

-/// Общий набор свойств по умолчанию для любого объекта (одно место определения).
-/// Конструкторы фигур добавляют сначала его, затем специфичные свойства.
-pub fn defaultCommonProperties() []Property {
-    return .{
-        .{ .position = .{ .x = 0, .y = 0 } },
-        .{ .scale = .{ .scale_x = 1, .scale_y = 1 } },
-        .{ .visible = true },
-        .{ .opacity = 1.0 },
-        .{ .locked = false },
+    pub fn deinit(self: *Property, allocator: std.mem.Allocator) void {
+        switch (self.data) {
+            .points => |slice| allocator.free(slice),
+            else => {},
+        }
+        self.* = undefined;
+    }
+
+    pub fn clone(self: Property, allocator: std.mem.Allocator) !Property {
+        return switch (self.data) {
+            .points => |slice| .{
+                .data = .{
+                    .points = blk: {
+                        const copy = try allocator.dupe(Point2_f, slice);
+                        break :blk copy;
+                    },
+                },
+            },
+            else => .{ .data = self.data },
        };
-}
-
-test "Property is union" {
-    const p: Property = .{ .opacity = 0.5 };
-    try std.testing.expect(p == .opacity);
-    try std.testing.expect(p.opacity == 0.5);
-}
-
-test "common properties" {
-    const common = defaultCommonProperties();
-    try std.testing.expect(common[0].position.x == 0);
-    try std.testing.expect(common[2].visible == true);
-}
+    }
+};
--- a/src/models/basic_models.zig
+++ b/src/models/basic_models.zig
@@ -1,34 +1,43 @@
-pub const ImageRect = struct {
+pub const Rect_i = struct {
    x: u32,
    y: u32,
    w: u32,
    h: u32,
 };

-pub const ImageSize = struct {
+pub const Size_i = struct {
    w: u32,
    h: u32,
 };

-pub const Size = struct {
-    width: f32,
-    height: f32,
+pub const Size_f = struct {
+    w: f32,
+    h: f32,
 };

-/// Точка в 2D (документные единицы)
-pub const Point2 = struct {
+pub const Point2_f = struct {
    x: f32 = 0,
    y: f32 = 0,
 };

-/// Радиусы эллипса по осям (одно свойство).
-pub const Radii = struct {
+pub const Point2_i = struct {
+    x: i32 = 0,
+    y: i32 = 0,
+};
+
+pub const Radii_f = struct {
    x: f32,
    y: f32,
 };

-/// Масштаб объекта
-pub const Scale2 = struct {
+pub const Scale2_f = struct {
    scale_x: f32 = 1,
    scale_y: f32 = 1,
 };
+
+pub const Rect_f = struct {
+    x: f32 = 0,
+    y: f32 = 0,
+    w: f32 = 0,
+    h: f32 = 0,
+};
--- a/src/models/shape/broken.zig
+++ b/src/models/shape/broken.zig
@@ -0,0 +1,20 @@
+const std = @import("std");
+const Object = @import("../Object.zig");
+const Property = @import("../Property.zig").Property;
+const PropertyData = @import("../Property.zig").Data;
+const Point2_f = @import("../basic_models.zig").Point2_f;
+const Rect_f = @import("../basic_models.zig").Rect_f;
+const shape_mod = @import("shape.zig");
+
+/// Свойства фигуры по умолчанию (добавляются к общим). points — слайс на статический массив.
+pub const default_shape_properties_points = [_]Point2_f{
+    .{ .x = 0, .y = 0 },
+    .{ .x = 80, .y = 0 },
+    .{ .x = 80, .y = 60 },
+};
+pub const default_shape_properties = [_]Property{
+    .{ .data = .{ .points = &default_shape_properties_points } },
+    .{ .data = .{ .closed = false } },
+    .{ .data = .{ .filled = true } },
+    .{ .data = .{ .fill_rgba = 0x000000FF } },
+};
--- a/src/models/shape/ellipse.zig
+++ b/src/models/shape/ellipse.zig
@@ -0,0 +1,14 @@
+const std = @import("std");
+const Object = @import("../Object.zig");
+const Property = @import("../Property.zig").Property;
+const Rect_f = @import("../basic_models.zig").Rect_f;
+const shape_mod = @import("shape.zig");
+
+/// Свойства фигуры по умолчанию (добавляются к общим).
+pub const default_shape_properties = [_]Property{
+    .{ .data = .{ .radii = .{ .x = 50, .y = 50 } } },
+    .{ .data = .{ .arc_percent = 100.0 } },
+    .{ .data = .{ .closed = true } },
+    .{ .data = .{ .filled = false } },
+    .{ .data = .{ .fill_rgba = 0x000000FF } },
+};
--- a/src/models/shape/line.zig
+++ b/src/models/shape/line.zig
@@ -0,0 +1,10 @@
+const std = @import("std");
+const Object = @import("../Object.zig");
+const Property = @import("../Property.zig").Property;
+const Rect_f = @import("../basic_models.zig").Rect_f;
+const shape_mod = @import("shape.zig");
+
+/// Свойства фигуры по умолчанию (добавляются к общим).
+pub const default_shape_properties = [_]Property{
+    .{ .data = .{ .end_point = .{ .x = 100, .y = 200 } } },
+};
--- a/src/models/shape/shape.zig
+++ b/src/models/shape/shape.zig
@@ -0,0 +1,51 @@
+const std = @import("std");
+const Object = @import("../Object.zig");
+const Property = @import("../Property.zig").Property;
+const PropertyData = @import("../Property.zig").Data;
+const defaultCommonProperties = Object.defaultCommonProperties;
+const basic_models = @import("../basic_models.zig");
+const Point2_f = basic_models.Point2_f;
+const line = @import("line.zig");
+const ellipse = @import("ellipse.zig");
+const broken = @import("broken.zig");
+pub const Rect = basic_models.Rect_f;
+
+/// Добавляет к объекту список свойств фигуры. Для .points дублирует слайс (объект владеет).
+fn appendShapeProperties(allocator: std.mem.Allocator, obj: *Object, props: []const Property) !void {
+    for (props) |prop| {
+        if (prop.data == .points) {
+            const pts = prop.data.points;
+            const copy = try allocator.dupe(Point2_f, pts);
+            try obj.properties.append(allocator, .{ .data = .{ .points = copy } });
+        } else {
+            try obj.properties.append(allocator, prop);
+        }
+    }
+}
+
+/// Создаёт объект с дефолтными общими и фигурными свойствами.
+pub fn createObject(allocator: std.mem.Allocator, shape_kind: Object.ShapeKind) !Object {
+    var obj = try createWithCommonProperties(allocator, shape_kind);
+    errdefer obj.deinit(allocator);
+    switch (shape_kind) {
+        .line => try appendShapeProperties(allocator, &obj, &line.default_shape_properties),
+        .ellipse => try appendShapeProperties(allocator, &obj, &ellipse.default_shape_properties),
+        .broken => {
+            try appendShapeProperties(allocator, &obj, &broken.default_shape_properties);
+            try obj.setProperty(allocator, .{ .data = .{ .fill_rgba = obj.getProperty(.stroke_rgba).? } });
+        },
+    }
+    return obj;
+}
+
+fn createWithCommonProperties(allocator: std.mem.Allocator, shape_kind: Object.ShapeKind) !Object {
+    var properties_list = std.ArrayList(Property).empty;
+    errdefer properties_list.deinit(allocator);
+    for (defaultCommonProperties) |prop| try properties_list.append(allocator, prop);
+    return .{
+        .id = 0,
+        .shape = shape_kind,
+        .properties = properties_list,
+        .children = std.ArrayList(Object).empty,
+    };
+}
--- a/src/persistence/json_io.zig
+++ b/src/persistence/json_io.zig
@@ -0,0 +1,33 @@
+const std = @import("std");
+const Document = @import("../models/Document.zig");
+
+/// Сохраняет значение произвольного типа T в JSON-файл.
+pub fn saveToFile(comptime T: type, value: *const T, path: []const u8) !void {
+    var file = try std.fs.cwd().createFile(path, .{ .truncate = true });
+    defer file.close();
+
+    var buffer: [4096]u8 = undefined;
+    var writer = file.writer(&buffer);
+
+    try std.json.Stringify.value(value, .{ .whitespace = .indent_2 }, &writer.interface);
+
+    try writer.interface.flush();
+}
+
+/// Загружает значение типа T из JSON-файла.
+/// Для Document после разбора делается клон через allocator, т.к. парсер выделяет память
+/// из арены — при закрытии документа её нельзя освобождать нашим аллокатором.
+pub fn loadFromFile(comptime T: type, allocator: std.mem.Allocator, path: []const u8) !T {
+    var file = try std.fs.cwd().openFile(path, .{});
+    defer file.close();
+
+    const data = try file.readToEndAlloc(allocator, std.math.maxInt(usize));
+    defer allocator.free(data);
+
+    var parsed = try std.json.parseFromSlice(T, allocator, data, .{ .ignore_unknown_fields = true });
+    if (T == Document) {
+        defer parsed.deinit();
+        return try parsed.value.clone(allocator);
+    }
+    return parsed.value;
+}
--- a/src/random_document.zig
+++ b/src/random_document.zig
@@ -0,0 +1,130 @@
+const std = @import("std");
+const Document = @import("models/Document.zig");
+const Object = Document.Object;
+const shape = @import("models/shape/shape.zig");
+const basic_models = @import("models/basic_models.zig");
+const Size_f = basic_models.Size_f;
+const Point2_f = basic_models.Point2_f;
+const Scale2_f = basic_models.Scale2_f;
+const Radii_f = basic_models.Radii_f;
+
+fn randFloat(rng: std.Random, min: f32, max: f32) f32 {
+    return min + (max - min) * rng.float(f32);
+}
+
+fn randRgba(rng: std.Random) u32 {
+    const r = rng.int(u8);
+    const g = rng.int(u8);
+    const b = rng.int(u8);
+    const a: u8 = @intCast(rng.intRangeLessThan(usize, 128, 256));
+    return (@as(u32, r) << 24) | (@as(u32, g) << 16) | (@as(u32, b) << 8) | a;
+}
+
+fn randomShapeKind(rng: std.Random) Object.ShapeKind {
+    const shapes_implemented = [_]Object.ShapeKind{ .line, .ellipse, .broken };
+    return shapes_implemented[rng.intRangeLessThan(usize, 0, shapes_implemented.len)];
+}
+
+fn randomizeObjectProperties(allocator: std.mem.Allocator, doc_size: *const Size_f, obj: *Object, rng: std.Random) !void {
+    const margin: f32 = 8;
+    const max_x = @max(0, doc_size.w - margin);
+    const max_y = @max(0, doc_size.h - margin);
+
+    try obj.setProperty(allocator, .{ .data = .{
+        .position = .{
+            .x = randFloat(rng, margin, if (max_x > margin) max_x else margin),
+            .y = randFloat(rng, margin, if (max_y > margin) max_y else margin),
+        },
+    } });
+    try obj.setProperty(allocator, .{ .data = .{ .angle = randFloat(rng, 0, 2 * std.math.pi) } });
+    try obj.setProperty(allocator, .{ .data = .{
+        .scale = .{
+            .scale_x = randFloat(rng, 0.25, 2.0),
+            .scale_y = randFloat(rng, 0.25, 2.0),
+        },
+    } });
+    try obj.setProperty(allocator, .{ .data = .{ .visible = true } });
+    try obj.setProperty(allocator, .{ .data = .{ .opacity = randFloat(rng, 0.3, 1.0) } });
+    try obj.setProperty(allocator, .{ .data = .{ .locked = rng.boolean() } });
+
+    const stroke = randRgba(rng);
+    try obj.setProperty(allocator, .{ .data = .{ .stroke_rgba = stroke } });
+    obj.setProperty(allocator, .{ .data = .{ .fill_rgba = randRgba(rng) } }) catch {};
+    const thickness = randFloat(rng, max_x * 0.001, max_x * 0.01);
+    try obj.setProperty(allocator, .{ .data = .{ .thickness = thickness } });
+
+    switch (obj.shape) {
+        .line => {
+            const len = randFloat(rng, 20, @min(doc_size.w, doc_size.h) * 0.5);
+            const angle = randFloat(rng, 0, 2 * std.math.pi);
+            try obj.setProperty(allocator, .{ .data = .{
+                .end_point = .{
+                    .x = std.math.cos(angle) * len,
+                    .y = std.math.sin(angle) * len,
+                },
+            } });
+        },
+        .ellipse => {
+            const max_r = @min(120, @min(doc_size.w / 4, doc_size.h / 4));
+            try obj.setProperty(allocator, .{ .data = .{
+                .radii = .{
+                    .x = randFloat(rng, 8, @max(8, max_r)),
+                    .y = randFloat(rng, 8, @max(8, max_r)),
+                },
+            } });
+        },
+        .broken => {
+            var list = std.ArrayList(Point2_f).empty;
+            defer list.deinit(allocator);
+            const n = rng.intRangeLessThan(usize, 2, 9);
+            var x: f32 = 0;
+            var y: f32 = 0;
+            for (0..n) |_| {
+                try list.append(allocator, .{ .x = x, .y = y });
+                x += randFloat(rng, -40, 80);
+                y += randFloat(rng, -30, 60);
+            }
+            const slice = try allocator.dupe(Point2_f, list.items);
+            errdefer allocator.free(slice);
+            try obj.setProperty(allocator, .{ .data = .{ .points = slice } });
+        },
+    }
+}
+
+/// Создаёт в документе случайные фигуры (line, ellipse, broken).
+pub fn addRandomShapes(doc: *Document, allocator: std.mem.Allocator, rng: std.Random) !void {
+    const max_total: usize = 80;
+    var total_count: usize = 0;
+
+    const n_root = rng.intRangeLessThan(usize, 6, 15);
+    for (0..n_root) |_| {
+        if (total_count >= max_total) break;
+        var obj = try shape.createObject(allocator, randomShapeKind(rng));
+        defer obj.deinit(allocator);
+        try randomizeObjectProperties(allocator, &doc.size, &obj, rng);
+        try doc.addObject(allocator, obj);
+        total_count += 1;
+    }
+
+    var stack = std.ArrayList(*Object).empty;
+    defer stack.deinit(allocator);
+    for (doc.objects.items) |*obj| {
+        try stack.append(allocator, obj);
+    }
+    while (stack.pop()) |obj| {
+        if (total_count >= max_total) continue;
+        const n_children = rng.intRangeLessThan(usize, 0, 2);
+        const base_len = obj.children.items.len;
+        for (0..n_children) |_| {
+            if (total_count >= max_total) break;
+            var child = try shape.createObject(allocator, randomShapeKind(rng));
+            defer child.deinit(allocator);
+            try randomizeObjectProperties(allocator, &doc.size, &child, rng);
+            try obj.addChild(allocator, child, &doc.next_object_id);
+            total_count += 1;
+        }
+        for (obj.children.items[base_len..]) |*child| {
+            try stack.append(allocator, child);
+        }
+    }
+}
--- a/src/render/CpuRenderEngine.zig
+++ b/src/render/CpuRenderEngine.zig
@@ -2,9 +2,12 @@ const std = @import("std");
 const builtin = @import("builtin");
 const dvui = @import("dvui");
 const RenderEngine = @import("RenderEngine.zig").RenderEngine;
+const Document = @import("../models/Document.zig");
 const basic_models = @import("../models/basic_models.zig");
-const ImageSize = basic_models.ImageSize;
-const ImageRect = basic_models.ImageRect;
+const cpu_draw = @import("cpu/draw.zig");
+const RenderStats = @import("RenderStats.zig");
+const Size_i = basic_models.Size_i;
+const Rect_i = basic_models.Rect_i;
 const Allocator = std.mem.Allocator;
 const Color = dvui.Color;

@@ -15,26 +18,29 @@ const Type = enum {
 };

 type: Type,
-_allocator: Allocator,
 gradient_start: Color.PMA = .{ .r = 0, .g = 0, .b = 0, .a = 255 },
 gradient_end: Color.PMA = .{ .r = 255, .g = 255, .b = 255, .a = 255 },
+_allocator: Allocator,
+_renderStats: RenderStats,

 pub fn init(allocator: Allocator, render_type: Type) CpuRenderEngine {
    return .{
        ._allocator = allocator,
        .type = render_type,
+        ._renderStats = .{
+            .render_time_ns = 0,
+        },
    };
 }

 pub fn exampleReset(self: *CpuRenderEngine) void {
-    // Сгенерировать случайные цвета градиента
    var prng = std.Random.DefaultPrng.init(@intCast(std.time.microTimestamp()));
    const random = prng.random();
    self.gradient_start = Color.PMA{ .r = random.int(u8), .g = random.int(u8), .b = random.int(u8), .a = 255 };
    self.gradient_end = Color.PMA{ .r = random.int(u8), .g = random.int(u8), .b = random.int(u8), .a = 255 };
 }

-fn renderGradient(self: CpuRenderEngine, pixels: []Color.PMA, width: u32, height: u32, full_w: u32, full_h: u32, visible_rect: ImageRect) void {
+fn renderGradient(self: CpuRenderEngine, pixels: []Color.PMA, width: u32, height: u32, full_w: u32, full_h: u32, visible_rect: Rect_i) void {
    var y: u32 = 0;
    while (y < height) : (y += 1) {
        var x: u32 = 0;
@@ -60,16 +66,14 @@ fn renderGradient(self: CpuRenderEngine, pixels: []Color.PMA, width: u32, height
    }
 }

-fn renderSquares(self: CpuRenderEngine, pixels: []Color.PMA, canvas_size: ImageSize, visible_rect: ImageRect) void {
-    _ = self;
-
+fn renderSquares(pixels: []Color.PMA, canvas_size: Size_i, visible_rect: Rect_i) void {
    const colors = [_]Color.PMA{
-        .{ .r = 255, .g = 0, .b = 0, .a = 255 }, // red
-        .{ .r = 255, .g = 165, .b = 0, .a = 255 }, // orange
-        .{ .r = 255, .g = 255, .b = 0, .a = 255 }, // yellow
-        .{ .r = 0, .g = 255, .b = 0, .a = 255 }, // green
-        .{ .r = 0, .g = 255, .b = 255, .a = 255 }, // cyan
-        .{ .r = 0, .g = 0, .b = 255, .a = 255 }, // blue
+        .{ .r = 255, .g = 0, .b = 0, .a = 255 },
+        .{ .r = 255, .g = 165, .b = 0, .a = 255 },
+        .{ .r = 255, .g = 255, .b = 0, .a = 255 },
+        .{ .r = 0, .g = 255, .b = 0, .a = 255 },
+        .{ .r = 0, .g = 255, .b = 255, .a = 255 },
+        .{ .r = 0, .g = 0, .b = 255, .a = 255 },
    };

    const squares_num = 5;
@@ -106,7 +110,6 @@ fn renderSquares(self: CpuRenderEngine, pixels: []Color.PMA, canvas_size: ImageS
            const canvas_x = x + visible_rect.x;
            if (canvas_x >= canvas_size.w) continue;

-            // Check vertical line index
            var vertical_index: ?u32 = null;
            for (0..x_pos.len) |i| {
                if (canvas_x >= x_pos[i] and canvas_x < x_pos[i] + thikness) {
@@ -115,7 +118,6 @@ fn renderSquares(self: CpuRenderEngine, pixels: []Color.PMA, canvas_size: ImageS
                }
            }

-            // Check horizontal line index
            var horizontal_index: ?u32 = null;
            for (0..y_pos.len) |i| {
                if (canvas_y >= y_pos[i] and canvas_y < y_pos[i] + thikness) {
@@ -129,7 +131,6 @@ fn renderSquares(self: CpuRenderEngine, pixels: []Color.PMA, canvas_size: ImageS
            } else if (horizontal_index) |idx| {
                pixels[y * visible_rect.w + x] = colors[idx];
            } else {
-                // Find square
                var square_x: u32 = 0;
                for (0..squares_num) |i| {
                    if (canvas_x >= x_pos[i] + thikness and canvas_x < x_pos[i + 1]) {
@@ -154,27 +155,43 @@ fn renderSquares(self: CpuRenderEngine, pixels: []Color.PMA, canvas_size: ImageS
    }
 }

-pub fn example(self: CpuRenderEngine, canvas_size: ImageSize, visible_rect: ImageRect) !?dvui.Texture {
+pub fn example(self: CpuRenderEngine, canvas_size: Size_i, visible_rect: Rect_i) !?dvui.Texture {
    const full_w = canvas_size.w;
    const full_h = canvas_size.h;

    const width = visible_rect.w;
    const height = visible_rect.h;

-    // Выделить буфер пиксельных данных
    const pixels = try self._allocator.alloc(Color.PMA, @as(usize, width) * height);
    defer self._allocator.free(pixels);

-    // std.debug.print("w={any}, fw={any};\th={any}, fh={any}\n", .{ width, full_w, height, full_h });
-
    switch (self.type) {
        .Gradient => self.renderGradient(pixels, width, height, full_w, full_h, visible_rect),
-        .Squares => self.renderSquares(pixels, canvas_size, visible_rect),
+        .Squares => renderSquares(pixels, canvas_size, visible_rect),
    }

-    return try dvui.textureCreate(pixels, width, height, .nearest);
+    return try dvui.textureCreate(pixels, width, height, .nearest, .rgba_8_8_8_8);
 }

 pub fn renderEngine(self: *CpuRenderEngine) RenderEngine {
    return .{ .cpu = self };
 }
+
+/// Растеризует документ в текстуру (фон + фигуры через конвейер).
+pub fn renderDocument(self: *CpuRenderEngine, document: *const Document, canvas_size: Size_i, visible_rect: Rect_i) !?dvui.Texture {
+    const width = visible_rect.w;
+    const height = visible_rect.h;
+    const pixels = try self._allocator.alloc(Color.PMA, @as(usize, width) * height);
+    defer self._allocator.free(pixels);
+
+    for (pixels) |*p| p.* = .{ .r = 255, .g = 255, .b = 255, .a = 255 };
+    var t = try std.time.Timer.start();
+    try cpu_draw.drawDocument(pixels, width, height, visible_rect, document, canvas_size, self._allocator);
+    self._renderStats.render_time_ns = t.read();
+
+    return try dvui.textureCreate(pixels, width, height, .nearest, .rgba_8_8_8_8);
+}
+
+pub fn getStats(self: CpuRenderEngine) RenderStats {
+    return self._renderStats;
+}
--- a/src/render/RenderEngine.zig
+++ b/src/render/RenderEngine.zig
@@ -1,7 +1,8 @@
-// Интерфейс для рендеринга документа
 const dvui = @import("dvui");
 const CpuRenderEngine = @import("CpuRenderEngine.zig");
+const Document = @import("../models/Document.zig");
 const basic_models = @import("../models/basic_models.zig");
+const RenderStats = @import("RenderStats.zig");

 pub const RenderEngine = union(enum) {
    cpu: *CpuRenderEngine,
@@ -12,9 +13,22 @@ pub const RenderEngine = union(enum) {
        }
    }

-    pub fn example(self: RenderEngine, canvas_size: basic_models.ImageSize, visible_rect: basic_models.ImageRect) !?dvui.Texture {
+    pub fn example(self: RenderEngine, canvas_size: basic_models.Size_i, visible_rect: basic_models.Rect_i) !?dvui.Texture {
        return switch (self) {
            .cpu => |cpu_r| cpu_r.example(canvas_size, visible_rect),
        };
    }
+
+    pub fn getStats(self: RenderEngine) RenderStats {
+        return switch (self) {
+            .cpu => |cpu_r| cpu_r.getStats(),
+        };
+    }
+
+    /// Растеризует документ в текстуру.
+    pub fn render(self: RenderEngine, document: *const Document, canvas_size: basic_models.Size_i, visible_rect: basic_models.Rect_i) !?dvui.Texture {
+        return switch (self) {
+            .cpu => |cpu_r| cpu_r.renderDocument(document, canvas_size, visible_rect),
+        };
+    }
 };
--- a/src/render/RenderStats.zig
+++ b/src/render/RenderStats.zig
@@ -0,0 +1,3 @@
+const RenderStats = @This();
+
+render_time_ns: u64, // Время рендера кадра в микросекундах
--- a/src/render/cpu/broken.zig
+++ b/src/render/cpu/broken.zig
@@ -0,0 +1,55 @@
+const std = @import("std");
+const Document = @import("../../models/Document.zig");
+const pipeline = @import("pipeline.zig");
+const line = @import("line.zig");
+const DrawContext = pipeline.DrawContext;
+const Color = @import("dvui").Color;
+
+const Object = Document.Object;
+const default_stroke: Color.PMA = .{ .r = 0, .g = 0, .b = 0, .a = 255 };
+const default_fill: Color.PMA = .{ .r = 0, .g = 0, .b = 0, .a = 0 };
+const default_thickness: f32 = 2.0;
+
+/// Ломаная по точкам, обводка stroke_rgba. При closed — отрезок последняя–первая точка и заливка fill_rgba.
+pub fn draw(
+    ctx: *DrawContext,
+    obj: *const Object,
+    allocator: std.mem.Allocator,
+) !void {
+    const pts = obj.getProperty(.points) orelse return;
+    if (pts.len < 2) return;
+    const stroke = if (obj.getProperty(.stroke_rgba)) |stroke_rgba| pipeline.rgbaToPma(stroke_rgba) else default_stroke;
+    const thickness = obj.getProperty(.thickness) orelse default_thickness;
+    const closed = obj.getProperty(.closed) orelse false;
+    const filled = obj.getProperty(.filled) orelse true;
+    const fill_color = if (obj.getProperty(.fill_rgba)) |fill_rgba| pipeline.rgbaToPma(fill_rgba) else default_fill;
+
+    const buffer = try allocator.alloc(Color.PMA, ctx.buf_width * ctx.buf_height);
+    @memset(buffer, .{ .r = 0, .g = 0, .b = 0, .a = 0 });
+    defer allocator.free(buffer);
+
+    var copy_ctx = ctx.*;
+    copy_ctx.pixels = buffer;
+    copy_ctx.replace_mode = true;
+
+    const do_fill = closed and filled;
+
+    if (do_fill) {
+        copy_ctx.startFill(allocator) catch return;
+    }
+
+    var i: usize = 0;
+    while (i + 1 < pts.len) : (i += 1) {
+        line.drawLine(&copy_ctx, pts[i].x, pts[i].y, pts[i + 1].x, pts[i + 1].y, stroke, thickness, true);
+    }
+    if (closed and pts.len >= 2) {
+        const last = pts.len - 1;
+        line.drawLine(&copy_ctx, pts[last].x, pts[last].y, pts[0].x, pts[0].y, stroke, thickness, true);
+    }
+
+    if (do_fill) {
+        copy_ctx.stopFill(allocator, fill_color);
+    }
+
+    ctx.compositeDrawerContext(&copy_ctx, copy_ctx.transform.opacity);
+}
--- a/src/render/cpu/draw.zig
+++ b/src/render/cpu/draw.zig
@@ -0,0 +1,67 @@
+const std = @import("std");
+const Document = @import("../../models/Document.zig");
+const pipeline = @import("pipeline.zig");
+const line = @import("line.zig");
+const ellipse = @import("ellipse.zig");
+const broken = @import("broken.zig");
+const basic_models = @import("../../models/basic_models.zig");
+const Rect_i = basic_models.Rect_i;
+const Size_i = basic_models.Size_i;
+
+const Object = Document.Object;
+const DrawContext = pipeline.DrawContext;
+const Transform = pipeline.Transform;
+
+fn isVisible(obj: *const Object) bool {
+    return obj.getProperty(.visible) orelse true;
+}
+
+fn drawObject(
+    ctx: *DrawContext,
+    obj: *const Object,
+    parent_transform: Transform,
+    allocator: std.mem.Allocator,
+) !void {
+    if (!isVisible(obj)) return;
+    const local = Transform.init(obj);
+    const world = Transform.compose(parent_transform, local);
+    ctx.setTransform(world);
+
+    switch (obj.shape) {
+        .line => line.draw(ctx, obj),
+        .ellipse => try ellipse.draw(ctx, obj, allocator),
+        .broken => try broken.draw(ctx, obj, allocator),
+    }
+
+    for (obj.children.items) |*child| {
+        try drawObject(ctx, child, world, allocator);
+    }
+}
+
+/// Рекурсивно рисует документ в буфер (объекты и потомки по порядку).
+/// allocator опционален; если передан, ломаные рисуются через слой (без двойного наложения при alpha < 1).
+pub fn drawDocument(
+    pixels: []@import("dvui").Color.PMA,
+    buf_width: u32,
+    buf_height: u32,
+    visible_rect: Rect_i,
+    document: *const Document,
+    canvas_size: Size_i,
+    allocator: std.mem.Allocator,
+) !void {
+    const scale_x: f32 = if (document.size.w > 0) @as(f32, @floatFromInt(canvas_size.w)) / document.size.w else 0;
+    const scale_y: f32 = if (document.size.h > 0) @as(f32, @floatFromInt(canvas_size.h)) / document.size.h else 0;
+
+    var ctx = DrawContext{
+        .pixels = pixels,
+        .buf_width = buf_width,
+        .buf_height = buf_height,
+        .visible_rect = visible_rect,
+        .scale_x = scale_x,
+        .scale_y = scale_y,
+    };
+    const identity = Transform{};
+    for (document.objects.items) |*obj| {
+        try drawObject(&ctx, obj, identity, allocator);
+    }
+}
--- a/src/render/cpu/ellipse.zig
+++ b/src/render/cpu/ellipse.zig
@@ -0,0 +1,116 @@
+const std = @import("std");
+const std_math = std.math;
+const Document = @import("../../models/Document.zig");
+const pipeline = @import("pipeline.zig");
+const line = @import("line.zig");
+const DrawContext = pipeline.DrawContext;
+const Color = @import("dvui").Color;
+const basic_models = @import("../../models/basic_models.zig");
+const Point2_f = basic_models.Point2_f;
+
+const Object = Document.Object;
+const default_stroke: Color.PMA = .{ .r = 0, .g = 0, .b = 0, .a = 255 };
+const default_fill: Color.PMA = .{ .r = 0, .g = 0, .b = 0, .a = 0 };
+const default_thickness: f32 = 2.0;
+
+/// Эллипс с центром (0,0) и полуосями radii. Обводка — полоса расстояния до контура (чёткая линия, не круги).
+/// arc_percent: 100 — полный эллипс, иначе одна дуга; обход в коде от (0,ry) по квадрантам (визуально может казаться от низа против часовой из‑за экранной Y).
+/// Отрисовка в отдельный буфер и один composite, чтобы при alpha<255 пиксели не накладывались несколько раз.
+pub fn draw(ctx: *DrawContext, obj: *const Object, allocator: std.mem.Allocator) !void {
+    const radii = obj.getProperty(.radii) orelse return;
+    const rx = radii.x;
+    const ry = radii.y;
+    if (rx <= 0 or ry <= 0) return;
+
+    const stroke = if (obj.getProperty(.stroke_rgba)) |stroke_rgba| pipeline.rgbaToPma(stroke_rgba) else default_stroke;
+    const thickness = if (obj.getProperty(.thickness)) |thickness| thickness else default_thickness;
+    const arc_percent = std_math.clamp(if (obj.getProperty(.arc_percent)) |arc_percent| arc_percent else 100.0, 0.0, 100.0);
+    const closed = obj.getProperty(.closed) orelse true;
+    const filled = obj.getProperty(.filled) orelse false;
+    const fill_color = if (obj.getProperty(.fill_rgba)) |fill_rgba| pipeline.rgbaToPma(fill_rgba) else default_fill;
+    const do_fill = filled and (closed or arc_percent >= 100.0);
+
+    const t = &ctx.transform;
+    const min_r = @min(rx, ry);
+    const half_norm = thickness / (2.0 * min_r);
+    const inner = @max(0.0, 1.0 - half_norm);
+    const outer = 1.0 + half_norm;
+    const d_inner_sq = inner * inner;
+    const d_outer_sq = outer * outer;
+
+    const margin = 1.0 + half_norm;
+    const corners = [_]Point2_f{
+        .{ .x = -rx * margin, .y = -ry * margin },
+        .{ .x = rx * margin, .y = -ry * margin },
+        .{ .x = rx * margin, .y = ry * margin },
+        .{ .x = -rx * margin, .y = ry * margin },
+    };
+    var min_bx: f32 = std_math.inf(f32);
+    var min_by: f32 = std_math.inf(f32);
+    var max_bx: f32 = -std_math.inf(f32);
+    var max_by: f32 = -std_math.inf(f32);
+    for (corners) |c| {
+        const w = ctx.localToWorld(c.x, c.y);
+        const b = ctx.worldToBufferF(w.x, w.y);
+        min_bx = @min(min_bx, b.x);
+        min_by = @min(min_by, b.y);
+        max_bx = @max(max_bx, b.x);
+        max_by = @max(max_by, b.y);
+    }
+    const buf_w: i32 = @intCast(ctx.buf_width);
+    const buf_h: i32 = @intCast(ctx.buf_height);
+    const x0: i32 = @max(0, @as(i32, @intFromFloat(std_math.floor(min_bx))));
+    const y0: i32 = @max(0, @as(i32, @intFromFloat(std_math.floor(min_by))));
+    const x1: i32 = @min(buf_w, @as(i32, @intFromFloat(std_math.ceil(max_bx))) + 1);
+    const y1: i32 = @min(buf_h, @as(i32, @intFromFloat(std_math.ceil(max_by))) + 1);
+
+    const buffer = try allocator.alloc(Color.PMA, ctx.buf_width * ctx.buf_height);
+    @memset(buffer, .{ .r = 0, .g = 0, .b = 0, .a = 0 });
+    defer allocator.free(buffer);
+
+    var stroke_ctx = ctx.*;
+    stroke_ctx.pixels = buffer;
+    stroke_ctx.replace_mode = true;
+
+    if (do_fill) {
+        stroke_ctx.startFill(allocator) catch return;
+    }
+
+    const inv_rx = 1.0 / rx;
+    const inv_ry = 1.0 / ry;
+    const arc_len = 2.0 * std_math.pi * arc_percent / 100.0;
+
+    var by: i32 = y0;
+    while (by < y1) : (by += 1) {
+        const buf_y = @as(f32, @floatFromInt(by)) + 0.5;
+        var bx: i32 = x0;
+        while (bx < x1) : (bx += 1) {
+            const buf_x = @as(f32, @floatFromInt(bx)) + 0.5;
+            const w = stroke_ctx.bufferToWorld(buf_x, buf_y);
+            const loc = stroke_ctx.worldToLocal(w.x, w.y);
+            const nx = loc.x * inv_rx;
+            const ny = loc.y * inv_ry;
+            const d = nx * nx + ny * ny;
+            if (d < d_inner_sq or d > d_outer_sq) continue;
+            if (arc_percent < 100.0) {
+                var diff = std_math.pi / 2.0 - std_math.atan2(ny, nx);
+                if (diff < 0) diff += 2.0 * std_math.pi;
+                if (diff > arc_len) continue;
+            }
+            stroke_ctx.blendPixelAtBuffer(bx, by, stroke);
+        }
+    }
+
+    if (closed and arc_percent < 100.0) {
+        const end_x = rx * std_math.sin(arc_len);
+        const end_y = ry * std_math.cos(arc_len);
+        line.drawLine(&stroke_ctx, 0, 0, 0, ry, stroke, thickness, false);
+        line.drawLine(&stroke_ctx, 0, 0, end_x, end_y, stroke, thickness, false);
+    }
+
+    if (do_fill) {
+        stroke_ctx.stopFill(allocator, fill_color);
+    }
+
+    ctx.compositeDrawerContext(&stroke_ctx, t.opacity);
+}
--- a/src/render/cpu/line.zig
+++ b/src/render/cpu/line.zig
@@ -0,0 +1,192 @@
+const std = @import("std");
+const Document = @import("../../models/Document.zig");
+const pipeline = @import("pipeline.zig");
+const DrawContext = pipeline.DrawContext;
+const Color = @import("dvui").Color;
+const base_models = @import("../../models/basic_models.zig");
+const Point2_i = base_models.Point2_i;
+
+const Object = Document.Object;
+const default_stroke: Color.PMA = .{ .r = 0, .g = 0, .b = 0, .a = 255 };
+const default_thickness: f32 = 2.0;
+
+/// Линия от (0,0) до end_point.
+pub fn draw(ctx: *DrawContext, obj: *const Object) void {
+    const end_point = obj.getProperty(.end_point) orelse return;
+    const end_x = end_point.x;
+    const end_y = end_point.y;
+    const stroke = if (obj.getProperty(.stroke_rgba)) |stroke_rgba| pipeline.rgbaToPma(stroke_rgba) else default_stroke;
+    const thickness = obj.getProperty(.thickness) orelse default_thickness;
+    drawLine(ctx, 0, 0, end_x, end_y, stroke, thickness, false);
+}
+
+/// Рисует отрезок по локальным концам (перевод в буфер внутри).
+/// draw_when_outside: если true, участки линии за экраном тоже рисуются (толщиной 1 px); в буфере — обычная толщина.
+pub fn drawLine(ctx: *DrawContext, x0: f32, y0: f32, x1: f32, y1: f32, color: Color.PMA, thickness: f32, draw_when_outside: bool) void {
+    const w0 = ctx.localToWorld(x0, y0);
+    const w1 = ctx.localToWorld(x1, y1);
+    const b0 = ctx.worldToBuffer(w0.x, w0.y);
+    const b1 = ctx.worldToBuffer(w1.x, w1.y);
+    const t = &ctx.transform;
+    const scale = @sqrt(t.scale.scale_x * ctx.scale_x * t.scale.scale_y * ctx.scale_y);
+    const thickness_px: u32 = @as(u32, @intFromFloat(std.math.round(thickness * scale)));
+    if (thickness_px > 0)
+        drawLineInBuffer(ctx, b0.x, b0.y, b1.x, b1.y, color, thickness_px, draw_when_outside);
+}
+
+inline fn clip(p: f32, q: f32, t0: *f32, t1: *f32) bool {
+    if (p == 0) {
+        return q >= 0;
+    }
+    const r = q / p;
+    if (p < 0) {
+        if (r > t1.*) return false;
+        if (r > t0.*) t0.* = r;
+    } else {
+        if (r < t0.*) return false;
+        if (r < t1.*) t1.* = r;
+    }
+    return true;
+}
+
+/// Liang–Barsky отсечение отрезка (x0,y0)-(x1,y1) прямоугольником [left,right]x[top,bottom].
+/// Координаты концов модифицируются по месту. Возвращает false, если отрезок целиком вне прямоугольника.
+fn liangBarskyClip(
+    x0: *i32,
+    y0: *i32,
+    x1: *i32,
+    y1: *i32,
+    left: i32,
+    top: i32,
+    right: i32,
+    bottom: i32,
+) bool {
+    const fx0: f32 = @floatFromInt(x0.*);
+    const fy0: f32 = @floatFromInt(y0.*);
+    const fx1: f32 = @floatFromInt(x1.*);
+    const fy1: f32 = @floatFromInt(y1.*);
+
+    const dx = fx1 - fx0;
+    const dy = fy1 - fy0;
+
+    var t0: f32 = 0.0;
+    var t1: f32 = 1.0;
+
+    const fl: f32 = @floatFromInt(left);
+    const ft: f32 = @floatFromInt(top);
+    const fr: f32 = @floatFromInt(right);
+    const fb: f32 = @floatFromInt(bottom);
+
+    if (!clip(-dx, fx0 - fl, &t0, &t1)) return false; // x >= left
+    if (!clip(dx, fr - fx0, &t0, &t1)) return false; // x <= right
+    if (!clip(-dy, fy0 - ft, &t0, &t1)) return false; // y >= top
+    if (!clip(dy, fb - fy0, &t0, &t1)) return false; // y <= bottom
+
+    const nx0 = fx0 + dx * t0;
+    const ny0 = fy0 + dy * t0;
+    const nx1 = fx0 + dx * t1;
+    const ny1 = fy0 + dy * t1;
+
+    x0.* = @intFromFloat(std.math.round(nx0));
+    y0.* = @intFromFloat(std.math.round(ny0));
+    x1.* = @intFromFloat(std.math.round(nx1));
+    y1.* = @intFromFloat(std.math.round(ny1));
+
+    return true;
+}
+
+/// Отсекает отрезок буфером ctx (0..buf_width-1, 0..buf_height-1).
+fn clipLineToBuffer(ctx: *DrawContext, a: *Point2_i, b: *Point2_i, thickness: i32) bool {
+    var x0 = a.x;
+    var y0 = a.y;
+    var x1 = b.x;
+    var y1 = b.y;
+
+    const left: i32 = -thickness;
+    const top: i32 = -thickness;
+    const right: i32 = @as(i32, @intCast(ctx.buf_width - 1)) + thickness;
+    const bottom: i32 = @as(i32, @intCast(ctx.buf_height - 1)) + thickness;
+
+    if (!liangBarskyClip(&x0, &y0, &x1, &y1, left, top, right, bottom)) {
+        return false;
+    }
+
+    a.* = .{ .x = x0, .y = y0 };
+    b.* = .{ .x = x1, .y = y1 };
+    return true;
+}
+
+fn drawLineInBuffer(ctx: *DrawContext, bx0: i32, by0: i32, bx1: i32, by1: i32, color: Color.PMA, thickness_px: u32, draw_when_outside: bool) void {
+    // Коррекция толщины в зависимости от угла линии.
+    var thickness_corrected: u32 = thickness_px;
+    var use_vertical: bool = undefined;
+    const dx_f: f32 = @floatFromInt(bx1 - bx0);
+    const dy_f: f32 = @floatFromInt(by1 - by0);
+    const len: f32 = @sqrt(dx_f * dx_f + dy_f * dy_f);
+    if (len > 0) {
+        const cos_theta = @abs(dx_f) / len;
+        const sin_theta = @abs(dy_f) / len;
+        const desired: f32 = @floatFromInt(thickness_px);
+        const eps: f32 = 1e-3;
+
+        const vertical_based = desired / @max(sin_theta, eps);
+        const horizontal_based = desired / @max(cos_theta, eps);
+
+        use_vertical = sin_theta >= cos_theta;
+        const corrected_f = if (use_vertical) vertical_based else horizontal_based;
+
+        thickness_corrected = @max(@as(u32, 1), @as(u32, @intFromFloat(std.math.round(corrected_f))));
+    }
+    const half_thickness: i32 = @intCast(thickness_corrected / 2);
+    const thickness_corrected_i: i32 = @as(i32, @intCast(thickness_corrected));
+
+    var p0 = Point2_i{ .x = bx0, .y = by0 };
+    var p1 = Point2_i{ .x = bx1, .y = by1 };
+
+    // Отсечение только когда не рисуем вне viewport: иначе линия идёт целиком, толщина 1 px снаружи.
+    if (!draw_when_outside) {
+        if (!clipLineToBuffer(ctx, &p0, &p1, @as(i32, @intCast(thickness_corrected)))) return;
+    }
+
+    var x0 = p0.x;
+    var y0 = p0.y;
+    const ex = p1.x;
+    const ey = p1.y;
+
+    const dx: i32 = @intCast(@abs(ex - x0));
+    const sx: i32 = if (x0 < ex) 1 else -1;
+    const dy_abs: i32 = @intCast(@abs(ey - y0));
+    const dy: i32 = -dy_abs;
+    const sy: i32 = if (y0 < ey) 1 else -1;
+
+    var err: i32 = dx + dy;
+    const buf_w_i: i32 = @intCast(ctx.buf_width);
+    const buf_h_i: i32 = @intCast(ctx.buf_height);
+
+    while (true) {
+        // Внутри viewport — полная толщина; снаружи при draw_when_outside — только 1 пиксель.
+        const in_viewport = x0 >= -thickness_corrected_i and x0 < buf_w_i + thickness_corrected_i and y0 >= -thickness_corrected_i and y0 < buf_h_i + thickness_corrected_i;
+        const effective_half: i32 = if (draw_when_outside and !in_viewport) 0 else half_thickness;
+
+        var thick: i32 = -effective_half;
+        while (thick <= effective_half) {
+            const x = if (use_vertical) x0 + thick else x0;
+            const y = if (use_vertical) y0 else y0 + thick;
+            ctx.blendPixelAtBuffer(x, y, color);
+
+            thick += 1;
+        }
+
+        if (x0 == ex and y0 == ey) break;
+
+        const e2: i32 = 2 * err;
+        if (e2 >= dy) {
+            err += dy;
+            x0 += sx;
+        }
+        if (e2 <= dx) {
+            err += dx;
+            y0 += sy;
+        }
+    }
+}
--- a/src/render/cpu/pipeline.zig
+++ b/src/render/cpu/pipeline.zig
@@ -0,0 +1,349 @@
+const std = @import("std");
+const dvui = @import("dvui");
+const basic_models = @import("../../models/basic_models.zig");
+const Document = @import("../../models/Document.zig");
+const Point2_f = basic_models.Point2_f;
+const Point2_i = basic_models.Point2_i;
+const Scale2_f = basic_models.Scale2_f;
+const Rect_i = basic_models.Rect_i;
+const Color = dvui.Color;
+
+/// Трансформ объекта: позиция, угол, масштаб, непрозрачность.
+pub const Transform = struct {
+    position: Point2_f = .{},
+    angle: f32 = 0,
+    scale: Scale2_f = .{},
+    opacity: f32 = 1.0,
+
+    pub fn init(obj: *const Document.Object) Transform {
+        const pos = obj.getProperty(.position) orelse Point2_f{ .x = 0, .y = 0 };
+        const angle = obj.getProperty(.angle) orelse 0;
+        const scale = obj.getProperty(.scale) orelse Scale2_f{ .scale_x = 1, .scale_y = 1 };
+        const opacity = obj.getProperty(.opacity) orelse 1.0;
+        return .{
+            .position = pos,
+            .angle = angle,
+            .scale = scale,
+            .opacity = opacity,
+        };
+    }
+
+    /// Композиция: world = parent * local.
+    pub fn compose(parent: Transform, local: Transform) Transform {
+        const cos_a = std.math.cos(parent.angle);
+        const sin_a = std.math.sin(parent.angle);
+        const sx = parent.scale.scale_x * local.scale.scale_x;
+        const sy = parent.scale.scale_y * local.scale.scale_y;
+        const local_px = local.position.x * parent.scale.scale_x;
+        const local_py = local.position.y * parent.scale.scale_y;
+        const rx = cos_a * local_px - sin_a * local_py;
+        const ry = sin_a * local_px + cos_a * local_py;
+        return .{
+            .position = .{
+                .x = parent.position.x + rx,
+                .y = parent.position.y + ry,
+            },
+            .angle = parent.angle + local.angle,
+            .scale = .{ .scale_x = sx, .scale_y = sy },
+            .opacity = parent.opacity * local.opacity,
+        };
+    }
+};
+
+/// Мировые -> локальные для заданного трансформа.
+pub fn worldToLocalTransform(t: Transform, wx: f32, wy: f32) Point2_f {
+    const dx = wx - t.position.x;
+    const dy = wy - t.position.y;
+    const cos_a = std.math.cos(-t.angle);
+    const sin_a = std.math.sin(-t.angle);
+    const sx = if (t.scale.scale_x != 0) t.scale.scale_x else 1.0;
+    const sy = if (t.scale.scale_y != 0) t.scale.scale_y else 1.0;
+    return .{
+        .x = (dx * cos_a - dy * sin_a) / sx,
+        .y = (dx * sin_a + dy * cos_a) / sy,
+    };
+}
+
+/// Конвейер отрисовки: локальные координаты -> трансформ -> буфер.
+pub const DrawContext = struct {
+    pixels: []Color.PMA,
+    buf_width: u32,
+    buf_height: u32,
+    visible_rect: Rect_i,
+    scale_x: f32,
+    scale_y: f32,
+    transform: Transform = .{},
+    /// Если true, blendPixelAtBuffer перезаписывает пиксель без бленда
+    replace_mode: bool = false,
+    _fill_canvas: ?*FillCanvas = null,
+
+    pub fn setTransform(self: *DrawContext, t: Transform) void {
+        self.transform = t;
+    }
+
+    /// Локальные -> мировые.
+    pub fn localToWorld(self: *const DrawContext, local_x: f32, local_y: f32) Point2_f {
+        const t = &self.transform;
+        const cos_a = std.math.cos(t.angle);
+        const sin_a = std.math.sin(t.angle);
+        return .{
+            .x = t.position.x + (local_x * t.scale.scale_x) * cos_a - (local_y * t.scale.scale_y) * sin_a,
+            .y = t.position.y + (local_x * t.scale.scale_x) * sin_a + (local_y * t.scale.scale_y) * cos_a,
+        };
+    }
+
+    /// Мировые -> буфер (float).
+    pub fn worldToBufferF(self: *const DrawContext, wx: f32, wy: f32) Point2_f {
+        const canvas_x = wx * self.scale_x;
+        const canvas_y = wy * self.scale_y;
+        const vx = @as(f32, @floatFromInt(self.visible_rect.x));
+        const vy = @as(f32, @floatFromInt(self.visible_rect.y));
+        return .{
+            .x = canvas_x - vx,
+            .y = canvas_y - vy,
+        };
+    }
+
+    /// Мировые -> буфер (целые).
+    pub fn worldToBuffer(self: *const DrawContext, wx: f32, wy: f32) Point2_i {
+        const b = self.worldToBufferF(wx, wy);
+        return .{
+            .x = @intFromFloat(std.math.round(b.x)),
+            .y = @intFromFloat(std.math.round(b.y)),
+        };
+    }
+
+    /// Буфер -> мировые.
+    pub fn bufferToWorld(self: *const DrawContext, buf_x: f32, buf_y: f32) Point2_f {
+        const vx = @as(f32, @floatFromInt(self.visible_rect.x));
+        const vy = @as(f32, @floatFromInt(self.visible_rect.y));
+        const canvas_x = buf_x + vx;
+        const canvas_y = buf_y + vy;
+        const sx = if (self.scale_x != 0) self.scale_x else 1.0;
+        const sy = if (self.scale_y != 0) self.scale_y else 1.0;
+        return .{
+            .x = canvas_x / sx,
+            .y = canvas_y / sy,
+        };
+    }
+
+    /// Мировые -> локальные.
+    pub fn worldToLocal(self: *const DrawContext, wx: f32, wy: f32) Point2_f {
+        return worldToLocalTransform(self.transform, wx, wy);
+    }
+
+    /// Смешивает цвет в пикселе буфера с учётом opacity трансформа. В replace_mode просто перезаписывает пиксель.
+    /// Если активен fill canvas, каждый записанный пиксель помечается как граница для заливки.
+    pub fn blendPixelAtBuffer(self: *DrawContext, bx_i32: i32, by_i32: i32, color: Color.PMA) void {
+        if (self._fill_canvas) |fc| fc.setBorder(bx_i32, by_i32);
+
+        if (bx_i32 < 0 or by_i32 < 0 or bx_i32 >= self.buf_width or by_i32 >= self.buf_height) return;
+        const bx: u32 = @intCast(bx_i32);
+        const by: u32 = @intCast(by_i32);
+        const idx = by * self.buf_width + bx;
+        const dst = &self.pixels[idx];
+        if (self.replace_mode) {
+            dst.* = color;
+            return;
+        }
+        const t = &self.transform;
+        const a = @as(f32, @floatFromInt(color.a)) / 255.0 * t.opacity;
+        const src_r = @as(f32, @floatFromInt(color.r)) * t.opacity;
+        const src_g = @as(f32, @floatFromInt(color.g)) * t.opacity;
+        const src_b = @as(f32, @floatFromInt(color.b)) * t.opacity;
+        const inv_a = 1.0 - a;
+        dst.r = @intFromFloat(std.math.clamp(src_r + inv_a * @as(f32, @floatFromInt(dst.r)), 0, 255));
+        dst.g = @intFromFloat(std.math.clamp(src_g + inv_a * @as(f32, @floatFromInt(dst.g)), 0, 255));
+        dst.b = @intFromFloat(std.math.clamp(src_b + inv_a * @as(f32, @floatFromInt(dst.b)), 0, 255));
+        dst.a = @intFromFloat(std.math.clamp(a * 255 + inv_a * @as(f32, @floatFromInt(dst.a)), 0, 255));
+    }
+
+    /// Накладывает буфер другого контекста на этот с заданной прозрачностью (один бленд на пиксель). Размеры буферов должны совпадать.
+    pub fn compositeDrawerContext(self: *DrawContext, other: *const DrawContext, opacity: f32) void {
+        if (self.buf_width != other.buf_width or self.buf_height != other.buf_height) return;
+        const n = self.buf_width * self.buf_height;
+        for (0..n) |i| {
+            const src = other.pixels[i];
+            if (src.a == 0) continue;
+            const dst = &self.pixels[i];
+            const a = @as(f32, @floatFromInt(src.a)) / 255.0 * opacity;
+            const src_r = @as(f32, @floatFromInt(src.r)) * opacity;
+            const src_g = @as(f32, @floatFromInt(src.g)) * opacity;
+            const src_b = @as(f32, @floatFromInt(src.b)) * opacity;
+            const inv_a = 1.0 - a;
+            dst.r = @intFromFloat(std.math.clamp(src_r + inv_a * @as(f32, @floatFromInt(dst.r)), 0, 255));
+            dst.g = @intFromFloat(std.math.clamp(src_g + inv_a * @as(f32, @floatFromInt(dst.g)), 0, 255));
+            dst.b = @intFromFloat(std.math.clamp(src_b + inv_a * @as(f32, @floatFromInt(dst.b)), 0, 255));
+            dst.a = @intFromFloat(std.math.clamp(a * 255 + inv_a * @as(f32, @floatFromInt(dst.a)), 0, 255));
+        }
+    }
+
+    /// Пиксель в локальных координатах (трансформ + PMA).
+    pub fn blendPixelLocal(self: *DrawContext, local_x: f32, local_y: f32, color: Color.PMA) void {
+        const w = self.localToWorld(local_x, local_y);
+        const b = self.worldToBufferF(w.x, w.y);
+        const bx: i32 = @intFromFloat(b.x);
+        const by: i32 = @intFromFloat(b.y);
+        const vw = @as(i32, @intCast(self.visible_rect.w));
+        const vh = @as(i32, @intCast(self.visible_rect.h));
+        if (bx < 0 or bx >= vw or by < 0 or by >= vh) return;
+        self.blendPixelAtBuffer(bx, by, color);
+    }
+
+    /// Начинает сбор границ для заливки: создаёт FillCanvas и при последующих вызовах blendPixelAtBuffer помечает пиксели как границу.
+    pub fn startFill(self: *DrawContext, allocator: std.mem.Allocator) !void {
+        const fc = try FillCanvas.init(allocator, self.buf_width, self.buf_height);
+        const ptr = try allocator.create(FillCanvas);
+        ptr.* = fc;
+        self._fill_canvas = ptr;
+    }
+
+    /// Рисует заливку по собранным границам цветом color, освобождает FillCanvas и сбрасывает режим.
+    pub fn stopFill(self: *DrawContext, allocator: std.mem.Allocator, color: Color.PMA) void {
+        const fc = self._fill_canvas orelse return;
+        self._fill_canvas = null;
+        fc.fillColor(self, allocator, color);
+        fc.deinit();
+        allocator.destroy(fc);
+    }
+};
+
+/// Конвертирует u32 0xRRGGBBAA в Color.PMA.
+pub fn rgbaToPma(rgba: u32) Color.PMA {
+    const r: u8 = @intCast((rgba >> 24) & 0xFF);
+    const g: u8 = @intCast((rgba >> 16) & 0xFF);
+    const b: u8 = @intCast((rgba >> 8) & 0xFF);
+    const a: u8 = @intCast((rgba >> 0) & 0xFF);
+    if (a == 0) return .{ .r = 0, .g = 0, .b = 0, .a = 0 };
+    const af: f32 = @as(f32, @floatFromInt(a)) / 255.0;
+    return .{
+        .r = @intFromFloat(@as(f32, @floatFromInt(r)) * af),
+        .g = @intFromFloat(@as(f32, @floatFromInt(g)) * af),
+        .b = @intFromFloat(@as(f32, @floatFromInt(b)) * af),
+        .a = a,
+    };
+}
+
+/// Контекст для заполнения фигур цветом. Границы хранятся в set — по x и y можно добавлять произвольные точки.
+const FillCanvas = struct {
+    /// Множество пикселей границы (x, y) — без ограничения по размеру буфера.
+    border_set: std.AutoHashMap(Point2_i, void),
+    buf_width: u32,
+    buf_height: u32,
+
+    pub fn init(allocator: std.mem.Allocator, width: u32, height: u32) !FillCanvas {
+        const border_set = std.AutoHashMap(Point2_i, void).init(allocator);
+        return .{
+            .border_set = border_set,
+            .buf_width = width,
+            .buf_height = height,
+        };
+    }
+
+    pub fn deinit(self: *FillCanvas) void {
+        self.border_set.deinit();
+    }
+
+    /// Добавляет точку границы; координаты x, y могут быть любыми (условно бесконечное поле).
+    pub fn setBorder(self: *FillCanvas, x: i32, y: i32) void {
+        self.border_set.put(.{ .x = x, .y = y }, {}) catch {};
+    }
+
+    /// Заливка четырёхсвязным стековым алгоритмом от первой найденной внутренней точки.
+    pub fn fillColor(self: *FillCanvas, draw_ctx: *DrawContext, allocator: std.mem.Allocator, color: Color.PMA) void {
+        const n = self.border_set.count();
+        if (n == 0) return;
+
+        const buf_w_i: i32 = @intCast(self.buf_width);
+        const buf_h_i: i32 = @intCast(self.buf_height);
+
+        // Ключи один раз по (y, x) — по строкам x уже будут отсортированы.
+        var keys_buf = std.ArrayList(Point2_i).empty;
+        defer keys_buf.deinit(allocator);
+        keys_buf.ensureTotalCapacity(allocator, n) catch return;
+        var iter = self.border_set.keyIterator();
+        while (iter.next()) |k| {
+            keys_buf.appendAssumeCapacity(k.*);
+        }
+        std.mem.sort(Point2_i, keys_buf.items, {}, struct {
+            fn lessThan(_: void, a: Point2_i, b: Point2_i) bool {
+                if (a.y != b.y) return a.y < b.y;
+                return a.x < b.x;
+            }
+        }.lessThan);
+
+        // Семена: по строкам находим сегменты (пары x), пересекаем с окном буфера, берём середину сегмента.
+        var seeds = findFillSeeds(keys_buf.items, buf_w_i, buf_h_i, allocator) catch return;
+        defer seeds.deinit(allocator);
+
+        var stack = std.ArrayList(Point2_i).empty;
+        defer stack.deinit(allocator);
+        var filled = std.AutoHashMap(Point2_i, void).init(allocator);
+        defer filled.deinit();
+
+        for (seeds.items) |s| {
+            if (self.border_set.contains(s)) continue;
+            if (filled.contains(s)) continue;
+            stack.clearRetainingCapacity();
+            stack.append(allocator, s) catch return;
+            while (stack.pop()) |cell| {
+                if (self.border_set.contains(cell)) continue;
+                const gop = filled.getOrPut(cell) catch return;
+                if (gop.found_existing) continue;
+
+                if (cell.x >= 0 and cell.x < buf_w_i and cell.y >= 0 and cell.y < buf_h_i) {
+                    draw_ctx.blendPixelAtBuffer(cell.x, cell.y, color);
+                }
+                if (cell.x > 0) stack.append(allocator, .{ .x = cell.x - 1, .y = cell.y }) catch return;
+                if (cell.x < buf_w_i - 1) stack.append(allocator, .{ .x = cell.x + 1, .y = cell.y }) catch return;
+                if (cell.y > 0) stack.append(allocator, .{ .x = cell.x, .y = cell.y - 1 }) catch return;
+                if (cell.y < buf_h_i - 1) stack.append(allocator, .{ .x = cell.x, .y = cell.y + 1 }) catch return;
+            }
+        }
+    }
+
+    /// По строкам: рёбра (подряд идущие x) → сегменты между ними. Семена — середины чётных сегментов (при чётном числе границ).
+    fn findFillSeeds(
+        keys: []const Point2_i,
+        buf_w_i: i32,
+        buf_h_i: i32,
+        allocator: std.mem.Allocator,
+    ) !std.ArrayList(Point2_i) {
+        var list = std.ArrayList(Point2_i).empty;
+        errdefer list.deinit(allocator);
+        var segments = std.ArrayList(struct { left: i32, right: i32 }).empty;
+        defer segments.deinit(allocator);
+
+        var i: usize = 0;
+        while (i < keys.len) {
+            const y = keys[i].y;
+            const row_start = i;
+            while (i < keys.len and keys[i].y == y) : (i += 1) {}
+            const row = keys[row_start..i];
+            if (row.len < 2 or y < 0 or y >= buf_h_i) continue;
+
+            segments.clearRetainingCapacity();
+            var run_end_x: i32 = row[0].x;
+            for (row[1..]) |p| {
+                if (p.x != run_end_x + 1) {
+                    try segments.append(allocator, .{ .left = run_end_x + 1, .right = p.x - 1 });
+                    run_end_x = p.x;
+                } else {
+                    run_end_x = p.x;
+                }
+            }
+            // Семена только при чётном числе границ
+            if ((segments.items.len + 1) % 2 != 0) continue;
+
+            for (segments.items, 0..) |seg, gi| {
+                if (gi % 2 != 0 or seg.left > seg.right) continue;
+                const left = @max(seg.left, 0);
+                const right = @min(seg.right, buf_w_i - 1);
+                if (left <= right) {
+                    try list.append(allocator, .{ .x = left + @divTrunc(right - left, 2), .y = y });
+                }
+            }
+        }
+        return list;
+    }
+};
--- a/src/tests.zig
+++ b/src/tests.zig
@@ -1,6 +1,14 @@
-// Test root for `zig build test`.
-// Import modules here to ensure their `test` blocks are discovered.
-
-test "module test discovery" {
-    _ = @import("render/CpuRenderEngine.zig");
+// Корень для `zig build test`. Тесты из импортированных здесь модулей выполняются (в Zig не подтягиваются из транзитивных импортов).
+// Добавляй сюда _ = @import("path/to/module.zig"); для каждого модуля с test-блоками.
+// Чтобы увидеть список всех тестов: после `zig build test` выполни `./zig-out/bin/test`.
+test "discover tests" {
+    _ = @import("main.zig");
+    _ = @import("models/Property.zig");
+    _ = @import("models/shape/shape.zig");
+}
+
+// Убедиться, что выполнились все ожидаемые тесты: этот тест пройдёт только если до него дошли (т.е. все предыдущие прошли).
+test "all module tests completed" {
+    const std = @import("std");
+    std.debug.print("\n  (все тесты модулей выполнены)\n", .{});
 }
--- a/src/toolbar/Tool.zig
+++ b/src/toolbar/Tool.zig
@@ -0,0 +1,51 @@
+const basic_models = @import("../models/basic_models.zig");
+const Point2_f = basic_models.Point2_f;
+const Canvas = @import("../Canvas.zig");
+const Document = @import("../models/Document.zig");
+const pipeline = @import("../render/cpu/pipeline.zig");
+const Transform = pipeline.Transform;
+
+pub const ToolContext = struct {
+    canvas: *Canvas,
+    document_point: Point2_f,
+    selected_object_id: ?u64,
+
+    pub fn addObject(self: *const ToolContext, template: Document.Object) !void {
+        var obj = template;
+        const local_pos = self.computeLocalPosition();
+        try obj.setProperty(self.canvas.allocator, .{ .data = .{ .position = local_pos } });
+        try self.canvas.document.addObjectUnderParentId(self.canvas.allocator, self.selected_object_id, obj);
+        self.canvas.requestRedraw();
+    }
+
+    fn computeLocalPosition(self: *const ToolContext) Point2_f {
+        if (self.selected_object_id) |parent_id| {
+            if (findWorldTransformById(self.canvas.document, parent_id)) |parent_world| {
+                return pipeline.worldToLocalTransform(parent_world, self.document_point.x, self.document_point.y);
+            }
+        }
+        return self.document_point;
+    }
+};
+
+fn findWorldTransformById(doc: *Document, target_id: u64) ?Transform {
+    const identity = Transform{};
+    for (doc.objects.items) |*obj| {
+        if (findWorldTransformInTree(obj, identity, target_id)) |t| return t;
+    }
+    return null;
+}
+
+fn findWorldTransformInTree(obj: *const Document.Object, parent: Transform, target_id: u64) ?Transform {
+    const local = Transform.init(obj);
+    const world = Transform.compose(parent, local);
+    if (obj.id == target_id) return world;
+    for (obj.children.items) |*child| {
+        if (findWorldTransformInTree(child, world, target_id)) |t| return t;
+    }
+    return null;
+}
+
+pub const Tool = struct {
+    onCanvasClick: *const fn (*const ToolContext) anyerror!void,
+};
--- a/src/toolbar/Toolbar.zig
+++ b/src/toolbar/Toolbar.zig
@@ -0,0 +1,43 @@
+const Tool = @import("Tool.zig");
+
+const Toolbar = @This();
+
+pub const ToolDescriptor = struct {
+    name: []const u8,
+    icon_tvg: []const u8,
+    implementation: *const Tool.Tool,
+};
+
+tools: []const ToolDescriptor,
+selected_index: ?usize,
+
+pub fn init(tools_list: []const ToolDescriptor) Toolbar {
+    return .{
+        .tools = tools_list,
+        .selected_index = null,
+    };
+}
+
+pub fn deinit(_: *Toolbar) void {}
+
+pub fn currentDescriptor(self: *const Toolbar) ?*const ToolDescriptor {
+    if (self.tools.len == 0) return null;
+    if (self.selected_index) |index| {
+        return &self.tools[index];
+    }
+    return null;
+}
+
+pub fn select(self: *Toolbar, index: ?usize) void {
+    if (index == self.selected_index) {
+        self.selected_index = null;
+        return;
+    }
+    if (index) |i| {
+        if (i < self.tools.len) {
+            self.selected_index = i;
+        }
+    } else {
+        self.selected_index = null;
+    }
+}
--- a/src/toolbar/tools.zig
+++ b/src/toolbar/tools.zig
@@ -0,0 +1,23 @@
+const Toolbar = @import("Toolbar.zig");
+const line = @import("tools/line.zig");
+const ellipse = @import("tools/ellipse.zig");
+const broken = @import("tools/broken.zig");
+const icons = @import("../icons.zig");
+
+pub const default_tools = [_]Toolbar.ToolDescriptor{
+    .{
+        .name = "Line",
+        .icon_tvg = icons.line,
+        .implementation = &line.tool,
+    },
+    .{
+        .name = "Ellipse",
+        .icon_tvg = icons.ellipse,
+        .implementation = &ellipse.tool,
+    },
+    .{
+        .name = "Broken line",
+        .icon_tvg = icons.broken,
+        .implementation = &broken.tool,
+    },
+};
--- a/src/toolbar/tools/broken.zig
+++ b/src/toolbar/tools/broken.zig
@@ -0,0 +1,10 @@
+const Tool = @import("../Tool.zig");
+const shape = @import("../../models/shape/shape.zig");
+
+fn onCanvasClick(ctx: *const Tool.ToolContext) !void {
+    const canvas = ctx.canvas;
+    var obj = shape.createObject(canvas.allocator, .broken) catch return;
+    defer obj.deinit(canvas.allocator);
+    try ctx.addObject(obj);
+}
+pub const tool = Tool.Tool{ .onCanvasClick = onCanvasClick };
--- a/src/toolbar/tools/ellipse.zig
+++ b/src/toolbar/tools/ellipse.zig
@@ -0,0 +1,10 @@
+const Tool = @import("../Tool.zig");
+const shape = @import("../../models/shape/shape.zig");
+
+fn onCanvasClick(ctx: *const Tool.ToolContext) !void {
+    const canvas = ctx.canvas;
+    var obj = shape.createObject(canvas.allocator, .ellipse) catch return;
+    defer obj.deinit(canvas.allocator);
+    try ctx.addObject(obj);
+}
+pub const tool = Tool.Tool{ .onCanvasClick = onCanvasClick };
--- a/src/toolbar/tools/line.zig
+++ b/src/toolbar/tools/line.zig
@@ -0,0 +1,12 @@
+const std = @import("std");
+const Canvas = @import("../../Canvas.zig");
+const Tool = @import("../Tool.zig");
+const shape = @import("../../models/shape/shape.zig");
+
+fn onCanvasClick(ctx: *const Tool.ToolContext) !void {
+    const canvas = ctx.canvas;
+    var obj = shape.createObject(canvas.allocator, .line) catch return;
+    defer obj.deinit(canvas.allocator);
+    try ctx.addObject(obj);
+}
+pub const tool = Tool.Tool{ .onCanvasClick = onCanvasClick };
--- a/src/ui/canvas_view.zig
+++ b/src/ui/canvas_view.zig
@@ -1,31 +1,115 @@
-// Виджет холста: скролл, текстура, зум по Ctrl+колёсико.
 const std = @import("std");
 const dvui = @import("dvui");
 const dvui_ext = @import("dvui_ext.zig");
 const Canvas = @import("../Canvas.zig");
-const ImageRect = @import("../models/basic_models.zig").ImageRect;
+const Document = @import("../models/Document.zig");
+const Property = @import("../models/Property.zig").Property;
+const PropertyData = @import("../models/Property.zig").Data;
+const Rect_i = @import("../models/basic_models.zig").Rect_i;
+const Point2_f = @import("../models/basic_models.zig").Point2_f;
+const Tool = @import("../toolbar/Tool.zig");
+const RenderStats = @import("../render/RenderStats.zig");
+const icons = @import("../icons.zig");

-pub fn canvasView(canvas: *Canvas, content_rect_scale: dvui.RectScale) void {
+pub fn canvasView(canvas: *Canvas, selected_object_id: ?u64, content_rect_scale: dvui.RectScale) void {
    var textured = dvui_ext.texturedBox(content_rect_scale, dvui.Rect.all(20));
    {
        var overlay = dvui.overlay(@src(), .{ .expand = .both });
        {
-            var scroll = dvui.scrollArea(
-                @src(),
-                .{
+            const overlay_parent = dvui.parentGet();
+            const init_options: dvui.ScrollAreaWidget.InitOpts = .{
                .scroll_info = &canvas.scroll,
                .vertical_bar = .auto,
                .horizontal_bar = .auto,
+                .process_events_after = false,
+            };
+            var scroll = dvui.scrollArea(
+                @src(),
+                init_options,
+                .{
+                    .expand = .both,
+                    .background = false,
                },
-                .{ .expand = .both, .background = false },
            );
            {
                drawCanvasContent(canvas, scroll);
                handleCanvasZoom(canvas, scroll);
+                handleCanvasMouse(canvas, scroll, selected_object_id);
            }
-            scroll.deinit();

-            dvui.label(@src(), "Canvas", .{}, .{ .gravity_x = 0.5, .gravity_y = 0.0 });
+            const scroll_parent = dvui.parentGet();
+            dvui.parentSet(overlay_parent);
+
+            const vbar = scroll.vbar;
+            const hbar = scroll.hbar;
+            if (vbar != null) {
+
+                // std.debug.print("{any}", .{vbar.?.data()});
+            }
+            if (hbar != null) {
+                // std.debug.print("{any}", .{hbar.?.data()});
+            }
+
+            // Тулбар поверх scroll
+            var toolbar_box = dvui.box(
+                @src(),
+                .{ .dir = .horizontal },
+                .{},
+            );
+            {
+                drawToolbar(canvas);
+                // Сохраняем rect тулбара для следующего кадра — в handleCanvasMouse исключаем из него клики
+                canvas.toolbar_rect_scale = toolbar_box.data().contentRectScale();
+            }
+            toolbar_box.deinit();
+
+            // Панель свойств поверх scroll (правый верхний угол)
+            if (selected_object_id) |obj_id| {
+                if (canvas.document.findObjectById(obj_id)) |obj| {
+                    var properties_box = dvui.box(
+                        @src(),
+                        .{ .dir = .horizontal },
+                        .{
+                            .gravity_x = 1.0,
+                            .gravity_y = 0.0,
+                        },
+                    );
+                    {
+                        drawPropertiesPanel(canvas, obj);
+                        // Сохраняем rect панели свойств для следующего кадра — в handleCanvasMouse исключаем из него клики
+                        canvas.properties_rect_scale = properties_box.data().contentRectScale();
+                    }
+                    properties_box.deinit();
+                }
+            }
+
+            drawCanvasLabelPanel();
+            if (canvas.show_render_stats)
+                drawStatsPanel(canvas.render_engine.getStats(), canvas.frame_index);
+
+            if (canvas.properties_rect_scale) |prs| {
+                for (dvui.events()) |*e| {
+                    if (e.handled) continue;
+                    if (e.evt != .mouse) continue;
+                    const mouse = &e.evt.mouse;
+                    if (mouse.action != .wheel_x and mouse.action != .wheel_y) continue;
+                    const pt = prs.pointFromPhysical(mouse.p);
+                    const r = prs.r;
+                    if (pt.x >= 0 and pt.x * prs.s < r.w and pt.y >= 0 and pt.y * prs.s < r.h) {
+                        e.handled = true;
+                    }
+                }
+            }
+
+            if (!init_options.process_events_after) {
+                if (scroll.scroll) |*sc| {
+                    dvui.clipSet(sc.prevClip);
+                    sc.processEventsAfter();
+                }
+            }
+
+            dvui.parentSet(scroll_parent);
+            scroll.deinit();
        }
        overlay.deinit();
    }
@@ -34,7 +118,7 @@ pub fn canvasView(canvas: *Canvas, content_rect_scale: dvui.RectScale) void {

 fn drawCanvasContent(canvas: *Canvas, scroll: anytype) void {
    const natural_scale = if (canvas.native_scaling) 1 else dvui.windowNaturalScale();
-    const img_size = canvas.getScaledImageSize();
+    const img_size = canvas.getZoomedImageSize();
    const viewport_rect = scroll.data().contentRect();
    const scroll_current = dvui.Point{ .x = canvas.scroll.viewport.x, .y = canvas.scroll.viewport.y };

@@ -67,7 +151,7 @@ fn drawCanvasContent(canvas: *Canvas, scroll: anytype) void {
    );
    {
        if (canvas.texture) |tex| {
-            const vis = canvas._visible_rect orelse ImageRect{ .x = 0, .y = 0, .w = 0, .h = 0 };
+            const vis = canvas._visible_rect orelse Rect_i{ .x = 0, .y = 0, .w = 0, .h = 0 };
            const left = @as(f32, @floatFromInt(img_size.x + vis.x)) / natural_scale;
            const top = @as(f32, @floatFromInt(img_size.y + vis.y)) / natural_scale;

@@ -99,15 +183,34 @@ fn handleCanvasZoom(canvas: *Canvas, scroll: anytype) void {
    const ctrl = dvui.currentWindow().modifiers.control();
    if (!ctrl) return;

+    const natural_scale = if (canvas.native_scaling) 1 else dvui.windowNaturalScale();
+
    for (dvui.events()) |*e| {
        switch (e.evt) {
-            .mouse => |mouse| {
+            .mouse => |*mouse| {
                const action = mouse.action;
                if (dvui.eventMatchSimple(e, scroll.data()) and (action == .wheel_x or action == .wheel_y)) {
                    switch (action) {
                        .wheel_y => |y| {
-                            canvas.addZoom(y / 1000);
+                            const viewport_pt = scroll.data().contentRectScale().pointFromPhysical(mouse.p);
+                            const content_pt = dvui.Point{
+                                .x = viewport_pt.x + canvas.scroll.viewport.x,
+                                .y = viewport_pt.y + canvas.scroll.viewport.y,
+                            };
+                            const doc_pt = canvas.contentPointToDocument(content_pt, natural_scale);
+
+                            // canvas.addZoom(y / 1000);
+                            canvas.multZoom(1 + y / 2000);
                            canvas.requestRedraw();
+
+                            const doc_pt_after = canvas.contentPointToDocument(content_pt, natural_scale);
+
+                            const zoom = canvas.getZoom();
+                            const dx = (doc_pt_after.x - doc_pt.x) * zoom / natural_scale;
+                            const dy = (doc_pt_after.y - doc_pt.y) * zoom / natural_scale;
+
+                            canvas.scroll.viewport.x -= dx;
+                            canvas.scroll.viewport.y -= dy;
                        },
                        else => {},
                    }
@@ -118,3 +221,554 @@ fn handleCanvasZoom(canvas: *Canvas, scroll: anytype) void {
        }
    }
 }
+
+fn handleCanvasMouse(canvas: *Canvas, scroll: *dvui.ScrollAreaWidget, selected_object_id: ?u64) void {
+    const natural_scale = if (canvas.native_scaling) 1 else dvui.windowNaturalScale();
+    const scroll_data = scroll.data();
+
+    for (dvui.events()) |*e| {
+        switch (e.evt) {
+            .mouse => |*mouse| {
+                if (mouse.action != .press or mouse.button != .left) continue;
+                if (e.handled) continue;
+                if (!dvui.eventMatchSimple(e, scroll_data)) continue;
+
+                // Не обрабатывать клик, если он попал в область тулбара (rect с предыдущего кадра).
+                if (canvas.toolbar_rect_scale) |trs| {
+                    const pt = trs.pointFromPhysical(mouse.p);
+                    const r = trs.r;
+                    if (pt.x >= 0 and pt.x * trs.s < r.w and pt.y >= 0 and pt.y * trs.s < r.h) continue;
+                }
+                // Не обрабатывать клик, если он попал в область панели свойств (rect с предыдущего кадра).
+                if (canvas.properties_rect_scale) |prs| {
+                    const pt = prs.pointFromPhysical(mouse.p);
+                    const r = prs.r;
+                    if (pt.x >= 0 and pt.x * prs.s < r.w and pt.y >= 0 and pt.y * prs.s < r.h) continue;
+                }
+
+                const viewport_pt = scroll_data.contentRectScale().pointFromPhysical(mouse.p);
+                const content_pt = dvui.Point{
+                    .x = viewport_pt.x + canvas.scroll.viewport.x,
+                    .y = viewport_pt.y + canvas.scroll.viewport.y,
+                };
+                const doc_pt = canvas.contentPointToDocument(content_pt, natural_scale);
+                canvas.cursor_document_point = if (canvas.isContentPointOnDocument(content_pt, natural_scale)) doc_pt else null;
+                if (canvas.cursor_document_point) |point| {
+                    if (canvas.toolbar.currentDescriptor()) |desc| {
+                        var ctx = Tool.ToolContext{
+                            .canvas = canvas,
+                            .document_point = point,
+                            .selected_object_id = selected_object_id,
+                        };
+                        desc.implementation.onCanvasClick(&ctx) catch |err| {
+                            std.debug.print("onCanvasClick error: {}\n", .{err});
+                        };
+                    }
+                }
+            },
+            else => {},
+        }
+    }
+}
+
+fn drawToolbar(canvas: *Canvas) void {
+    const tools_list = canvas.toolbar.tools;
+    if (tools_list.len == 0) return;
+
+    var bar = dvui.box(
+        @src(),
+        .{ .dir = .vertical },
+        .{
+            .gravity_x = 0.0,
+            .gravity_y = 0.0,
+            .padding = dvui.Rect.all(6),
+            .corner_radius = dvui.Rect.all(8),
+            .background = true,
+            .color_fill = dvui.Color.black.opacity(0.2),
+            .margin = dvui.Rect{ .x = 16, .y = 16 },
+        },
+    );
+    {
+        var to_select: ?usize = null;
+        for (tools_list, 0..) |*tool_desc, i| {
+            const is_selected = canvas.toolbar.selected_index == i;
+            const selected_fill = dvui.themeGet().focus;
+            const opts: dvui.Options = .{
+                .id_extra = i,
+                .color_fill = if (is_selected) selected_fill else null,
+            };
+            if (dvui.buttonIcon(@src(), tool_desc.name, tool_desc.icon_tvg, .{}, .{}, opts)) {
+                to_select = i;
+            }
+        }
+        if (to_select) |index| {
+            canvas.toolbar.select(index);
+        }
+    }
+    bar.deinit();
+}
+
+fn drawPropertiesPanel(canvas: *Canvas, selected_object: *Document.Object) void {
+    var panel = dvui.box(
+        @src(),
+        .{ .dir = .vertical },
+        .{
+            .padding = dvui.Rect.all(8),
+            .corner_radius = dvui.Rect.all(8),
+            .background = true,
+            .color_fill = dvui.Color.black.opacity(0.2),
+            .min_size_content = .width(300),
+            .max_size_content = .width(300),
+            .margin = dvui.Rect{ .w = 32, .y = 16, .h = 100 },
+        },
+    );
+    {
+        dvui.label(@src(), "Properties", .{}, .{});
+        var scroll = dvui.scrollArea(@src(), .{
+            .horizontal = .none,
+            .vertical = .auto,
+        }, .{
+            .expand = .both,
+        });
+        {
+            for (selected_object.properties.items, 0..) |*prop, i| {
+                drawPropertyEditor(canvas, selected_object, prop, i);
+            }
+        }
+        scroll.deinit();
+    }
+    panel.deinit();
+}
+
+fn drawCanvasLabelPanel() void {
+    var panel = dvui.box(
+        @src(),
+        .{ .dir = .vertical },
+        .{
+            .gravity_x = 0.5,
+            .gravity_y = 0.0,
+            .padding = dvui.Rect.all(8),
+            .corner_radius = dvui.Rect.all(8),
+            .background = true,
+            .color_fill = dvui.Color.black.opacity(0.2),
+            .margin = dvui.Rect{ .x = 16, .y = 16 },
+        },
+    );
+    {
+        dvui.label(@src(), "Canvas", .{}, .{});
+    }
+    panel.deinit();
+}
+
+fn drawStatsPanel(stats: RenderStats, frame_index: u64) void {
+    var panel = dvui.box(
+        @src(),
+        .{ .dir = .vertical },
+        .{
+            .gravity_x = 0.0,
+            .gravity_y = 1.0,
+            .padding = dvui.Rect.all(8),
+            .corner_radius = dvui.Rect.all(8),
+            .background = true,
+            .color_fill = dvui.Color.black.opacity(0.2),
+            .margin = dvui.Rect{ .x = 16, .h = 16 },
+        },
+    );
+    {
+        dvui.label(@src(), "Frame time: {d:.2}ms", .{@as(f32, @floatFromInt(stats.render_time_ns)) / std.time.ns_per_ms}, .{});
+        dvui.label(@src(), "Frame index: {}", .{frame_index}, .{});
+    }
+    panel.deinit();
+}
+
+fn applyPropertyPatch(canvas: *Canvas, obj: *Document.Object, patch: Property) void {
+    obj.setProperty(canvas.allocator, patch) catch {};
+    canvas.requestRedraw();
+}
+
+fn drawPropertyEditor(canvas: *Canvas, obj: *Document.Object, prop: *const Property, row_index: usize) void {
+    const row_id: usize = row_index * 16;
+    const is_even = row_index % 2 == 0;
+    var row = dvui.box(
+        @src(),
+        .{ .dir = .vertical },
+        .{
+            .id_extra = row_id,
+            .expand = .horizontal,
+            .padding = dvui.Rect{ .y = 2, .x = 4 },
+            .corner_radius = dvui.Rect.all(4),
+            .background = is_even,
+            .color_fill = if (is_even) dvui.Color.black.opacity(0.4) else .{},
+        },
+    );
+    {
+        const tag = std.meta.activeTag(prop.data);
+
+        dvui.labelNoFmt(@src(), propertyLabel(tag), .{}, .{});
+
+        switch (prop.data) {
+            .position => |pos| {
+                var next = pos;
+                var changed = false;
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "x:", .{}, .{});
+                    const T = @TypeOf(next.x);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next.x }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    changed = res.changed or changed;
+                }
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "y:", .{}, .{});
+                    const T = @TypeOf(next.y);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next.y }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    changed = res.changed or changed;
+                }
+                if (changed) {
+                    applyPropertyPatch(canvas, obj, .{ .data = .{ .position = next } });
+                }
+            },
+            .angle => |angle| {
+                var next = angle;
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "deg:", .{}, .{});
+                    var degrees: f32 = next * 180.0 / std.math.pi;
+                    const res = dvui.textEntryNumber(@src(), f32, .{ .value = &degrees }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    if (res.changed) {
+                        next = degrees * std.math.pi / 180.0;
+                        applyPropertyPatch(canvas, obj, .{ .data = .{ .angle = next } });
+                    }
+                }
+            },
+            .scale => |scale| {
+                var next = scale;
+                var changed = false;
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "x:", .{}, .{});
+                    const T = @TypeOf(next.scale_x);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next.scale_x, .min = @as(T, 0.0), .max = @as(T, 10.0) }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    changed = res.changed or changed;
+                }
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "y:", .{}, .{});
+                    const T = @TypeOf(next.scale_y);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next.scale_y, .min = @as(T, 0.0), .max = @as(T, 10.0) }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    changed = res.changed or changed;
+                }
+                if (changed) {
+                    applyPropertyPatch(canvas, obj, .{ .data = .{ .scale = next } });
+                }
+            },
+            .visible => |v| {
+                var next = v;
+                if (dvui.checkbox(@src(), &next, "Visible", .{})) {
+                    applyPropertyPatch(canvas, obj, .{ .data = .{ .visible = next } });
+                }
+            },
+            .opacity => |opacity| {
+                var next = opacity;
+                if (dvui.sliderEntry(@src(), "{d:0.2}", .{ .value = &next, .min = 0.0, .max = 1.0, .interval = 0.01 }, .{ .expand = .horizontal })) {
+                    applyPropertyPatch(canvas, obj, .{ .data = .{ .opacity = next } });
+                }
+            },
+            .locked => |v| {
+                var next = v;
+                if (dvui.checkbox(@src(), &next, "Locked", .{})) {
+                    applyPropertyPatch(canvas, obj, .{ .data = .{ .locked = next } });
+                }
+            },
+            .size => |size| {
+                var next = size;
+                var changed = false;
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "w:", .{}, .{});
+                    const T = @TypeOf(next.w);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next.w, .min = @as(T, 0.0) }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    changed = res.changed or changed;
+                }
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "h:", .{}, .{});
+                    const T = @TypeOf(next.h);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next.h, .min = @as(T, 0.0) }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    changed = res.changed or changed;
+                }
+                if (changed) {
+                    applyPropertyPatch(canvas, obj, .{ .data = .{ .size = next } });
+                }
+            },
+            .radii => |radii| {
+                var next = radii;
+                var changed = false;
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "x:", .{}, .{});
+                    const T = @TypeOf(next.x);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next.x, .min = @as(T, 0.0) }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    changed = res.changed or changed;
+                }
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "y:", .{}, .{});
+                    const T = @TypeOf(next.y);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next.y, .min = @as(T, 0.0) }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    changed = res.changed or changed;
+                }
+                if (changed) {
+                    applyPropertyPatch(canvas, obj, .{ .data = .{ .radii = next } });
+                }
+            },
+            .arc_percent => |pct| {
+                var next = pct;
+                if (dvui.sliderEntry(@src(), "{d:0.0}%", .{ .value = &next, .min = 0.0, .max = 100.0, .interval = 1.0 }, .{ .expand = .horizontal })) {
+                    applyPropertyPatch(canvas, obj, .{ .data = .{ .arc_percent = next } });
+                }
+            },
+            .end_point => |pt| {
+                var next = pt;
+                var changed = false;
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "x:", .{}, .{});
+                    const T = @TypeOf(next.x);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next.x }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    changed = res.changed or changed;
+                }
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "y:", .{}, .{});
+                    const T = @TypeOf(next.y);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next.y }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    changed = res.changed or changed;
+                }
+                if (changed) {
+                    applyPropertyPatch(canvas, obj, .{ .data = .{ .end_point = next } });
+                }
+            },
+            .points => |points| {
+                var list = std.ArrayList(Point2_f).empty;
+                list.appendSlice(canvas.allocator, points) catch {
+                    dvui.label(@src(), "Points: {d}", .{points.len}, .{});
+                    return;
+                };
+                defer list.deinit(canvas.allocator);
+                dvui.label(@src(), "Points: {d}", .{list.items.len}, .{});
+
+                var changed = false;
+                var to_delete: ?usize = null;
+
+                for (list.items, 0..) |*pt, i| {
+                    // Одна строка: крестик удаления + paned с X/Y пополам
+                    var subrow = dvui.box(
+                        @src(),
+                        .{ .dir = .horizontal },
+                        .{
+                            .expand = .horizontal,
+                            .id_extra = i,
+                        },
+                    );
+                    {
+                        // Крестик удаления
+                        if (dvui.buttonIcon(@src(), "Delete", icons.cross, .{}, .{}, .{
+                            .id_extra = i,
+                            .gravity_y = 0.5,
+                            .margin = .{
+                                .x = 8,
+                            },
+                        })) {
+                            to_delete = i;
+                        }
+
+                        // Панель с X и Y, разделёнными пополам
+                        var split_ratio: f32 = 0.5;
+                        var paned = dvui.paned(
+                            @src(),
+                            .{
+                                .direction = .horizontal,
+                                .collapsed_size = 0.0,
+                                .split_ratio = &split_ratio,
+                                .handle_size = 0,
+                            },
+                            .{
+                                .expand = .horizontal,
+                            },
+                        );
+                        {
+                            if (paned.showFirst()) {
+                                var x_box = dvui.box(
+                                    @src(),
+                                    .{ .dir = .horizontal },
+                                    .{ .expand = .both },
+                                );
+                                {
+                                    dvui.labelNoFmt(@src(), "x:", .{}, .{
+                                        .gravity_y = 0.5,
+                                    });
+                                    const Tx = @TypeOf(pt.x);
+                                    const res_x = dvui.textEntryNumber(
+                                        @src(),
+                                        Tx,
+                                        .{ .value = &pt.x },
+                                        .{ .expand = .horizontal },
+                                    );
+                                    changed = res_x.changed or changed;
+                                }
+                                x_box.deinit();
+                            }
+
+                            if (paned.showSecond()) {
+                                var y_box = dvui.box(
+                                    @src(),
+                                    .{ .dir = .horizontal },
+                                    .{ .expand = .both },
+                                );
+                                {
+                                    dvui.labelNoFmt(@src(), "y:", .{}, .{
+                                        .gravity_y = 0.5,
+                                    });
+                                    const Ty = @TypeOf(pt.y);
+                                    const res_y = dvui.textEntryNumber(
+                                        @src(),
+                                        Ty,
+                                        .{ .value = &pt.y },
+                                        .{ .expand = .horizontal },
+                                    );
+                                    changed = res_y.changed or changed;
+                                }
+                                y_box.deinit();
+                            }
+                        }
+                        paned.deinit();
+                    }
+                    subrow.deinit();
+                }
+
+                // Удаление выбранной точки
+                if (to_delete) |idx| {
+                    _ = list.orderedRemove(idx);
+                    changed = true;
+                }
+
+                // Кнопка добавления новой точки (одна на весь список)
+                if (dvui.button(@src(), "Add point", .{}, .{})) {
+                    const T = @TypeOf(list.items[0]);
+                    const new_point: T = if (list.items.len > 0)
+                        list.items[list.items.len - 1]
+                    else
+                        .{ .x = 0, .y = 0 };
+                    list.append(canvas.allocator, new_point) catch {};
+                    changed = true;
+                }
+
+                if (changed) {
+                    const slice = canvas.allocator.dupe(Point2_f, list.items) catch return;
+                    obj.setProperty(canvas.allocator, .{ .data = .{ .points = slice } }) catch {
+                        canvas.allocator.free(slice);
+                        return;
+                    };
+                    canvas.requestRedraw();
+                }
+            },
+            .fill_rgba => |rgba| {
+                drawColorEditor(canvas, obj, rgba, true);
+            },
+            .stroke_rgba => |rgba| {
+                drawColorEditor(canvas, obj, rgba, false);
+            },
+            .thickness => |t| {
+                var next = t;
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "thickness:", .{}, .{});
+                    const T = @TypeOf(next);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next, .min = @as(T, 0.0), .max = @as(T, 100.0) }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    if (res.changed) {
+                        applyPropertyPatch(canvas, obj, .{ .data = .{ .thickness = next } });
+                    }
+                }
+            },
+            .closed => |v| {
+                var next = v;
+                if (dvui.checkbox(@src(), &next, "Closed", .{})) {
+                    applyPropertyPatch(canvas, obj, .{ .data = .{ .closed = next } });
+                }
+            },
+            .filled => |v| {
+                var next = v;
+                if (dvui.checkbox(@src(), &next, "Filled", .{})) {
+                    applyPropertyPatch(canvas, obj, .{ .data = .{ .filled = next } });
+                }
+            },
+        }
+    }
+    row.deinit();
+}
+
+fn drawColorEditor(canvas: *Canvas, obj: *Document.Object, rgba: u32, is_fill: bool) void {
+    var hsv = dvui.Color.HSV.fromColor(rgbaToColor(rgba));
+    if (dvui.colorPicker(
+        @src(),
+        .{ .hsv = &hsv, .dir = .horizontal, .sliders = .rgb, .alpha = true, .hex_text_entry = true },
+        .{ .expand = .horizontal },
+    )) {
+        const next = colorToRgba(hsv.toColor());
+        const patch: Property = if (is_fill)
+            .{ .data = .{ .fill_rgba = next } }
+        else
+            .{ .data = .{ .stroke_rgba = next } };
+        applyPropertyPatch(canvas, obj, patch);
+    }
+}
+
+fn propertyLabel(tag: std.meta.Tag(PropertyData)) []const u8 {
+    return switch (tag) {
+        .position => "Position",
+        .angle => "Angle",
+        .scale => "Scale",
+        .visible => "Visible",
+        .opacity => "Opacity",
+        .locked => "Locked",
+        .size => "Size",
+        .radii => "Radii",
+        .arc_percent => "Arc %",
+        .end_point => "End point",
+        .points => "Points",
+        .fill_rgba => "Fill color",
+        .stroke_rgba => "Stroke color",
+        .thickness => "Thickness",
+        .closed => "Closed",
+        .filled => "Filled",
+    };
+}
+
+fn rgbaToColor(rgba: u32) dvui.Color {
+    return .{
+        .r = @intCast((rgba >> 24) & 0xFF),
+        .g = @intCast((rgba >> 16) & 0xFF),
+        .b = @intCast((rgba >> 8) & 0xFF),
+        .a = @intCast((rgba >> 0) & 0xFF),
+    };
+}
+
+fn colorToRgba(color: dvui.Color) u32 {
+    return (@as(u32, color.r) << 24) |
+        (@as(u32, color.g) << 16) |
+        (@as(u32, color.b) << 8) |
+        (@as(u32, color.a) << 0);
+}
--- a/src/ui/dvui_ext.zig
+++ b/src/ui/dvui_ext.zig
@@ -1,4 +1,3 @@
-// Расширения для dvui
 const std = @import("std");
 const dvui = @import("dvui");
 const TexturedBox = @import("./types/TexturedBox.zig");
--- a/src/ui/frame.zig
+++ b/src/ui/frame.zig
@@ -1,11 +1,10 @@
-// Корневой кадр UI: разметка и сборка панелей.
 const dvui = @import("dvui");
 const WindowContext = @import("../WindowContext.zig");
+const menu_bar = @import("menu_bar.zig");
 const tab_bar = @import("tab_bar.zig");
 const left_panel = @import("left_panel.zig");
 const right_panel = @import("right_panel.zig");

-/// Отрисовать один кадр GUI. Возвращает false при закрытии окна/выходе.
 pub fn guiFrame(ctx: *WindowContext) bool {
    for (dvui.events()) |*e| {
        if (e.evt == .window and e.evt.window.action == .close) return false;
@@ -18,26 +17,18 @@ pub fn guiFrame(ctx: *WindowContext) bool {
        .{ .expand = .both, .background = true, .style = .window },
    );
    {
+        menu_bar.menuBar(ctx);
        tab_bar.tabBar(ctx);

        var content_row = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .both });
        {
            left_panel.leftPanel(ctx);

-            var back = dvui.box(
-                @src(),
-                .{ .dir = .horizontal },
-                .{ .expand = .both, .padding = dvui.Rect.all(12), .background = true },
-            );
-            {
            right_panel.rightPanel(ctx);
        }
-            back.deinit();
-        }
        content_row.deinit();
    }
    root.deinit();

-    ctx.frame_index += 1;
    return true;
 }
--- a/src/ui/left_panel.zig
+++ b/src/ui/left_panel.zig
@@ -1,31 +1,245 @@
-// Левая панель: инструменты для активного документа (scaling, тип рендера).
+const std = @import("std");
 const dvui = @import("dvui");
 const WindowContext = @import("../WindowContext.zig");
+const Document = @import("../models/Document.zig");
+const icons = @import("../icons.zig");
+const Object = Document.Object;
+
+const panel_gap: f32 = 12;
+const panel_padding: f32 = 5;
+const panel_radius: f32 = 24;
+const fill_color = dvui.Color.black.opacity(0.2);
+
+const ObjectTreeCallback = union(enum) {
+    select: u64,
+    delete: u64,
+};
+
+fn shapeLabel(shape: Object.ShapeKind) []const u8 {
+    return switch (shape) {
+        .line => "Line",
+        .ellipse => "Ellipse",
+        .broken => "Broken line",
+    };
+}
+
+fn objectTreeRow(open_doc: *WindowContext.OpenDocument, obj: *Object, depth: u32, object_callback: *?ObjectTreeCallback) void {
+    const indent_px = depth * 18;
+    const is_selected: bool = open_doc.selected_object_id == obj.id;
+    const row_id: usize = @intCast(obj.id);
+
+    const focus_color = dvui.themeGet().focus;
+
+    var row = dvui.box(
+        @src(),
+        .{ .dir = .horizontal },
+        .{
+            .id_extra = row_id,
+            .expand = .horizontal,
+        },
+    );
+    {
+        var hovered: bool = false;
+        const row_data = row.data();
+        var select_row: bool = false;
+
+        // Ручная обработка hover/click по строке без пометки события как handled,
+        // чтобы кнопка удаления могла нормально получать свои события.
+        for (dvui.events()) |*e| {
+            switch (e.evt) {
+                .mouse => |*mouse| {
+                    if (!dvui.eventMatchSimple(e, row_data)) continue;
+                    hovered = true;
+                    if (mouse.action == .release and mouse.button == .left) {
+                        select_row = true;
+                    }
+                },
+                else => {},
+            }
+        }
+
+        const background = is_selected or hovered;
+        var content = dvui.box(@src(), .{ .dir = .horizontal }, .{
+            .expand = .horizontal,
+            .margin = dvui.Rect{ .x = @floatFromInt(indent_px) },
+            .background = background,
+            .color_fill = if (is_selected) focus_color.opacity(0.35) else if (hovered) focus_color.opacity(0.18) else null,
+        });
+        {
+            dvui.labelNoFmt(
+                @src(),
+                shapeLabel(obj.shape),
+                .{},
+                .{ .id_extra = row_id, .expand = .horizontal },
+            );
+
+            if (hovered) {
+                const delete_opts: dvui.Options = .{
+                    .id_extra = row_id +% 1,
+                    .margin = dvui.Rect{ .x = 4, .w = 6 },
+                    .padding = dvui.Rect.all(2),
+                    .gravity_y = 0.5,
+                    .gravity_x = 1.0,
+                };
+                if (dvui.buttonIcon(@src(), "Delete object", icons.trash, .{}, .{}, delete_opts)) {
+                    object_callback.* = .{ .delete = obj.id };
+                    select_row = false;
+                }
+            }
+        }
+        content.deinit();
+
+        if (select_row) {
+            object_callback.* = .{ .select = obj.id };
+        }
+    }
+    row.deinit();
+    for (obj.children.items) |*child| {
+        objectTreeRow(open_doc, child, depth + 1, object_callback);
+    }
+}
+
+fn objectTree(ctx: *WindowContext) void {
+    const active_doc = ctx.activeDocument();
+    var object_callback: ?ObjectTreeCallback = null;
+    if (active_doc) |open_doc| {
+        const doc = &open_doc.document;
+        if (doc.objects.items.len == 0) {
+            dvui.label(@src(), "No objects", .{}, .{});
+        } else {
+            for (doc.objects.items) |*obj| {
+                objectTreeRow(open_doc, obj, 0, &object_callback);
+            }
+        }
+        if (object_callback) |callback| {
+            switch (callback) {
+                .select => |obj_id| {
+                    if (open_doc.selected_object_id == obj_id) {
+                        open_doc.selected_object_id = null;
+                    } else {
+                        open_doc.selected_object_id = obj_id;
+                    }
+                },
+                .delete => |obj_id| {
+                    _ = doc.removeObjectById(ctx.allocator, obj_id);
+                    if (open_doc.selected_object_id == obj_id)
+                        open_doc.selected_object_id = null;
+                    open_doc.canvas.requestRedraw();
+                },
+            }
+        }
+    } else {
+        dvui.label(@src(), "No document", .{}, .{});
+    }
+}

 pub fn leftPanel(ctx: *WindowContext) void {
+    var padding = dvui.Rect.all(panel_gap);
+    padding.w = 0;
    var panel = dvui.box(
        @src(),
        .{ .dir = .vertical },
-        .{ .expand = .vertical, .min_size_content = .{ .w = 200 }, .background = true },
+        .{
+            .expand = .vertical,
+            // Фиксированная ширина левой панели
+            .min_size_content = .{ .w = 220 },
+            .max_size_content = .{ .h = undefined, .w = 220 },
+            .background = true,
+            .padding = padding,
+        },
    );
    {
-        dvui.label(@src(), "Tools", .{}, .{});
+
+        // Нижняя часть: настройки
+        var settings_section = dvui.box(
+            @src(),
+            .{ .dir = .vertical },
+            .{
+                .expand = .horizontal,
+                .gravity_y = 1.0,
+                .margin = .{ .y = 5 },
+                .padding = dvui.Rect.all(panel_padding),
+                .corner_radius = dvui.Rect.all(panel_radius),
+                .color_fill = fill_color,
+                .background = true,
+            },
+        );
+        {
+            dvui.label(@src(), "Settings", .{}, .{});

            const active_doc = ctx.activeDocument();
            if (active_doc) |doc| {
                const canvas = &doc.canvas;
                if (dvui.checkbox(@src(), &canvas.native_scaling, "Scaling", .{})) {}
+                if (dvui.checkbox(@src(), &canvas.draw_document, "Draw document", .{})) {
+                    canvas.requestRedraw();
+                }
+                if (dvui.checkbox(@src(), &canvas.show_render_stats, "Show stats", .{})) {}
+                {
+                    dvui.label(@src(), "Rendering quality", .{}, .{});
+                    var quality = canvas.getRenderingQuality();
+                    if (dvui.sliderEntry(
+                        @src(),
+                        "{d:0.0}%",
+                        .{ .value = &quality, .min = 1.0, .max = 100.0, .interval = 1.0 },
+                        .{ .expand = .horizontal },
+                    )) {
+                        canvas.setRenderingQuality(quality);
+                    }
+                }
+                if (!canvas.draw_document) {
                    if (dvui.button(@src(), if (doc.cpu_render.type == .Gradient) "Gradient" else "Squares", .{}, .{})) {
                        if (doc.cpu_render.type == .Gradient) {
                            doc.cpu_render.type = .Squares;
                        } else {
                            doc.cpu_render.type = .Gradient;
                        }
-                canvas.redrawExample() catch {};
+                        canvas.requestRedraw();
+                    }
+                }
+                if (dvui.button(@src(), "Add random shapes", .{}, .{})) {
+                    canvas.addRandomShapes() catch {};
+                }
+                if (dvui.button(@src(), "Request redraw", .{}, .{})) {
+                    canvas.requestRedraw();
                }
            } else {
                dvui.label(@src(), "No document", .{}, .{});
            }
        }
+        settings_section.deinit();
+
+        // Верхняя часть: дерево объектов
+        var tree_section = dvui.box(
+            @src(),
+            .{ .dir = .vertical },
+            .{
+                .expand = .both,
+                .padding = dvui.Rect.all(panel_padding),
+                .corner_radius = dvui.Rect.all(panel_radius),
+                .color_fill = fill_color,
+                .background = true,
+            },
+        );
+        {
+            dvui.label(@src(), "Objects", .{}, .{
+                .font = .{
+                    .line_height_factor = dvui.themeGet().font_heading.line_height_factor,
+                    .size = dvui.themeGet().font_heading.size + 8,
+                },
+                .gravity_x = 0.5,
+            });
+            var scroll = dvui.scrollArea(
+                @src(),
+                .{ .vertical = .auto, .horizontal = .auto },
+                .{ .expand = .both, .background = false },
+            );
+            {
+                objectTree(ctx);
+            }
+            scroll.deinit();
+        }
+        tree_section.deinit();
+    }
    panel.deinit();
 }
--- a/src/ui/menu_bar.zig
+++ b/src/ui/menu_bar.zig
@@ -0,0 +1,66 @@
+const std = @import("std");
+const dvui = @import("dvui");
+const WindowContext = @import("../WindowContext.zig");
+const Document = @import("../models/Document.zig");
+const json_io = @import("../persistence/json_io.zig");
+
+pub fn menuBar(ctx: *WindowContext) void {
+    var m = dvui.menu(@src(), .horizontal, .{ .background = true, .expand = .horizontal });
+    defer m.deinit();
+
+    if (dvui.menuItemLabel(@src(), "File", .{ .submenu = true }, .{ .expand = .none })) |r| {
+        var fm = dvui.floatingMenu(@src(), .{ .from = r }, .{});
+        defer fm.deinit();
+
+        if (dvui.menuItemLabel(@src(), "Open", .{}, .{ .expand = .horizontal }) != null) {
+            m.close();
+            openDocumentDialog(ctx);
+        }
+
+        if (dvui.menuItemLabel(@src(), "Save As", .{}, .{ .expand = .horizontal }) != null) {
+            m.close();
+            saveAsDialog(ctx);
+        }
+    }
+}
+
+fn openDocumentDialog(ctx: *WindowContext) void {
+    const path_z = dvui.dialogNativeFileOpen(ctx.allocator, .{
+        .title = "Open",
+        .filters = &.{ "*.json" },
+        .filter_description = "JSON files",
+    }) catch |err| {
+        std.debug.print("Open dialog error: {}\n", .{err});
+        return;
+    } orelse return;
+    defer ctx.allocator.free(path_z);
+
+    const path = path_z[0..path_z.len];
+    const doc = json_io.loadFromFile(Document, ctx.allocator, path) catch |err| {
+        std.debug.print("Open file error: {}\n", .{err});
+        return;
+    };
+    ctx.addDocument(doc) catch |err| {
+        std.debug.print("Add document error: {}\n", .{err});
+        return;
+    };
+}
+
+fn saveAsDialog(ctx: *WindowContext) void {
+    const open_doc = ctx.activeDocument() orelse return;
+    const path_z = dvui.dialogNativeFileSave(ctx.allocator, .{
+        .title = "Save As",
+        .filters = &.{ "*.json" },
+        .filter_description = "JSON files",
+    }) catch |err| {
+        std.debug.print("Save dialog error: {}\n", .{err});
+        return;
+    } orelse return;
+    defer ctx.allocator.free(path_z);
+
+    const path_raw = path_z[0..path_z.len];
+    json_io.saveToFile(Document, &open_doc.document, path_raw) catch |err| {
+        std.debug.print("Save file error: {}\n", .{err});
+        return;
+    };
+}
--- a/src/ui/right_panel.zig
+++ b/src/ui/right_panel.zig
@@ -1,4 +1,3 @@
-// Правая панель: контент документа (холст) или заглушка «Нет документа».
 const std = @import("std");
 const dvui = @import("dvui");
 const WindowContext = @import("../WindowContext.zig");
@@ -6,6 +5,12 @@ const canvas_view = @import("canvas_view.zig");

 pub fn rightPanel(ctx: *WindowContext) void {
    const fill_color = dvui.Color.black.opacity(0.25);
+    var back = dvui.box(
+        @src(),
+        .{ .dir = .horizontal },
+        .{ .expand = .both, .padding = dvui.Rect.all(12), .background = true },
+    );
+    {
        var panel = dvui.box(
            @src(),
            .{ .dir = .vertical },
@@ -21,19 +26,33 @@ pub fn rightPanel(ctx: *WindowContext) void {
            const active_doc = ctx.activeDocument();
            if (active_doc) |doc| {
                const content_rect_scale = panel.data().contentRectScale();
-            canvas_view.canvasView(&doc.canvas, content_rect_scale);
+                canvas_view.canvasView(&doc.canvas, doc.selected_object_id, content_rect_scale);
            } else {
                noDocView(ctx);
            }
        }
        panel.deinit();
+    }
+    back.deinit();
 }

 fn noDocView(ctx: *WindowContext) void {
    var center = dvui.box(
        @src(),
        .{ .dir = .vertical },
-        .{ .expand = .both, .padding = dvui.Rect.all(20) },
+        .{
+            .expand = .both,
+            .padding = dvui.Rect.all(20),
+        },
+    );
+    {
+        var box = dvui.box(
+            @src(),
+            .{ .dir = .vertical },
+            .{
+                .gravity_x = 0.5,
+                .gravity_y = 0.5,
+            },
        );
        {
            dvui.label(@src(), "No document open", .{}, .{});
@@ -43,5 +62,7 @@ fn noDocView(ctx: *WindowContext) void {
                };
            }
        }
+        box.deinit();
+    }
    center.deinit();
 }
--- a/src/ui/tab_bar.zig
+++ b/src/ui/tab_bar.zig
@@ -1,23 +1,113 @@
-// Верхняя строка: вкладки документов + кнопка «Новый».
 const std = @import("std");
 const dvui = @import("dvui");
+const icons = @import("../icons.zig");
 const WindowContext = @import("../WindowContext.zig");

+const DocCallback = union(enum) {
+    select: usize,
+    close: usize,
+};
+
+fn documentTab(ctx: *WindowContext, index: usize, callback: *?DocCallback) void {
+    const row_id: usize = index;
+    const is_selected = if (ctx.active_document_index) |active| active == index else false;
+    const focus_color = dvui.themeGet().focus;
+
+    var row = dvui.box(
+        @src(),
+        .{ .dir = .horizontal },
+        .{
+            .id_extra = row_id,
+            .expand = .none,
+            .gravity_y = 0.5,
+        },
+    );
+    {
+        var hovered: bool = false;
+        var select_row: bool = false;
+        const row_data = row.data();
+
+        // Ручная обработка hover/click по строке без пометки события как handled,
+        // чтобы кнопка закрытия могла нормально получать свои события.
+        for (dvui.events()) |*e| {
+            switch (e.evt) {
+                .mouse => |*mouse| {
+                    if (!dvui.eventMatchSimple(e, row_data)) continue;
+                    hovered = true;
+                    if (mouse.action == .release and mouse.button == .left) {
+                        select_row = true;
+                    }
+                },
+                else => {},
+            }
+        }
+
+        var overlay = dvui.overlay(@src(), .{
+            .margin = dvui.Rect{ .x = 4, .w = 4 },
+            .padding = dvui.Rect{ .x = 12, .y = 0, .w = 0, .h = 0 },
+            .background = is_selected or hovered,
+            .color_fill = if (is_selected) focus_color.opacity(0.35) else if (hovered) focus_color.opacity(0.18) else null,
+            .corner_radius = dvui.Rect.all(4),
+        });
+        {
+            var buf: [32]u8 = undefined;
+            const label = std.fmt.bufPrint(&buf, "Doc {d}", .{index + 1}) catch "Doc";
+            dvui.labelNoFmt(@src(), label, .{}, .{
+                .gravity_x = 0.5,
+                .gravity_y = 0.5,
+                .margin = .{ .w = 24 },
+            });
+
+            if (hovered) {
+                if (dvui.buttonIcon(@src(), "Close", icons.cross, .{}, .{}, .{
+                    .id_extra = row_id +% 1,
+                    .margin = dvui.Rect{ .x = 8, .w = 6 },
+                    .padding = dvui.Rect.all(2),
+                    .gravity_x = 1,
+                    .gravity_y = 0.5,
+                })) {
+                    callback.* = .{ .close = index };
+                    select_row = false;
+                }
+            }
+        }
+        overlay.deinit();
+
+        if (select_row) {
+            callback.* = .{ .select = index };
+        }
+    }
+    row.deinit();
+}
+
 pub fn tabBar(ctx: *WindowContext) void {
    var bar = dvui.box(
        @src(),
        .{ .dir = .horizontal },
-        .{ .expand = .horizontal, .min_size_content = .{ .h = 32 }, .background = true, .padding = dvui.Rect.all(4) },
+        .{
+            .expand = .horizontal,
+            .background = true,
+            .padding = .{
+                .x = 12,
+                .w = 12,
+            },
+        },
    );
    {
+        var callback: ?DocCallback = null;
        for (ctx.documents.items, 0..) |_, i| {
-            var buf: [32]u8 = undefined;
-            const label = std.fmt.bufPrint(&buf, "Doc {d}", .{i + 1}) catch "Doc";
-            if (dvui.button(@src(), label, .{}, .{ .id_extra = i })) {
-                ctx.setActiveDocument(i);
+            documentTab(ctx, i, &callback);
+        }
+        if (callback) |action| {
+            switch (action) {
+                .select => |index| ctx.setActiveDocument(index),
+                .close => |index| ctx.closeDocument(index),
            }
        }
-        if (dvui.button(@src(), "+", .{}, .{})) {
+
+        if (dvui.buttonIcon(@src(), "Create", icons.plus, .{}, .{}, .{
+            .gravity_y = 0,
+        })) {
            ctx.addNewDocument() catch |err| {
                std.debug.print("addNewDocument error: {}\n", .{err});
            };
--- a/src/ui/types/TexturedBox.zig
+++ b/src/ui/types/TexturedBox.zig
@@ -1,4 +1,3 @@
-// Отрисовка дочернего контента как текстуры с параметрами скругления
 const std = @import("std");
 const dvui = @import("dvui");
 const TexturedBox = @This();
@@ -26,10 +25,6 @@ pub fn deinit(self: *TexturedBox) void {
        const tex = dvui.textureFromTarget(picture.texture) catch null;
        if (tex) |t| {
            dvui.Texture.destroyLater(t);
-            // self.rs.r.y -= 2;
-            // self.rs.r.x -= 2;
-            // self.rs.r.h += 2;
-            // self.rs.r.w += 2;
            dvui.renderTexture(t, self.rs, .{
                .corner_radius = self.corner_radius,
            }) catch {};
Author	SHA1	Message	Date
andrew.kraevskii	d6c8a062cd	Fix memory leaks found by DebugAllocator.	2026-03-04 02:00:40 +03:00
andrew.kraevskii	045624beac	Use leak detection of DebugAllocator. When allocating memory it remebers where memory was allocated but it only for leaks in .deinit(). So not calling it is a sure way to miss a bunch of leaks. deinit() returns if it found leaks but we don't really care. Its usefull for tests but not here.	2026-03-04 02:00:40 +03:00
andrew.kraevskii	b0259c5788	Stuff.	2026-03-04 02:00:40 +03:00
andrew.kraevskii	0a47ea1e43	If function doesn't do anything related to object just don't pass object to it	2026-03-04 02:00:40 +03:00
andrew.kraevskii	cc10d806fe	Return type of field of property instead of property.	2026-03-04 02:00:40 +03:00
andrew.kraevskii	e3a4506194	Use std.mem.Allocator.dupe instead of @memcpy.	2026-03-04 02:00:40 +03:00
andrew.kraevskii	3348b2e91c	Update to latest dvui.	2026-03-04 02:00:40 +03:00
andrew.kraevskii	9ca360c6b3	Im trying not to die of old age waiting on llvm :(	2026-03-04 02:00:21 +03:00
Roman Pytkov	2e2c140d5b	applyPropertyPatch	2026-03-03 20:46:23 +03:00
Roman Pytkov	129206ce4f	Очистка	2026-03-03 20:39:01 +03:00
Roman Pytkov	446cd80616	points теперь слайс	2026-03-03 20:38:57 +03:00
Roman Pytkov	9a795c22f1	Изменён лимит частоты перерисовки	2026-03-03 20:10:30 +03:00
Roman Pytkov	84c9a55ee5	refactor: Удалена нереализованная фигура "Дуга" Полностью удалены модель, инструменты, рендеринг и связанные UI-элементы для фигуры "Дуга", поскольку она не была реализована в системе. Также обновлены иконки для инструментов "Линия" и "Ломаная линия".	2026-03-03 20:07:03 +03:00
Roman Pytkov	4bb98f1f41	заливка круга и closed	2026-03-03 19:59:50 +03:00
Roman Pytkov	d6d41388b3	Небольшое упрощение	2026-03-03 19:46:50 +03:00
Roman Pytkov	4bf92356af	Первый крутой круг	2026-03-03 19:07:53 +03:00
Roman Pytkov	b1177265ea	Универсальная растровая заливка	2026-03-03 18:30:24 +03:00
Roman Pytkov	5b1b3a8c5e	Переход на i32	2026-03-03 15:26:01 +03:00
Roman Pytkov	7aa9673b44	Более красивая панель	2026-03-03 14:32:20 +03:00
Roman Pytkov	32cffb757d	Заливка и замкнутая фигура	2026-03-03 14:21:55 +03:00
Roman Pytkov	e5b8e6735d	Render Quality	2026-03-02 22:43:09 +03:00
Roman Pytkov	c399d285fb	Кнопки для точек на кривой	2026-03-02 22:22:47 +03:00
Roman Pytkov	d1722e3b6b	работающее сохранение	2026-03-02 17:50:05 +03:00
Roman Pytkov	37eea6ed89	Нормальный json	2026-03-02 17:37:00 +03:00
Roman Pytkov	8ea5d97c2d	Начало фикса json	2026-03-02 17:19:55 +03:00
Roman Pytkov	b692539a30	формат 0.00 для времени кадра	2026-03-01 17:57:58 +03:00
Roman Pytkov	9fa13fa913	статистика времени кадра	2026-03-01 17:19:52 +03:00
Roman Pytkov	8ca31bf479	убраны комменты лишние	2026-02-27 02:59:52 +03:00
Roman Pytkov	e527cc4999	Улучшены табы	2026-02-27 02:44:26 +03:00
Roman Pytkov	0119e51a27	Немного упрощено	2026-02-27 01:59:30 +03:00
Roman Pytkov	b7f7108f63	json сохранение	2026-02-27 01:49:40 +03:00
Roman Pytkov	50821c8046	Класные таббары	2026-02-27 01:07:00 +03:00
Roman Pytkov	98c93a3780	улучшенный зум	2026-02-27 00:12:58 +03:00
Roman Pytkov	0ef835b019	Отказ от слайдеров	2026-02-27 00:04:47 +03:00
Roman Pytkov	a0aae5da14	улучшеие сборки	2026-02-26 22:36:03 +03:00
Roman Pytkov	19e0daffbd	color picker	2026-02-26 22:15:23 +03:00
Roman Pytkov	78d586ce3d	простой зум	2026-02-26 22:08:05 +03:00
Roman Pytkov	2ab6bcd408	Определение позиции дочернего объекта	2026-02-26 21:33:09 +03:00
Roman Pytkov	77604e7b2b	Добавлять объекты в родителя	2026-02-26 21:18:37 +03:00
Roman Pytkov	291dbd6f85	Переход на object_id	2026-02-26 20:57:35 +03:00
Roman Pytkov	f55a756132	правильный скролл для свойств	2026-02-26 20:41:09 +03:00
Roman Pytkov	7923e37818	Красота	2026-02-26 20:03:04 +03:00
Roman Pytkov	9e2bb23c8a	Классный зум	2026-02-26 19:06:36 +03:00
Roman Pytkov	a1f31d76c7	Тулзы перенесены в свой каталог	2026-02-26 19:02:36 +03:00
Roman Pytkov	bf63729124	убраны круги из линий	2026-02-26 18:49:15 +03:00
Roman Pytkov	40b3b0ad10	Правильная толщина	2026-02-26 18:16:33 +03:00
Roman Pytkov	d070c1660f	Улучшайки	2026-02-26 15:58:26 +03:00
Roman Pytkov	6212d8d6aa	Дерево объектов хорошее	2026-02-26 15:45:54 +03:00
Roman Pytkov	93f7f3d814	начало дерева объектов	2026-02-26 15:16:43 +03:00
Roman Pytkov	05f5481a42	Дополнительный буфер для отрисовки broken line	2026-02-26 13:48:42 +03:00
Roman Pytkov	0eee436150	llvm	2026-02-26 12:42:45 +03:00
Roman Pytkov	01b76ede64	Оптимизация круга	2026-02-26 00:39:11 +03:00
Roman Pytkov	faf79367f6	Толщина круга	2026-02-26 00:32:59 +03:00
Roman Pytkov	f8731bde87	Толщина линии	2026-02-26 00:23:10 +03:00
Roman Pytkov	563c2a7535	Кнопка для добавления случайных фигур	2026-02-26 00:03:22 +03:00
Roman Pytkov	b6e14cd74d	Теперь сквозь тулбар не кликается на холст	2026-02-25 23:59:46 +03:00
Roman Pytkov	790200be2a	Добавлены остальные инструменты	2026-02-25 23:20:30 +03:00
Roman Pytkov	65ca468bfb	Убраны лишние комментарии	2026-02-25 22:46:45 +03:00
Roman Pytkov	317ebb958b	Убрано лишнее умножение на Alpha	2026-02-25 22:37:52 +03:00
Roman Pytkov	31ba2c57cb	Поправлены цвета	2026-02-25 22:31:50 +03:00
Roman Pytkov	5c9ec3167a	рефакторинг небольшой	2026-02-25 21:27:02 +03:00
Roman Pytkov	9202b527e4	Первая версия тулбара	2026-02-25 21:13:38 +03:00
Roman Pytkov	0d546782bb	Поправлена панель настроек	2026-02-25 19:14:06 +03:00
Roman Pytkov	0ee7be2002	Зум к курсору	2026-02-25 18:26:08 +03:00
Roman Pytkov	23111172d8	правка	2026-02-25 01:22:42 +03:00
Roman Pytkov	0114db1f48	feat: Добавил толщину линий, унифицировал геометрию Переименовал основные геометрические модели (Point, Size, Rect, Scale, Radii), явно разделив их на типы с плавающей точкой (_f) и целочисленные (_i). Обновил использование этих типов во всем проекте для улучшения типобезопасности и ясности. Ввел новое свойство thickness для объектов и реализовал его применение при отрисовке линий и ломаных. Добавил Point2_i для целочисленных координат буфера в конвейере отрисовки.	2026-02-25 00:57:55 +03:00
Roman Pytkov	1d995995e7	Рефакторинг ещё...	2026-02-24 23:52:13 +03:00
Roman Pytkov	e5dd455d14	Первая растеризация	2026-02-24 21:56:15 +03:00
Roman Pytkov	ef768e9fe7	Первые попытки рисовать	2026-02-24 20:51:40 +03:00
Roman Pytkov	4f386c981c	Refactor: Переместил модуль shape Я переместил модуль shape в подкаталог shape/ для лучшей организации кода. Изменил пути импорта в связанных файлах, чтобы соответствовать новому местоположению модуля. Удалил возвраты null из `getLocalBounds` и заменил их на обработку ошибок для улучшения надежности.	2026-02-24 20:34:14 +03:00
Roman Pytkov	f1a0e84272	Refactor: Перенёс логику создания фигур Я перенёс логику создания объектов фигур из `Document.zig` и `Object.zig` в новый модуль `shape.zig`. Это упрощает добавление новых фигур и улучшает организацию кода.	2026-02-24 19:59:57 +03:00
Roman Pytkov	1a94cc8bfd	Случайное дерево объектов	2026-02-24 00:39:40 +03:00
Roman Pytkov	aeda3ee0d0	Возможность добавлять объекты в документ	2026-02-23 23:52:47 +03:00
Roman Pytkov	dd9d5deb92	Базовая модель готова	2026-02-23 23:37:02 +03:00
Roman Pytkov	bd58286c98	Убраны комментарии лишние и улучшены модели	2026-02-23 23:01:49 +03:00
Roman Pytkov	b896a67fd4	Позиция мыши в координатах документа	2026-02-23 22:21:59 +03:00