fix: add pointer-events-none to widget content in design mode to fix click-to-select

In dashboard edit mode, SchemaRenderer content (charts, tables, interactive SVGs)
was intercepting click events before they could bubble to the widget Card/div
selection handler. This prevented users from selecting widgets in the left/main
dashboard area.

Fix: Apply pointer-events-none to SchemaRenderer content wrappers when designMode
is active, allowing clicks to pass through to the parent element's onClick handler.
This enables proper widget selection while maintaining full interactivity in non-edit mode.

Added 4 new tests verifying the fix. Updated ROADMAP.md with Phase 9 entry.

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

ROADMAP.md

@@ -389,6 +389,14 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [x] `WidgetConfigPanel` — added `headerExtra` prop for custom header actions
 - [x] Update 21 integration tests (10 DashboardDesignInteraction + 11 DashboardViewSelection) to verify inline config panel pattern, widget deletion, live preview sync
 
+**Phase 9 — Design Mode Widget Selection Click-Through Fix:**
+- [x] Fix: Widget content (charts, tables via `SchemaRenderer`) intercepted click events, preventing selection in edit mode
+- [x] Add `pointer-events-none` to `SchemaRenderer` content wrappers in `DashboardRenderer` design mode so clicks pass through to the widget Card/div selection handler
+- [x] Self-contained (metric) widgets: `pointer-events-none` applied to `SchemaRenderer` className in design mode
+- [x] Card-based (chart/table) widgets: `pointer-events-none` applied to `CardContent` inner wrapper in design mode
+- [x] No impact on non-design mode — widgets remain fully interactive when not editing
+- [x] Add 4 new Vitest tests: pointer-events-none presence in design mode, absence in normal mode, click-to-select on Card-based widgets
+
 ### P1.11 Console — Schema-Driven View Config Panel Migration
 
 > Migrated the Console ViewConfigPanel from imperative implementation (~1655 lines) to Schema-Driven architecture using `ConfigPanelRenderer` + `useConfigDraft` + `ConfigPanelSchema`, reducing to ~170 lines declarative wrapper + schema factory.

packages/plugin-dashboard/src/DashboardRenderer.tsx

@@ -194,7 +194,7 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
                     }: undefined}
                     {...designModeProps}
                 >
-                     <SchemaRenderer schema={componentSchema} className="h-full w-full" />
+                     <SchemaRenderer schema={componentSchema} className={cn("h-full w-full", designMode && "pointer-events-none")} />
                 </div>
             );
         }
@@ -222,7 +222,7 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
                     </CardHeader>
                 )}
                 <CardContent className="p-0">
-                    <div className={cn("h-full w-full", "p-3 sm:p-4 md:p-6")}>
+                    <div className={cn("h-full w-full", "p-3 sm:p-4 md:p-6", designMode && "pointer-events-none")}>
                         <SchemaRenderer schema={componentSchema} />
                     </div>
                 </CardContent>

packages/plugin-dashboard/src/__tests__/DashboardRenderer.designMode.test.tsx

@@ -229,6 +229,63 @@ describe('DashboardRenderer design mode', () => {
     });
   });
 
+  describe('Content pointer-events in design mode', () => {
+    it('should apply pointer-events-none to widget content in design mode', () => {
+      render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId={null}
+          onWidgetClick={vi.fn()}
+        />,
+      );
+
+      // Card widget (bar chart) — content wrapper should have pointer-events-none
+      const barWidget = screen.getByTestId('dashboard-preview-widget-w2');
+      const contentWrapper = barWidget.querySelector('.pointer-events-none');
+      expect(contentWrapper).toBeInTheDocument();
+    });
+
+    it('should NOT apply pointer-events-none when not in design mode', () => {
+      const { container } = render(<DashboardRenderer schema={DASHBOARD_WITH_WIDGETS} />);
+
+      // No element should have pointer-events-none class
+      expect(container.querySelector('.pointer-events-none')).not.toBeInTheDocument();
+    });
+
+    it('should still call onWidgetClick when clicking on Card-based widget content area', () => {
+      const onWidgetClick = vi.fn();
+      render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId={null}
+          onWidgetClick={onWidgetClick}
+        />,
+      );
+
+      // Click on the bar chart widget (Card-based)
+      fireEvent.click(screen.getByTestId('dashboard-preview-widget-w2'));
+      expect(onWidgetClick).toHaveBeenCalledWith('w2');
+    });
+
+    it('should still call onWidgetClick when clicking on table widget', () => {
+      const onWidgetClick = vi.fn();
+      render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId={null}
+          onWidgetClick={onWidgetClick}
+        />,
+      );
+
+      // Click on the table widget (Card-based)
+      fireEvent.click(screen.getByTestId('dashboard-preview-widget-w3'));
+      expect(onWidgetClick).toHaveBeenCalledWith('w3');
+    });
+  });
+
   describe('Non-design mode behavior', () => {
     it('should not add design mode attributes when designMode is off', () => {
       const { container } = render(<DashboardRenderer schema={DASHBOARD_WITH_WIDGETS} />);