feat: click-ring controls in the sidebar

The renderer and metadata schema have supported click rings all along
(effects.clickCircles), but the recorder writes effects: nil and no UI
ever enabled them — the feature was invisible dead weight.

New "Clicks" card: enable toggle, size (24–140px), duration
(250–1200ms), and a color picker bridged to the schema's hex string.
First enable materialises the effects config (trail/highlight stay
disabled — schema-only); all writes route through metadata.didSet so
they invalidate the snapshot and autosave like every other edit.

Author: jasonzh0

CineScreen/Editor/EditorViewModel.swift

@@ -256,6 +256,50 @@ final class EditorViewModel {
         }
     }
 
+    // MARK: - Click effects
+
+    /// Defaults matching the renderer's fallbacks (RenderSnapshot falls back
+    /// to size 64 / duration 600 / white when fields are absent).
+    private static let defaultClickCircles = MouseEffectsConfig.ClickCircles(
+        enabled: true, size: 64, color: "#ffffff", duration: 600
+    )
+
+    var clickRingsEnabled: Bool {
+        get { metadata?.effects?.clickCircles.enabled ?? false }
+        set { withClickCircles { $0.enabled = newValue } }
+    }
+
+    var clickRingSize: Double {
+        get { metadata?.effects?.clickCircles.size ?? Self.defaultClickCircles.size }
+        set { withClickCircles { $0.size = newValue } }
+    }
+
+    var clickRingDuration: Double {
+        get { metadata?.effects?.clickCircles.duration ?? Self.defaultClickCircles.duration }
+        set { withClickCircles { $0.duration = newValue } }
+    }
+
+    var clickRingColorHex: String {
+        get { metadata?.effects?.clickCircles.color ?? Self.defaultClickCircles.color }
+        set { withClickCircles { $0.color = newValue } }
+    }
+
+    /// The recorder writes `effects: nil`, so the first edit materialises the
+    /// whole effects config (trail/highlight stay disabled — schema-only
+    /// features). Routing the write through `self.metadata` hits the didSet
+    /// hook (snapshot invalidation + autosave) like every other mutation.
+    private func withClickCircles(_ mutate: (inout MouseEffectsConfig.ClickCircles) -> Void) {
+        guard var metadata = metadata else { return }
+        var effects = metadata.effects ?? MouseEffectsConfig(
+            clickCircles: Self.defaultClickCircles,
+            trail: MouseEffectsConfig.Trail(enabled: false, length: 0, fadeSpeed: 0, color: "#ffffff"),
+            highlightRing: MouseEffectsConfig.HighlightRing(enabled: false, size: 0, color: "#ffffff", pulseSpeed: 0)
+        )
+        mutate(&effects.clickCircles)
+        metadata.effects = effects
+        self.metadata = metadata
+    }
+
     // MARK: - Webcam layout
 
     /// Persist a webcam layout change into the metadata model. The drag

CineScreen/Editor/Sidebar/SidebarView.swift

@@ -19,6 +19,7 @@ struct SidebarView: View {
                 VStack(alignment: .leading, spacing: 14) {
                     card(title: "Background", icon: "photo.on.rectangle.angled") { canvasControls }
                     card(title: "Cursor",     icon: "cursorarrow.rays")           { cursorControls }
+                    card(title: "Clicks",     icon: "hand.tap")                   { clickControls }
                     card(title: "Zoom",       icon: "plus.magnifyingglass")       { zoomControls }
                     if vm.webcamPlayer != nil {
                         card(title: "Webcam",  icon: "video.fill")                { webcamControls }
@@ -232,6 +233,66 @@ struct SidebarView: View {
     }
 
     @ViewBuilder
+    private var clickControls: some View {
+        VStack(alignment: .leading, spacing: 10) {
+            Toggle(isOn: $vm.clickRingsEnabled) {
+                Text("Click Rings").font(.caption).foregroundStyle(CTheme.textSecondary)
+            }
+            .toggleStyle(.switch)
+            .controlSize(.small)
+            .disabled(vm.metadata == nil)
+
+            if vm.clickRingsEnabled {
+                HStack {
+                    Text("Size").font(.caption).foregroundStyle(CTheme.textSecondary)
+                    Spacer()
+                    Text("\(Int(vm.clickRingSize)) px")
+                        .font(.system(.caption, design: .monospaced))
+                        .foregroundStyle(CTheme.textSecondary)
+                }
+                Slider(value: $vm.clickRingSize, in: 24...140, step: 1)
+                    .tint(CTheme.accent)
+
+                HStack {
+                    Text("Duration").font(.caption).foregroundStyle(CTheme.textSecondary)
+                    Spacer()
+                    Text("\(Int(vm.clickRingDuration)) ms")
+                        .font(.system(.caption, design: .monospaced))
+                        .foregroundStyle(CTheme.textSecondary)
+                }
+                Slider(value: $vm.clickRingDuration, in: 250...1200, step: 50)
+                    .tint(CTheme.accent)
+
+                HStack {
+                    Text("Color").font(.caption).foregroundStyle(CTheme.textSecondary)
+                    Spacer()
+                    ColorPicker("", selection: ringColorBinding, supportsOpacity: false)
+                        .labelsHidden()
+                        .controlSize(.small)
+                }
+            }
+        }
+    }
+
+    /// Bridges the metadata's hex string to SwiftUI's ColorPicker.
+    private var ringColorBinding: Binding<Color> {
+        Binding(
+            get: {
+                let v = RenderSnapshot.parseHexColor(vm.clickRingColorHex)
+                return Color(.sRGB, red: Double(v.x), green: Double(v.y), blue: Double(v.z))
+            },
+            set: { newColor in
+                let ns = NSColor(newColor).usingColorSpace(.sRGB) ?? .white
+                vm.clickRingColorHex = String(
+                    format: "#%02x%02x%02x",
+                    Int(round(ns.redComponent * 255)),
+                    Int(round(ns.greenComponent * 255)),
+                    Int(round(ns.blueComponent * 255))
+                )
+            }
+        )
+    }
+
     private var zoomControls: some View {
         VStack(alignment: .leading, spacing: 8) {
             HStack {