Unified UI

[ziarno]

Description

Introduces @rozenite/ui — a new shared UI package — and migrates all plugins to use it. This eliminates ~3,500 lines of duplicated component code and per-plugin Tailwind/CSS configs, replacing them with a single HeroUI-based component library.

New @rozenite/ui package exports:

• PluginTheme — unified dark theme wrapper (system theme by default)
• PluginHeader — consistent plugin header layout
• DataTable, EditableTable — shared table primitives
• ConfirmDialog, EntryDetailDialog — shared dialog components
• JsonInspector — JSON viewer component
• useCopyToClipboard hook and utility helpers (cn, json)

Migrated plugins: controls-plugin, expo-atlas-plugin, file-system-plugin, mmkv-plugin, network-activity-plugin, overlay-plugin, performance-monitor-plugin, react-navigation-plugin, require-profiler-plugin, rhf-plugin, sqlite-plugin, storage-plugin

Each plugin's per-plugin tailwind.config.ts, custom CSS, and one-off component duplicates have been removed in favor of @rozenite/ui imports.

Related Issue

Notion: Unified UI for Rozenite plugins

Context

Previously each plugin maintained its own Tailwind config, CSS globals, and local copies of common components (editable tables, dialogs, entry detail panels). This led to visual inconsistencies between plugins and made UI-wide changes require touching every plugin separately.

The @rozenite/ui package is built on HeroUI + Tailwind v4 (consistent with the existing ui package approach). Plugin-level CSS is now reduced to a minimal globals.css that imports the shared stylesheet. The PluginTheme component applies the system color scheme by default, so all plugins inherit dark/light mode automatically.

Testing

• Run pnpm build:all to verify the full build passes
• Start the playground in focused plugin mode, e.g. pnpm start:playground, and verify each migrated plugin renders correctly
• Test dark/light theme switching via PluginTheme system default behavior
• Run pnpm checks:all for typecheck + lint + format

[V3RON]

Storage:

• contents in 'entry details' dialog are not correctly aligned (padding is greater for the contents than for the header)
• the JSON preview is misaligned (copy button pushes the JSON tree down)
• when you click 'edit' in 'entry details', then you click 'X', the dialog ends up in a broken state

Performance:

• sidebar is misaligned (paddings)

Require:

• contents in 'Options' dialog are not correctly aligned (probably shared component)
• when you click 'X', the dialog ends up in broken state.

SQLite:

• click on any row, then try to close the sidebar by clicking on the backdrop - the UI freezes.

General:

• All plugins have now this shared header. I think we can remove both title and description and leave it present only if there are some controls to be presented (see Performance Monitor).

[ziarno]

@V3RON

Storage:

• broken state dialog: did you check the last commit? I've already fixed it I think. In the require plugin also.

SQLite:

• do you have any more details, is there an error in the console maybe? I cannot reproduce this locally. Could be because of the blur backdrop, I can remove it.

Header:

• ok, but should we keep the header even when we remove title/description? because there are theme controls on the right side