feat(editor): add inspector components and section renderers

Author: joaopcm

packages/editor/package.json

@@ -140,11 +140,13 @@
     "prismjs": "^1.30.0"
   },
   "devDependencies": {
+    "@radix-ui/react-icons": "^1.3.2",
     "@testing-library/react": "16.3.2",
     "@types/node": "catalog:",
     "@types/prismjs": "1.26.6",
     "@vitejs/plugin-react": "catalog:",
     "@vitest/browser-playwright": "4.0.17",
+    "lucide-react": "^1.7.0",
     "playwright": "1.58.2",
     "postcss": "8.5.8",
     "postcss-import": "16.1.1",

packages/editor/src/ui/inspector/components/border-picker.spec.tsx

@@ -0,0 +1,53 @@
+import { fireEvent, render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('../../../plugins/email-theming/themes', () => ({
+  SUPPORTED_CSS_PROPERTIES: {
+    borderWidth: { defaultValue: 0 },
+    borderColor: { defaultValue: '#000000' },
+    borderStyle: {
+      defaultValue: 'solid',
+      options: {
+        solid: 'Solid',
+        dashed: 'Dashed',
+        dotted: 'Dotted',
+        none: 'None',
+      },
+    },
+  },
+}));
+
+import { BorderPicker } from './border-picker';
+
+describe('BorderPicker', () => {
+  const uniformStyle = {
+    borderWidth: '1',
+    borderColor: '#000',
+    borderStyle: 'solid',
+  };
+
+  it('renders in uniform mode when all sides are equal', () => {
+    const { getByText } = render(
+      <BorderPicker styleObject={uniformStyle} onChange={() => {}} />,
+    );
+    expect(getByText('Border')).toBeDefined();
+  });
+
+  it('toggles to per-side mode', () => {
+    const handler = vi.fn();
+    const { getByText } = render(
+      <BorderPicker styleObject={uniformStyle} onChange={handler} />,
+    );
+    const perSideBtn = getByText('Per side')
+      .closest('[data-re-inspector-tooltip]')
+      ?.querySelector('button');
+    fireEvent.click(perSideBtn!);
+    expect(handler).toHaveBeenCalled();
+  });
+
+  it('does not fire onChange on initial render', () => {
+    const handler = vi.fn();
+    render(<BorderPicker styleObject={uniformStyle} onChange={handler} />);
+    expect(handler).not.toHaveBeenCalled();
+  });
+});