Unified UI

.changeset/expo-atlas-upgrade.md

@@ -0,0 +1,5 @@
+---
+"@rozenite/expo-atlas-plugin": patch
+---
+
+Upgrade `expo-atlas` dependency from `^0.4.0` to `^0.4.3`.

.changeset/plugins-use-shared-ui.md

@@ -0,0 +1,16 @@
+---
+"@rozenite/controls-plugin": minor
+"@rozenite/expo-atlas-plugin": minor
+"@rozenite/file-system-plugin": minor
+"@rozenite/mmkv-plugin": minor
+"@rozenite/network-activity-plugin": minor
+"@rozenite/overlay-plugin": minor
+"@rozenite/performance-monitor-plugin": minor
+"@rozenite/react-navigation-plugin": minor
+"@rozenite/require-profiler-plugin": minor
+"@rozenite/rhf-plugin": minor
+"@rozenite/sqlite-plugin": minor
+"@rozenite/storage-plugin": minor
+---
+
+Migrate all plugins to use `@rozenite/ui` for a unified visual design across the DevTools interface. Replaces per-plugin Tailwind configs, custom CSS, and one-off component implementations with shared HeroUI-based components from `@rozenite/ui`.

.changeset/shared-ui-components.md

@@ -0,0 +1,5 @@
+---
+"@rozenite/ui": minor
+---
+
+Add new `@rozenite/ui` package — shared UI primitives and plugin layout components built on HeroUI and Tailwind CSS. Provides `PluginHeader`, `DataTable`, `EditableTable`, `ConfirmDialog`, `EntryDetailDialog`, `JsonInspector`, and `PluginTheme` components, along with a `useCopyToClipboard` hook and utility helpers.

apps/playground/metro.config.js

@@ -9,6 +9,9 @@ const {
   withRozeniteRequireProfiler,
 } = require('@rozenite/require-profiler-plugin/metro');
 const { withRozeniteWeb } = require('@rozenite/web/metro');
+const {
+  withRozeniteExpoAtlasPlugin,
+} = require('@rozenite/expo-atlas-plugin');
 const path = require('node:path');
 
 /** @type {import('expo/metro-config').MetroConfig} */
@@ -62,6 +65,7 @@ module.exports = composeMetroConfigTransformers([
       withRozeniteRequireProfiler,
       withRozeniteReduxDevTools,
       withRozeniteWeb,
+      withRozeniteExpoAtlasPlugin,
     ),
   },
 ])(config);

commitlint.config.js

@@ -1,4 +1,4 @@
-export default {
+module.exports = {
   extends: ['@commitlint/config-conventional'],
   rules: {
     'scope-enum': [
@@ -34,6 +34,7 @@ export default {
         'file-system-plugin',
         'sqlite-plugin',
         'rhf-plugin',
+        'ui',
         '',
       ],
     ],

commitlint.config.mjs

@@ -34,6 +34,7 @@ export default {
         'file-system-plugin',
         'sqlite-plugin',
         'rhf-plugin',
+        'ui',
         '',
       ],
     ],

eslint.config.mjs

@@ -36,4 +36,29 @@ export default [
       '@typescript-eslint/no-require-imports': 'off',
     },
   },
+  {
+    // Ban direct hero-ui imports outside the @rozenite/ui facade.
+    files: ['packages/**/*.{ts,tsx,cts,mts,js,jsx,cjs,mjs}'],
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            {
+              group: ['@heroui/*', '@heroui'],
+              message:
+                'Import hero-ui from "@rozenite/ui" instead of "@heroui/*". If a component is missing, add it to packages/ui/src/index.ts.',
+            },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    // @rozenite/ui IS the facade and is allowed to import hero-ui directly.
+    files: ['packages/ui/**/*.{ts,tsx,cts,mts}'],
+    rules: {
+      'no-restricted-imports': 'off',
+    },
+  },
 ];

packages/controls-plugin/package.json

@@ -24,10 +24,12 @@
   "dependencies": {
     "@rozenite/agent-shared": "workspace:*",
     "@rozenite/agent-bridge": "workspace:*",
-    "@rozenite/plugin-bridge": "workspace:*"
+    "@rozenite/plugin-bridge": "workspace:*",
+    "@rozenite/ui": "workspace:*"
   },
   "devDependencies": {
     "@rozenite/vite-plugin": "workspace:*",
+    "@tailwindcss/postcss": "^4.2.2",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "autoprefixer": "^10.4.21",
@@ -37,7 +39,7 @@
     "react-native": "catalog:",
     "react-native-web": "^0.21.2",
     "rozenite": "workspace:*",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.2.2",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "~5.9.3",
     "vite": "catalog:"

packages/controls-plugin/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };

packages/controls-plugin/src/ui/globals.css

@@ -1,86 +1,2 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-  }
-
-  * {
-    @apply border-border;
-  }
-
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: #1f2937;
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #374151;
-  border-radius: 4px;
-  border: 1px solid #1f2937;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #4b5563;
-}
-
-::-webkit-scrollbar-thumb:active {
-  background: #6b7280;
-}
-
-::-webkit-scrollbar-corner {
-  background: #1f2937;
-}
+@import 'tailwindcss';
+@import '@rozenite/ui/styles.css';