From f3e7a149efdcdbc06b47a7ce33b16dfe04ecbeb2 Mon Sep 17 00:00:00 2001
From: Kayshen-X <kayshen_xu@163.com>
Date: Sat, 20 Jun 2026 12:27:22 +0800
Subject: [PATCH] refactor(editor): render property checkboxes/radio via jian
 Checkbox/Radio

The widget + size-section check rows and the flex gap-alignment radio
now paint through jian Checkbox / Radio (first consumers) instead of
hand-rolled box+check / ring+dot; row hit-tests are unchanged.
---
 .../src/widgets/property_panel_flex.rs        | 24 +++++++------------
 .../src/widgets/property_panel_sections.rs    | 21 +++++++---------
 .../src/widgets/property_panel_widget.rs      | 22 +++++++----------
 3 files changed, 24 insertions(+), 43 deletions(-)

diff --git a/crates/op-editor-ui/src/widgets/property_panel_flex.rs b/crates/op-editor-ui/src/widgets/property_panel_flex.rs
index 45ba95123..9cec4ffec 100644
--- a/crates/op-editor-ui/src/widgets/property_panel_flex.rs
+++ b/crates/op-editor-ui/src/widgets/property_panel_flex.rs
@@ -42,7 +42,6 @@ const GAP_ROW_H: f32 = 20.0;
 const GAP_ROW_GAP: f32 = 2.0;
 /// RadioCircle geometry (compact ring + dot).
 const RADIO_SIZE: f32 = 13.0;
-const RADIO_DOT: f32 = 7.0;
 /// x-offset from a radio row's left to its content (TS `gap-1.5` = 6px
 /// + the 14px circle).
 const RADIO_GUTTER: f32 = 6.0 + RADIO_SIZE;
@@ -681,22 +680,15 @@ fn paint_radio_circle(cx: &mut PaintCx<'_>, theme: &Theme, x: f32, y: f32, selec
         origin: Point2D::new(x, y),
         size: Point2D::new(RADIO_SIZE, RADIO_SIZE),
     };
-    let border = if selected {
-        theme.primary
-    } else {
-        theme.muted_foreground
-    };
-    cx.backend
-        .stroke_round_rect(ring, RADIO_SIZE / 2.0, border, 1.5);
-    if selected {
-        let off = (RADIO_SIZE - RADIO_DOT) / 2.0;
-        let dot = Rect {
-            origin: Point2D::new(x + off, y + off),
-            size: Point2D::new(RADIO_DOT, RADIO_DOT),
-        };
-        cx.backend
-            .fill_round_rect(dot, RADIO_DOT / 2.0, theme.primary);
+    jian_widgets::components::radio::Radio {
+        selected,
+        enabled: true,
     }
+    .paint(
+        cx.backend,
+        ring,
+        &crate::widgets::button::tokens_from_theme(theme),
+    );
 }
 
 /// 10px muted label vertically centred in a `GAP_ROW_H` radio row.
diff --git a/crates/op-editor-ui/src/widgets/property_panel_sections.rs b/crates/op-editor-ui/src/widgets/property_panel_sections.rs
index 0a8d22b58..ce7b02fe1 100644
--- a/crates/op-editor-ui/src/widgets/property_panel_sections.rs
+++ b/crates/op-editor-ui/src/widgets/property_panel_sections.rs
@@ -760,20 +760,15 @@ fn paint_check_row(
         origin: Point2D::new(x, y + 3.0),
         size: Point2D::new(16.0, 16.0),
     };
-    if checked {
-        cx.backend.fill_round_rect(box_rect, 4.0, theme.primary);
-        draw_icon(
-            cx.backend,
-            Icon::Check,
-            Point2D::new(box_rect.origin.x + 1.0, box_rect.origin.y + 1.0),
-            14.0,
-            theme.primary_foreground,
-            1.8,
-        );
-    } else {
-        cx.backend
-            .stroke_round_rect(box_rect, 4.0, theme.border, 1.0);
+    jian_widgets::components::checkbox::Checkbox {
+        checked,
+        enabled: true,
     }
+    .paint(
+        cx.backend,
+        box_rect,
+        &crate::widgets::button::tokens_from_theme(theme),
+    );
     let lbl = TextLayout::single_run(
         label,
         "system-ui",
diff --git a/crates/op-editor-ui/src/widgets/property_panel_widget.rs b/crates/op-editor-ui/src/widgets/property_panel_widget.rs
index 1728b0c17..3630da026 100644
--- a/crates/op-editor-ui/src/widgets/property_panel_widget.rs
+++ b/crates/op-editor-ui/src/widgets/property_panel_widget.rs
@@ -15,7 +15,6 @@
 //! out of scope (JSON-only).
 
 use crate::theme::Theme;
-use crate::widgets::icons::{draw_icon, Icon};
 use crate::widgets::property_panel::{NodeSnapshot, PropertyPanelAction, WidgetKind};
 use crate::widgets::property_panel_inputs::{
     paint_input_with_prefix_focused_state, paint_section_divider, paint_section_label,
@@ -287,20 +286,15 @@ fn paint_check_row(
         origin: Point2D::new(x, y + 7.0),
         size: Point2D::new(16.0, 16.0),
     };
-    if checked {
-        cx.backend.fill_round_rect(box_rect, 4.0, theme.primary);
-        draw_icon(
-            cx.backend,
-            Icon::Check,
-            Point2D::new(box_rect.origin.x + 1.0, box_rect.origin.y + 1.0),
-            14.0,
-            theme.primary_foreground,
-            1.8,
-        );
-    } else {
-        cx.backend
-            .stroke_round_rect(box_rect, 4.0, theme.border, 1.0);
+    jian_widgets::components::checkbox::Checkbox {
+        checked,
+        enabled: true,
     }
+    .paint(
+        cx.backend,
+        box_rect,
+        &crate::widgets::button::tokens_from_theme(theme),
+    );
     let lbl = TextLayout::single_run(
         label,
         "system-ui",