From a89838af1b7a7c23ae4930d972dd830cb7cd8d6c Mon Sep 17 00:00:00 2001
From: Anatoly Belobrovik <anatoly.belobrovik@callstack.com>
Date: Fri, 24 Apr 2026 17:43:32 +0200
Subject: [PATCH 1/3] feat: share storage inspector UI

Add the shared @rozenite/ui package with HeroUI-backed primitives.

Move JSON inspection into shared UI and reuse it from Storage and MMKV.

Migrate both storage inspector panels while preserving existing protocols.
---
 packages/mmkv-plugin/package.json             |   6 +-
 packages/mmkv-plugin/postcss.config.js        |   3 +-
 .../mmkv-plugin/src/ui/add-entry-dialog.tsx   | 400 +++++----
 .../mmkv-plugin/src/ui/confirm-dialog.tsx     | 123 ++-
 .../mmkv-plugin/src/ui/edit-entry-dialog.tsx  | 414 ++++-----
 .../mmkv-plugin/src/ui/editable-table.tsx     | 422 ++++-----
 .../src/ui/entry-detail-dialog.tsx            | 323 ++++---
 packages/mmkv-plugin/src/ui/globals.css       |  86 +-
 packages/mmkv-plugin/src/ui/panel.tsx         | 486 +++++------
 packages/mmkv-plugin/tailwind.config.ts       |  94 --
 packages/mmkv-plugin/tsconfig.json            |   6 +
 packages/storage-plugin/package.json          |   6 +-
 packages/storage-plugin/postcss.config.js     |   3 +-
 .../src/ui/add-entry-dialog.tsx               | 392 +++++----
 .../storage-plugin/src/ui/confirm-dialog.tsx  | 123 ++-
 .../src/ui/edit-entry-dialog.tsx              | 380 ++++----
 .../storage-plugin/src/ui/editable-table.tsx  | 329 ++++---
 .../src/ui/entry-detail-dialog.tsx            | 333 ++++----
 packages/storage-plugin/src/ui/globals.css    |  86 +-
 packages/storage-plugin/src/ui/panel.tsx      | 288 +++----
 packages/storage-plugin/tailwind.config.ts    |  94 --
 packages/storage-plugin/tsconfig.json         |   4 +-
 packages/ui/package.json                      |  76 ++
 packages/ui/src/hooks/useCopyToClipboard.ts   |  54 ++
 packages/ui/src/index.ts                      |  37 +
 packages/ui/src/json-inspector.tsx            |  99 +++
 packages/ui/src/utils/cn.ts                   |   2 +
 packages/ui/src/utils/json.ts                 |  38 +
 packages/ui/styles.css                        |  97 +++
 packages/ui/tsconfig.json                     |  10 +
 packages/ui/tsconfig.lib.json                 |  20 +
 packages/ui/vite.config.ts                    |  41 +
 pnpm-lock.yaml                                | 808 +++++-------------
 tsconfig.base.json                            |   5 +
 34 files changed, 2800 insertions(+), 2888 deletions(-)
 delete mode 100644 packages/mmkv-plugin/tailwind.config.ts
 delete mode 100644 packages/storage-plugin/tailwind.config.ts
 create mode 100644 packages/ui/package.json
 create mode 100644 packages/ui/src/hooks/useCopyToClipboard.ts
 create mode 100644 packages/ui/src/index.ts
 create mode 100644 packages/ui/src/json-inspector.tsx
 create mode 100644 packages/ui/src/utils/cn.ts
 create mode 100644 packages/ui/src/utils/json.ts
 create mode 100644 packages/ui/styles.css
 create mode 100644 packages/ui/tsconfig.json
 create mode 100644 packages/ui/tsconfig.lib.json
 create mode 100644 packages/ui/vite.config.ts

diff --git a/packages/mmkv-plugin/package.json b/packages/mmkv-plugin/package.json
index 056a2392..707d90f4 100644
--- a/packages/mmkv-plugin/package.json
+++ b/packages/mmkv-plugin/package.json
@@ -23,9 +23,11 @@
   "dependencies": {
     "@rozenite/agent-bridge": "workspace:*",
     "@rozenite/plugin-bridge": "workspace:*",
+    "@rozenite/ui": "workspace:*",
     "nanoevents": "^9.1.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.2.2",
     "@rozenite/vite-plugin": "workspace:*",
     "@tanstack/react-table": "^8.21.3",
     "@types/react": "catalog:",
@@ -34,7 +36,6 @@
     "postcss": "^8.5.6",
     "react": "catalog:",
     "react-dom": "catalog:",
-    "react-json-tree": "^0.20.0",
     "react-native": "catalog:",
     "react-native-mmkv": "^3.3.0",
     "react-native-mmkv-v3": "npm:react-native-mmkv@^3.0.0",
@@ -42,8 +43,9 @@
     "react-native-nitro-modules": "*",
     "react-native-web": "^0.21.2",
     "rozenite": "workspace:*",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.2.2",
     "tailwindcss-animate": "^1.0.7",
+    "tailwind-variants": "^2.0.0",
     "typescript": "~5.9.3",
     "vite": "catalog:"
   },
diff --git a/packages/mmkv-plugin/postcss.config.js b/packages/mmkv-plugin/postcss.config.js
index 2aa7205d..a34a3d56 100644
--- a/packages/mmkv-plugin/postcss.config.js
+++ b/packages/mmkv-plugin/postcss.config.js
@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };
diff --git a/packages/mmkv-plugin/src/ui/add-entry-dialog.tsx b/packages/mmkv-plugin/src/ui/add-entry-dialog.tsx
index 7260bf43..8116925b 100644
--- a/packages/mmkv-plugin/src/ui/add-entry-dialog.tsx
+++ b/packages/mmkv-plugin/src/ui/add-entry-dialog.tsx
@@ -1,54 +1,85 @@
 import { useState } from 'react';
-import { X } from 'lucide-react';
-import { MMKVEntry, MMKVEntryType, MMKVEntryValue } from '../shared/types';
+import {
+  Button,
+  Description,
+  Input,
+  Label,
+  ListBox,
+  Modal,
+  Select,
+  TextField,
+} from '@rozenite/ui';
+import { Plus } from 'lucide-react';
+import type { MMKVEntry, MMKVEntryType, MMKVEntryValue } from '../shared/types';
 import { ConfirmDialog } from './confirm-dialog';
 
-export type AddEntryDialogProps = {
+const TYPE_OPTIONS: Array<{ value: MMKVEntryType; label: string }> = [
+  { value: 'string', label: 'String' },
+  { value: 'number', label: 'Number' },
+  { value: 'boolean', label: 'Boolean' },
+  { value: 'buffer', label: 'Buffer (Array)' },
+];
+
+type DialogState = {
   isOpen: boolean;
-  onClose: () => void;
+  title: string;
+  message: string;
+  type: 'confirm' | 'alert';
+  onConfirm?: () => void;
+};
+
+const EMPTY_DIALOG_STATE: DialogState = {
+  isOpen: false,
+  title: '',
+  message: '',
+  type: 'alert',
+};
+
+export type AddEntryDialogProps = {
   onAddEntry: (entry: MMKVEntry) => void;
   existingKeys: string[];
+  isDisabled?: boolean;
 };
 
 export const AddEntryDialog = ({
-  isOpen,
-  onClose,
   onAddEntry,
   existingKeys,
+  isDisabled = false,
 }: AddEntryDialogProps) => {
+  const [isOpen, setIsOpen] = useState(false);
   const [newEntryKey, setNewEntryKey] = useState('');
   const [newEntryType, setNewEntryType] = useState<MMKVEntryType>('string');
   const [newEntryValue, setNewEntryValue] = useState('');
-  const [confirmDialog, setConfirmDialog] = useState<{
-    isOpen: boolean;
-    title: string;
-    message: string;
-    type: 'confirm' | 'alert';
-    onConfirm?: () => void;
-  }>({ isOpen: false, title: '', message: '', type: 'alert' });
+  const [confirmDialog, setConfirmDialog] =
+    useState<DialogState>(EMPTY_DIALOG_STATE);
 
   const resetForm = () => {
     setNewEntryKey('');
     setNewEntryType('string');
     setNewEntryValue('');
-    onClose();
+    setConfirmDialog(EMPTY_DIALOG_STATE);
+  };
+
+  const closeDialog = () => {
+    resetForm();
+    setIsOpen(false);
   };
 
   const handleAddEntry = () => {
-    if (!newEntryKey.trim()) return;
+    if (!newEntryKey.trim()) {
+      return;
+    }
 
-    // Check if key already exists
     if (existingKeys.includes(newEntryKey)) {
       setConfirmDialog({
         isOpen: true,
         title: 'Key Already Exists',
-        message: 'An entry with this key already exists!',
+        message: 'An entry with this key already exists.',
         type: 'alert',
       });
       return;
     }
 
-    // Parse the value based on type
     let parsedValue: MMKVEntryValue;
     try {
       switch (newEntryType) {
@@ -57,18 +88,21 @@ export const AddEntryDialog = ({
           break;
         case 'number':
           parsedValue = Number(newEntryValue);
-          if (isNaN(parsedValue as number)) {
+          if (Number.isNaN(parsedValue)) {
             throw new Error('Invalid number');
           }
           break;
         case 'boolean':
-          parsedValue = newEntryValue.toLowerCase() === 'true';
+          if (newEntryValue !== 'true' && newEntryValue !== 'false') {
+            throw new Error('Boolean value must be true or false');
+          }
+          parsedValue = newEntryValue === 'true';
           break;
         case 'buffer':
           parsedValue = JSON.parse(newEntryValue);
           if (
             !Array.isArray(parsedValue) ||
-            !parsedValue.every((v) => typeof v === 'number')
+            !parsedValue.every((value) => typeof value === 'number')
           ) {
             throw new Error('Buffer must be an array of numbers');
           }
@@ -88,172 +122,206 @@ export const AddEntryDialog = ({
       return;
     }
 
-    const newEntry: MMKVEntry = {
-      key: newEntryKey,
-      type: newEntryType,
-      value: parsedValue,
-    } as MMKVEntry;
-
-    onAddEntry(newEntry);
+    let entry: MMKVEntry;
+    if (newEntryType === 'string') {
+      entry = {
+        key: newEntryKey,
+        type: 'string',
+        value: parsedValue as string,
+      };
+    } else if (newEntryType === 'number') {
+      entry = {
+        key: newEntryKey,
+        type: 'number',
+        value: parsedValue as number,
+      };
+    } else if (newEntryType === 'boolean') {
+      entry = {
+        key: newEntryKey,
+        type: 'boolean',
+        value: parsedValue as boolean,
+      };
+    } else {
+      entry = {
+        key: newEntryKey,
+        type: 'buffer',
+        value: parsedValue as number[],
+      };
+    }
 
-    // Reset form and close dialog
-    resetForm();
+    onAddEntry(entry);
+    closeDialog();
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      resetForm();
-    } else if (
-      e.key === 'Enter' &&
-      newEntryKey.trim() &&
-      newEntryValue.trim()
-    ) {
+  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter' && newEntryKey.trim() && newEntryValue.trim()) {
       handleAddEntry();
     }
   };
 
-  if (!isOpen) return null;
-
   return (
-    <div
-      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      onClick={resetForm}
-    >
-      <div
-        className="bg-gray-800 rounded-lg p-6 w-96 max-w-full mx-4"
-        onClick={(e) => e.stopPropagation()}
-        onKeyDown={handleKeyDown}
-      >
-        <div className="flex items-center justify-between mb-4">
-          <h2 className="text-lg font-semibold text-gray-100">Add New Entry</h2>
-          <button
-            onClick={resetForm}
-            className="p-1 text-gray-400 hover:text-gray-200 hover:bg-gray-700 rounded transition-colors"
-            title="Close dialog"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
+    <>
+      <Button isDisabled={isDisabled} onPress={() => setIsOpen(true)}>
+        <Plus className="h-3 w-3" />
+        Add Entry
+      </Button>
 
-        <div className="space-y-4">
-          {/* Key Input */}
-          <div>
-            <label
-              htmlFor="new-entry-key"
-              className="block text-sm font-medium text-gray-200 mb-1"
-            >
-              Key
-            </label>
-            <input
-              id="new-entry-key"
-              type="text"
-              value={newEntryKey}
-              onChange={(e) => setNewEntryKey(e.target.value)}
-              placeholder="Enter key name"
-              className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              autoFocus
-            />
-          </div>
-
-          {/* Type Select */}
-          <div>
-            <label
-              htmlFor="new-entry-type"
-              className="block text-sm font-medium text-gray-200 mb-1"
-            >
-              Type
-            </label>
-            <select
-              id="new-entry-type"
-              value={newEntryType}
-              onChange={(e) => {
-                setNewEntryType(e.target.value as MMKVEntryType);
-                setNewEntryValue(''); // Reset value when type changes
-              }}
-              className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
-            >
-              <option value="string">String</option>
-              <option value="number">Number</option>
-              <option value="boolean">Boolean</option>
-              <option value="buffer">Buffer (Array)</option>
-            </select>
-          </div>
+      <Modal
+        isOpen={isOpen}
+        onOpenChange={(nextOpen) => {
+          setIsOpen(nextOpen);
+          if (!nextOpen) {
+            resetForm();
+          }
+        }}
+      >
+        <Modal.Backdrop variant="blur">
+          <Modal.Container placement="center">
+            <Modal.Dialog aria-label="Add New Entry">
+              <Modal.CloseTrigger />
+              <Modal.Header>
+                <Modal.Heading>Add New Entry</Modal.Heading>
+              </Modal.Header>
+              <Modal.Body className="flex flex-col gap-4 p-6">
+                <TextField className="w-full" name="new-entry-key" type="text">
+                  <Label>Key</Label>
+                  <Input
+                    autoFocus
+                    onChange={(event) => setNewEntryKey(event.target.value)}
+                    onKeyDown={handleInputKeyDown}
+                    placeholder="Enter key name"
+                    value={newEntryKey}
+                    variant="secondary"
+                  />
+                </TextField>
 
-          {/* Value Input */}
-          <div>
-            <label
-              htmlFor="new-entry-value"
-              className="block text-sm font-medium text-gray-200 mb-1"
-            >
-              Value
-            </label>
-            {newEntryType === 'boolean' ? (
-              <select
-                id="new-entry-value"
-                value={newEntryValue}
-                onChange={(e) => setNewEntryValue(e.target.value)}
-                className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              >
-                <option value="">Select value</option>
-                <option value="true">true</option>
-                <option value="false">false</option>
-              </select>
-            ) : (
-              <input
-                id="new-entry-value"
-                type={newEntryType === 'number' ? 'number' : 'text'}
-                value={newEntryValue}
-                onChange={(e) => setNewEntryValue(e.target.value)}
-                placeholder={
-                  newEntryType === 'string'
-                    ? 'Enter string value'
-                    : newEntryType === 'number'
-                    ? 'Enter number value'
-                    : newEntryType === 'buffer'
-                    ? 'Enter array as JSON, e.g., [1, 2, 3]'
-                    : 'Enter value'
-                }
-                className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-            )}
-            {newEntryType === 'buffer' && (
-              <p className="text-xs text-gray-400 mt-1">
-                Enter as JSON array of numbers, e.g., [1, 2, 3, 255]
-              </p>
-            )}
-          </div>
-        </div>
+                <div className="flex flex-col gap-2">
+                  <Label>Type</Label>
+                  <Select
+                    className="w-full"
+                    onChange={(key) => {
+                      setNewEntryType(
+                        (key == null ? '' : String(key)) as MMKVEntryType,
+                      );
+                      setNewEntryValue('');
+                    }}
+                    value={newEntryType || null}
+                    variant="secondary"
+                  >
+                    <Select.Trigger>
+                      <Select.Value />
+                      <Select.Indicator />
+                    </Select.Trigger>
+                    <Select.Popover>
+                      <ListBox aria-label="Entry type">
+                        {TYPE_OPTIONS.map((option) => (
+                          <ListBox.Item
+                            id={option.value}
+                            key={option.value}
+                            textValue={option.label}
+                          >
+                            {option.label}
+                          </ListBox.Item>
+                        ))}
+                      </ListBox>
+                    </Select.Popover>
+                  </Select>
+                </div>
 
-        {/* Dialog Actions */}
-        <div className="flex items-center justify-end gap-2 mt-6">
-          <button
-            onClick={resetForm}
-            className="px-4 py-2 text-sm text-gray-300 hover:text-white hover:bg-gray-700 rounded transition-colors"
-          >
-            Cancel
-          </button>
-          <button
-            onClick={handleAddEntry}
-            disabled={!newEntryKey.trim() || !newEntryValue.trim()}
-            className="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded transition-colors"
-          >
-            Add Entry
-          </button>
-        </div>
-      </div>
+                {newEntryType === 'boolean' ? (
+                  <div className="flex flex-col gap-2">
+                    <Label>Value</Label>
+                    <Select
+                      className="w-full"
+                      onChange={(key) =>
+                        setNewEntryValue(key == null ? '' : String(key))
+                      }
+                      placeholder="Select value"
+                      value={newEntryValue || null}
+                      variant="secondary"
+                    >
+                      <Select.Trigger>
+                        <Select.Value />
+                        <Select.Indicator />
+                      </Select.Trigger>
+                      <Select.Popover>
+                        <ListBox aria-label="Entry value">
+                          <ListBox.Item id="true" key="true" textValue="true">
+                            true
+                          </ListBox.Item>
+                          <ListBox.Item
+                            id="false"
+                            key="false"
+                            textValue="false"
+                          >
+                            false
+                          </ListBox.Item>
+                        </ListBox>
+                      </Select.Popover>
+                    </Select>
+                  </div>
+                ) : (
+                  <TextField
+                    className="w-full"
+                    name="new-entry-value"
+                    type={newEntryType === 'number' ? 'number' : 'text'}
+                  >
+                    <Label>Value</Label>
+                    <Input
+                      onChange={(event) => setNewEntryValue(event.target.value)}
+                      onKeyDown={handleInputKeyDown}
+                      placeholder={
+                        newEntryType === 'string'
+                          ? 'Enter string value'
+                          : newEntryType === 'number'
+                            ? 'Enter number value'
+                            : newEntryType === 'buffer'
+                              ? 'Enter array as JSON, e.g., [1, 2, 3]'
+                              : 'Enter value'
+                      }
+                      value={newEntryValue}
+                      variant="secondary"
+                    />
+                    {newEntryType === 'buffer' ? (
+                      <Description className="text-xs text-muted">
+                        Enter as JSON array of numbers, e.g., [1, 2, 3, 255]
+                      </Description>
+                    ) : null}
+                  </TextField>
+                )}
+              </Modal.Body>
+              <Modal.Footer className="flex justify-end gap-2">
+                <Button onPress={closeDialog} variant="secondary">
+                  Cancel
+                </Button>
+                <Button
+                  isDisabled={!newEntryKey.trim() || !newEntryValue.trim()}
+                  onPress={handleAddEntry}
+                  variant="primary"
+                >
+                  Add Entry
+                </Button>
+              </Modal.Footer>
+            </Modal.Dialog>
+          </Modal.Container>
+        </Modal.Backdrop>
+      </Modal>
 
       <ConfirmDialog
+        confirmText="OK"
         isOpen={confirmDialog.isOpen}
-        onClose={() => setConfirmDialog((prev) => ({ ...prev, isOpen: false }))}
+        message={confirmDialog.message}
+        onClose={() =>
+          setConfirmDialog((previous) => ({ ...previous, isOpen: false }))
+        }
         onConfirm={() => {
           if (confirmDialog.onConfirm) {
             confirmDialog.onConfirm();
           }
         }}
         title={confirmDialog.title}
-        message={confirmDialog.message}
         type={confirmDialog.type}
       />
-    </div>
+    </>
   );
 };
diff --git a/packages/mmkv-plugin/src/ui/confirm-dialog.tsx b/packages/mmkv-plugin/src/ui/confirm-dialog.tsx
index fe024a34..4c7a25dc 100644
--- a/packages/mmkv-plugin/src/ui/confirm-dialog.tsx
+++ b/packages/mmkv-plugin/src/ui/confirm-dialog.tsx
@@ -1,4 +1,5 @@
-import { X, AlertTriangle, Info } from 'lucide-react';
+import { AlertDialog, Button } from '@rozenite/ui';
+import { AlertTriangle, Info } from 'lucide-react';
 
 export type ConfirmDialogProps = {
   isOpen: boolean;
@@ -21,80 +22,60 @@ export const ConfirmDialog = ({
   confirmText = 'Confirm',
   cancelText = 'Cancel',
 }: ConfirmDialogProps) => {
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      onClose();
-    } else if (e.key === 'Enter') {
-      onConfirm();
-    }
-  };
-
-  const handleConfirm = () => {
-    onConfirm();
-    onClose();
-  };
-
-  const handleCancel = () => {
-    onClose();
-  };
-
-  if (!isOpen) return null;
+  const isConfirm = type === 'confirm';
 
   return (
-    <div
-      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      onClick={handleCancel}
+    <AlertDialog
+      isOpen={isOpen}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          onClose();
+        }
+      }}
     >
-      <div
-        className="bg-gray-800 rounded-lg p-6 w-96 max-w-full mx-4"
-        onClick={(e) => e.stopPropagation()}
-        onKeyDown={handleKeyDown}
+      <AlertDialog.Backdrop
+        className="bg-overlay/70 backdrop-blur-sm"
+        variant="opaque"
       >
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            {type === 'confirm' ? (
-              <AlertTriangle className="h-5 w-5 text-yellow-500" />
-            ) : (
-              <Info className="h-5 w-5 text-blue-500" />
-            )}
-            <h2 className="text-lg font-semibold text-gray-100">{title}</h2>
-          </div>
-          <button
-            onClick={handleCancel}
-            className="p-1 text-gray-400 hover:text-gray-200 hover:bg-gray-700 rounded transition-colors"
-            title="Close dialog"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-
-        <div className="mb-6">
-          <p className="text-sm text-gray-300 leading-relaxed">{message}</p>
-        </div>
-
-        {/* Dialog Actions */}
-        <div className="flex items-center justify-end gap-2">
-          {type === 'confirm' && (
-            <button
-              onClick={handleCancel}
-              className="px-4 py-2 text-sm text-gray-300 hover:text-white hover:bg-gray-700 rounded transition-colors"
-            >
-              {cancelText}
-            </button>
-          )}
-          <button
-            onClick={handleConfirm}
-            className={`px-4 py-2 text-sm text-white rounded transition-colors ${
-              type === 'confirm'
-                ? 'bg-red-600 hover:bg-red-700'
-                : 'bg-blue-600 hover:bg-blue-700'
-            }`}
-            autoFocus
+        <AlertDialog.Container className="w-full max-w-md" placement="center">
+          <AlertDialog.Dialog
+            aria-label={title}
+            className="border border-border/70 bg-surface text-foreground shadow-2xl"
           >
-            {type === 'alert' ? 'OK' : confirmText}
-          </button>
-        </div>
-      </div>
-    </div>
+            <AlertDialog.Header className="flex items-center gap-3 border-b border-border/70 px-5 py-4">
+              <AlertDialog.Icon status={isConfirm ? 'danger' : 'default'}>
+                {isConfirm ? (
+                  <AlertTriangle className="size-5" />
+                ) : (
+                  <Info className="size-5" />
+                )}
+              </AlertDialog.Icon>
+              <AlertDialog.Heading className="text-base font-semibold text-foreground">
+                {title}
+              </AlertDialog.Heading>
+            </AlertDialog.Header>
+            <AlertDialog.Body className="px-5 py-4 text-sm leading-6 text-muted">
+              {message}
+            </AlertDialog.Body>
+            <AlertDialog.Footer className="flex justify-end gap-2 border-t border-border/70 px-5 py-4">
+              {isConfirm ? (
+                <Button onPress={onClose} variant="secondary">
+                  {cancelText}
+                </Button>
+              ) : null}
+              <Button
+                onPress={() => {
+                  onConfirm();
+                  onClose();
+                }}
+                variant={isConfirm ? 'danger' : 'primary'}
+              >
+                {isConfirm ? confirmText : 'OK'}
+              </Button>
+            </AlertDialog.Footer>
+          </AlertDialog.Dialog>
+        </AlertDialog.Container>
+      </AlertDialog.Backdrop>
+    </AlertDialog>
   );
 };
diff --git a/packages/mmkv-plugin/src/ui/edit-entry-dialog.tsx b/packages/mmkv-plugin/src/ui/edit-entry-dialog.tsx
index fc2c7aec..2c8d3e61 100644
--- a/packages/mmkv-plugin/src/ui/edit-entry-dialog.tsx
+++ b/packages/mmkv-plugin/src/ui/edit-entry-dialog.tsx
@@ -1,52 +1,100 @@
-import { useState, useEffect } from 'react';
-import { X, Edit3 } from 'lucide-react';
-import { MMKVEntry, MMKVEntryType, MMKVEntryValue } from '../shared/types';
+import { useEffect, useState } from 'react';
+import {
+  Button,
+  Chip,
+  Description,
+  Input,
+  Label,
+  ListBox,
+  Modal,
+  Select,
+  Surface,
+  TextField,
+} from '@rozenite/ui';
+import { Edit3 } from 'lucide-react';
+import type { MMKVEntry, MMKVEntryType, MMKVEntryValue } from '../shared/types';
 import { ConfirmDialog } from './confirm-dialog';
 
 export type EditEntryDialogProps = {
-  isOpen: boolean;
   onClose: () => void;
   onEditEntry: (key: string, newValue: MMKVEntryValue) => void;
   entry: MMKVEntry | null;
 };
 
+type DialogState = {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  type: 'confirm' | 'alert';
+  onConfirm?: () => void;
+};
+
+const EMPTY_DIALOG_STATE: DialogState = {
+  isOpen: false,
+  title: '',
+  message: '',
+  type: 'alert',
+};
+
+const typeColorMap: Record<
+  MMKVEntryType,
+  'success' | 'warning' | 'accent' | 'default'
+> = {
+  string: 'success',
+  number: 'default',
+  boolean: 'warning',
+  buffer: 'accent',
+};
+
+const getInputType = (type: MMKVEntryType) =>
+  type === 'number' ? 'number' : 'text';
+
+const getPlaceholder = (type: MMKVEntryType) => {
+  if (type === 'string') {
+    return 'Enter string value';
+  }
+
+  if (type === 'number') {
+    return 'Enter number value';
+  }
+
+  if (type === 'boolean') {
+    return 'Enter true or false';
+  }
+
+  return 'Enter array as JSON, e.g., [1, 2, 3]';
+};
+
 export const EditEntryDialog = ({
-  isOpen,
   onClose,
   onEditEntry,
   entry,
 }: EditEntryDialogProps) => {
   const [editValue, setEditValue] = useState('');
-  const [confirmDialog, setConfirmDialog] = useState<{
-    isOpen: boolean;
-    title: string;
-    message: string;
-    type: 'confirm' | 'alert';
-    onConfirm?: () => void;
-  }>({ isOpen: false, title: '', message: '', type: 'alert' });
+  const [confirmDialog, setConfirmDialog] =
+    useState<DialogState>(EMPTY_DIALOG_STATE);
 
-  // Reset form when entry changes or dialog opens
   useEffect(() => {
-    if (entry && isOpen) {
-      // Handle different value types for editing
-      let valueToEdit: string;
-      if (Array.isArray(entry.value)) {
-        // For buffer values, show as JSON
-        valueToEdit = JSON.stringify(entry.value);
-      } else {
-        valueToEdit = String(entry.value);
-      }
-      setEditValue(valueToEdit);
+    if (entry) {
+      setEditValue(
+        Array.isArray(entry.value)
+          ? JSON.stringify(entry.value)
+          : String(entry.value),
+      );
+      setConfirmDialog(EMPTY_DIALOG_STATE);
     }
-  }, [entry, isOpen]);
+  }, [entry]);
 
   const resetForm = () => {
     setEditValue('');
+    setConfirmDialog(EMPTY_DIALOG_STATE);
     onClose();
   };
 
   const handleEditEntry = () => {
-    if (!entry) return;
+    if (!entry) {
+      return;
+    }
 
     let newValue: MMKVEntryValue;
 
@@ -57,32 +105,23 @@ export const EditEntryDialog = ({
           break;
         case 'number':
           newValue = Number(editValue);
-          if (isNaN(newValue as number)) {
+          if (Number.isNaN(newValue)) {
             throw new Error('Invalid number');
           }
           break;
         case 'boolean':
-          if (
-            editValue.toLowerCase() !== 'true' &&
-            editValue.toLowerCase() !== 'false'
-          ) {
+          if (editValue !== 'true' && editValue !== 'false') {
             throw new Error('Boolean value must be "true" or "false"');
           }
-          newValue = editValue.toLowerCase() === 'true';
+          newValue = editValue === 'true';
           break;
         case 'buffer':
-          try {
-            newValue = JSON.parse(editValue);
-            if (
-              !Array.isArray(newValue) ||
-              !newValue.every((v) => typeof v === 'number')
-            ) {
-              throw new Error('Buffer must be an array of numbers');
-            }
-          } catch {
-            throw new Error(
-              'Invalid buffer format. Use JSON array like [1,2,3]'
-            );
+          newValue = JSON.parse(editValue);
+          if (
+            !Array.isArray(newValue) ||
+            !newValue.every((value) => typeof value === 'number')
+          ) {
+            throw new Error('Buffer must be an array of numbers');
           }
           break;
         default:
@@ -104,182 +143,155 @@ export const EditEntryDialog = ({
     resetForm();
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      resetForm();
-    } else if (e.key === 'Enter' && editValue.trim()) {
+  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter' && editValue.trim()) {
       handleEditEntry();
     }
   };
 
-  const getInputType = (type: MMKVEntryType) => {
-    switch (type) {
-      case 'number':
-        return 'number';
-      case 'boolean':
-        return 'text'; // We'll handle boolean conversion manually
-      default:
-        return 'text';
-    }
-  };
-
-  const getPlaceholder = (type: MMKVEntryType) => {
-    switch (type) {
-      case 'string':
-        return 'Enter string value';
-      case 'number':
-        return 'Enter number value';
-      case 'boolean':
-        return 'Enter "true" or "false"';
-      case 'buffer':
-        return 'Enter array as JSON, e.g., [1, 2, 3]';
-      default:
-        return 'Enter value';
-    }
-  };
-
-  const getTypeColorClass = (type: MMKVEntryType) => {
-    switch (type) {
-      case 'string':
-        return 'bg-green-600';
-      case 'number':
-        return 'bg-blue-600';
-      case 'boolean':
-        return 'bg-yellow-600';
-      case 'buffer':
-        return 'bg-purple-600';
-      default:
-        return 'bg-gray-600';
-    }
-  };
-
-  if (!isOpen || !entry) return null;
-
   return (
-    <div
-      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      onClick={resetForm}
-    >
-      <div
-        className="bg-gray-800 rounded-lg p-6 w-96 max-w-full mx-4"
-        onClick={(e) => e.stopPropagation()}
-        onKeyDown={handleKeyDown}
+    <>
+      <Modal
+        isOpen={entry !== null}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) {
+            resetForm();
+          }
+        }}
       >
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            <Edit3 className="h-5 w-5 text-blue-400" />
-            <h2 className="text-lg font-semibold text-gray-100">Edit Entry</h2>
-          </div>
-          <button
-            onClick={resetForm}
-            className="p-1 text-gray-400 hover:text-gray-200 hover:bg-gray-700 rounded transition-colors"
-            title="Close dialog"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
+        <Modal.Backdrop variant="blur">
+          <Modal.Container placement="center">
+            <Modal.Dialog aria-label="Edit Entry">
+              <Modal.CloseTrigger />
+              <Modal.Header>
+                <Modal.Icon className="bg-info/15 text-info">
+                  <Edit3 className="size-5" />
+                </Modal.Icon>
+                <Modal.Heading>Edit Entry</Modal.Heading>
+              </Modal.Header>
+              <Modal.Body className="flex flex-col gap-4 p-6">
+                {entry ? (
+                  <>
+                    <div className="flex flex-col gap-2">
+                      <Label>Key</Label>
+                      <Surface
+                        className="rounded-lg border border-border/70 bg-surface-secondary px-3 py-2 font-mono text-sm text-foreground"
+                        variant="secondary"
+                      >
+                        {entry.key}
+                      </Surface>
+                      <Description className="text-xs text-muted">
+                        Key cannot be changed during editing.
+                      </Description>
+                    </div>
 
-        <div className="space-y-4">
-          {/* Key Display */}
-          <div>
-            <label className="block text-sm font-medium text-gray-200 mb-1">
-              Key
-            </label>
-            <div className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 font-mono">
-              {entry.key}
-            </div>
-            <p className="text-xs text-gray-400 mt-1">
-              Key cannot be changed during editing
-            </p>
-          </div>
+                    <div className="flex flex-col gap-2">
+                      <Label>Type</Label>
+                      <Chip
+                        className="w-fit"
+                        color={typeColorMap[entry.type]}
+                        size="sm"
+                        variant="soft"
+                      >
+                        {entry.type}
+                      </Chip>
+                      <Description className="text-xs text-muted">
+                        Type cannot be changed during editing.
+                      </Description>
+                    </div>
 
-          {/* Type Display */}
-          <div>
-            <label className="block text-sm font-medium text-gray-200 mb-1">
-              Type
-            </label>
-            <div className="flex items-center">
-              <span
-                className={`px-2 py-1 text-xs font-medium rounded text-white ${getTypeColorClass(
-                  entry.type
-                )}`}
-              >
-                {entry.type}
-              </span>
-            </div>
-            <p className="text-xs text-gray-400 mt-1">
-              Type cannot be changed during editing
-            </p>
-          </div>
-
-          {/* Value Input */}
-          <div>
-            <label
-              htmlFor="edit-entry-value"
-              className="block text-sm font-medium text-gray-200 mb-1"
-            >
-              Value
-            </label>
-            {entry.type === 'boolean' ? (
-              <select
-                id="edit-entry-value"
-                value={editValue}
-                onChange={(e) => setEditValue(e.target.value)}
-                className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                autoFocus
-              >
-                <option value="true">true</option>
-                <option value="false">false</option>
-              </select>
-            ) : (
-              <input
-                id="edit-entry-value"
-                type={getInputType(entry.type)}
-                value={editValue}
-                onChange={(e) => setEditValue(e.target.value)}
-                placeholder={getPlaceholder(entry.type)}
-                className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                autoFocus
-              />
-            )}
-            {entry.type === 'buffer' && (
-              <p className="text-xs text-gray-400 mt-1">
-                Enter as JSON array of numbers, e.g., [1, 2, 3, 255]
-              </p>
-            )}
-          </div>
-        </div>
-
-        {/* Dialog Actions */}
-        <div className="flex items-center justify-end gap-2 mt-6">
-          <button
-            onClick={resetForm}
-            className="px-4 py-2 text-sm text-gray-300 hover:text-white hover:bg-gray-700 rounded transition-colors"
-          >
-            Cancel
-          </button>
-          <button
-            onClick={handleEditEntry}
-            disabled={!editValue.trim()}
-            className="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded transition-colors"
-          >
-            Save Changes
-          </button>
-        </div>
-      </div>
+                    {entry.type === 'boolean' ? (
+                      <div className="flex flex-col gap-2">
+                        <Label>Value</Label>
+                        <Select
+                          className="w-full"
+                          onChange={(key) =>
+                            setEditValue(key == null ? '' : String(key))
+                          }
+                          value={editValue || null}
+                          variant="secondary"
+                        >
+                          <Select.Trigger>
+                            <Select.Value />
+                            <Select.Indicator />
+                          </Select.Trigger>
+                          <Select.Popover>
+                            <ListBox aria-label="Entry value">
+                              <ListBox.Item
+                                id="true"
+                                key="true"
+                                textValue="true"
+                              >
+                                true
+                              </ListBox.Item>
+                              <ListBox.Item
+                                id="false"
+                                key="false"
+                                textValue="false"
+                              >
+                                false
+                              </ListBox.Item>
+                            </ListBox>
+                          </Select.Popover>
+                        </Select>
+                      </div>
+                    ) : (
+                      <TextField
+                        className="w-full"
+                        name="edit-entry-value"
+                        type={getInputType(entry.type)}
+                      >
+                        <Label>Value</Label>
+                        <Input
+                          autoFocus
+                          onChange={(event) => setEditValue(event.target.value)}
+                          onKeyDown={handleInputKeyDown}
+                          placeholder={getPlaceholder(entry.type)}
+                          value={editValue}
+                          variant="secondary"
+                        />
+                        {entry.type === 'buffer' ? (
+                          <Description className="text-xs text-muted">
+                            Enter as JSON array of numbers, e.g., [1, 2, 3, 255]
+                          </Description>
+                        ) : null}
+                      </TextField>
+                    )}
+                  </>
+                ) : null}
+              </Modal.Body>
+              <Modal.Footer className="flex justify-end gap-2">
+                <Button onPress={resetForm} variant="secondary">
+                  Cancel
+                </Button>
+                <Button
+                  isDisabled={!editValue.trim()}
+                  onPress={handleEditEntry}
+                  variant="primary"
+                >
+                  Save Changes
+                </Button>
+              </Modal.Footer>
+            </Modal.Dialog>
+          </Modal.Container>
+        </Modal.Backdrop>
+      </Modal>
 
       <ConfirmDialog
+        confirmText="OK"
         isOpen={confirmDialog.isOpen}
-        onClose={() => setConfirmDialog((prev) => ({ ...prev, isOpen: false }))}
+        message={confirmDialog.message}
+        onClose={() =>
+          setConfirmDialog((previous) => ({ ...previous, isOpen: false }))
+        }
         onConfirm={() => {
           if (confirmDialog.onConfirm) {
             confirmDialog.onConfirm();
           }
         }}
         title={confirmDialog.title}
-        message={confirmDialog.message}
         type={confirmDialog.type}
       />
-    </div>
+    </>
   );
 };
diff --git a/packages/mmkv-plugin/src/ui/editable-table.tsx b/packages/mmkv-plugin/src/ui/editable-table.tsx
index d05ace6c..81692557 100644
--- a/packages/mmkv-plugin/src/ui/editable-table.tsx
+++ b/packages/mmkv-plugin/src/ui/editable-table.tsx
@@ -1,18 +1,18 @@
-import { useState, useMemo } from 'react';
+import { useMemo, useState } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import {
-  useReactTable,
+  createColumnHelper,
+  flexRender,
   getCoreRowModel,
-  getFilteredRowModel,
   getSortedRowModel,
-  flexRender,
-  createColumnHelper,
-  type ColumnDef,
   type SortingState,
+  useReactTable,
 } from '@tanstack/react-table';
-import { Trash2, Loader2, Edit3 } from 'lucide-react';
-import { MMKVEntry, MMKVEntryType, MMKVEntryValue } from '../shared/types';
-import { EditEntryDialog } from './edit-entry-dialog';
+import { Button, Chip, Table } from '@rozenite/ui';
+import { ChevronUp, Edit3, Inbox, Loader2, Trash2 } from 'lucide-react';
+import type { MMKVEntry, MMKVEntryType, MMKVEntryValue } from '../shared/types';
 import { ConfirmDialog } from './confirm-dialog';
+import { EditEntryDialog } from './edit-entry-dialog';
 
 export type EditableTableProps = {
   data: MMKVEntry[];
@@ -20,9 +20,68 @@ export type EditableTableProps = {
   onDeleteEntry?: (key: string) => void;
   onRowClick?: (entry: MMKVEntry) => void;
   loading?: boolean;
+  searchTerm?: string;
+};
+
+const typeColorMap: Record<
+  MMKVEntryType,
+  'success' | 'danger' | 'warning' | 'accent' | 'default'
+> = {
+  string: 'success',
+  number: 'default',
+  boolean: 'warning',
+  buffer: 'accent',
 };
 
 const columnHelper = createColumnHelper<MMKVEntry>();
+type TableSortDescriptor = NonNullable<
+  ComponentProps<typeof Table.Content>['sortDescriptor']
+>;
+
+function toSortDescriptor(
+  sorting: SortingState,
+): TableSortDescriptor | undefined {
+  const firstSort = sorting[0];
+
+  if (!firstSort) {
+    return undefined;
+  }
+
+  return {
+    column: firstSort.id,
+    direction: firstSort.desc ? 'descending' : 'ascending',
+  };
+}
+
+function toSortingState(descriptor: TableSortDescriptor): SortingState {
+  return [
+    {
+      desc: descriptor.direction === 'descending',
+      id: String(descriptor.column),
+    },
+  ];
+}
+
+function SortableColumnHeader({
+  children,
+  sortDirection,
+}: {
+  children: ReactNode;
+  sortDirection?: 'ascending' | 'descending';
+}) {
+  return (
+    <span className="flex items-center justify-between gap-2">
+      <span>{children}</span>
+      {sortDirection ? (
+        <ChevronUp
+          className={`size-3 shrink-0 transition-transform duration-100 ease-out ${
+            sortDirection === 'descending' ? 'rotate-180' : ''
+          }`}
+        />
+      ) : null}
+    </span>
+  );
+}
 
 export const EditableTable = ({
   data,
@@ -30,112 +89,103 @@ export const EditableTable = ({
   onDeleteEntry,
   onRowClick,
   loading = false,
+  searchTerm = '',
 }: EditableTableProps) => {
   const [editingEntry, setEditingEntry] = useState<MMKVEntry | null>(null);
-  const [showEditDialog, setShowEditDialog] = useState(false);
   const [sorting, setSorting] = useState<SortingState>([]);
   const [deleteConfirm, setDeleteConfirm] = useState<{
     isOpen: boolean;
     entryKey: string;
   }>({ isOpen: false, entryKey: '' });
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const columns = useMemo<ColumnDef<MMKVEntry, any>[]>(
+  const columns = useMemo(
     () => [
       columnHelper.accessor('key', {
         header: 'Key',
         enableSorting: true,
         cell: ({ getValue }) => (
-          <div className="text-gray-300 font-mono text-sm">{getValue()}</div>
+          <span className="font-mono text-sm text-foreground">
+            {getValue()}
+          </span>
         ),
       }),
       columnHelper.accessor('type', {
         header: 'Type',
         enableSorting: true,
-        cell: ({ getValue }) => {
-          const type = getValue() as MMKVEntryType;
+        cell: (info) => {
+          const type = info.getValue() as MMKVEntryType;
+
           return (
-            <div className="flex items-center">
-              <span
-                className={`px-2 py-1 text-xs font-medium rounded text-white ${getTypeColorClass(
-                  type
-                )}`}
-                title={`${getTypeIcon(type)} ${type}`}
-              >
-                {type}
-              </span>
-            </div>
+            <Chip color={typeColorMap[type]} size="sm" variant="soft">
+              {type}
+            </Chip>
           );
         },
       }),
       columnHelper.accessor('value', {
         header: 'Value',
-        cell: ({ row }) => {
-          const entry = row.original;
-          return (
-            <div className="flex items-center justify-between group">
-              <div className="flex-1">{formatValue(entry)}</div>
-              <button
-                onClick={() => handleEdit(entry)}
-                className="opacity-0 group-hover:opacity-100 ml-2 p-1 text-gray-400 hover:text-blue-400 hover:bg-gray-800 rounded transition-all"
-                title="Edit value"
-                aria-label={`Edit value for ${entry.key}`}
-              >
-                <Edit3 className="h-3 w-3" />
-              </button>
-            </div>
-          );
-        },
+        cell: ({ row }) => (
+          <div className="min-w-0">{formatValue(row.original)}</div>
+        ),
       }),
       columnHelper.display({
         id: 'actions',
         header: 'Actions',
         cell: ({ row }) => (
-          <div className="flex items-center gap-2">
-            <button
-              onClick={() => handleDelete(row.original.key)}
-              disabled={!onDeleteEntry}
-              className="p-1 text-gray-400 hover:text-red-400 hover:bg-gray-800 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-              title="Delete entry"
+          <div className="flex items-center gap-1">
+            <Button
+              aria-label={`Edit value for ${row.original.key}`}
+              isDisabled={!onValueChange}
+              isIconOnly
+              onClick={(event) => event.stopPropagation()}
+              onPress={() => handleEdit(row.original)}
+              size="sm"
+              variant="ghost"
+            >
+              <Edit3 className="size-4 text-muted" />
+            </Button>
+            <Button
               aria-label={`Delete entry ${row.original.key}`}
+              isDisabled={!onDeleteEntry}
+              isIconOnly
+              onClick={(event) => event.stopPropagation()}
+              onPress={() => handleDelete(row.original.key)}
+              size="sm"
+              variant="ghost"
             >
-              <Trash2 className="h-4 w-4" />
-            </button>
+              <Trash2 className="size-4 text-danger" />
+            </Button>
           </div>
         ),
       }),
     ],
-    [onDeleteEntry]
+    [onDeleteEntry, onValueChange],
   );
 
   const table = useReactTable({
     data,
     columns,
-    state: {
-      sorting,
-    },
+    state: { sorting },
     onSortingChange: setSorting,
     getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
     getSortedRowModel: getSortedRowModel(),
   });
+  const sortDescriptor = useMemo(() => toSortDescriptor(sorting), [sorting]);
 
   const handleEdit = (entry: MMKVEntry) => {
     setEditingEntry(entry);
-    setShowEditDialog(true);
   };
 
   const handleEditEntry = (key: string, newValue: MMKVEntryValue) => {
     if (onValueChange) {
       onValueChange(key, newValue);
     }
+
     setEditingEntry(null);
-    setShowEditDialog(false);
   };
 
   const handleCloseEditDialog = () => {
     setEditingEntry(null);
-    setShowEditDialog(false);
   };
 
   const handleDelete = (key: string) => {
@@ -148,161 +198,114 @@ export const EditableTable = ({
     if (onDeleteEntry && deleteConfirm.entryKey) {
       onDeleteEntry(deleteConfirm.entryKey);
     }
-    setDeleteConfirm({ isOpen: false, entryKey: '' });
-  };
-
-  const getTypeColorClass = (type: string) => {
-    switch (type) {
-      case 'string':
-        return 'bg-green-600';
-      case 'number':
-        return 'bg-blue-600';
-      case 'boolean':
-        return 'bg-yellow-600';
-      case 'buffer':
-        return 'bg-purple-600';
-      default:
-        return 'bg-gray-600';
-    }
-  };
-
-  const getTypeIcon = (type: string) => {
-    switch (type) {
-      case 'string':
-        return '📝';
-      case 'number':
-        return '🔢';
-      case 'boolean':
-        return '✅';
-      case 'buffer':
-        return '💾';
-      default:
-        return '❓';
-    }
-  };
 
-  const formatValue = (entry: MMKVEntry) => {
-    switch (entry.type) {
-      case 'string':
-        return (
-          <span className="text-green-300 font-mono">
-            "{entry.value as string}"
-          </span>
-        );
-      case 'number':
-        return (
-          <span className="text-blue-300 font-mono">
-            {entry.value as number}
-          </span>
-        );
-      case 'boolean':
-        return (
-          <span
-            className={`font-mono ${
-              entry.value ? 'text-green-400' : 'text-red-400'
-            }`}
-          >
-            {entry.value ? 'true' : 'false'}
-          </span>
-        );
-      case 'buffer': {
-        const bufferArray = entry.value as number[];
-        const displayValue =
-          bufferArray.length > 5
-            ? `[${bufferArray.slice(0, 5).join(', ')}, ...${
-                bufferArray.length - 5
-              } more]`
-            : `[${bufferArray.join(', ')}]`;
-        return (
-          <span className="text-purple-300 font-mono">{displayValue}</span>
-        );
-      }
-      default:
-        return <span className="text-gray-400">Unknown</span>;
-    }
+    setDeleteConfirm({ isOpen: false, entryKey: '' });
   };
 
   if (loading) {
     return (
-      <div className="flex flex-col items-center justify-center h-full">
-        <Loader2 className="h-8 w-8 text-blue-400 animate-spin mb-4" />
-        <p className="text-gray-400">Loading entries...</p>
+      <div className="flex min-h-48 w-full flex-col items-center justify-center gap-3 rounded-xl border border-border/70 bg-surface px-4 py-8 text-center text-sm text-muted shadow-sm">
+        <Loader2 className="size-8 animate-spin text-accent" />
+        <p>Loading entries...</p>
       </div>
     );
   }
 
   return (
     <>
-      <table className="w-full self-start">
-        <thead className="bg-gray-800 border-b border-gray-700 sticky top-0 z-10">
-          {table.getHeaderGroups().map((headerGroup) => (
-            <tr key={headerGroup.id}>
-              {headerGroup.headers.map((header) => (
-                <th
+      <Table
+        className="w-full border border-border/70 bg-surface shadow-sm"
+        variant="secondary"
+      >
+        <Table.ScrollContainer className="w-full">
+          <Table.Content
+            aria-label="MMKV entries"
+            className="min-w-full"
+            onSortChange={(descriptor) =>
+              setSorting(toSortingState(descriptor))
+            }
+            sortDescriptor={sortDescriptor}
+          >
+            <Table.Header>
+              {table.getHeaderGroups()[0]?.headers.map((header) => (
+                <Table.Column
                   key={header.id}
-                  className={`text-left text-xs font-medium text-gray-400 px-3 py-2 ${
-                    header.column.getCanSort()
-                      ? 'cursor-pointer select-none hover:bg-gray-700'
-                      : ''
-                  }`}
-                  onClick={header.column.getToggleSortingHandler()}
+                  allowsSorting={header.column.getCanSort()}
+                  id={header.id}
+                  isRowHeader={header.id === 'key'}
                 >
-                  <div className="flex items-center gap-1">
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
+                  {({ sortDirection }) =>
+                    header.column.getCanSort() ? (
+                      <SortableColumnHeader sortDirection={sortDirection}>
+                        {flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
-                    {header.column.getCanSort() && (
-                      <span className="text-gray-500">
-                        {{
-                          asc: '↑',
-                          desc: '↓',
-                        }[header.column.getIsSorted() as string] ?? '↕'}
-                      </span>
-                    )}
-                  </div>
-                </th>
+                      </SortableColumnHeader>
+                    ) : (
+                      flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )
+                    )
+                  }
+                </Table.Column>
               ))}
-            </tr>
-          ))}
-        </thead>
-        <tbody>
-          {table.getRowModel().rows.map((row) => (
-            <tr
-              key={row.id}
-              className={`text-sm hover:bg-gray-800 border-b border-gray-800 ${
-                onRowClick ? 'cursor-pointer' : ''
-              }`}
-              onClick={(e) => {
-                // Don't trigger row click if clicking on buttons or interactive elements
-                const target = e.target as HTMLElement;
-                if (
-                  target.tagName === 'BUTTON' ||
-                  target.closest('button') ||
-                  target.tagName === 'INPUT' ||
-                  target.closest('input')
-                ) {
-                  return;
-                }
-                if (onRowClick) {
-                  onRowClick(row.original);
-                }
-              }}
+            </Table.Header>
+            <Table.Body
+              renderEmptyState={() => (
+                <div className="flex h-full w-full flex-col items-center justify-center gap-4 px-4 py-10 text-center">
+                  <Inbox className="size-6 text-muted" />
+                  <span className="text-sm text-muted">
+                    {searchTerm
+                      ? 'No results found'
+                      : 'This instance appears to be empty'}
+                  </span>
+                </div>
+              )}
             >
-              {row.getVisibleCells().map((cell) => (
-                <td key={cell.id} className="px-3 py-2">
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </td>
+              {table.getRowModel().rows.map((row) => (
+                <Table.Row
+                  key={row.original.key}
+                  className={`transition-colors hover:bg-surface-secondary/70 ${
+                    onRowClick ? 'cursor-pointer' : ''
+                  }`}
+                  id={row.original.key}
+                  onClick={(event) => {
+                    const target = event.target as HTMLElement;
+                    if (
+                      target.tagName === 'BUTTON' ||
+                      target.closest('button') ||
+                      target.tagName === 'INPUT' ||
+                      target.closest('input')
+                    ) {
+                      return;
+                    }
+
+                    onRowClick?.(row.original);
+                  }}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <Table.Cell
+                      key={cell.id}
+                      className={
+                        cell.column.id === 'value' ? 'min-w-0' : undefined
+                      }
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </Table.Cell>
+                  ))}
+                </Table.Row>
               ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
+            </Table.Body>
+          </Table.Content>
+        </Table.ScrollContainer>
+      </Table>
 
       <EditEntryDialog
-        isOpen={showEditDialog}
         onClose={handleCloseEditDialog}
         onEditEntry={handleEditEntry}
         entry={editingEntry}
@@ -320,3 +323,38 @@ export const EditableTable = ({
     </>
   );
 };
+
+const formatValue = (entry: MMKVEntry) => {
+  if (entry.type === 'string') {
+    return (
+      <span className="font-mono text-sm text-success">"{entry.value}"</span>
+    );
+  }
+
+  if (entry.type === 'number') {
+    return (
+      <span className="font-mono text-sm text-foreground">{entry.value}</span>
+    );
+  }
+
+  if (entry.type === 'boolean') {
+    return (
+      <span
+        className={`font-mono text-sm ${
+          entry.value ? 'text-success' : 'text-danger'
+        }`}
+      >
+        {entry.value ? 'true' : 'false'}
+      </span>
+    );
+  }
+
+  const displayValue =
+    entry.value.length > 5
+      ? `[${entry.value.slice(0, 5).join(', ')}, ...${
+          entry.value.length - 5
+        } more]`
+      : `[${entry.value.join(', ')}]`;
+
+  return <span className="font-mono text-sm text-accent">{displayValue}</span>;
+};
diff --git a/packages/mmkv-plugin/src/ui/entry-detail-dialog.tsx b/packages/mmkv-plugin/src/ui/entry-detail-dialog.tsx
index 45a7cb56..e7e70d4f 100644
--- a/packages/mmkv-plugin/src/ui/entry-detail-dialog.tsx
+++ b/packages/mmkv-plugin/src/ui/entry-detail-dialog.tsx
@@ -1,210 +1,175 @@
-import { X, Info, Edit3 } from 'lucide-react';
-import { JSONTree } from 'react-json-tree';
-import { MMKVEntry } from '../shared/types';
 import { useMemo } from 'react';
+import {
+  Button,
+  Chip,
+  Description,
+  JsonInspector,
+  Label,
+  Modal,
+  parseJsonForInspection,
+  Surface,
+} from '@rozenite/ui';
+import { Edit3, Info } from 'lucide-react';
+import type { MMKVEntry, MMKVEntryType } from '../shared/types';
 
 export type EntryDetailDialogProps = {
-  isOpen: boolean;
   onClose: () => void;
   onEdit?: (entry: MMKVEntry) => void;
   entry: MMKVEntry | null;
 };
 
-const jsonTreeTheme = {
-  base00: 'transparent',
-  base01: '#374151', // bg-gray-700
-  base02: '#4b5563', // bg-gray-600
-  base03: '#6b7280', // text-gray-500
-  base04: '#9ca3af', // text-gray-400
-  base05: '#d1d5db', // text-gray-300
-  base06: '#e5e7eb', // text-gray-200
-  base07: '#f9fafb', // text-gray-100
-  base08: '#ef4444', // text-red-500
-  base09: '#f59e0b', // text-yellow-500
-  base0A: '#10b981', // text-green-500
-  base0B: '#3b82f6', // text-blue-500
-  base0C: '#06b6d4', // text-cyan-500
-  base0D: '#8b5cf6', // text-purple-500
-  base0E: '#ec4899', // text-pink-500
-  base0F: '#f97316', // text-orange-500
+const typeColorMap: Record<
+  MMKVEntryType,
+  'success' | 'warning' | 'accent' | 'default'
+> = {
+  string: 'success',
+  number: 'default',
+  boolean: 'warning',
+  buffer: 'accent',
 };
 
-const jsonSafeParse = (value: string): unknown | null => {
-  try {
-    return JSON.parse(value);
-  } catch {
-    return null;
+const formatValue = (entry: MMKVEntry) => {
+  if (entry.type === 'string') {
+    return (
+      <span className="break-all font-mono text-sm text-success">
+        "{entry.value}"
+      </span>
+    );
   }
-};
 
-const getTypeColorClass = (type: string) => {
-  switch (type) {
-    case 'string':
-      return 'bg-green-600';
-    case 'number':
-      return 'bg-blue-600';
-    case 'boolean':
-      return 'bg-yellow-600';
-    case 'buffer':
-      return 'bg-purple-600';
-    default:
-      return 'bg-gray-600';
+  if (entry.type === 'number') {
+    return (
+      <span className="font-mono text-sm text-foreground">{entry.value}</span>
+    );
   }
-};
 
-const formatValue = (entry: MMKVEntry) => {
-  switch (entry.type) {
-    case 'string':
-      return (
-        <span className="text-green-300 font-mono break-all">
-          "{entry.value as string}"
-        </span>
-      );
-    case 'number':
-      return (
-        <span className="text-blue-300 font-mono">{entry.value as number}</span>
-      );
-    case 'boolean':
-      return (
-        <span
-          className={`font-mono ${
-            entry.value ? 'text-green-400' : 'text-red-400'
-          }`}
-        >
-          {entry.value ? 'true' : 'false'}
-        </span>
-      );
-    case 'buffer': {
-      const bufferArray = entry.value as number[];
-      return (
-        <span className="text-purple-300 font-mono">
-          [{bufferArray.join(', ')}]
-        </span>
-      );
-    }
-    default:
-      return <span className="text-gray-400">Unknown</span>;
+  if (entry.type === 'boolean') {
+    return (
+      <span
+        className={`font-mono text-sm ${
+          entry.value ? 'text-success' : 'text-danger'
+        }`}
+      >
+        {entry.value ? 'true' : 'false'}
+      </span>
+    );
   }
+
+  return (
+    <span className="font-mono text-sm text-accent">
+      [{entry.value.join(', ')}]
+    </span>
+  );
 };
 
 export const EntryDetailDialog = ({
-  isOpen,
   onClose,
   onEdit,
   entry,
 }: EntryDetailDialogProps) => {
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      onClose();
-    }
-  };
-
-  if (!isOpen || !entry) return null;
-
-  const isStringValue = entry.type === 'string';
-  const stringValue = entry.value as string;
-  const jsonValue = useMemo(
-    () => isStringValue && jsonSafeParse(stringValue),
-    [isStringValue, stringValue]
+  const isStringValue = entry?.type === 'string';
+  const stringValue = isStringValue ? entry.value : '';
+  const jsonParseResult = useMemo(
+    () =>
+      isStringValue
+        ? parseJsonForInspection(stringValue, 'any')
+        : { ok: false as const, value: null },
+    [isStringValue, stringValue],
   );
+  const shouldInspectJson =
+    jsonParseResult.ok && Boolean(jsonParseResult.value);
 
   return (
-    <div
-      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      onClick={onClose}
+    <Modal
+      isOpen={entry !== null}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          onClose();
+        }
+      }}
     >
-      <div
-        className="bg-gray-800 rounded-lg p-6 w-[90vw] max-w-2xl max-h-[90vh] flex flex-col"
-        onClick={(e) => e.stopPropagation()}
-        onKeyDown={handleKeyDown}
-      >
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            <Info className="h-5 w-5 text-blue-400" />
-            <h2 className="text-lg font-semibold text-gray-100">
-              Entry Details
-            </h2>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-1 text-gray-400 hover:text-gray-200 hover:bg-gray-700 rounded transition-colors"
-            title="Close dialog"
+      <Modal.Backdrop variant="blur">
+        <Modal.Container className="w-full max-w-2xl" placement="center">
+          <Modal.Dialog
+            aria-label="Entry Details"
+            className="flex max-h-[90vh] flex-col"
           >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
+            <Modal.CloseTrigger />
+            <Modal.Header>
+              <Modal.Icon className="bg-info/15 text-info">
+                <Info className="size-5" />
+              </Modal.Icon>
+              <Modal.Heading>Entry Details</Modal.Heading>
+            </Modal.Header>
+            <Modal.Body className="flex min-h-0 flex-1 flex-col gap-4 overflow-auto p-6">
+              {entry ? (
+                <>
+                  <div className="flex flex-col gap-2">
+                    <Label>Key</Label>
+                    <Surface
+                      className="rounded-lg border border-border/70 bg-surface-secondary px-3 py-2 font-mono text-sm text-foreground break-all"
+                      variant="secondary"
+                    >
+                      {entry.key}
+                    </Surface>
+                  </div>
 
-        <div className="space-y-4 flex-1 overflow-auto">
-          {/* Key Display */}
-          <div>
-            <label className="block text-sm font-medium text-gray-200 mb-1">
-              Key
-            </label>
-            <div className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 font-mono break-all">
-              {entry.key}
-            </div>
-          </div>
+                  <div className="flex flex-col gap-2">
+                    <Label>Type</Label>
+                    <Chip
+                      className="w-fit"
+                      color={typeColorMap[entry.type]}
+                      size="sm"
+                      variant="soft"
+                    >
+                      {entry.type}
+                    </Chip>
+                  </div>
 
-          {/* Type Display */}
-          <div>
-            <label className="block text-sm font-medium text-gray-200 mb-1">
-              Type
-            </label>
-            <div className="flex items-center">
-              <span
-                className={`px-2 py-1 text-xs font-medium rounded text-white ${getTypeColorClass(
-                  entry.type
-                )}`}
-              >
-                {entry.type}
-              </span>
-            </div>
-          </div>
-
-          {/* Value Display */}
-          <div className="flex-1 min-h-0 flex flex-col">
-            <label className="block text-sm font-medium text-gray-200 mb-1">
-              Value
-            </label>
-            <div className="max-h-96 overflow-auto bg-gray-700 border border-gray-600 rounded p-3">
-              {jsonValue ? (
-                <JSONTree
-                  data={jsonValue}
-                  theme={jsonTreeTheme}
-                  invertTheme={false}
-                  shouldExpandNodeInitially={(keyPath) => keyPath.length <= 2}
-                />
-              ) : (
-                <div className="text-sm">{formatValue(entry)}</div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Dialog Actions */}
-        <div className="flex items-center justify-end gap-2 mt-6">
-          {onEdit && (
-            <button
-              onClick={() => {
-                if (entry && onEdit) {
-                  onEdit(entry);
-                }
-              }}
-              className="flex items-center gap-2 px-4 py-2 text-sm bg-gray-700 hover:bg-gray-600 text-white rounded transition-colors"
-            >
-              <Edit3 className="h-4 w-4" />
-              Edit
-            </button>
-          )}
-          <button
-            onClick={onClose}
-            className="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors"
-            autoFocus
-          >
-            Close
-          </button>
-        </div>
-      </div>
-    </div>
+                  <div className="flex min-h-0 flex-1 flex-col gap-2">
+                    <Label>Value</Label>
+                    <Surface
+                      className="max-h-96 overflow-auto rounded-lg border border-border/70 bg-surface-secondary p-3"
+                      variant="secondary"
+                    >
+                      {shouldInspectJson ? (
+                        <JsonInspector
+                          copyable
+                          data={jsonParseResult.value}
+                          shouldExpandNodeInitially={(keyPath) =>
+                            keyPath.length <= 2
+                          }
+                          theme="dark"
+                        />
+                      ) : (
+                        <div className="min-h-4 text-sm">
+                          {formatValue(entry)}
+                        </div>
+                      )}
+                    </Surface>
+                    {entry.type === 'string' && shouldInspectJson ? (
+                      <Description className="text-xs text-muted">
+                        Displaying parsed JSON from the stored string value.
+                      </Description>
+                    ) : null}
+                  </div>
+                </>
+              ) : null}
+            </Modal.Body>
+            <Modal.Footer className="flex justify-end gap-2">
+              {entry && onEdit ? (
+                <Button onPress={() => onEdit(entry)} variant="secondary">
+                  <Edit3 className="size-4" />
+                  Edit
+                </Button>
+              ) : null}
+              <Button onPress={onClose} variant="primary">
+                Close
+              </Button>
+            </Modal.Footer>
+          </Modal.Dialog>
+        </Modal.Container>
+      </Modal.Backdrop>
+    </Modal>
   );
 };
diff --git a/packages/mmkv-plugin/src/ui/globals.css b/packages/mmkv-plugin/src/ui/globals.css
index 2bf47da0..77390a0f 100644
--- a/packages/mmkv-plugin/src/ui/globals.css
+++ b/packages/mmkv-plugin/src/ui/globals.css
@@ -1,6 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@import '@rozenite/ui/styles.css';
 
 @layer utilities {
   .text-balance {
@@ -12,87 +11,6 @@
   }
 }
 
-@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% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-  .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%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
 /* Custom scrollbar styles to match plugin theme */
 ::-webkit-scrollbar {
   width: 8px;
diff --git a/packages/mmkv-plugin/src/ui/panel.tsx b/packages/mmkv-plugin/src/ui/panel.tsx
index 3582d9d7..375953d6 100644
--- a/packages/mmkv-plugin/src/ui/panel.tsx
+++ b/packages/mmkv-plugin/src/ui/panel.tsx
@@ -1,27 +1,44 @@
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
-import { useEffect, useState } from 'react';
-import { Search, Plus } from 'lucide-react';
-import { MMKVEventMap } from '../shared/messaging';
-import { MMKVEntry, MMKVEntryValue } from '../shared/types';
+import { useEffect, useMemo, useState } from 'react';
+import { ListBox, SearchField, Select } from '@rozenite/ui';
+import type {
+  MMKVDeleteEntryEvent,
+  MMKVEventMap,
+  MMKVSetEntryEvent,
+  MMKVSnapshotEvent,
+} from '../shared/messaging';
+import type { MMKVEntry, MMKVEntryValue } from '../shared/types';
 import { EditableTable } from './editable-table';
 import { AddEntryDialog } from './add-entry-dialog';
 import { EntryDetailDialog } from './entry-detail-dialog';
 import { EditEntryDialog } from './edit-entry-dialog';
 import './globals.css';
 
+const getEntryTypeFromValue = (value: MMKVEntryValue): MMKVEntry['type'] => {
+  if (typeof value === 'string') {
+    return 'string';
+  }
+
+  if (typeof value === 'number') {
+    return 'number';
+  }
+
+  if (typeof value === 'boolean') {
+    return 'boolean';
+  }
+
+  return 'buffer';
+};
+
 export default function MMKVPanel() {
   const [instances, setInstances] = useState<Map<string, MMKVEntry[]>>(
-    new Map()
+    new Map(),
   );
   const [selectedInstance, setSelectedInstance] = useState<string | null>(null);
-  const [entries, setEntries] = useState<MMKVEntry[]>([]);
   const [loading, setLoading] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
-  const [showAddDialog, setShowAddDialog] = useState(false);
   const [selectedEntry, setSelectedEntry] = useState<MMKVEntry | null>(null);
-  const [showDetailDialog, setShowDetailDialog] = useState(false);
   const [editingEntry, setEditingEntry] = useState<MMKVEntry | null>(null);
-  const [showEditDialog, setShowEditDialog] = useState(false);
 
   const client = useRozeniteDevToolsClient<MMKVEventMap>({
     pluginId: '@rozenite/mmkv-plugin',
@@ -32,92 +49,74 @@ export default function MMKVPanel() {
       return;
     }
 
-    const snapshotSubscription = client.onMessage('snapshot', (event) => {
-      setInstances((prevInstances) => {
-        const newInstances = new Map(prevInstances);
-        newInstances.set(event.id, event.entries);
+    const snapshotSubscription = client.onMessage(
+      'snapshot',
+      (event: MMKVSnapshotEvent) => {
+        setInstances((previous) => {
+          const next = new Map(previous);
+          next.set(event.id, event.entries);
 
-        // If this is the first instance and no instance is selected, select it
-        if (prevInstances.size === 0 && !selectedInstance) {
-          setSelectedInstance(event.id);
-        }
+          if (previous.size === 0 && !selectedInstance) {
+            setSelectedInstance(event.id);
+          }
 
-        return newInstances;
-      });
+          return next;
+        });
 
-      // If this snapshot is for the currently selected instance, update entries
-      if (event.id === selectedInstance) {
-        setEntries(event.entries);
-        setLoading(false);
-      }
-    });
+        if (event.id === selectedInstance) {
+          setLoading(false);
+        }
+      },
+    );
 
-    const setEntrySubscription = client.onMessage('set-entry', (event) => {
-      if (event.id === selectedInstance) {
-        setEntries((prevEntries) => {
-          const existingIndex = prevEntries.findIndex(
-            (entry) => entry.key === event.entry.key
-          );
-          if (existingIndex >= 0) {
-            // Update existing entry
-            return prevEntries.map((entry) =>
-              entry.key === event.entry.key ? event.entry : entry
-            );
-          } else {
-            // Add new entry
-            return [...prevEntries, event.entry];
+    const setEntrySubscription = client.onMessage(
+      'set-entry',
+      (event: MMKVSetEntryEvent) => {
+        setInstances((previous) => {
+          const next = new Map(previous);
+          const current = next.get(event.id);
+
+          if (!current) {
+            return previous;
           }
-        });
-      }
 
-      // Update the instances map as well
-      setInstances((prevInstances) => {
-        const newInstances = new Map(prevInstances);
-        const instanceEntries = newInstances.get(event.id);
-        if (instanceEntries) {
-          const existingIndex = instanceEntries.findIndex(
-            (entry) => entry.key === event.entry.key
+          const existingIndex = current.findIndex(
+            (entry) => entry.key === event.entry.key,
           );
-          if (existingIndex >= 0) {
-            // Update existing entry
-            const updatedEntries = instanceEntries.map((entry) =>
-              entry.key === event.entry.key ? event.entry : entry
-            );
-            newInstances.set(event.id, updatedEntries);
-          } else {
-            // Add new entry
-            newInstances.set(event.id, [...instanceEntries, event.entry]);
-          }
-        }
-        return newInstances;
-      });
-    });
+
+          const entries =
+            existingIndex >= 0
+              ? current.map((entry) =>
+                  entry.key === event.entry.key ? event.entry : entry,
+                )
+              : [...current, event.entry];
+
+          next.set(event.id, entries);
+          return next;
+        });
+      },
+    );
 
     const deleteEntrySubscription = client.onMessage(
       'delete-entry',
-      (event) => {
-        if (event.id === selectedInstance) {
-          setEntries((prevEntries) =>
-            prevEntries.filter((entry) => entry.key !== event.key)
-          );
-        }
+      (event: MMKVDeleteEntryEvent) => {
+        setInstances((previous) => {
+          const next = new Map(previous);
+          const current = next.get(event.id);
 
-        // Update the instances map as well
-        setInstances((prevInstances) => {
-          const newInstances = new Map(prevInstances);
-          const instanceEntries = newInstances.get(event.id);
-          if (instanceEntries) {
-            const updatedEntries = instanceEntries.filter(
-              (entry) => entry.key !== event.key
-            );
-            newInstances.set(event.id, updatedEntries);
+          if (!current) {
+            return previous;
           }
-          return newInstances;
+
+          next.set(
+            event.id,
+            current.filter((entry) => entry.key !== event.key),
+          );
+          return next;
         });
-      }
+      },
     );
 
-    // Request initial snapshots for all instances
     client.send('get-snapshot', {
       type: 'get-snapshot',
       id: 'all',
@@ -135,42 +134,67 @@ export default function MMKVPanel() {
       return;
     }
 
-    // Update entries when selected instance changes
-    const instanceEntries = instances.get(selectedInstance);
-    if (instanceEntries) {
-      setEntries(instanceEntries);
-    } else {
-      setLoading(true);
-      // Request snapshot for the specific instance
-      client.send('get-snapshot', {
-        type: 'get-snapshot',
-        id: selectedInstance,
-      });
+    if (instances.has(selectedInstance)) {
+      setLoading(false);
+      return;
     }
+
+    setLoading(true);
+    client.send('get-snapshot', {
+      type: 'get-snapshot',
+      id: selectedInstance,
+    });
   }, [client, selectedInstance, instances]);
 
-  const filteredEntries = entries.filter((entry) =>
-    entry.key.toLowerCase().includes(searchTerm.toLowerCase())
+  const entries = selectedInstance
+    ? (instances.get(selectedInstance) ?? [])
+    : [];
+
+  const filteredEntries = useMemo(
+    () =>
+      entries.filter((entry) =>
+        entry.key.toLowerCase().includes(searchTerm.toLowerCase()),
+      ),
+    [entries, searchTerm],
   );
 
+  const updateEntriesForSelectedInstance = (
+    mutate: (entries: MMKVEntry[]) => MMKVEntry[],
+  ) => {
+    if (!selectedInstance) {
+      return;
+    }
+
+    setInstances((previous) => {
+      const next = new Map(previous);
+      const current = next.get(selectedInstance);
+
+      if (!current) {
+        return previous;
+      }
+
+      next.set(selectedInstance, mutate(current));
+      return next;
+    });
+  };
+
   const handleValueChange = (key: string, newValue: MMKVEntryValue) => {
-    if (!client || !selectedInstance) return;
-
-    // Determine the entry type based on the new value
-    let type: 'string' | 'number' | 'boolean' | 'buffer';
-    if (typeof newValue === 'string') {
-      type = 'string';
-    } else if (typeof newValue === 'number') {
-      type = 'number';
-    } else if (typeof newValue === 'boolean') {
-      type = 'boolean';
-    } else if (Array.isArray(newValue)) {
-      type = 'buffer';
-    } else {
-      type = 'string'; // fallback
+    if (!client || !selectedInstance) {
+      return;
     }
 
-    const updatedEntry: MMKVEntry = { key, type, value: newValue } as MMKVEntry;
+    const type = getEntryTypeFromValue(newValue);
+
+    let updatedEntry: MMKVEntry;
+    if (type === 'string') {
+      updatedEntry = { key, type: 'string', value: newValue as string };
+    } else if (type === 'number') {
+      updatedEntry = { key, type: 'number', value: newValue as number };
+    } else if (type === 'boolean') {
+      updatedEntry = { key, type: 'boolean', value: newValue as boolean };
+    } else {
+      updatedEntry = { key, type: 'buffer', value: newValue as number[] };
+    }
 
     client.send('set-entry', {
       type: 'set-entry',
@@ -178,27 +202,15 @@ export default function MMKVPanel() {
       entry: updatedEntry,
     });
 
-    // Optimistically update local state
-    setEntries((prevEntries) =>
-      prevEntries.map((entry) => (entry.key === key ? updatedEntry : entry))
+    updateEntriesForSelectedInstance((currentEntries) =>
+      currentEntries.map((entry) => (entry.key === key ? updatedEntry : entry)),
     );
-
-    // Update the instances map as well
-    setInstances((prevInstances) => {
-      const newInstances = new Map(prevInstances);
-      const instanceEntries = newInstances.get(selectedInstance);
-      if (instanceEntries) {
-        const updatedEntries = instanceEntries.map((entry) =>
-          entry.key === key ? updatedEntry : entry
-        );
-        newInstances.set(selectedInstance, updatedEntries);
-      }
-      return newInstances;
-    });
   };
 
   const handleDeleteEntry = (key: string) => {
-    if (!client || !selectedInstance) return;
+    if (!client || !selectedInstance) {
+      return;
+    }
 
     client.send('delete-entry', {
       type: 'delete-entry',
@@ -206,185 +218,135 @@ export default function MMKVPanel() {
       key,
     });
 
-    // Optimistically update local state
-    setEntries((prevEntries) =>
-      prevEntries.filter((entry) => entry.key !== key)
+    updateEntriesForSelectedInstance((currentEntries) =>
+      currentEntries.filter((entry) => entry.key !== key),
     );
-
-    // Update the instances map as well
-    setInstances((prevInstances) => {
-      const newInstances = new Map(prevInstances);
-      const instanceEntries = newInstances.get(selectedInstance);
-      if (instanceEntries) {
-        const updatedEntries = instanceEntries.filter(
-          (entry) => entry.key !== key
-        );
-        newInstances.set(selectedInstance, updatedEntries);
-      }
-      return newInstances;
-    });
   };
 
-  const handleAddEntry = (newEntry: MMKVEntry) => {
-    if (!client || !selectedInstance) return;
+  const handleAddEntry = (entry: MMKVEntry) => {
+    if (!client || !selectedInstance) {
+      return;
+    }
 
-    // Send to device
     client.send('set-entry', {
       type: 'set-entry',
       id: selectedInstance,
-      entry: newEntry,
+      entry,
     });
 
-    // Optimistically update local state
-    setEntries((prevEntries) => [...prevEntries, newEntry]);
-
-    // Update the instances map as well
-    setInstances((prevInstances) => {
-      const newInstances = new Map(prevInstances);
-      const instanceEntries = newInstances.get(selectedInstance);
-      if (instanceEntries) {
-        newInstances.set(selectedInstance, [...instanceEntries, newEntry]);
-      }
-      return newInstances;
-    });
+    updateEntriesForSelectedInstance((currentEntries) => [
+      ...currentEntries,
+      entry,
+    ]);
   };
 
+  const instanceOptions = [...instances.keys()];
+
   return (
-    <div className="h-screen bg-gray-900 text-gray-100 flex flex-col">
-      {/* Toolbar */}
-      <div className="flex items-center gap-2 p-2 border-b border-gray-700 bg-gray-800">
-        <div className="flex items-center gap-2">
-          <span className="text-lg">💾</span>
-          <span className="text-sm font-medium text-gray-200">
-            MMKV Storage
-          </span>
-        </div>
+    <div
+      data-theme="dark"
+      className="dark h-screen bg-background text-foreground flex flex-col"
+    >
+      <div className="flex items-center gap-2 p-2">
+        <span className="text-sm font-medium text-default-foreground">
+          MMKV Storage
+        </span>
         <div className="flex-1" />
-        <div className="flex items-center gap-2">
-          <label htmlFor="instance-select" className="text-xs text-gray-400">
-            Instance:
-          </label>
-          <select
-            id="instance-select"
-            value={selectedInstance || ''}
-            onChange={(e) => setSelectedInstance(e.target.value)}
-            disabled={instances.size === 0}
-            className="h-8 px-2 text-xs bg-gray-700 border border-gray-600 rounded text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
-          >
-            {instances.size === 0 ? (
-              <option>No instances found</option>
-            ) : (
-              Array.from(instances.keys()).map((instance) => (
-                <option key={instance} value={instance}>
-                  {instance}
-                </option>
-              ))
-            )}
-          </select>
-        </div>
+        <Select
+          placeholder="Select instance"
+          value={selectedInstance ?? ''}
+          onChange={(value) =>
+            setSelectedInstance(
+              typeof value === 'string'
+                ? value
+                : value == null
+                  ? null
+                  : String(value),
+            )
+          }
+          isDisabled={instances.size === 0}
+        >
+          <Select.Trigger>
+            <Select.Value />
+            <Select.Indicator />
+          </Select.Trigger>
+          <Select.Popover>
+            <ListBox>
+              {instanceOptions.map((instanceId) => (
+                <ListBox.Item
+                  key={instanceId}
+                  id={instanceId}
+                  textValue={instanceId}
+                >
+                  {instanceId}
+                  <ListBox.ItemIndicator />
+                </ListBox.Item>
+              ))}
+            </ListBox>
+          </Select.Popover>
+        </Select>
       </div>
 
-      {/* Search and Filter Bar */}
-      <div className="flex items-center gap-2 p-2 border-b border-gray-700 bg-gray-800">
-        <button
-          onClick={() => setShowAddDialog(true)}
-          disabled={!selectedInstance}
-          className="flex items-center gap-1 px-3 h-8 text-xs bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded transition-colors"
-          title="Add new entry"
-        >
-          <Plus className="h-3 w-3" />
-          Add Entry
-        </button>
+      <div className="flex items-center gap-2 p-2">
+        <AddEntryDialog
+          isDisabled={!selectedInstance}
+          onAddEntry={handleAddEntry}
+          existingKeys={entries.map((entry) => entry.key)}
+        />
         <div className="flex-1">
-          <div className="relative">
-            <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
-            <input
-              type="text"
-              placeholder="Search keys..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="h-8 w-full pl-8 pr-3 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
-            />
-          </div>
+          <SearchField
+            name="search"
+            fullWidth
+            value={searchTerm}
+            onChange={setSearchTerm}
+          >
+            <SearchField.Group>
+              <SearchField.SearchIcon />
+              <SearchField.Input placeholder="Search keys..." />
+              <SearchField.ClearButton />
+            </SearchField.Group>
+          </SearchField>
         </div>
-        <div className="flex items-center gap-2 text-xs text-gray-400">
+        <div className="flex items-center gap-2 text-xs text-default-foreground">
           {filteredEntries.length} of {entries.length} entries
         </div>
       </div>
 
-      {/* Main Content */}
       <main className="flex flex-1 min-h-0 overflow-auto">
         {selectedInstance ? (
-          <>
-            {filteredEntries.length === 0 ? (
-              <div className="flex flex-col items-center justify-center h-full text-center w-full">
-                <div className="text-4xl mb-4">🔍</div>
-                <h3 className="text-lg font-semibold text-gray-200 mb-2">
-                  No entries found
-                </h3>
-                <p className="text-gray-400 text-sm">
-                  {searchTerm
-                    ? 'Try adjusting your search terms'
-                    : 'This instance appears to be empty'}
-                </p>
-              </div>
-            ) : (
-              <EditableTable
-                data={filteredEntries}
-                onValueChange={handleValueChange}
-                onDeleteEntry={handleDeleteEntry}
-                onRowClick={(entry) => {
-                  setSelectedEntry(entry);
-                  setShowDetailDialog(true);
-                }}
-                loading={loading}
-              />
-            )}
-          </>
+          <EditableTable
+            data={filteredEntries}
+            loading={loading}
+            onDeleteEntry={handleDeleteEntry}
+            onRowClick={setSelectedEntry}
+            onValueChange={handleValueChange}
+            searchTerm={searchTerm}
+          />
         ) : (
           <div className="flex flex-col items-center justify-center h-full text-center w-full">
-            <div className="text-4xl mb-4">🚀</div>
-            <h2 className="text-xl font-semibold text-gray-200 mb-2">
+            <h2 className="text-xl font-semibold text-default-foreground mb-2">
               Welcome to MMKV Inspector
             </h2>
-            <p className="text-gray-400 text-sm">
-              Select an MMKV instance from the dropdown above to start exploring
-              your data
+            <p className="text-default-foreground text-sm">
+              Select an MMKV instance from the dropdown above to inspect data
             </p>
           </div>
         )}
       </main>
 
-      <AddEntryDialog
-        isOpen={showAddDialog}
-        onClose={() => setShowAddDialog(false)}
-        onAddEntry={handleAddEntry}
-        existingKeys={entries.map((entry) => entry.key)}
-      />
-
       <EntryDetailDialog
-        isOpen={showDetailDialog}
-        onClose={() => {
-          setShowDetailDialog(false);
-          setSelectedEntry(null);
-        }}
+        onClose={() => setSelectedEntry(null)}
         onEdit={(entry) => {
-          setShowDetailDialog(false);
+          setSelectedEntry(null);
           setEditingEntry(entry);
-          setShowEditDialog(true);
         }}
         entry={selectedEntry}
       />
 
       <EditEntryDialog
-        isOpen={showEditDialog}
-        onClose={() => {
-          setShowEditDialog(false);
-          setEditingEntry(null);
-        }}
+        onClose={() => setEditingEntry(null)}
         onEditEntry={(key, newValue) => {
           handleValueChange(key, newValue);
-          setShowEditDialog(false);
           setEditingEntry(null);
         }}
         entry={editingEntry}
diff --git a/packages/mmkv-plugin/tailwind.config.ts b/packages/mmkv-plugin/tailwind.config.ts
deleted file mode 100644
index d756b75a..00000000
--- a/packages/mmkv-plugin/tailwind.config.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import type { Config } from 'tailwindcss';
-
-const config: Config = {
-  darkMode: ['class'],
-  content: ['./src/ui/**/*.{js,ts,jsx,tsx,mdx}'],
-  theme: {
-    extend: {
-      translate: {
-        '0.75': '0.1875rem',
-      },
-      colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        chart: {
-          '1': 'hsl(var(--chart-1))',
-          '2': 'hsl(var(--chart-2))',
-          '3': 'hsl(var(--chart-3))',
-          '4': 'hsl(var(--chart-4))',
-          '5': 'hsl(var(--chart-5))',
-        },
-        sidebar: {
-          DEFAULT: 'hsl(var(--sidebar-background))',
-          foreground: 'hsl(var(--sidebar-foreground))',
-          primary: 'hsl(var(--sidebar-primary))',
-          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-          accent: 'hsl(var(--sidebar-accent))',
-          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-          border: 'hsl(var(--sidebar-border))',
-          ring: 'hsl(var(--sidebar-ring))',
-        },
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      keyframes: {
-        'accordion-down': {
-          from: {
-            height: '0',
-          },
-          to: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-        },
-        'accordion-up': {
-          from: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-          to: {
-            height: '0',
-          },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-      },
-    },
-  },
-  plugins: [require('tailwindcss-animate')],
-};
-export default config;
diff --git a/packages/mmkv-plugin/tsconfig.json b/packages/mmkv-plugin/tsconfig.json
index c95eb1da..349b6a99 100644
--- a/packages/mmkv-plugin/tsconfig.json
+++ b/packages/mmkv-plugin/tsconfig.json
@@ -11,6 +11,12 @@
     "noFallthroughCasesInSwitch": true,
     "module": "ESNext",
     "moduleResolution": "bundler",
+    "baseUrl": ".",
+    "paths": {
+      "@rozenite/plugin-bridge": ["../plugin-bridge/src/index.ts"],
+      "@rozenite/ui": ["../ui/src/index.ts"],
+      "@rozenite/ui/*": ["../ui/*"]
+    },
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
diff --git a/packages/storage-plugin/package.json b/packages/storage-plugin/package.json
index 9d8262f1..aa4d1b31 100644
--- a/packages/storage-plugin/package.json
+++ b/packages/storage-plugin/package.json
@@ -22,9 +22,11 @@
   },
   "dependencies": {
     "@rozenite/agent-bridge": "workspace:*",
+    "@rozenite/ui": "workspace:*",
     "@rozenite/plugin-bridge": "workspace:*"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.2.2",
     "@rozenite/vite-plugin": "workspace:*",
     "@tanstack/react-table": "^8.21.3",
     "@types/react": "catalog:",
@@ -33,7 +35,6 @@
     "postcss": "^8.5.6",
     "react": "catalog:",
     "react-dom": "catalog:",
-    "react-json-tree": "^0.20.0",
     "react-native": "catalog:",
     "react-native-mmkv": "^3.3.0",
     "react-native-mmkv-v3": "npm:react-native-mmkv@^3.0.0",
@@ -41,8 +42,9 @@
     "react-native-nitro-modules": "*",
     "react-native-web": "^0.21.2",
     "rozenite": "workspace:*",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.2.2",
     "tailwindcss-animate": "^1.0.7",
+    "tailwind-variants": "^2.0.0",
     "typescript": "~5.9.3",
     "vite": "catalog:"
   },
diff --git a/packages/storage-plugin/postcss.config.js b/packages/storage-plugin/postcss.config.js
index 2aa7205d..a34a3d56 100644
--- a/packages/storage-plugin/postcss.config.js
+++ b/packages/storage-plugin/postcss.config.js
@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };
diff --git a/packages/storage-plugin/src/ui/add-entry-dialog.tsx b/packages/storage-plugin/src/ui/add-entry-dialog.tsx
index d47e3863..74195e2f 100644
--- a/packages/storage-plugin/src/ui/add-entry-dialog.tsx
+++ b/packages/storage-plugin/src/ui/add-entry-dialog.tsx
@@ -1,5 +1,15 @@
-import { useMemo, useState } from 'react';
-import { X } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import {
+  Button,
+  Description,
+  Input,
+  Label,
+  ListBox,
+  Modal,
+  Select,
+  TextField,
+} from '@rozenite/ui';
+import { Plus } from 'lucide-react';
 import type {
   StorageEntry,
   StorageEntryType,
@@ -14,50 +24,80 @@ const TYPE_OPTIONS: Array<{ value: StorageEntryType; label: string }> = [
   { value: 'buffer', label: 'Buffer (Array)' },
 ];
 
-export type AddEntryDialogProps = {
+type DialogState = {
   isOpen: boolean;
-  onClose: () => void;
+  title: string;
+  message: string;
+  type: 'confirm' | 'alert';
+  onConfirm?: () => void;
+};
+
+const EMPTY_DIALOG_STATE: DialogState = {
+  isOpen: false,
+  title: '',
+  message: '',
+  type: 'alert',
+};
+
+export type AddEntryDialogProps = {
   onAddEntry: (entry: StorageEntry) => void;
   existingKeys: string[];
   supportedTypes: StorageEntryType[];
+  isDisabled?: boolean;
 };
 
 export const AddEntryDialog = ({
-  isOpen,
-  onClose,
   onAddEntry,
   existingKeys,
   supportedTypes,
+  isDisabled = false,
 }: AddEntryDialogProps) => {
+  const [isOpen, setIsOpen] = useState(false);
   const [newEntryKey, setNewEntryKey] = useState('');
   const [newEntryType, setNewEntryType] = useState<StorageEntryType>('string');
   const [newEntryValue, setNewEntryValue] = useState('');
-  const [confirmDialog, setConfirmDialog] = useState<{
-    isOpen: boolean;
-    title: string;
-    message: string;
-    type: 'confirm' | 'alert';
-    onConfirm?: () => void;
-  }>({ isOpen: false, title: '', message: '', type: 'alert' });
+  const [confirmDialog, setConfirmDialog] =
+    useState<DialogState>(EMPTY_DIALOG_STATE);
 
   const enabledTypes = useMemo(
     () => TYPE_OPTIONS.filter((option) => supportedTypes.includes(option.value)),
-    [supportedTypes]
+    [supportedTypes],
   );
-
   const firstSupportedType = enabledTypes[0]?.value;
-
   const selectedTypeSupported = supportedTypes.includes(newEntryType);
 
+  useEffect(() => {
+    if (isOpen && !selectedTypeSupported && firstSupportedType) {
+      setNewEntryType(firstSupportedType);
+    }
+  }, [firstSupportedType, isOpen, selectedTypeSupported]);
+
+  useEffect(() => {
+    if (isDisabled && isOpen) {
+      setNewEntryKey('');
+      setNewEntryType(firstSupportedType ?? 'string');
+      setNewEntryValue('');
+      setConfirmDialog(EMPTY_DIALOG_STATE);
+      setIsOpen(false);
+    }
+  }, [firstSupportedType, isDisabled, isOpen]);
+
   const resetForm = () => {
     setNewEntryKey('');
     setNewEntryType(firstSupportedType ?? 'string');
     setNewEntryValue('');
-    onClose();
+    setConfirmDialog(EMPTY_DIALOG_STATE);
+  };
+
+  const closeDialog = () => {
+    resetForm();
+    setIsOpen(false);
   };
 
   const handleAddEntry = () => {
-    if (!newEntryKey.trim()) return;
+    if (!newEntryKey.trim()) {
+      return;
+    }
 
     if (!selectedTypeSupported) {
       setConfirmDialog({
@@ -133,178 +173,196 @@ export const AddEntryDialog = ({
     }
 
     onAddEntry(entry);
-
-    resetForm();
+    closeDialog();
   };
 
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === 'Escape') {
-      resetForm();
-      return;
-    }
-
+  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && newEntryKey.trim() && newEntryValue.trim()) {
       handleAddEntry();
     }
   };
 
-  if (!isOpen) {
-    return null;
-  }
-
   return (
-    <div
-      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      onClick={resetForm}
-    >
-      <div
-        className="bg-gray-800 rounded-lg p-6 w-96 max-w-full mx-4"
-        onClick={(event) => event.stopPropagation()}
-        onKeyDown={handleKeyDown}
-      >
-        <div className="flex items-center justify-between mb-4">
-          <h2 className="text-lg font-semibold text-gray-100">Add New Entry</h2>
-          <button
-            onClick={resetForm}
-            className="p-1 text-gray-400 hover:text-gray-200 hover:bg-gray-700 rounded transition-colors"
-            title="Close dialog"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
+    <>
+      <Button isDisabled={isDisabled} onPress={() => setIsOpen(true)}>
+        <Plus className="h-3 w-3" />
+        Add Entry
+      </Button>
 
-        <div className="space-y-4">
-          <div>
-            <label
-              htmlFor="new-entry-key"
-              className="block text-sm font-medium text-gray-200 mb-1"
-            >
-              Key
-            </label>
-            <input
-              id="new-entry-key"
-              type="text"
-              value={newEntryKey}
-              onChange={(event) => setNewEntryKey(event.target.value)}
-              placeholder="Enter key name"
-              className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              autoFocus
-            />
-          </div>
+      <Modal
+        isOpen={isOpen}
+        onOpenChange={(nextOpen) => {
+          setIsOpen(nextOpen);
+          if (!nextOpen) {
+            resetForm();
+          }
+        }}
+      >
+        <Modal.Backdrop variant="blur">
+          <Modal.Container placement="center">
+            <Modal.Dialog aria-label="Add New Entry">
+              <Modal.CloseTrigger />
+              <Modal.Header>
+                <Modal.Heading>Add New Entry</Modal.Heading>
+              </Modal.Header>
+              <Modal.Body className="flex flex-col gap-4 p-6">
+                <TextField className="w-full" name="new-entry-key" type="text">
+                  <Label>Key</Label>
+                  <Input
+                    autoFocus
+                    onChange={(event) => setNewEntryKey(event.target.value)}
+                    onKeyDown={handleInputKeyDown}
+                    placeholder="Enter key name"
+                    value={newEntryKey}
+                    variant="secondary"
+                  />
+                </TextField>
 
-          <div>
-            <label
-              htmlFor="new-entry-type"
-              className="block text-sm font-medium text-gray-200 mb-1"
-            >
-              Type
-            </label>
-            <select
-              id="new-entry-type"
-              value={newEntryType}
-              onChange={(event) => {
-                setNewEntryType(event.target.value as StorageEntryType);
-                setNewEntryValue('');
-              }}
-              className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
-            >
-              {TYPE_OPTIONS.map((option) => {
-                const isSupported = supportedTypes.includes(option.value);
-                return (
-                  <option
-                    key={option.value}
-                    value={option.value}
-                    disabled={!isSupported}
-                    title={
-                      isSupported ? option.label : 'Not supported by this storage'
-                    }
+                <div className="flex flex-col gap-2">
+                  <Label>Type</Label>
+                  <Select
+                    className="w-full"
+                    onChange={(key) => {
+                      setNewEntryType(
+                        (key == null ? '' : String(key)) as StorageEntryType,
+                      );
+                      setNewEntryValue('');
+                    }}
+                    value={newEntryType || null}
+                    variant="secondary"
                   >
-                    {option.label}
-                    {!isSupported ? ' (Not supported)' : ''}
-                  </option>
-                );
-              })}
-            </select>
-            {!selectedTypeSupported && (
-              <p className="text-xs text-amber-400 mt-1">
-                Selected type is not supported by this storage.
-              </p>
-            )}
-          </div>
+                    <Select.Trigger>
+                      <Select.Value />
+                      <Select.Indicator />
+                    </Select.Trigger>
+                    <Select.Popover>
+                      <ListBox aria-label="Entry type">
+                        {TYPE_OPTIONS.map((option) => {
+                          const isSupported = supportedTypes.includes(
+                            option.value,
+                          );
 
-          <div>
-            <label
-              htmlFor="new-entry-value"
-              className="block text-sm font-medium text-gray-200 mb-1"
-            >
-              Value
-            </label>
-            {newEntryType === 'boolean' ? (
-              <select
-                id="new-entry-value"
-                value={newEntryValue}
-                onChange={(event) => setNewEntryValue(event.target.value)}
-                className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              >
-                <option value="">Select value</option>
-                <option value="true">true</option>
-                <option value="false">false</option>
-              </select>
-            ) : (
-              <input
-                id="new-entry-value"
-                type={newEntryType === 'number' ? 'number' : 'text'}
-                value={newEntryValue}
-                onChange={(event) => setNewEntryValue(event.target.value)}
-                placeholder={
-                  newEntryType === 'string'
-                    ? 'Enter string value'
-                    : newEntryType === 'number'
-                    ? 'Enter number value'
-                    : newEntryType === 'buffer'
-                    ? 'Enter array as JSON, e.g., [1, 2, 3]'
-                    : 'Enter value'
-                }
-                className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-            )}
-            {newEntryType === 'buffer' && (
-              <p className="text-xs text-gray-400 mt-1">
-                Enter as JSON array of numbers, e.g., [1, 2, 3, 255]
-              </p>
-            )}
-          </div>
-        </div>
+                          return (
+                            <ListBox.Item
+                              id={option.value}
+                              isDisabled={!isSupported}
+                              key={option.value}
+                              textValue={option.label}
+                            >
+                              {isSupported
+                                ? option.label
+                                : `${option.label} (Not supported)`}
+                            </ListBox.Item>
+                          );
+                        })}
+                      </ListBox>
+                    </Select.Popover>
+                  </Select>
+                  {!selectedTypeSupported ? (
+                    <Description className="text-xs text-warning">
+                      Selected type is not supported by this storage.
+                    </Description>
+                  ) : null}
+                </div>
 
-        <div className="flex items-center justify-end gap-2 mt-6">
-          <button
-            onClick={resetForm}
-            className="px-4 py-2 text-sm text-gray-300 hover:text-white hover:bg-gray-700 rounded transition-colors"
-          >
-            Cancel
-          </button>
-          <button
-            onClick={handleAddEntry}
-            disabled={!newEntryKey.trim() || !newEntryValue.trim() || !selectedTypeSupported}
-            className="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded transition-colors"
-          >
-            Add Entry
-          </button>
-        </div>
-      </div>
+                {newEntryType === 'boolean' ? (
+                  <div className="flex flex-col gap-2">
+                    <Label>Value</Label>
+                    <Select
+                      className="w-full"
+                      onChange={(key) =>
+                        setNewEntryValue(key == null ? '' : String(key))
+                      }
+                      placeholder="Select value"
+                      value={newEntryValue || null}
+                      variant="secondary"
+                    >
+                      <Select.Trigger>
+                        <Select.Value />
+                        <Select.Indicator />
+                      </Select.Trigger>
+                      <Select.Popover>
+                        <ListBox aria-label="Entry value">
+                          <ListBox.Item id="true" key="true" textValue="true">
+                            true
+                          </ListBox.Item>
+                          <ListBox.Item
+                            id="false"
+                            key="false"
+                            textValue="false"
+                          >
+                            false
+                          </ListBox.Item>
+                        </ListBox>
+                      </Select.Popover>
+                    </Select>
+                  </div>
+                ) : (
+                  <TextField
+                    className="w-full"
+                    name="new-entry-value"
+                    type={newEntryType === 'number' ? 'number' : 'text'}
+                  >
+                    <Label>Value</Label>
+                    <Input
+                      onChange={(event) => setNewEntryValue(event.target.value)}
+                      onKeyDown={handleInputKeyDown}
+                      placeholder={
+                        newEntryType === 'string'
+                          ? 'Enter string value'
+                          : newEntryType === 'number'
+                            ? 'Enter number value'
+                            : newEntryType === 'buffer'
+                              ? 'Enter array as JSON, e.g., [1, 2, 3]'
+                              : 'Enter value'
+                      }
+                      value={newEntryValue}
+                      variant="secondary"
+                    />
+                    {newEntryType === 'buffer' ? (
+                      <Description className="text-xs text-muted">
+                        Enter as JSON array of numbers, e.g., [1, 2, 3, 255]
+                      </Description>
+                    ) : null}
+                  </TextField>
+                )}
+              </Modal.Body>
+              <Modal.Footer className="flex justify-end gap-2">
+                <Button onPress={closeDialog} variant="secondary">
+                  Cancel
+                </Button>
+                <Button
+                  isDisabled={
+                    !newEntryKey.trim() ||
+                    !newEntryValue.trim() ||
+                    !selectedTypeSupported
+                  }
+                  onPress={handleAddEntry}
+                  variant="primary"
+                >
+                  Add Entry
+                </Button>
+              </Modal.Footer>
+            </Modal.Dialog>
+          </Modal.Container>
+        </Modal.Backdrop>
+      </Modal>
 
       <ConfirmDialog
+        confirmText="OK"
         isOpen={confirmDialog.isOpen}
-        onClose={() => setConfirmDialog((previous) => ({ ...previous, isOpen: false }))}
+        message={confirmDialog.message}
+        onClose={() =>
+          setConfirmDialog((previous) => ({ ...previous, isOpen: false }))
+        }
         onConfirm={() => {
           if (confirmDialog.onConfirm) {
             confirmDialog.onConfirm();
           }
         }}
         title={confirmDialog.title}
-        message={confirmDialog.message}
         type={confirmDialog.type}
       />
-    </div>
+    </>
   );
 };
diff --git a/packages/storage-plugin/src/ui/confirm-dialog.tsx b/packages/storage-plugin/src/ui/confirm-dialog.tsx
index fe024a34..4c7a25dc 100644
--- a/packages/storage-plugin/src/ui/confirm-dialog.tsx
+++ b/packages/storage-plugin/src/ui/confirm-dialog.tsx
@@ -1,4 +1,5 @@
-import { X, AlertTriangle, Info } from 'lucide-react';
+import { AlertDialog, Button } from '@rozenite/ui';
+import { AlertTriangle, Info } from 'lucide-react';
 
 export type ConfirmDialogProps = {
   isOpen: boolean;
@@ -21,80 +22,60 @@ export const ConfirmDialog = ({
   confirmText = 'Confirm',
   cancelText = 'Cancel',
 }: ConfirmDialogProps) => {
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      onClose();
-    } else if (e.key === 'Enter') {
-      onConfirm();
-    }
-  };
-
-  const handleConfirm = () => {
-    onConfirm();
-    onClose();
-  };
-
-  const handleCancel = () => {
-    onClose();
-  };
-
-  if (!isOpen) return null;
+  const isConfirm = type === 'confirm';
 
   return (
-    <div
-      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      onClick={handleCancel}
+    <AlertDialog
+      isOpen={isOpen}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          onClose();
+        }
+      }}
     >
-      <div
-        className="bg-gray-800 rounded-lg p-6 w-96 max-w-full mx-4"
-        onClick={(e) => e.stopPropagation()}
-        onKeyDown={handleKeyDown}
+      <AlertDialog.Backdrop
+        className="bg-overlay/70 backdrop-blur-sm"
+        variant="opaque"
       >
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            {type === 'confirm' ? (
-              <AlertTriangle className="h-5 w-5 text-yellow-500" />
-            ) : (
-              <Info className="h-5 w-5 text-blue-500" />
-            )}
-            <h2 className="text-lg font-semibold text-gray-100">{title}</h2>
-          </div>
-          <button
-            onClick={handleCancel}
-            className="p-1 text-gray-400 hover:text-gray-200 hover:bg-gray-700 rounded transition-colors"
-            title="Close dialog"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-
-        <div className="mb-6">
-          <p className="text-sm text-gray-300 leading-relaxed">{message}</p>
-        </div>
-
-        {/* Dialog Actions */}
-        <div className="flex items-center justify-end gap-2">
-          {type === 'confirm' && (
-            <button
-              onClick={handleCancel}
-              className="px-4 py-2 text-sm text-gray-300 hover:text-white hover:bg-gray-700 rounded transition-colors"
-            >
-              {cancelText}
-            </button>
-          )}
-          <button
-            onClick={handleConfirm}
-            className={`px-4 py-2 text-sm text-white rounded transition-colors ${
-              type === 'confirm'
-                ? 'bg-red-600 hover:bg-red-700'
-                : 'bg-blue-600 hover:bg-blue-700'
-            }`}
-            autoFocus
+        <AlertDialog.Container className="w-full max-w-md" placement="center">
+          <AlertDialog.Dialog
+            aria-label={title}
+            className="border border-border/70 bg-surface text-foreground shadow-2xl"
           >
-            {type === 'alert' ? 'OK' : confirmText}
-          </button>
-        </div>
-      </div>
-    </div>
+            <AlertDialog.Header className="flex items-center gap-3 border-b border-border/70 px-5 py-4">
+              <AlertDialog.Icon status={isConfirm ? 'danger' : 'default'}>
+                {isConfirm ? (
+                  <AlertTriangle className="size-5" />
+                ) : (
+                  <Info className="size-5" />
+                )}
+              </AlertDialog.Icon>
+              <AlertDialog.Heading className="text-base font-semibold text-foreground">
+                {title}
+              </AlertDialog.Heading>
+            </AlertDialog.Header>
+            <AlertDialog.Body className="px-5 py-4 text-sm leading-6 text-muted">
+              {message}
+            </AlertDialog.Body>
+            <AlertDialog.Footer className="flex justify-end gap-2 border-t border-border/70 px-5 py-4">
+              {isConfirm ? (
+                <Button onPress={onClose} variant="secondary">
+                  {cancelText}
+                </Button>
+              ) : null}
+              <Button
+                onPress={() => {
+                  onConfirm();
+                  onClose();
+                }}
+                variant={isConfirm ? 'danger' : 'primary'}
+              >
+                {isConfirm ? confirmText : 'OK'}
+              </Button>
+            </AlertDialog.Footer>
+          </AlertDialog.Dialog>
+        </AlertDialog.Container>
+      </AlertDialog.Backdrop>
+    </AlertDialog>
   );
 };
diff --git a/packages/storage-plugin/src/ui/edit-entry-dialog.tsx b/packages/storage-plugin/src/ui/edit-entry-dialog.tsx
index a0e98e51..860458dd 100644
--- a/packages/storage-plugin/src/ui/edit-entry-dialog.tsx
+++ b/packages/storage-plugin/src/ui/edit-entry-dialog.tsx
@@ -1,5 +1,17 @@
 import { useEffect, useMemo, useState } from 'react';
-import { X, Edit3 } from 'lucide-react';
+import {
+  Button,
+  Chip,
+  Description,
+  Input,
+  Label,
+  ListBox,
+  Modal,
+  Select,
+  Surface,
+  TextField,
+} from '@rozenite/ui';
+import { Edit3 } from 'lucide-react';
 import type {
   StorageEntry,
   StorageEntryType,
@@ -8,47 +20,90 @@ import type {
 import { ConfirmDialog } from './confirm-dialog';
 
 export type EditEntryDialogProps = {
-  isOpen: boolean;
   onClose: () => void;
   onEditEntry: (key: string, newValue: StorageEntryValue) => void;
   entry: StorageEntry | null;
   supportedTypes: StorageEntryType[];
 };
 
+type DialogState = {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  type: 'confirm' | 'alert';
+  onConfirm?: () => void;
+};
+
+const EMPTY_DIALOG_STATE: DialogState = {
+  isOpen: false,
+  title: '',
+  message: '',
+  type: 'alert',
+};
+
+const typeColorMap: Record<
+  StorageEntryType,
+  'success' | 'warning' | 'accent' | 'default'
+> = {
+  string: 'success',
+  number: 'default',
+  boolean: 'warning',
+  buffer: 'accent',
+};
+
+const getInputType = (type: StorageEntryType) =>
+  type === 'number' ? 'number' : 'text';
+
+const getPlaceholder = (type: StorageEntryType) => {
+  if (type === 'string') {
+    return 'Enter string value';
+  }
+
+  if (type === 'number') {
+    return 'Enter number value';
+  }
+
+  if (type === 'boolean') {
+    return 'Enter true or false';
+  }
+
+  return 'Enter array as JSON, e.g., [1, 2, 3]';
+};
+
 export const EditEntryDialog = ({
-  isOpen,
   onClose,
   onEditEntry,
   entry,
   supportedTypes,
 }: EditEntryDialogProps) => {
   const [editValue, setEditValue] = useState('');
-  const [confirmDialog, setConfirmDialog] = useState<{
-    isOpen: boolean;
-    title: string;
-    message: string;
-    type: 'confirm' | 'alert';
-    onConfirm?: () => void;
-  }>({ isOpen: false, title: '', message: '', type: 'alert' });
+  const [confirmDialog, setConfirmDialog] =
+    useState<DialogState>(EMPTY_DIALOG_STATE);
 
   useEffect(() => {
-    if (entry && isOpen) {
-      setEditValue(Array.isArray(entry.value) ? JSON.stringify(entry.value) : String(entry.value));
+    if (entry) {
+      setEditValue(
+        Array.isArray(entry.value) ? JSON.stringify(entry.value) : String(entry.value),
+      );
+      setConfirmDialog(EMPTY_DIALOG_STATE);
     }
-  }, [entry, isOpen]);
+  }, [entry]);
 
   const isTypeSupported = useMemo(
     () => !!entry && supportedTypes.includes(entry.type),
-    [entry, supportedTypes]
+    [entry, supportedTypes],
   );
 
   const resetForm = () => {
     setEditValue('');
+    setConfirmDialog(EMPTY_DIALOG_STATE);
     onClose();
   };
 
   const handleEditEntry = () => {
-    if (!entry) return;
+    if (!entry) {
+      return;
+    }
 
     if (!isTypeSupported) {
       setConfirmDialog({
@@ -81,7 +136,10 @@ export const EditEntryDialog = ({
           break;
         case 'buffer':
           newValue = JSON.parse(editValue);
-          if (!Array.isArray(newValue) || !newValue.every((v) => typeof v === 'number')) {
+          if (
+            !Array.isArray(newValue) ||
+            !newValue.every((value) => typeof value === 'number')
+          ) {
             throw new Error('Buffer must be an array of numbers');
           }
           break;
@@ -104,177 +162,161 @@ export const EditEntryDialog = ({
     resetForm();
   };
 
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === 'Escape') {
-      resetForm();
-    } else if (event.key === 'Enter' && editValue.trim()) {
+  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter' && editValue.trim()) {
       handleEditEntry();
     }
   };
 
-  const getInputType = (type: StorageEntryType) => {
-    if (type === 'number') {
-      return 'number';
-    }
-
-    return 'text';
-  };
-
-  const getPlaceholder = (type: StorageEntryType) => {
-    if (type === 'string') {
-      return 'Enter string value';
-    }
-
-    if (type === 'number') {
-      return 'Enter number value';
-    }
-
-    if (type === 'boolean') {
-      return 'Enter true or false';
-    }
-
-    return 'Enter array as JSON, e.g., [1, 2, 3]';
-  };
-
-  const getTypeColorClass = (type: StorageEntryType) => {
-    if (type === 'string') {
-      return 'bg-green-600';
-    }
-
-    if (type === 'number') {
-      return 'bg-blue-600';
-    }
-
-    if (type === 'boolean') {
-      return 'bg-yellow-600';
-    }
-
-    return 'bg-purple-600';
-  };
-
-  if (!isOpen || !entry) {
-    return null;
-  }
-
   return (
-    <div
-      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      onClick={resetForm}
-    >
-      <div
-        className="bg-gray-800 rounded-lg p-6 w-96 max-w-full mx-4"
-        onClick={(event) => event.stopPropagation()}
-        onKeyDown={handleKeyDown}
+    <>
+      <Modal
+        isOpen={entry !== null}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) {
+            resetForm();
+          }
+        }}
       >
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            <Edit3 className="h-5 w-5 text-blue-400" />
-            <h2 className="text-lg font-semibold text-gray-100">Edit Entry</h2>
-          </div>
-          <button
-            onClick={resetForm}
-            className="p-1 text-gray-400 hover:text-gray-200 hover:bg-gray-700 rounded transition-colors"
-            title="Close dialog"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-
-        <div className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-200 mb-1">Key</label>
-            <div className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 font-mono">
-              {entry.key}
-            </div>
-            <p className="text-xs text-gray-400 mt-1">Key cannot be changed during editing</p>
-          </div>
+        <Modal.Backdrop variant="blur">
+          <Modal.Container placement="center">
+            <Modal.Dialog aria-label="Edit Entry">
+              <Modal.CloseTrigger />
+              <Modal.Header>
+                <Modal.Icon className="bg-info/15 text-info">
+                  <Edit3 className="size-5" />
+                </Modal.Icon>
+                <Modal.Heading>Edit Entry</Modal.Heading>
+              </Modal.Header>
+              <Modal.Body className="flex flex-col gap-4 p-6">
+                {entry ? (
+                  <>
+                    <div className="flex flex-col gap-2">
+                      <Label>Key</Label>
+                      <Surface
+                        className="rounded-lg border border-border/70 bg-surface-secondary px-3 py-2 font-mono text-sm text-foreground"
+                        variant="secondary"
+                      >
+                        {entry.key}
+                      </Surface>
+                      <Description className="text-xs text-muted">
+                        Key cannot be changed during editing.
+                      </Description>
+                    </div>
 
-          <div>
-            <label className="block text-sm font-medium text-gray-200 mb-1">Type</label>
-            <div className="flex items-center">
-              <span
-                className={`px-2 py-1 text-xs font-medium rounded text-white ${getTypeColorClass(
-                  entry.type
-                )}`}
-              >
-                {entry.type}
-              </span>
-            </div>
-            {!isTypeSupported ? (
-              <p className="text-xs text-amber-400 mt-1">
-                This storage does not support {entry.type} values.
-              </p>
-            ) : (
-              <p className="text-xs text-gray-400 mt-1">Type cannot be changed during editing</p>
-            )}
-          </div>
+                    <div className="flex flex-col gap-2">
+                      <Label>Type</Label>
+                      <Chip
+                        className="w-fit"
+                        color={typeColorMap[entry.type]}
+                        size="sm"
+                        variant="soft"
+                      >
+                        {entry.type}
+                      </Chip>
+                      <Description
+                        className={`text-xs ${
+                          isTypeSupported ? 'text-muted' : 'text-warning'
+                        }`}
+                      >
+                        {isTypeSupported
+                          ? 'Type cannot be changed during editing.'
+                          : `This storage does not support ${entry.type} values.`}
+                      </Description>
+                    </div>
 
-          <div>
-            <label
-              htmlFor="edit-entry-value"
-              className="block text-sm font-medium text-gray-200 mb-1"
-            >
-              Value
-            </label>
-            {entry.type === 'boolean' ? (
-              <select
-                id="edit-entry-value"
-                value={editValue}
-                onChange={(event) => setEditValue(event.target.value)}
-                className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                autoFocus
-              >
-                <option value="true">true</option>
-                <option value="false">false</option>
-              </select>
-            ) : (
-              <input
-                id="edit-entry-value"
-                type={getInputType(entry.type)}
-                value={editValue}
-                onChange={(event) => setEditValue(event.target.value)}
-                placeholder={getPlaceholder(entry.type)}
-                className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                autoFocus
-              />
-            )}
-            {entry.type === 'buffer' && (
-              <p className="text-xs text-gray-400 mt-1">
-                Enter as JSON array of numbers, e.g., [1, 2, 3, 255]
-              </p>
-            )}
-          </div>
-        </div>
-
-        <div className="flex items-center justify-end gap-2 mt-6">
-          <button
-            onClick={resetForm}
-            className="px-4 py-2 text-sm text-gray-300 hover:text-white hover:bg-gray-700 rounded transition-colors"
-          >
-            Cancel
-          </button>
-          <button
-            onClick={handleEditEntry}
-            disabled={!editValue.trim() || !isTypeSupported}
-            className="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded transition-colors"
-          >
-            Save Changes
-          </button>
-        </div>
-      </div>
+                    {entry.type === 'boolean' ? (
+                      <div className="flex flex-col gap-2">
+                        <Label>Value</Label>
+                        <Select
+                          className="w-full"
+                          onChange={(key) =>
+                            setEditValue(key == null ? '' : String(key))
+                          }
+                          value={editValue || null}
+                          variant="secondary"
+                        >
+                          <Select.Trigger>
+                            <Select.Value />
+                            <Select.Indicator />
+                          </Select.Trigger>
+                          <Select.Popover>
+                            <ListBox aria-label="Entry value">
+                              <ListBox.Item
+                                id="true"
+                                key="true"
+                                textValue="true"
+                              >
+                                true
+                              </ListBox.Item>
+                              <ListBox.Item
+                                id="false"
+                                key="false"
+                                textValue="false"
+                              >
+                                false
+                              </ListBox.Item>
+                            </ListBox>
+                          </Select.Popover>
+                        </Select>
+                      </div>
+                    ) : (
+                      <TextField
+                        className="w-full"
+                        name="edit-entry-value"
+                        type={getInputType(entry.type)}
+                      >
+                        <Label>Value</Label>
+                        <Input
+                          autoFocus
+                          onChange={(event) => setEditValue(event.target.value)}
+                          onKeyDown={handleInputKeyDown}
+                          placeholder={getPlaceholder(entry.type)}
+                          value={editValue}
+                          variant="secondary"
+                        />
+                        {entry.type === 'buffer' ? (
+                          <Description className="text-xs text-muted">
+                            Enter as JSON array of numbers, e.g., [1, 2, 3, 255]
+                          </Description>
+                        ) : null}
+                      </TextField>
+                    )}
+                  </>
+                ) : null}
+              </Modal.Body>
+              <Modal.Footer className="flex justify-end gap-2">
+                <Button onPress={resetForm} variant="secondary">
+                  Cancel
+                </Button>
+                <Button
+                  isDisabled={!editValue.trim() || !isTypeSupported}
+                  onPress={handleEditEntry}
+                  variant="primary"
+                >
+                  Save Changes
+                </Button>
+              </Modal.Footer>
+            </Modal.Dialog>
+          </Modal.Container>
+        </Modal.Backdrop>
+      </Modal>
 
       <ConfirmDialog
+        confirmText="OK"
         isOpen={confirmDialog.isOpen}
-        onClose={() => setConfirmDialog((previous) => ({ ...previous, isOpen: false }))}
+        message={confirmDialog.message}
+        onClose={() =>
+          setConfirmDialog((previous) => ({ ...previous, isOpen: false }))
+        }
         onConfirm={() => {
           if (confirmDialog.onConfirm) {
             confirmDialog.onConfirm();
           }
         }}
         title={confirmDialog.title}
-        message={confirmDialog.message}
         type={confirmDialog.type}
       />
-    </div>
+    </>
   );
 };
diff --git a/packages/storage-plugin/src/ui/editable-table.tsx b/packages/storage-plugin/src/ui/editable-table.tsx
index 8f1f0d50..721ee7c5 100644
--- a/packages/storage-plugin/src/ui/editable-table.tsx
+++ b/packages/storage-plugin/src/ui/editable-table.tsx
@@ -1,15 +1,15 @@
 import { useMemo, useState } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import {
   createColumnHelper,
   flexRender,
   getCoreRowModel,
-  getFilteredRowModel,
   getSortedRowModel,
-  type ColumnDef,
   type SortingState,
   useReactTable,
 } from '@tanstack/react-table';
-import { Edit3, Loader2, Trash2 } from 'lucide-react';
+import { Button, Chip, Table } from '@rozenite/ui';
+import { ChevronUp, Edit3, Inbox, Loader2, Trash2 } from 'lucide-react';
 import type {
   StorageEntry,
   StorageEntryType,
@@ -25,9 +25,68 @@ export type EditableTableProps = {
   onDeleteEntry?: (key: string) => void;
   onRowClick?: (entry: StorageEntry) => void;
   loading?: boolean;
+  searchTerm?: string;
+};
+
+const typeColorMap: Record<
+  string,
+  'success' | 'danger' | 'warning' | 'accent' | 'default'
+> = {
+  string: 'success',
+  number: 'default',
+  boolean: 'warning',
+  buffer: 'accent',
 };
 
 const columnHelper = createColumnHelper<StorageEntry>();
+type TableSortDescriptor = NonNullable<
+  ComponentProps<typeof Table.Content>['sortDescriptor']
+>;
+
+function toSortDescriptor(
+  sorting: SortingState,
+): TableSortDescriptor | undefined {
+  const firstSort = sorting[0];
+
+  if (!firstSort) {
+    return undefined;
+  }
+
+  return {
+    column: firstSort.id,
+    direction: firstSort.desc ? 'descending' : 'ascending',
+  };
+}
+
+function toSortingState(descriptor: TableSortDescriptor): SortingState {
+  return [
+    {
+      desc: descriptor.direction === 'descending',
+      id: String(descriptor.column),
+    },
+  ];
+}
+
+function SortableColumnHeader({
+  children,
+  sortDirection,
+}: {
+  children: ReactNode;
+  sortDirection?: 'ascending' | 'descending';
+}) {
+  return (
+    <span className="flex items-center justify-between gap-2">
+      <span>{children}</span>
+      {sortDirection ? (
+        <ChevronUp
+          className={`size-3 shrink-0 transition-transform duration-100 ease-out ${
+            sortDirection === 'descending' ? 'rotate-180' : ''
+          }`}
+        />
+      ) : null}
+    </span>
+  );
+}
 
 export const EditableTable = ({
   data,
@@ -36,81 +95,81 @@ export const EditableTable = ({
   onDeleteEntry,
   onRowClick,
   loading = false,
+  searchTerm = '',
 }: EditableTableProps) => {
   const [editingEntry, setEditingEntry] = useState<StorageEntry | null>(null);
-  const [showEditDialog, setShowEditDialog] = useState(false);
   const [sorting, setSorting] = useState<SortingState>([]);
   const [deleteConfirm, setDeleteConfirm] = useState<{
     isOpen: boolean;
     entryKey: string;
   }>({ isOpen: false, entryKey: '' });
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const columns = useMemo<ColumnDef<StorageEntry, any>[]>(
+  const columns = useMemo(
     () => [
       columnHelper.accessor('key', {
         header: 'Key',
         enableSorting: true,
         cell: ({ getValue }) => (
-          <div className="text-gray-300 font-mono text-sm">{getValue()}</div>
+          <span className="font-mono text-sm text-foreground">
+            {getValue()}
+          </span>
         ),
       }),
       columnHelper.accessor('type', {
         header: 'Type',
         enableSorting: true,
-        cell: ({ getValue }) => {
-          const type = getValue() as StorageEntryType;
+        cell: (info) => {
+          const type = info.getValue() as StorageEntryType;
+
           return (
-            <div className="flex items-center">
-              <span
-                className={`px-2 py-1 text-xs font-medium rounded text-white ${getTypeColorClass(
-                  type
-                )}`}
-              >
-                {type}
-              </span>
-            </div>
+            <Chip
+              color={typeColorMap[info.getValue()]}
+              size="sm"
+              variant="soft"
+            >
+              {type}
+            </Chip>
           );
         },
       }),
       columnHelper.accessor('value', {
         header: 'Value',
-        cell: ({ row }) => {
-          const entry = row.original;
-          return (
-            <div className="flex items-center justify-between group">
-              <div className="flex-1">{formatValue(entry)}</div>
-              <button
-                onClick={() => handleEdit(entry)}
-                className="opacity-0 group-hover:opacity-100 ml-2 p-1 text-gray-400 hover:text-blue-400 hover:bg-gray-800 rounded transition-all"
-                title="Edit value"
-                aria-label={`Edit value for ${entry.key}`}
-              >
-                <Edit3 className="h-3 w-3" />
-              </button>
-            </div>
-          );
-        },
+        cell: ({ row }) => (
+          <div className="min-w-0">{formatValue(row.original)}</div>
+        ),
       }),
       columnHelper.display({
         id: 'actions',
         header: 'Actions',
         cell: ({ row }) => (
-          <div className="flex items-center gap-2">
-            <button
-              onClick={() => handleDelete(row.original.key)}
-              disabled={!onDeleteEntry}
-              className="p-1 text-gray-400 hover:text-red-400 hover:bg-gray-800 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-              title="Delete entry"
+          <div className="flex items-center gap-1">
+            <Button
+              aria-label={`Edit value for ${row.original.key}`}
+              isDisabled={!onValueChange}
+              isIconOnly
+              onClick={(event) => event.stopPropagation()}
+              onPress={() => handleEdit(row.original)}
+              size="sm"
+              variant="ghost"
+            >
+              <Edit3 className="size-4 text-muted" />
+            </Button>
+            <Button
               aria-label={`Delete entry ${row.original.key}`}
+              isDisabled={!onDeleteEntry}
+              isIconOnly
+              onClick={(event) => event.stopPropagation()}
+              onPress={() => handleDelete(row.original.key)}
+              size="sm"
+              variant="ghost"
             >
-              <Trash2 className="h-4 w-4" />
-            </button>
+              <Trash2 className="size-4 text-danger" />
+            </Button>
           </div>
         ),
       }),
     ],
-    [onDeleteEntry]
+    [onDeleteEntry, onValueChange],
   );
 
   const table = useReactTable({
@@ -119,13 +178,12 @@ export const EditableTable = ({
     state: { sorting },
     onSortingChange: setSorting,
     getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
     getSortedRowModel: getSortedRowModel(),
   });
+  const sortDescriptor = useMemo(() => toSortDescriptor(sorting), [sorting]);
 
   const handleEdit = (entry: StorageEntry) => {
     setEditingEntry(entry);
-    setShowEditDialog(true);
   };
 
   const handleEditEntry = (key: string, newValue: StorageEntryValue) => {
@@ -134,12 +192,10 @@ export const EditableTable = ({
     }
 
     setEditingEntry(null);
-    setShowEditDialog(false);
   };
 
   const handleCloseEditDialog = () => {
     setEditingEntry(null);
-    setShowEditDialog(false);
   };
 
   const handleDelete = (key: string) => {
@@ -158,85 +214,108 @@ export const EditableTable = ({
 
   if (loading) {
     return (
-      <div className="flex flex-col items-center justify-center h-full w-full">
-        <Loader2 className="h-8 w-8 text-blue-400 animate-spin mb-4" />
-        <p className="text-gray-400">Loading entries...</p>
+      <div className="flex min-h-48 w-full flex-col items-center justify-center gap-3 rounded-xl border border-border/70 bg-surface px-4 py-8 text-center text-sm text-muted shadow-sm">
+        <Loader2 className="size-8 animate-spin text-accent" />
+        <p>Loading entries...</p>
       </div>
     );
   }
 
   return (
     <>
-      <table className="w-full self-start">
-        <thead className="bg-gray-800 border-b border-gray-700 sticky top-0 z-10">
-          {table.getHeaderGroups().map((headerGroup) => (
-            <tr key={headerGroup.id}>
-              {headerGroup.headers.map((header) => (
-                <th
+      <Table
+        className="w-full border border-border/70 bg-surface shadow-sm"
+        variant="secondary"
+      >
+        <Table.ScrollContainer className="w-full">
+          <Table.Content
+            aria-label="Storage entries"
+            className="min-w-full"
+            onSortChange={(descriptor) =>
+              setSorting(toSortingState(descriptor))
+            }
+            sortDescriptor={sortDescriptor}
+          >
+            <Table.Header>
+              {table.getHeaderGroups()[0]?.headers.map((header) => (
+                <Table.Column
                   key={header.id}
-                  className={`text-left text-xs font-medium text-gray-400 px-3 py-2 ${
-                    header.column.getCanSort()
-                      ? 'cursor-pointer select-none hover:bg-gray-700'
-                      : ''
-                  }`}
-                  onClick={header.column.getToggleSortingHandler()}
+                  allowsSorting={header.column.getCanSort()}
+                  id={header.id}
+                  isRowHeader={header.id === 'key'}
                 >
-                  <div className="flex items-center gap-1">
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
+                  {({ sortDirection }) =>
+                    header.column.getCanSort() ? (
+                      <SortableColumnHeader sortDirection={sortDirection}>
+                        {flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
-                    {header.column.getCanSort() && (
-                      <span className="text-gray-500">
-                        {{
-                          asc: '↑',
-                          desc: '↓',
-                        }[header.column.getIsSorted() as string] ?? '↕'}
-                      </span>
-                    )}
-                  </div>
-                </th>
+                      </SortableColumnHeader>
+                    ) : (
+                      flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )
+                    )
+                  }
+                </Table.Column>
               ))}
-            </tr>
-          ))}
-        </thead>
-        <tbody>
-          {table.getRowModel().rows.map((row) => (
-            <tr
-              key={row.id}
-              className={`text-sm hover:bg-gray-800 border-b border-gray-800 ${
-                onRowClick ? 'cursor-pointer' : ''
-              }`}
-              onClick={(event) => {
-                const target = event.target as HTMLElement;
-                if (
-                  target.tagName === 'BUTTON' ||
-                  target.closest('button') ||
-                  target.tagName === 'INPUT' ||
-                  target.closest('input')
-                ) {
-                  return;
-                }
-
-                if (onRowClick) {
-                  onRowClick(row.original);
-                }
-              }}
+            </Table.Header>
+            <Table.Body
+              renderEmptyState={() => (
+                <div className="flex h-full w-full flex-col items-center justify-center gap-4 px-4 py-10 text-center">
+                  <Inbox className="size-6 text-muted" />
+                  <span className="text-sm text-muted">
+                    {searchTerm
+                      ? 'No results found'
+                      : 'This storage appears to be empty'}
+                  </span>
+                </div>
+              )}
             >
-              {row.getVisibleCells().map((cell) => (
-                <td key={cell.id} className="px-3 py-2">
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </td>
+              {table.getRowModel().rows.map((row) => (
+                <Table.Row
+                  key={row.original.key}
+                  className={`transition-colors hover:bg-surface-secondary/70 ${
+                    onRowClick ? 'cursor-pointer' : ''
+                  }`}
+                  id={row.original.key}
+                  onClick={(event) => {
+                    const target = event.target as HTMLElement;
+                    if (
+                      target.tagName === 'BUTTON' ||
+                      target.closest('button') ||
+                      target.tagName === 'INPUT' ||
+                      target.closest('input')
+                    ) {
+                      return;
+                    }
+
+                    onRowClick?.(row.original);
+                  }}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <Table.Cell
+                      key={cell.id}
+                      className={
+                        cell.column.id === 'value' ? 'min-w-0' : undefined
+                      }
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </Table.Cell>
+                  ))}
+                </Table.Row>
               ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
+            </Table.Body>
+          </Table.Content>
+        </Table.ScrollContainer>
+      </Table>
 
       <EditEntryDialog
-        isOpen={showEditDialog}
         onClose={handleCloseEditDialog}
         onEditEntry={handleEditEntry}
         entry={editingEntry}
@@ -256,34 +335,22 @@ export const EditableTable = ({
   );
 };
 
-const getTypeColorClass = (type: StorageEntryType) => {
-  if (type === 'string') {
-    return 'bg-green-600';
-  }
-
-  if (type === 'number') {
-    return 'bg-blue-600';
-  }
-
-  if (type === 'boolean') {
-    return 'bg-yellow-600';
-  }
-
-  return 'bg-purple-600';
-};
-
 const formatValue = (entry: StorageEntry) => {
   if (entry.type === 'string') {
-    return <span className="text-green-300 font-mono">"{entry.value}"</span>;
+    return (
+      <span className="font-mono text-sm text-success">"{entry.value}"</span>
+    );
   }
 
   if (entry.type === 'number') {
-    return <span className="text-blue-300 font-mono">{entry.value}</span>;
+    return (
+      <span className="font-mono text-sm text-foreground">{entry.value}</span>
+    );
   }
 
   if (entry.type === 'boolean') {
     return (
-      <span className={`font-mono ${entry.value ? 'text-green-400' : 'text-red-400'}`}>
+      <span className={'font-mono text-sm text-warning'}>
         {entry.value ? 'true' : 'false'}
       </span>
     );
@@ -294,5 +361,5 @@ const formatValue = (entry: StorageEntry) => {
       ? `[${entry.value.slice(0, 5).join(', ')}, ...${entry.value.length - 5} more]`
       : `[${entry.value.join(', ')}]`;
 
-  return <span className="text-purple-300 font-mono">{displayValue}</span>;
+  return <span className="font-mono text-sm text-accent">{displayValue}</span>;
 };
diff --git a/packages/storage-plugin/src/ui/entry-detail-dialog.tsx b/packages/storage-plugin/src/ui/entry-detail-dialog.tsx
index 87a32af3..78e690c7 100644
--- a/packages/storage-plugin/src/ui/entry-detail-dialog.tsx
+++ b/packages/storage-plugin/src/ui/entry-detail-dialog.tsx
@@ -1,220 +1,173 @@
-import { X, Info, Edit3 } from 'lucide-react';
-import { JSONTree } from 'react-json-tree';
-import { StorageEntry } from '../shared/types';
 import { useMemo } from 'react';
+import {
+  Button,
+  Chip,
+  Description,
+  JsonInspector,
+  Label,
+  Modal,
+  parseJsonForInspection,
+  Surface,
+} from '@rozenite/ui';
+import { Edit3, Info } from 'lucide-react';
+import type { StorageEntry, StorageEntryType } from '../shared/types';
 
 export type EntryDetailDialogProps = {
-  isOpen: boolean;
   onClose: () => void;
   onEdit?: (entry: StorageEntry) => void;
   entry: StorageEntry | null;
 };
 
-const jsonTreeTheme = {
-  base00: 'transparent',
-  base01: '#374151', // bg-gray-700
-  base02: '#4b5563', // bg-gray-600
-  base03: '#6b7280', // text-gray-500
-  base04: '#9ca3af', // text-gray-400
-  base05: '#d1d5db', // text-gray-300
-  base06: '#e5e7eb', // text-gray-200
-  base07: '#f9fafb', // text-gray-100
-  base08: '#ef4444', // text-red-500
-  base09: '#f59e0b', // text-yellow-500
-  base0A: '#10b981', // text-green-500
-  base0B: '#3b82f6', // text-blue-500
-  base0C: '#06b6d4', // text-cyan-500
-  base0D: '#8b5cf6', // text-purple-500
-  base0E: '#ec4899', // text-pink-500
-  base0F: '#f97316', // text-orange-500
+const typeColorMap: Record<
+  StorageEntryType,
+  'success' | 'warning' | 'accent' | 'default'
+> = {
+  string: 'success',
+  number: 'default',
+  boolean: 'warning',
+  buffer: 'accent',
 };
 
-const jsonSafeParse = (value: string): Record<string, unknown> | unknown[] | null => {
-  try {
-    const parsed = JSON.parse(value) as unknown;
-
-    if (Array.isArray(parsed)) {
-      return parsed;
-    }
-
-    if (parsed && typeof parsed === 'object') {
-      return parsed as Record<string, unknown>;
-    }
-
-    return null;
-  } catch {
-    return null;
+const formatValue = (entry: StorageEntry) => {
+  if (entry.type === 'string') {
+    return (
+      <span className="break-all font-mono text-sm text-success">
+        "{entry.value}"
+      </span>
+    );
   }
-};
 
-const getTypeColorClass = (type: string) => {
-  switch (type) {
-    case 'string':
-      return 'bg-green-600';
-    case 'number':
-      return 'bg-blue-600';
-    case 'boolean':
-      return 'bg-yellow-600';
-    case 'buffer':
-      return 'bg-purple-600';
-    default:
-      return 'bg-gray-600';
+  if (entry.type === 'number') {
+    return (
+      <span className="font-mono text-sm text-foreground">{entry.value}</span>
+    );
   }
-};
 
-const formatValue = (entry: StorageEntry) => {
-  switch (entry.type) {
-    case 'string':
-      return (
-        <span className="text-green-300 font-mono break-all">
-          "{entry.value as string}"
-        </span>
-      );
-    case 'number':
-      return (
-        <span className="text-blue-300 font-mono">{entry.value as number}</span>
-      );
-    case 'boolean':
-      return (
-        <span
-          className={`font-mono ${
-            entry.value ? 'text-green-400' : 'text-red-400'
-          }`}
-        >
-          {entry.value ? 'true' : 'false'}
-        </span>
-      );
-    case 'buffer': {
-      const bufferArray = entry.value as number[];
-      return (
-        <span className="text-purple-300 font-mono">
-          [{bufferArray.join(', ')}]
-        </span>
-      );
-    }
-    default:
-      return <span className="text-gray-400">Unknown</span>;
+  if (entry.type === 'boolean') {
+    return (
+      <span
+        className={`font-mono text-sm ${
+          entry.value ? 'text-success' : 'text-danger'
+        }`}
+      >
+        {entry.value ? 'true' : 'false'}
+      </span>
+    );
   }
+
+  return (
+    <span className="font-mono text-sm text-accent">
+      [{entry.value.join(', ')}]
+    </span>
+  );
 };
 
 export const EntryDetailDialog = ({
-  isOpen,
   onClose,
   onEdit,
   entry,
 }: EntryDetailDialogProps) => {
   const isStringValue = entry?.type === 'string';
-  const stringValue = isStringValue ? (entry.value as string) : '';
-  const jsonValue = useMemo(
-    () => (isStringValue ? jsonSafeParse(stringValue) : null),
-    [isStringValue, stringValue]
+  const stringValue = isStringValue ? entry.value : '';
+  const jsonParseResult = useMemo(
+    () =>
+      isStringValue
+        ? parseJsonForInspection(stringValue, 'object-or-array')
+        : { ok: false as const, value: null },
+    [isStringValue, stringValue],
   );
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      onClose();
-    }
-  };
-
-  if (!isOpen || !entry) return null;
-
   return (
-    <div
-      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      onClick={onClose}
+    <Modal
+      isOpen={entry !== null}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          onClose();
+        }
+      }}
     >
-      <div
-        className="bg-gray-800 rounded-lg p-6 w-[90vw] max-w-2xl max-h-[90vh] flex flex-col"
-        onClick={(e) => e.stopPropagation()}
-        onKeyDown={handleKeyDown}
-      >
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            <Info className="h-5 w-5 text-blue-400" />
-            <h2 className="text-lg font-semibold text-gray-100">
-              Entry Details
-            </h2>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-1 text-gray-400 hover:text-gray-200 hover:bg-gray-700 rounded transition-colors"
-            title="Close dialog"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-
-        <div className="space-y-4 flex-1 overflow-auto">
-          {/* Key Display */}
-          <div>
-            <label className="block text-sm font-medium text-gray-200 mb-1">
-              Key
-            </label>
-            <div className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 font-mono break-all">
-              {entry.key}
-            </div>
-          </div>
-
-          {/* Type Display */}
-          <div>
-            <label className="block text-sm font-medium text-gray-200 mb-1">
-              Type
-            </label>
-            <div className="flex items-center">
-              <span
-                className={`px-2 py-1 text-xs font-medium rounded text-white ${getTypeColorClass(
-                  entry.type
-                )}`}
-              >
-                {entry.type}
-              </span>
-            </div>
-          </div>
-
-          {/* Value Display */}
-          <div className="flex-1 min-h-0 flex flex-col">
-            <label className="block text-sm font-medium text-gray-200 mb-1">
-              Value
-            </label>
-            <div className="max-h-96 overflow-auto bg-gray-700 border border-gray-600 rounded p-3">
-              {jsonValue ? (
-                <JSONTree
-                  data={jsonValue}
-                  theme={jsonTreeTheme}
-                  invertTheme={false}
-                  shouldExpandNodeInitially={(keyPath) => keyPath.length <= 2}
-                />
-              ) : (
-                <div className="text-sm">{formatValue(entry)}</div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Dialog Actions */}
-        <div className="flex items-center justify-end gap-2 mt-6">
-          {onEdit && (
-            <button
-              onClick={() => {
-                if (entry && onEdit) {
-                  onEdit(entry);
-                }
-              }}
-              className="flex items-center gap-2 px-4 py-2 text-sm bg-gray-700 hover:bg-gray-600 text-white rounded transition-colors"
-            >
-              <Edit3 className="h-4 w-4" />
-              Edit
-            </button>
-          )}
-          <button
-            onClick={onClose}
-            className="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors"
-            autoFocus
+      <Modal.Backdrop variant="blur">
+        <Modal.Container className="w-full max-w-2xl" placement="center">
+          <Modal.Dialog
+            className="flex max-h-[90vh] flex-col"
+            aria-label="Entry Details"
           >
-            Close
-          </button>
-        </div>
-      </div>
-    </div>
+            <Modal.CloseTrigger />
+            <Modal.Header>
+              <Modal.Icon className="bg-info/15 text-info">
+                <Info className="size-5" />
+              </Modal.Icon>
+              <Modal.Heading>Entry Details</Modal.Heading>
+            </Modal.Header>
+            <Modal.Body className="flex min-h-0 flex-1 flex-col gap-4 overflow-auto p-6">
+              {entry ? (
+                <>
+                  <div className="flex flex-col gap-2">
+                    <Label>Key</Label>
+                    <Surface
+                      className="rounded-lg border border-border/70 bg-surface-secondary px-3 py-2 font-mono text-sm text-foreground break-all"
+                      variant="secondary"
+                    >
+                      {entry.key}
+                    </Surface>
+                  </div>
+
+                  <div className="flex flex-col gap-2">
+                    <Label>Type</Label>
+                    <Chip
+                      className="w-fit"
+                      color={typeColorMap[entry.type]}
+                      size="sm"
+                      variant="soft"
+                    >
+                      {entry.type}
+                    </Chip>
+                  </div>
+
+                  <div className="flex min-h-0 flex-1 flex-col gap-2">
+                    <Label>Value</Label>
+                    <Surface
+                      className="max-h-96 overflow-auto rounded-lg border border-border/70 bg-surface-secondary p-3"
+                      variant="secondary"
+                    >
+                      {jsonParseResult.ok ? (
+                        <JsonInspector
+                          copyable
+                          data={jsonParseResult.value}
+                          shouldExpandNodeInitially={(keyPath) =>
+                            keyPath.length <= 2
+                          }
+                          theme="dark"
+                        />
+                      ) : (
+                        <div className="min-h-4 text-sm">
+                          {formatValue(entry)}
+                        </div>
+                      )}
+                    </Surface>
+                    {entry.type === 'string' && jsonParseResult.ok ? (
+                      <Description className="text-xs text-muted">
+                        Displaying parsed JSON from the stored string value.
+                      </Description>
+                    ) : null}
+                  </div>
+                </>
+              ) : null}
+            </Modal.Body>
+            <Modal.Footer className="flex justify-end gap-2">
+              {entry && onEdit ? (
+                <Button onPress={() => onEdit(entry)} variant="secondary">
+                  <Edit3 className="size-4" />
+                  Edit
+                </Button>
+              ) : null}
+              <Button onPress={onClose} variant="primary">
+                Close
+              </Button>
+            </Modal.Footer>
+          </Modal.Dialog>
+        </Modal.Container>
+      </Modal.Backdrop>
+    </Modal>
   );
 };
diff --git a/packages/storage-plugin/src/ui/globals.css b/packages/storage-plugin/src/ui/globals.css
index 2bf47da0..77390a0f 100644
--- a/packages/storage-plugin/src/ui/globals.css
+++ b/packages/storage-plugin/src/ui/globals.css
@@ -1,6 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@import '@rozenite/ui/styles.css';
 
 @layer utilities {
   .text-balance {
@@ -12,87 +11,6 @@
   }
 }
 
-@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% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-  .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%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
 /* Custom scrollbar styles to match plugin theme */
 ::-webkit-scrollbar {
   width: 8px;
diff --git a/packages/storage-plugin/src/ui/panel.tsx b/packages/storage-plugin/src/ui/panel.tsx
index 9425006b..970155d1 100644
--- a/packages/storage-plugin/src/ui/panel.tsx
+++ b/packages/storage-plugin/src/ui/panel.tsx
@@ -1,6 +1,6 @@
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
 import { useEffect, useMemo, useState } from 'react';
-import { Search, Plus } from 'lucide-react';
+import { ListBox, Select, SearchField } from '@rozenite/ui';
 import type {
   StorageDeleteEntryEvent,
   StorageEventMap,
@@ -28,7 +28,9 @@ type StorageSnapshotState = {
   entries: StorageEntry[];
 };
 
-const getEntryTypeFromValue = (value: StorageEntryValue): StorageEntry['type'] => {
+const getEntryTypeFromValue = (
+  value: StorageEntryValue,
+): StorageEntry['type'] => {
   if (typeof value === 'string') {
     return 'string';
   }
@@ -46,18 +48,15 @@ const getEntryTypeFromValue = (value: StorageEntryValue): StorageEntry['type'] =
 
 export default function StoragePanel() {
   const [snapshots, setSnapshots] = useState<Map<string, StorageSnapshotState>>(
-    new Map()
-  );
-  const [selectedStorageViewId, setSelectedStorageViewId] = useState<string | null>(
-    null
+    new Map(),
   );
+  const [selectedStorageViewId, setSelectedStorageViewId] = useState<
+    string | null
+  >(null);
   const [loading, setLoading] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
-  const [showAddDialog, setShowAddDialog] = useState(false);
   const [selectedEntry, setSelectedEntry] = useState<StorageEntry | null>(null);
-  const [showDetailDialog, setShowDetailDialog] = useState(false);
   const [editingEntry, setEditingEntry] = useState<StorageEntry | null>(null);
-  const [showEditDialog, setShowEditDialog] = useState(false);
 
   const client = useRozeniteDevToolsClient<StorageEventMap>({
     pluginId: '@rozenite/storage-plugin',
@@ -71,61 +70,61 @@ export default function StoragePanel() {
     const snapshotSubscription = client.onMessage(
       'snapshot',
       (event: StorageSnapshotEvent) => {
-      const viewId = getStorageViewId(event.target);
-      setSnapshots((previous) => {
-        const next = new Map(previous);
-        next.set(viewId, {
-          target: event.target,
-          adapterName: event.adapterName,
-          storageName: event.storageName,
-          capabilities: event.capabilities,
-          entries: event.entries,
-        });
+        const viewId = getStorageViewId(event.target);
+        setSnapshots((previous) => {
+          const next = new Map(previous);
+          next.set(viewId, {
+            target: event.target,
+            adapterName: event.adapterName,
+            storageName: event.storageName,
+            capabilities: event.capabilities,
+            entries: event.entries,
+          });
 
-        if (previous.size === 0 && !selectedStorageViewId) {
-          setSelectedStorageViewId(viewId);
-        }
+          if (previous.size === 0 && !selectedStorageViewId) {
+            setSelectedStorageViewId(viewId);
+          }
 
-        return next;
-      });
+          return next;
+        });
 
-      if (viewId === selectedStorageViewId) {
-        setLoading(false);
-      }
-      }
+        if (viewId === selectedStorageViewId) {
+          setLoading(false);
+        }
+      },
     );
 
     const setEntrySubscription = client.onMessage(
       'set-entry',
       (event: StorageSetEntryEvent) => {
-      const viewId = getStorageViewId(event.target);
-      setSnapshots((previous) => {
-        const next = new Map(previous);
-        const current = next.get(viewId);
+        const viewId = getStorageViewId(event.target);
+        setSnapshots((previous) => {
+          const next = new Map(previous);
+          const current = next.get(viewId);
 
-        if (!current) {
-          return previous;
-        }
+          if (!current) {
+            return previous;
+          }
 
-        const existingIndex = current.entries.findIndex(
-          (entry) => entry.key === event.entry.key
-        );
+          const existingIndex = current.entries.findIndex(
+            (entry) => entry.key === event.entry.key,
+          );
 
-        const entries =
-          existingIndex >= 0
-            ? current.entries.map((entry) =>
-                entry.key === event.entry.key ? event.entry : entry
-              )
-            : [...current.entries, event.entry];
+          const entries =
+            existingIndex >= 0
+              ? current.entries.map((entry) =>
+                  entry.key === event.entry.key ? event.entry : entry,
+                )
+              : [...current.entries, event.entry];
 
-        next.set(viewId, {
-          ...current,
-          entries,
-        });
+          next.set(viewId, {
+            ...current,
+            entries,
+          });
 
-        return next;
-      });
-      }
+          return next;
+        });
+      },
     );
 
     const deleteEntrySubscription = client.onMessage(
@@ -148,7 +147,7 @@ export default function StoragePanel() {
 
           return next;
         });
-      }
+      },
     );
 
     client.send('get-snapshot', {
@@ -178,7 +177,7 @@ export default function StoragePanel() {
     const separatorIndex = selectedStorageViewId.indexOf(':');
     if (separatorIndex < 0) {
       console.warn(
-        `[Rozenite] Storage Plugin: Invalid storage view id "${selectedStorageViewId}".`
+        `[Rozenite] Storage Plugin: Invalid storage view id "${selectedStorageViewId}".`,
       );
       setLoading(false);
       return;
@@ -198,7 +197,7 @@ export default function StoragePanel() {
   }, [client, selectedStorageViewId, snapshots]);
 
   const selectedStorage = selectedStorageViewId
-    ? snapshots.get(selectedStorageViewId) ?? null
+    ? (snapshots.get(selectedStorageViewId) ?? null)
     : null;
 
   const entries = selectedStorage?.entries ?? [];
@@ -206,15 +205,15 @@ export default function StoragePanel() {
   const filteredEntries = useMemo(
     () =>
       entries.filter((entry) =>
-        entry.key.toLowerCase().includes(searchTerm.toLowerCase())
+        entry.key.toLowerCase().includes(searchTerm.toLowerCase()),
       ),
-    [entries, searchTerm]
+    [entries, searchTerm],
   );
 
   const supportedTypes = selectedStorage?.capabilities.supportedTypes ?? [];
 
   const updateEntriesForSelectedStorage = (
-    mutate: (entries: StorageEntry[]) => StorageEntry[]
+    mutate: (entries: StorageEntry[]) => StorageEntry[],
   ) => {
     if (!selectedStorageViewId) {
       return;
@@ -266,7 +265,7 @@ export default function StoragePanel() {
     });
 
     updateEntriesForSelectedStorage((currentEntries) =>
-      currentEntries.map((entry) => (entry.key === key ? updatedEntry : entry))
+      currentEntries.map((entry) => (entry.key === key ? updatedEntry : entry)),
     );
   };
 
@@ -282,7 +281,7 @@ export default function StoragePanel() {
     });
 
     updateEntriesForSelectedStorage((currentEntries) =>
-      currentEntries.filter((entry) => entry.key !== key)
+      currentEntries.filter((entry) => entry.key !== key),
     );
   };
 
@@ -297,7 +296,10 @@ export default function StoragePanel() {
       entry,
     });
 
-    updateEntriesForSelectedStorage((currentEntries) => [...currentEntries, entry]);
+    updateEntriesForSelectedStorage((currentEntries) => [
+      ...currentEntries,
+      entry,
+    ]);
   };
 
   const storageOptions = [...snapshots.entries()].map(([viewId, snapshot]) => ({
@@ -306,132 +308,114 @@ export default function StoragePanel() {
   }));
 
   return (
-    <div className="h-screen bg-gray-900 text-gray-100 flex flex-col">
-      <div className="flex items-center gap-2 p-2 border-b border-gray-700 bg-gray-800">
+    <div
+      data-theme="dark"
+      className="dark h-screen bg-background text-foreground flex flex-col"
+    >
+      <div className="flex items-center gap-2 p-2">
         <div className="flex items-center gap-2">
-          <span className="text-sm font-medium text-gray-200">Storage</span>
+          <span className="text-sm font-medium text-default-foreground">
+            Storage
+          </span>
         </div>
         <div className="flex-1" />
-        <div className="flex items-center gap-2">
-          <label htmlFor="storage-select" className="text-xs text-gray-400">
-            Storage:
-          </label>
-          <select
-            id="storage-select"
-            value={selectedStorageViewId ?? ''}
-            onChange={(event) => setSelectedStorageViewId(event.target.value)}
-            disabled={snapshots.size === 0}
-            className="h-8 px-2 text-xs bg-gray-700 border border-gray-600 rounded text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
-          >
-            {snapshots.size === 0 ? (
-              <option>No storages found</option>
-            ) : (
-              storageOptions.map((option) => (
-                <option key={option.viewId} value={option.viewId}>
+        <Select
+          placeholder="Select storage"
+          value={selectedStorageViewId ?? ''}
+          onChange={(value) =>
+            setSelectedStorageViewId(
+              typeof value === 'string'
+                ? value
+                : value == null
+                  ? null
+                  : String(value),
+            )
+          }
+          isDisabled={snapshots.size === 0}
+        >
+          <Select.Trigger>
+            <Select.Value />
+            <Select.Indicator />
+          </Select.Trigger>
+          <Select.Popover>
+            <ListBox>
+              {storageOptions.map((option) => (
+                <ListBox.Item
+                  key={option.viewId}
+                  id={option.viewId}
+                  textValue={option.label}
+                >
                   {option.label}
-                </option>
-              ))
-            )}
-          </select>
-        </div>
+                  <ListBox.ItemIndicator />
+                </ListBox.Item>
+              ))}
+            </ListBox>
+          </Select.Popover>
+        </Select>
       </div>
 
-      <div className="flex items-center gap-2 p-2 border-b border-gray-700 bg-gray-800">
-        <button
-          onClick={() => setShowAddDialog(true)}
-          disabled={!selectedStorage}
-          className="flex items-center gap-1 px-3 h-8 text-xs bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded transition-colors"
-          title="Add new entry"
-        >
-          <Plus className="h-3 w-3" />
-          Add Entry
-        </button>
+      <div className="flex items-center gap-2 p-2">
+        <AddEntryDialog
+          isDisabled={!selectedStorage}
+          onAddEntry={handleAddEntry}
+          existingKeys={entries.map((entry) => entry.key)}
+          supportedTypes={supportedTypes}
+        />
         <div className="flex-1">
-          <div className="relative">
-            <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
-            <input
-              type="text"
-              placeholder="Search keys..."
-              value={searchTerm}
-              onChange={(event) => setSearchTerm(event.target.value)}
-              className="h-8 w-full pl-8 pr-3 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
-            />
-          </div>
+          <SearchField
+            name="search"
+            fullWidth
+            value={searchTerm}
+            onChange={setSearchTerm}
+          >
+            <SearchField.Group>
+              <SearchField.SearchIcon />
+              <SearchField.Input placeholder="Search keys..." />
+              <SearchField.ClearButton />
+            </SearchField.Group>
+          </SearchField>
         </div>
-        <div className="flex items-center gap-2 text-xs text-gray-400">
+        <div className="flex items-center gap-2 text-xs text-default-foreground">
           {filteredEntries.length} of {entries.length} entries
         </div>
       </div>
 
       <main className="flex flex-1 min-h-0 overflow-auto">
         {selectedStorage ? (
-          filteredEntries.length === 0 ? (
-            <div className="flex flex-col items-center justify-center h-full text-center w-full">
-              <h3 className="text-lg font-semibold text-gray-200 mb-2">
-                No entries found
-              </h3>
-              <p className="text-gray-400 text-sm">
-                {searchTerm
-                  ? 'Try adjusting your search terms'
-                  : 'This storage appears to be empty'}
-              </p>
-            </div>
-          ) : (
-            <EditableTable
-              data={filteredEntries}
-              supportedTypes={supportedTypes}
-              onValueChange={handleValueChange}
-              onDeleteEntry={handleDeleteEntry}
-              onRowClick={(entry) => {
-                setSelectedEntry(entry);
-                setShowDetailDialog(true);
-              }}
-              loading={loading}
-            />
-          )
+          <EditableTable
+            data={filteredEntries}
+            loading={loading}
+            onDeleteEntry={handleDeleteEntry}
+            onRowClick={setSelectedEntry}
+            onValueChange={handleValueChange}
+            searchTerm={searchTerm}
+            supportedTypes={supportedTypes}
+          />
         ) : (
           <div className="flex flex-col items-center justify-center h-full text-center w-full">
-            <h2 className="text-xl font-semibold text-gray-200 mb-2">
+            <h2 className="text-xl font-semibold text-default-foreground mb-2">
               Welcome to Storage Inspector
             </h2>
-            <p className="text-gray-400 text-sm">
+            <p className="text-default-foreground text-sm">
               Select a storage from the dropdown above to inspect data
             </p>
           </div>
         )}
       </main>
 
-      <AddEntryDialog
-        isOpen={showAddDialog}
-        onClose={() => setShowAddDialog(false)}
-        onAddEntry={handleAddEntry}
-        existingKeys={entries.map((entry) => entry.key)}
-        supportedTypes={supportedTypes}
-      />
-
       <EntryDetailDialog
-        isOpen={showDetailDialog}
-        onClose={() => {
-          setShowDetailDialog(false);
-          setSelectedEntry(null);
-        }}
+        onClose={() => setSelectedEntry(null)}
         onEdit={(entry) => {
-          setShowDetailDialog(false);
+          setSelectedEntry(null);
           setEditingEntry(entry);
-          setShowEditDialog(true);
         }}
         entry={selectedEntry}
       />
 
       <EditEntryDialog
-        isOpen={showEditDialog}
-        onClose={() => {
-          setShowEditDialog(false);
-          setEditingEntry(null);
-        }}
+        onClose={() => setEditingEntry(null)}
         onEditEntry={(key, newValue) => {
           handleValueChange(key, newValue);
-          setShowEditDialog(false);
           setEditingEntry(null);
         }}
         supportedTypes={supportedTypes}
diff --git a/packages/storage-plugin/tailwind.config.ts b/packages/storage-plugin/tailwind.config.ts
deleted file mode 100644
index d756b75a..00000000
--- a/packages/storage-plugin/tailwind.config.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import type { Config } from 'tailwindcss';
-
-const config: Config = {
-  darkMode: ['class'],
-  content: ['./src/ui/**/*.{js,ts,jsx,tsx,mdx}'],
-  theme: {
-    extend: {
-      translate: {
-        '0.75': '0.1875rem',
-      },
-      colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        chart: {
-          '1': 'hsl(var(--chart-1))',
-          '2': 'hsl(var(--chart-2))',
-          '3': 'hsl(var(--chart-3))',
-          '4': 'hsl(var(--chart-4))',
-          '5': 'hsl(var(--chart-5))',
-        },
-        sidebar: {
-          DEFAULT: 'hsl(var(--sidebar-background))',
-          foreground: 'hsl(var(--sidebar-foreground))',
-          primary: 'hsl(var(--sidebar-primary))',
-          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-          accent: 'hsl(var(--sidebar-accent))',
-          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-          border: 'hsl(var(--sidebar-border))',
-          ring: 'hsl(var(--sidebar-ring))',
-        },
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      keyframes: {
-        'accordion-down': {
-          from: {
-            height: '0',
-          },
-          to: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-        },
-        'accordion-up': {
-          from: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-          to: {
-            height: '0',
-          },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-      },
-    },
-  },
-  plugins: [require('tailwindcss-animate')],
-};
-export default config;
diff --git a/packages/storage-plugin/tsconfig.json b/packages/storage-plugin/tsconfig.json
index c1d4d562..f4002786 100644
--- a/packages/storage-plugin/tsconfig.json
+++ b/packages/storage-plugin/tsconfig.json
@@ -13,7 +13,9 @@
     "moduleResolution": "bundler",
     "baseUrl": ".",
     "paths": {
-      "@rozenite/plugin-bridge": ["../plugin-bridge/src/index.ts"]
+      "@rozenite/plugin-bridge": ["../plugin-bridge/src/index.ts"],
+      "@rozenite/ui": ["../ui/src/index.ts"],
+      "@rozenite/ui/*": ["../ui/*"]
     },
     "resolveJsonModule": true,
     "isolatedModules": true,
diff --git a/packages/ui/package.json b/packages/ui/package.json
new file mode 100644
index 00000000..0c1d296b
--- /dev/null
+++ b/packages/ui/package.json
@@ -0,0 +1,76 @@
+{
+  "name": "@rozenite/ui",
+  "version": "1.7.0",
+  "description": "Shared UI primitives and plugin layout components for Rozenite web plugins.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "styles.css"
+  ],
+  "keywords": [
+    "react",
+    "devtools",
+    "ui",
+    "rozenite",
+    "plugins"
+  ],
+  "homepage": "https://github.com/callstackincubator/rozenite#readme",
+  "bugs": {
+    "url": "https://github.com/callstackincubator/rozenite/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/callstackincubator/rozenite.git"
+  },
+  "author": "Szymon Chmal <szymon.chmal@callstack.com>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc -p tsconfig.lib.json --noEmit",
+    "lint": "eslint .",
+    "clean": "rm -rf dist"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    "./styles.css": "./styles.css",
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "dependencies": {
+    "@heroui/react": "^3.0.1",
+    "@heroui/styles": "^3.0.1",
+    "@tanstack/react-table": "^8.21.3",
+    "lucide-react": "^0.263.1",
+    "react-json-tree": "^0.20.0",
+    "react-virtuoso": "^4.14.1",
+    "tailwindcss": "^4.2.2",
+    "tailwind-variants": "^2.0.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "typescript": "~5.9.3",
+    "vite": "catalog:"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}
diff --git a/packages/ui/src/hooks/useCopyToClipboard.ts b/packages/ui/src/hooks/useCopyToClipboard.ts
new file mode 100644
index 00000000..1a6c9e9b
--- /dev/null
+++ b/packages/ui/src/hooks/useCopyToClipboard.ts
@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const copyToClipboard = async (value: string) => {
+  if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(value);
+    return;
+  }
+
+  if (typeof document === 'undefined') {
+    throw new Error('Clipboard is not available in this environment.');
+  }
+
+  const textArea = document.createElement('textarea');
+  textArea.value = value;
+  textArea.setAttribute('readonly', 'true');
+  textArea.style.position = 'absolute';
+  textArea.style.left = '-9999px';
+
+  document.body.appendChild(textArea);
+  textArea.select();
+  document.execCommand('copy');
+  document.body.removeChild(textArea);
+};
+
+export const useCopyToClipboard = (resetDelayMs = 1000) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current !== null) {
+        window.clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const copy = useCallback(
+    async (value: string) => {
+      await copyToClipboard(value);
+      setIsCopied(true);
+
+      if (timeoutRef.current !== null) {
+        window.clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = window.setTimeout(() => {
+        setIsCopied(false);
+      }, resetDelayMs);
+    },
+    [resetDelayMs]
+  );
+
+  return { isCopied, copy };
+};
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
new file mode 100644
index 00000000..4aaa5bf1
--- /dev/null
+++ b/packages/ui/src/index.ts
@@ -0,0 +1,37 @@
+export {
+  Accordion,
+  AlertDialog,
+  Button,
+  Card,
+  Chip,
+  Description,
+  Drawer,
+  FieldError,
+  Header,
+  Input,
+  Label,
+  ListBox,
+  Modal,
+  Select,
+  Separator,
+  SearchField,
+  Surface,
+  Switch,
+  Table,
+  Tabs,
+  TextArea,
+  TextArea as Textarea,
+  TextField,
+  Tooltip,
+  useOverlayState,
+} from '@heroui/react';
+
+export { createColumnHelper } from '@tanstack/react-table';
+export type { ColumnDef, Row, SortingState } from '@tanstack/react-table';
+export { JsonInspector } from './json-inspector';
+export type { JsonInspectorProps, JsonInspectorTheme } from './json-inspector';
+export { parseJsonForInspection } from './utils/json';
+export type {
+  JsonInspectionParseMode,
+  JsonInspectionParseResult,
+} from './utils/json';
diff --git a/packages/ui/src/json-inspector.tsx b/packages/ui/src/json-inspector.tsx
new file mode 100644
index 00000000..62b188c2
--- /dev/null
+++ b/packages/ui/src/json-inspector.tsx
@@ -0,0 +1,99 @@
+import { useMemo } from 'react';
+import { Button } from '@heroui/react';
+import { Check, Copy } from 'lucide-react';
+import { JSONTree, type ShouldExpandNodeInitially } from 'react-json-tree';
+import { useCopyToClipboard } from './hooks/useCopyToClipboard';
+import { cn } from './utils/cn';
+
+export type JsonInspectorTheme = 'dark' | 'light';
+
+export type JsonInspectorProps = {
+  className?: string;
+  collectionLimit?: number;
+  copyable?: boolean;
+  data: unknown;
+  hideRoot?: boolean;
+  shouldExpandNodeInitially?: ShouldExpandNodeInitially;
+  sortObjectKeys?: boolean | ((a: unknown, b: unknown) => number);
+  theme?: JsonInspectorTheme;
+};
+
+const jsonTreeDarkTheme = {
+  base00: 'transparent',
+  base01: 'var(--surface-secondary)',
+  base02: 'var(--surface-tertiary)',
+  base03: 'var(--muted)',
+  base04: 'var(--muted)',
+  base05: 'var(--foreground)',
+  base06: 'var(--foreground)',
+  base07: 'var(--foreground)',
+  base08: 'var(--danger)',
+  base09: 'var(--warning)',
+  base0A: 'var(--success)',
+  base0B: 'var(--accent)',
+  base0C: 'var(--info)',
+  base0D: 'var(--accent)',
+  base0E: 'var(--warning)',
+  base0F: 'var(--danger)',
+};
+
+const jsonTreeLightTheme = {
+  ...jsonTreeDarkTheme,
+  base00: 'transparent',
+};
+
+const stringifyForClipboard = (value: unknown) => {
+  try {
+    return JSON.stringify(value, null, 2) ?? String(value);
+  } catch {
+    return String(value);
+  }
+};
+
+export const JsonInspector = ({
+  className,
+  collectionLimit,
+  copyable = false,
+  data,
+  hideRoot,
+  shouldExpandNodeInitially,
+  sortObjectKeys,
+  theme = 'dark',
+}: JsonInspectorProps) => {
+  const { copy, isCopied } = useCopyToClipboard();
+  const clipboardValue = useMemo(() => stringifyForClipboard(data), [data]);
+
+  return (
+    <div className={cn('relative text-sm', className)}>
+      {copyable ? (
+        <Button
+          aria-label={isCopied ? 'Copied JSON' : 'Copy JSON'}
+          className="absolute right-0 top-0 z-10"
+          isIconOnly
+          onPress={() => {
+            void copy(clipboardValue).catch(() => {});
+          }}
+          size="sm"
+          variant="ghost"
+        >
+          {isCopied ? (
+            <Check className="size-4 text-success" />
+          ) : (
+            <Copy className="size-4 text-muted" />
+          )}
+        </Button>
+      ) : null}
+      <div className={copyable ? 'pr-10' : undefined}>
+        <JSONTree
+          collectionLimit={collectionLimit}
+          data={data}
+          hideRoot={hideRoot}
+          invertTheme={false}
+          shouldExpandNodeInitially={shouldExpandNodeInitially}
+          sortObjectKeys={sortObjectKeys}
+          theme={theme === 'dark' ? jsonTreeDarkTheme : jsonTreeLightTheme}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/packages/ui/src/utils/cn.ts b/packages/ui/src/utils/cn.ts
new file mode 100644
index 00000000..7f3a63bd
--- /dev/null
+++ b/packages/ui/src/utils/cn.ts
@@ -0,0 +1,2 @@
+export const cn = (...classNames: Array<string | false | null | undefined>) =>
+  classNames.filter(Boolean).join(' ');
diff --git a/packages/ui/src/utils/json.ts b/packages/ui/src/utils/json.ts
new file mode 100644
index 00000000..f5d8cde1
--- /dev/null
+++ b/packages/ui/src/utils/json.ts
@@ -0,0 +1,38 @@
+export type JsonInspectionParseMode = 'any' | 'object-or-array';
+
+export type JsonInspectionParseResult =
+  | {
+      ok: true;
+      value: unknown;
+    }
+  | {
+      ok: false;
+      value: null;
+    };
+
+const isInspectableObjectOrArray = (
+  value: unknown,
+): value is Record<string, unknown> | unknown[] => {
+  if (Array.isArray(value)) {
+    return true;
+  }
+
+  return value !== null && typeof value === 'object';
+};
+
+export const parseJsonForInspection = (
+  value: string,
+  mode: JsonInspectionParseMode = 'object-or-array',
+): JsonInspectionParseResult => {
+  try {
+    const parsed = JSON.parse(value) as unknown;
+
+    if (mode === 'object-or-array' && !isInspectableObjectOrArray(parsed)) {
+      return { ok: false, value: null };
+    }
+
+    return { ok: true, value: parsed };
+  } catch {
+    return { ok: false, value: null };
+  }
+};
diff --git a/packages/ui/styles.css b/packages/ui/styles.css
new file mode 100644
index 00000000..04a645ac
--- /dev/null
+++ b/packages/ui/styles.css
@@ -0,0 +1,97 @@
+@import 'tailwindcss';
+@import '@heroui/styles';
+
+@theme inline {
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-muted: var(--muted);
+  --color-overlay: var(--overlay);
+  --color-overlay-foreground: var(--overlay-foreground);
+  --color-segment: var(--segment);
+  --color-segment-foreground: var(--segment-foreground);
+  --color-surface-secondary: var(--surface-secondary);
+  --color-surface-secondary-foreground: var(--surface-secondary-foreground);
+  --color-surface-tertiary: var(--surface-tertiary);
+  --color-surface-tertiary-foreground: var(--surface-tertiary-foreground);
+  --color-field-background: var(--field-background);
+  --color-field-foreground: var(--field-foreground);
+  --color-field-placeholder: var(--field-placeholder);
+}
+
+:root,
+.light,
+.default,
+[data-theme='light'],
+[data-theme='default'] {
+  --accent: oklch(55.59% 0.2717 292.75);
+  --accent-foreground: oklch(99.11% 0 0);
+  --background: oklch(97.02% 0.0011 292.75);
+  --border: oklch(90% 0.0011 292.75);
+  --danger: oklch(65.32% 0.2333 30.41);
+  --danger-foreground: oklch(99.11% 0 0);
+  --default: oklch(94% 0.0011 292.75);
+  --default-foreground: oklch(21.03% 0.0059 292.75);
+  --field-background: oklch(100% 0.0006 292.75);
+  --field-foreground: oklch(21.03% 0.0011 292.75);
+  --field-placeholder: oklch(55.17% 0.0022 292.75);
+  --focus: oklch(55.59% 0.2717 292.75);
+  --foreground: oklch(21.03% 0.0011 292.75);
+  --muted: oklch(55.17% 0.0022 292.75);
+  --overlay: oklch(100% 0.0003 292.75);
+  --overlay-foreground: oklch(21.03% 0.0011 292.75);
+  --scrollbar: oklch(87.1% 0.0011 292.75);
+  --segment: oklch(100% 0.0011 292.75);
+  --segment-foreground: oklch(21.03% 0.0011 292.75);
+  --separator: oklch(92% 0.0011 292.75);
+  --success: oklch(73.29% 0.1939 155.48);
+  --success-foreground: oklch(21.03% 0.0059 155.48);
+  --surface: oklch(100% 0.0006 292.75);
+  --surface-foreground: oklch(21.03% 0.0011 292.75);
+  --surface-secondary: oklch(95.24% 0.0009 292.75);
+  --surface-secondary-foreground: oklch(21.03% 0.0011 292.75);
+  --surface-tertiary: oklch(93.73% 0.0009 292.75);
+  --surface-tertiary-foreground: oklch(21.03% 0.0011 292.75);
+  --warning: oklch(78.19% 0.1588 77);
+  --warning-foreground: oklch(21.03% 0.0059 77);
+
+  --radius: 0.25rem;
+  --field-radius: 0.25rem;
+
+  /*--font-sans: var(--font-figtree);*/
+}
+
+.dark,
+[data-theme='dark'] {
+  color-scheme: dark;
+  /* Theme Colors (Dark Mode) */
+  --accent: oklch(55.59% 0.2717 292.75);
+  --accent-foreground: oklch(99.11% 0 0);
+  --background: oklch(12% 0.0011 292.75);
+  --border: oklch(28% 0.0011 292.75);
+  --danger: oklch(59.4% 0.1971 29.3);
+  --danger-foreground: oklch(99.11% 0 0);
+  --default: oklch(27.4% 0.0011 292.75);
+  --default-foreground: oklch(99.11% 0 0);
+  --field-background: oklch(21.03% 0.0022 292.75);
+  --field-foreground: oklch(99.11% 0.0011 292.75);
+  --field-placeholder: oklch(70.5% 0.0022 292.75);
+  --focus: oklch(55.59% 0.2717 292.75);
+  --foreground: oklch(99.11% 0.0011 292.75);
+  --muted: oklch(70.5% 0.0022 292.75);
+  --overlay: oklch(21.03% 0.0022 292.75);
+  --overlay-foreground: oklch(99.11% 0.0011 292.75);
+  --scrollbar: oklch(70.5% 0.0011 292.75);
+  --segment: oklch(39.64% 0.0011 292.75);
+  --segment-foreground: oklch(99.11% 0.0011 292.75);
+  --separator: oklch(25% 0.0011 292.75);
+  --success: oklch(73.29% 0.1939 155.48);
+  --success-foreground: oklch(21.03% 0.0059 155.48);
+  --surface: oklch(21.03% 0.0022 292.75);
+  --surface-foreground: oklch(99.11% 0.0011 292.75);
+  --surface-secondary: oklch(25.7% 0.0016 292.75);
+  --surface-secondary-foreground: oklch(99.11% 0.0011 292.75);
+  --surface-tertiary: oklch(27.21% 0.0016 292.75);
+  --surface-tertiary-foreground: oklch(99.11% 0.0011 292.75);
+  --warning: oklch(82.03% 0.1391 81.01);
+  --warning-foreground: oklch(21.03% 0.0059 81.01);
+}
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
new file mode 100644
index 00000000..c23e61c8
--- /dev/null
+++ b/packages/ui/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}
diff --git a/packages/ui/tsconfig.lib.json b/packages/ui/tsconfig.lib.json
new file mode 100644
index 00000000..e23a04be
--- /dev/null
+++ b/packages/ui/tsconfig.lib.json
@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "rootDir": "src",
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
+    "emitDeclarationOnly": true,
+    "forceConsistentCasingInFileNames": true,
+    "types": ["node", "vite/client"],
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
new file mode 100644
index 00000000..49c5624c
--- /dev/null
+++ b/packages/ui/vite.config.ts
@@ -0,0 +1,41 @@
+/// <reference types='vitest' />
+import path, { resolve } from 'node:path';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+const external = [
+  'react',
+  'react-dom',
+  'react/jsx-runtime',
+  'tslib',
+  /^@heroui\//,
+  /^@radix-ui\/react-tabs$/,
+  /^@tanstack\/react-table$/,
+  /^lucide-react$/,
+  /^react-json-tree$/,
+  /^react-virtuoso$/,
+  /^tailwind-variants$/,
+];
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/ui',
+  base: './',
+  plugins: [
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+      rollupTypes: true,
+    }),
+  ],
+  build: {
+    ssr: true,
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      external,
+    },
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 06c0a8c1..d9d4f3c7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -652,7 +652,7 @@ importers:
         version: 7.7.0
       vitest:
         specifier: ^4.0.18
-        version: 4.1.0(@types/node@22.17.0)(@vitest/ui@3.2.4(vitest@3.2.4))(jiti@2.6.1)(jsdom@22.1.0)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
+        version: 4.1.0(@types/node@22.17.0)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@22.1.0)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
 
   packages/mmkv-plugin:
     dependencies:
@@ -662,6 +662,9 @@ importers:
       '@rozenite/plugin-bridge':
         specifier: workspace:*
         version: link:../plugin-bridge
+      '@rozenite/ui':
+        specifier: workspace:*
+        version: link:../ui
       nanoevents:
         specifier: ^9.1.0
         version: 9.1.0
@@ -669,6 +672,9 @@ importers:
       '@rozenite/vite-plugin':
         specifier: workspace:*
         version: link:../vite-plugin
+      '@tailwindcss/postcss':
+        specifier: ^4.2.2
+        version: 4.2.2
       '@tanstack/react-table':
         specifier: ^8.21.3
         version: 8.21.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -690,9 +696,6 @@ importers:
       react-dom:
         specifier: 'catalog:'
         version: 19.2.0(react@19.2.0)
-      react-json-tree:
-        specifier: ^0.20.0
-        version: 0.20.0(@types/react@19.2.14)(react@19.2.0)
       react-native:
         specifier: 'catalog:'
         version: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
@@ -714,12 +717,15 @@ importers:
       rozenite:
         specifier: workspace:*
         version: link:../cli
+      tailwind-variants:
+        specifier: ^2.0.0
+        version: 2.1.0(tailwind-merge@3.4.0)(tailwindcss@4.2.2)
       tailwindcss:
-        specifier: ^3.4.17
-        version: 3.4.17
+        specifier: ^4.2.2
+        version: 4.2.2
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.17)
+        version: 1.0.7(tailwindcss@4.2.2)
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
@@ -1310,10 +1316,16 @@ importers:
       '@rozenite/plugin-bridge':
         specifier: workspace:*
         version: link:../plugin-bridge
+      '@rozenite/ui':
+        specifier: workspace:*
+        version: link:../ui
     devDependencies:
       '@rozenite/vite-plugin':
         specifier: workspace:*
         version: link:../vite-plugin
+      '@tailwindcss/postcss':
+        specifier: ^4.2.2
+        version: 4.2.2
       '@tanstack/react-table':
         specifier: ^8.21.3
         version: 8.21.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -1335,9 +1347,6 @@ importers:
       react-dom:
         specifier: 'catalog:'
         version: 19.2.0(react@19.2.0)
-      react-json-tree:
-        specifier: ^0.20.0
-        version: 0.20.0(@types/react@19.2.14)(react@19.2.0)
       react-native:
         specifier: 'catalog:'
         version: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
@@ -1359,12 +1368,15 @@ importers:
       rozenite:
         specifier: workspace:*
         version: link:../cli
+      tailwind-variants:
+        specifier: ^2.0.0
+        version: 2.1.0(tailwind-merge@3.4.0)(tailwindcss@4.2.2)
       tailwindcss:
-        specifier: ^3.4.17
-        version: 3.4.17
+        specifier: ^4.2.2
+        version: 4.2.2
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.17)
+        version: 1.0.7(tailwindcss@4.2.2)
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
@@ -1442,6 +1454,55 @@ importers:
         specifier: ^7.3.1
         version: 7.3.1(@types/node@22.17.0)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
 
+  packages/ui:
+    dependencies:
+      '@heroui/react':
+        specifier: ^3.0.1
+        version: 3.0.1(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(tailwindcss@4.2.2)
+      '@heroui/styles':
+        specifier: ^3.0.1
+        version: 3.0.1(tailwind-merge@3.4.0)(tailwindcss@4.2.2)
+      '@tanstack/react-table':
+        specifier: ^8.21.3
+        version: 8.21.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      lucide-react:
+        specifier: ^0.263.1
+        version: 0.263.1(react@19.2.0)
+      react-json-tree:
+        specifier: ^0.20.0
+        version: 0.20.0(@types/react@19.2.14)(react@19.2.0)
+      react-virtuoso:
+        specifier: ^4.14.1
+        version: 4.18.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      tailwind-variants:
+        specifier: ^2.0.0
+        version: 2.1.0(tailwind-merge@3.4.0)(tailwindcss@4.2.2)
+      tailwindcss:
+        specifier: ^4.2.2
+        version: 4.2.2
+      tslib:
+        specifier: ^2.3.0
+        version: 2.8.1
+    devDependencies:
+      '@types/react':
+        specifier: 'catalog:'
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: 'catalog:'
+        version: 19.1.11(@types/react@19.2.14)
+      react:
+        specifier: 'catalog:'
+        version: 19.2.0
+      react-dom:
+        specifier: 'catalog:'
+        version: 19.2.0(react@19.2.0)
+      typescript:
+        specifier: ~5.9.3
+        version: 5.9.3
+      vite:
+        specifier: ^7.3.1
+        version: 7.3.1(@types/node@22.17.0)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
+
   packages/vite-plugin:
     dependencies:
       '@microsoft/api-extractor':
@@ -1520,10 +1581,6 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
-  '@ampproject/remapping@2.3.0':
-    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
-    engines: {node: '>=6.0.0'}
-
   '@babel/code-frame@7.29.0':
     resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
     engines: {node: '>=6.9.0'}
@@ -1540,10 +1597,6 @@ packages:
     resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/core@7.28.0':
-    resolution: {integrity: sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/core@7.29.0':
     resolution: {integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==}
     engines: {node: '>=6.9.0'}
@@ -1657,10 +1710,6 @@ packages:
     resolution: {integrity: sha512-NFJK2sHUvrjo8wAU/nQTWU890/zB2jj0qBcCbZbbf+005cAsv6tMjXz31fBign6M5ov1o0Bllu+9nbqkfsjjJQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helpers@7.27.6':
-    resolution: {integrity: sha512-muE8Tt8M22638HU31A3CgfSUciwz1fhATfoVai05aPXGor//CdWDCbnlY1yvBPo07njuVOCNGCSp/GTt12lIug==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helpers@7.29.2':
     resolution: {integrity: sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==}
     engines: {node: '>=6.9.0'}
@@ -6255,6 +6304,7 @@ packages:
   '@xmldom/xmldom@0.8.11':
     resolution: {integrity: sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==}
     engines: {node: '>=10.0.0'}
+    deprecated: this version has critical issues, please update to the latest version
 
   '@xtuc/ieee754@1.2.0':
     resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
@@ -6819,9 +6869,6 @@ packages:
   camelize@1.0.1:
     resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
 
-  caniuse-lite@1.0.30001750:
-    resolution: {integrity: sha512-cuom0g5sdX6rw00qOoLNSFCJ9/mYIsuSOA+yzpDw8eopiFqcVwQvZHqov0vmEighRxX++cfC0Vg1G+1Iy/mSpQ==}
-
   caniuse-lite@1.0.30001787:
     resolution: {integrity: sha512-mNcrMN9KeI68u7muanUpEejSLghOKlVhRqS/Za2IeyGllJ9I9otGpR9g3nsw7n4W378TE/LyIteA0+/FOZm4Kg==}
 
@@ -11212,6 +11259,12 @@ packages:
       react: '>=16 || >=17 || >= 18 || >= 19'
       react-dom: '>=16 || >=17 || >= 18 || >=19'
 
+  react-virtuoso@4.18.5:
+    resolution: {integrity: sha512-QDyNjyNEuurZG67SOmzYyxEkQYSyGmAMixOI6M15L/Q4CF39EgG+88y6DgZRo0q7rmy0HPx3Fj90I8/tPdnRCQ==}
+    peerDependencies:
+      react: '>=16 || >=17 || >= 18 || >= 19'
+      react-dom: '>=16 || >=17 || >= 18 || >=19'
+
   react-window@1.8.11:
     resolution: {integrity: sha512-+SRbUVT2scadgFSWx+R1P754xHPEqvcfSfVX10QYg6POOz+WNgkN48pS+BtZNIMGiL1HYrSEiCkwsMS15QogEQ==}
     engines: {node: '>8.0.0'}
@@ -12001,6 +12054,16 @@ packages:
   tailwind-merge@3.4.0:
     resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
 
+  tailwind-variants@2.1.0:
+    resolution: {integrity: sha512-82m0eRex0z6A3GpvfoTCpHr+wWJmbecfVZfP3mqLoDxeya5tN4mYJQZwa5Aw1hRZTedwpu1D2JizYenoEdyD8w==}
+    engines: {node: '>=16.x', pnpm: '>=7.x'}
+    peerDependencies:
+      tailwind-merge: '>=3.0.0'
+      tailwindcss: '*'
+    peerDependenciesMeta:
+      tailwind-merge:
+        optional: true
+
   tailwind-variants@3.2.2:
     resolution: {integrity: sha512-Mi4kHeMTLvKlM98XPnK+7HoBPmf4gygdFmqQPaDivc3DpYS6aIY6KiG/PgThrGvii5YZJqRsPz0aPyhoFzmZgg==}
     engines: {node: '>=16.x', pnpm: '>=7.x'}
@@ -13004,11 +13067,6 @@ snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
 
-  '@ampproject/remapping@2.3.0':
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.12
-      '@jridgewell/trace-mapping': 0.3.29
-
   '@babel/code-frame@7.29.0':
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -13025,26 +13083,6 @@ snapshots:
 
   '@babel/compat-data@7.29.0': {}
 
-  '@babel/core@7.28.0':
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@babel/code-frame': 7.29.0
-      '@babel/generator': 7.29.1
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-module-transforms': 7.27.3(@babel/core@7.28.0)
-      '@babel/helpers': 7.27.6
-      '@babel/parser': 7.29.0
-      '@babel/template': 7.28.6
-      '@babel/traverse': 7.29.0(supports-color@5.5.0)
-      '@babel/types': 7.29.0
-      convert-source-map: 2.0.0
-      debug: 4.4.3(supports-color@5.5.0)
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/core@7.29.0':
     dependencies:
       '@babel/code-frame': 7.29.0
@@ -13081,7 +13119,7 @@ snapshots:
     dependencies:
       '@babel/compat-data': 7.28.0
       '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.26.3
+      browserslist: 4.28.2
       lru-cache: 5.1.1
       semver: 6.3.1
 
@@ -13093,19 +13131,6 @@ snapshots:
       lru-cache: 5.1.1
       semver: 6.3.1
 
-  '@babel/helper-create-class-features-plugin@7.28.6(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-member-expression-to-functions': 7.28.5
-      '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/helper-replace-supers': 7.28.6(@babel/core@7.28.0)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/traverse': 7.29.0(supports-color@5.5.0)
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-create-class-features-plugin@7.28.6(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13119,13 +13144,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-create-regexp-features-plugin@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      regexpu-core: 6.2.0
-      semver: 6.3.1
-
   '@babel/helper-create-regexp-features-plugin@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13133,17 +13151,6 @@ snapshots:
       regexpu-core: 6.2.0
       semver: 6.3.1
 
-  '@babel/helper-define-polyfill-provider@0.6.5(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-plugin-utils': 7.28.6
-      debug: 4.4.3(supports-color@5.5.0)
-      lodash.debounce: 4.0.8
-      resolve: 1.22.10
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-define-polyfill-provider@0.6.5(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13178,15 +13185,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.27.3(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-module-imports': 7.27.1(supports-color@5.5.0)
-      '@babel/helper-validator-identifier': 7.28.5
-      '@babel/traverse': 7.29.0(supports-color@5.5.0)
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-module-transforms@7.27.3(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13213,15 +13211,6 @@ snapshots:
 
   '@babel/helper-plugin-utils@7.28.6': {}
 
-  '@babel/helper-remap-async-to-generator@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-wrap-function': 7.27.1
-      '@babel/traverse': 7.29.0(supports-color@5.5.0)
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-remap-async-to-generator@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13231,15 +13220,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-replace-supers@7.28.6(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-member-expression-to-functions': 7.28.5
-      '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/traverse': 7.29.0(supports-color@5.5.0)
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-replace-supers@7.28.6(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13272,11 +13252,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helpers@7.27.6':
-    dependencies:
-      '@babel/template': 7.28.6
-      '@babel/types': 7.29.0
-
   '@babel/helpers@7.29.2':
     dependencies:
       '@babel/template': 7.28.6
@@ -13286,10 +13261,10 @@ snapshots:
     dependencies:
       '@babel/types': 7.29.0
 
-  '@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.28.0)':
+  '@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.29.0)':
     dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.28.0)
+      '@babel/core': 7.29.0
+      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.0)
       '@babel/helper-plugin-utils': 7.28.6
     transitivePeerDependencies:
       - supports-color
@@ -13303,28 +13278,23 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-proposal-export-default-from@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-
   '@babel/plugin-proposal-export-default-from@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.28.0)':
+  '@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.29.0)':
     dependencies:
-      '@babel/core': 7.28.0
+      '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.28.0)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.29.0)
 
-  '@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.28.0)':
+  '@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.29.0)':
     dependencies:
-      '@babel/core': 7.28.0
+      '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.28.0)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.29.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -13353,31 +13323,16 @@ snapshots:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-
   '@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-export-default-from@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-
   '@babel/plugin-syntax-export-default-from@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-flow@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-
   '@babel/plugin-syntax-flow@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13398,11 +13353,6 @@ snapshots:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-
   '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13413,11 +13363,6 @@ snapshots:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-
   '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13438,11 +13383,6 @@ snapshots:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-
   '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13458,35 +13398,16 @@ snapshots:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-
   '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-arrow-functions@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-
   '@babel/plugin-transform-arrow-functions@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-async-generator-functions@7.28.0(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.28.0)
-      '@babel/traverse': 7.29.0(supports-color@5.5.0)
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-transform-async-generator-functions@7.28.0(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13496,15 +13417,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-async-to-generator@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-module-imports': 7.27.1(supports-color@5.5.0)
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.28.0)
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-transform-async-to-generator@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13514,24 +13426,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-block-scoping@7.28.0(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-
   '@babel/plugin-transform-block-scoping@7.28.0(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-class-properties@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.28.6
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-transform-class-properties@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13548,18 +13447,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-classes@7.28.4(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-globals': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-replace-supers': 7.28.6(@babel/core@7.28.0)
-      '@babel/traverse': 7.29.0(supports-color@5.5.0)
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-transform-classes@7.28.4(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13572,26 +13459,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-computed-properties@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/template': 7.28.6
-
   '@babel/plugin-transform-computed-properties@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
       '@babel/template': 7.28.6
 
-  '@babel/plugin-transform-destructuring@7.28.0(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/traverse': 7.29.0(supports-color@5.5.0)
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-transform-destructuring@7.28.0(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13605,26 +13478,12 @@ snapshots:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-flow-strip-types@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.28.0)
-
   '@babel/plugin-transform-flow-strip-types@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
       '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.29.0)
 
-  '@babel/plugin-transform-for-of@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-transform-for-of@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13633,15 +13492,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-function-name@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/traverse': 7.29.0(supports-color@5.5.0)
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-transform-function-name@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13651,34 +13501,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-literals@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-
   '@babel/plugin-transform-literals@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-logical-assignment-operators@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-
   '@babel/plugin-transform-logical-assignment-operators@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-modules-commonjs@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-module-transforms': 7.27.3(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.28.6
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-transform-modules-commonjs@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13687,49 +13519,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-named-capturing-groups-regex@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.28.6
-
   '@babel/plugin-transform-named-capturing-groups-regex@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.29.0)
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-nullish-coalescing-operator@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-
   '@babel/plugin-transform-nullish-coalescing-operator@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-numeric-separator@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-
   '@babel/plugin-transform-numeric-separator@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-object-rest-spread@7.28.0(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/plugin-transform-destructuring': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.0)
-      '@babel/traverse': 7.29.0(supports-color@5.5.0)
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-transform-object-rest-spread@7.28.0(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13741,24 +13546,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-optional-catch-binding@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-
   '@babel/plugin-transform-optional-catch-binding@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-optional-chaining@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-transform-optional-chaining@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13767,24 +13559,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-parameters@7.27.7(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-
   '@babel/plugin-transform-parameters@7.27.7(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-private-methods@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.28.6
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-transform-private-methods@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13793,15 +13572,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-private-property-in-object@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.28.6
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-transform-private-property-in-object@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13811,11 +13581,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-react-display-name@7.28.0(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-
   '@babel/plugin-transform-react-display-name@7.28.0(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13828,37 +13593,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-
   '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-
   '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-react-jsx@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-module-imports': 7.27.1(supports-color@5.5.0)
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.0)
-      '@babel/types': 7.29.0
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-transform-react-jsx@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13876,28 +13620,11 @@ snapshots:
       '@babel/helper-annotate-as-pure': 7.27.3
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-regenerator@7.28.4(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-
   '@babel/plugin-transform-regenerator@7.28.4(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-runtime@7.28.0(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-module-imports': 7.27.1(supports-color@5.5.0)
-      '@babel/helper-plugin-utils': 7.28.6
-      babel-plugin-polyfill-corejs2: 0.4.14(@babel/core@7.28.0)
-      babel-plugin-polyfill-corejs3: 0.13.0(@babel/core@7.28.0)
-      babel-plugin-polyfill-regenerator: 0.6.5(@babel/core@7.28.0)
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-transform-runtime@7.28.0(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13910,24 +13637,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-shorthand-properties@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-
   '@babel/plugin-transform-shorthand-properties@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-spread@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-transform-spread@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13936,11 +13650,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-sticky-regex@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-
   '@babel/plugin-transform-sticky-regex@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13951,17 +13660,6 @@ snapshots:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-typescript@7.28.0(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.0)
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-transform-typescript@7.28.0(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13973,24 +13671,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-unicode-regex@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.28.6
-
   '@babel/plugin-transform-unicode-regex@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.29.0)
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/preset-flow@7.27.1(@babel/core@7.28.0)':
+  '@babel/preset-flow@7.27.1(@babel/core@7.29.0)':
     dependencies:
-      '@babel/core': 7.28.0
+      '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
       '@babel/helper-validator-option': 7.27.1
-      '@babel/plugin-transform-flow-strip-types': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-flow-strip-types': 7.27.1(@babel/core@7.29.0)
 
   '@babel/preset-react@7.28.5(@babel/core@7.29.0)':
     dependencies:
@@ -14004,17 +13696,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/preset-typescript@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-validator-option': 7.27.1
-      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.0)
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/preset-typescript@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -14026,9 +13707,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/register@7.27.1(@babel/core@7.28.0)':
+  '@babel/register@7.27.1(@babel/core@7.29.0)':
     dependencies:
-      '@babel/core': 7.28.0
+      '@babel/core': 7.29.0
       clone-deep: 4.0.1
       find-cache-dir: 2.1.0
       make-dir: 2.1.0
@@ -17508,50 +17189,50 @@ snapshots:
 
   '@react-native/babel-preset@0.76.0':
     dependencies:
-      '@babel/core': 7.28.0
-      '@babel/plugin-proposal-export-default-from': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.28.0)
-      '@babel/plugin-syntax-export-default-from': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.28.0)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.28.0)
-      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-async-generator-functions': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-async-to-generator': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-block-scoping': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-class-properties': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-classes': 7.28.4(@babel/core@7.28.0)
-      '@babel/plugin-transform-computed-properties': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-destructuring': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-flow-strip-types': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-function-name': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-literals': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-logical-assignment-operators': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-named-capturing-groups-regex': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-numeric-separator': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-object-rest-spread': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-optional-catch-binding': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-optional-chaining': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.0)
-      '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-private-property-in-object': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-react-display-name': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-regenerator': 7.28.4(@babel/core@7.28.0)
-      '@babel/plugin-transform-runtime': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-spread': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-sticky-regex': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.28.0)
+      '@babel/core': 7.29.0
+      '@babel/plugin-proposal-export-default-from': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.29.0)
+      '@babel/plugin-syntax-export-default-from': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.29.0)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.29.0)
+      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-async-generator-functions': 7.28.0(@babel/core@7.29.0)
+      '@babel/plugin-transform-async-to-generator': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-block-scoping': 7.28.0(@babel/core@7.29.0)
+      '@babel/plugin-transform-class-properties': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-classes': 7.28.4(@babel/core@7.29.0)
+      '@babel/plugin-transform-computed-properties': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-destructuring': 7.28.0(@babel/core@7.29.0)
+      '@babel/plugin-transform-flow-strip-types': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-function-name': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-literals': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-logical-assignment-operators': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-numeric-separator': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-object-rest-spread': 7.28.0(@babel/core@7.29.0)
+      '@babel/plugin-transform-optional-catch-binding': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-optional-chaining': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.29.0)
+      '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-private-property-in-object': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-react-display-name': 7.28.0(@babel/core@7.29.0)
+      '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-regenerator': 7.28.4(@babel/core@7.29.0)
+      '@babel/plugin-transform-runtime': 7.28.0(@babel/core@7.29.0)
+      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-spread': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-sticky-regex': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.29.0)
+      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.29.0)
       '@babel/template': 7.28.6
       '@react-native/babel-plugin-codegen': 0.76.0
       babel-plugin-syntax-hermes-parser: 0.23.1
-      babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.28.0)
+      babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.29.0)
       react-refresh: 0.14.2
     transitivePeerDependencies:
       - '@babel/preset-env'
@@ -17559,50 +17240,50 @@ snapshots:
 
   '@react-native/babel-preset@0.76.9':
     dependencies:
-      '@babel/core': 7.28.0
-      '@babel/plugin-proposal-export-default-from': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.28.0)
-      '@babel/plugin-syntax-export-default-from': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.28.0)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.28.0)
-      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-async-generator-functions': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-async-to-generator': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-block-scoping': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-class-properties': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-classes': 7.28.4(@babel/core@7.28.0)
-      '@babel/plugin-transform-computed-properties': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-destructuring': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-flow-strip-types': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-function-name': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-literals': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-logical-assignment-operators': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-named-capturing-groups-regex': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-numeric-separator': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-object-rest-spread': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-optional-catch-binding': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-optional-chaining': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.0)
-      '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-private-property-in-object': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-react-display-name': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-regenerator': 7.28.4(@babel/core@7.28.0)
-      '@babel/plugin-transform-runtime': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-spread': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-sticky-regex': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.28.0)
+      '@babel/core': 7.29.0
+      '@babel/plugin-proposal-export-default-from': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.29.0)
+      '@babel/plugin-syntax-export-default-from': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.29.0)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.29.0)
+      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-async-generator-functions': 7.28.0(@babel/core@7.29.0)
+      '@babel/plugin-transform-async-to-generator': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-block-scoping': 7.28.0(@babel/core@7.29.0)
+      '@babel/plugin-transform-class-properties': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-classes': 7.28.4(@babel/core@7.29.0)
+      '@babel/plugin-transform-computed-properties': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-destructuring': 7.28.0(@babel/core@7.29.0)
+      '@babel/plugin-transform-flow-strip-types': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-function-name': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-literals': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-logical-assignment-operators': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-numeric-separator': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-object-rest-spread': 7.28.0(@babel/core@7.29.0)
+      '@babel/plugin-transform-optional-catch-binding': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-optional-chaining': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.29.0)
+      '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-private-property-in-object': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-react-display-name': 7.28.0(@babel/core@7.29.0)
+      '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-regenerator': 7.28.4(@babel/core@7.29.0)
+      '@babel/plugin-transform-runtime': 7.28.0(@babel/core@7.29.0)
+      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-spread': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-sticky-regex': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.29.0)
+      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.29.0)
       '@babel/template': 7.28.6
       '@react-native/babel-plugin-codegen': 0.76.9
       babel-plugin-syntax-hermes-parser: 0.25.1
-      babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.28.0)
+      babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.29.0)
       react-refresh: 0.14.2
     transitivePeerDependencies:
       - '@babel/preset-env'
@@ -17835,7 +17516,7 @@ snapshots:
 
   '@react-native/metro-babel-transformer@0.76.0':
     dependencies:
-      '@babel/core': 7.28.0
+      '@babel/core': 7.29.0
       '@react-native/babel-preset': 0.76.0
       hermes-parser: 0.23.1
       nullthrows: 1.1.1
@@ -17845,7 +17526,7 @@ snapshots:
 
   '@react-native/metro-babel-transformer@0.76.9':
     dependencies:
-      '@babel/core': 7.28.0
+      '@babel/core': 7.29.0
       '@react-native/babel-preset': 0.76.9
       hermes-parser: 0.23.1
       nullthrows: 1.1.1
@@ -19907,9 +19588,9 @@ snapshots:
 
   '@vitejs/plugin-react@4.6.0(vite@7.3.1(@types/node@18.16.9)(jiti@2.4.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))':
     dependencies:
-      '@babel/core': 7.28.0
-      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.28.0)
+      '@babel/core': 7.29.0
+      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.29.0)
       '@rolldown/pluginutils': 1.0.0-beta.19
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
@@ -19919,9 +19600,9 @@ snapshots:
 
   '@vitejs/plugin-react@4.6.0(vite@7.3.1(@types/node@22.17.0)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))':
     dependencies:
-      '@babel/core': 7.28.0
-      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.28.0)
+      '@babel/core': 7.29.0
+      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.29.0)
       '@rolldown/pluginutils': 1.0.0-beta.19
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
@@ -20032,7 +19713,7 @@ snapshots:
       sirv: 3.0.2
       tinyglobby: 0.2.14
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@18.16.9)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@22.1.0)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.17.0)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@22.1.0)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
 
   '@vitest/utils@3.2.4':
     dependencies:
@@ -20445,8 +20126,8 @@ snapshots:
 
   autoprefixer@10.4.21(postcss@8.5.6):
     dependencies:
-      browserslist: 4.26.3
-      caniuse-lite: 1.0.30001750
+      browserslist: 4.28.2
+      caniuse-lite: 1.0.30001787
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.1.1
@@ -20464,9 +20145,9 @@ snapshots:
 
   await-lock@2.2.2: {}
 
-  babel-core@7.0.0-bridge.0(@babel/core@7.28.0):
+  babel-core@7.0.0-bridge.0(@babel/core@7.29.0):
     dependencies:
-      '@babel/core': 7.28.0
+      '@babel/core': 7.29.0
 
   babel-jest@29.7.0(@babel/core@7.29.0):
     dependencies:
@@ -20528,15 +20209,6 @@ snapshots:
       cosmiconfig: 7.1.0
       resolve: 1.22.10
 
-  babel-plugin-polyfill-corejs2@0.4.14(@babel/core@7.28.0):
-    dependencies:
-      '@babel/compat-data': 7.28.0
-      '@babel/core': 7.28.0
-      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.0)
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
   babel-plugin-polyfill-corejs2@0.4.14(@babel/core@7.29.0):
     dependencies:
       '@babel/compat-data': 7.28.0
@@ -20546,14 +20218,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-corejs3@0.13.0(@babel/core@7.28.0):
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.0)
-      core-js-compat: 3.43.0
-    transitivePeerDependencies:
-      - supports-color
-
   babel-plugin-polyfill-corejs3@0.13.0(@babel/core@7.29.0):
     dependencies:
       '@babel/core': 7.29.0
@@ -20562,13 +20226,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-regenerator@0.6.5(@babel/core@7.28.0):
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.0)
-    transitivePeerDependencies:
-      - supports-color
-
   babel-plugin-polyfill-regenerator@0.6.5(@babel/core@7.29.0):
     dependencies:
       '@babel/core': 7.29.0
@@ -20614,12 +20271,6 @@ snapshots:
     dependencies:
       hermes-parser: 0.33.3
 
-  babel-plugin-transform-flow-enums@0.0.2(@babel/core@7.28.0):
-    dependencies:
-      '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.28.0)
-    transitivePeerDependencies:
-      - '@babel/core'
-
   babel-plugin-transform-flow-enums@0.0.2(@babel/core@7.29.0):
     dependencies:
       '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.29.0)
@@ -20787,7 +20438,7 @@ snapshots:
   browserslist@4.26.3:
     dependencies:
       baseline-browser-mapping: 2.8.16
-      caniuse-lite: 1.0.30001750
+      caniuse-lite: 1.0.30001787
       electron-to-chromium: 1.5.234
       node-releases: 2.0.23
       update-browserslist-db: 1.1.3(browserslist@4.26.3)
@@ -20870,8 +20521,6 @@ snapshots:
 
   camelize@1.0.1: {}
 
-  caniuse-lite@1.0.30001750: {}
-
   caniuse-lite@1.0.30001787: {}
 
   ccount@2.0.1: {}
@@ -21187,7 +20836,7 @@ snapshots:
 
   core-js-compat@3.43.0:
     dependencies:
-      browserslist: 4.26.3
+      browserslist: 4.28.2
 
   core-util-is@1.0.3: {}
 
@@ -23819,16 +23468,16 @@ snapshots:
 
   jscodeshift@0.14.0:
     dependencies:
-      '@babel/core': 7.28.0
+      '@babel/core': 7.29.0
       '@babel/parser': 7.29.0
-      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.28.0)
-      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.28.0)
-      '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.0)
-      '@babel/preset-flow': 7.27.1(@babel/core@7.28.0)
-      '@babel/preset-typescript': 7.27.1(@babel/core@7.28.0)
-      '@babel/register': 7.27.1(@babel/core@7.28.0)
-      babel-core: 7.0.0-bridge.0(@babel/core@7.28.0)
+      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.29.0)
+      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.29.0)
+      '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.29.0)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.29.0)
+      '@babel/preset-flow': 7.27.1(@babel/core@7.29.0)
+      '@babel/preset-typescript': 7.27.1(@babel/core@7.29.0)
+      '@babel/register': 7.27.1(@babel/core@7.29.0)
+      babel-core: 7.0.0-bridge.0(@babel/core@7.29.0)
       chalk: 4.1.2
       flow-parser: 0.274.2
       graceful-fs: 4.2.11
@@ -24489,7 +24138,7 @@ snapshots:
 
   metro-babel-transformer@0.81.5:
     dependencies:
-      '@babel/core': 7.28.0
+      '@babel/core': 7.29.0
       flow-enums-runtime: 0.0.6
       hermes-parser: 0.25.1
       nullthrows: 1.1.1
@@ -24498,7 +24147,7 @@ snapshots:
 
   metro-babel-transformer@0.82.5:
     dependencies:
-      '@babel/core': 7.28.0
+      '@babel/core': 7.29.0
       flow-enums-runtime: 0.0.6
       hermes-parser: 0.29.1
       nullthrows: 1.1.1
@@ -24777,7 +24426,7 @@ snapshots:
 
   metro-transform-plugins@0.81.5:
     dependencies:
-      '@babel/core': 7.28.0
+      '@babel/core': 7.29.0
       '@babel/generator': 7.29.1
       '@babel/template': 7.28.6
       '@babel/traverse': 7.29.0(supports-color@5.5.0)
@@ -24788,7 +24437,7 @@ snapshots:
 
   metro-transform-plugins@0.82.5:
     dependencies:
-      '@babel/core': 7.28.0
+      '@babel/core': 7.29.0
       '@babel/generator': 7.29.1
       '@babel/template': 7.28.6
       '@babel/traverse': 7.29.0(supports-color@5.5.0)
@@ -24810,7 +24459,7 @@ snapshots:
 
   metro-transform-worker@0.81.5:
     dependencies:
-      '@babel/core': 7.28.0
+      '@babel/core': 7.29.0
       '@babel/generator': 7.29.1
       '@babel/parser': 7.29.0
       '@babel/types': 7.29.0
@@ -24830,7 +24479,7 @@ snapshots:
 
   metro-transform-worker@0.82.5:
     dependencies:
-      '@babel/core': 7.28.0
+      '@babel/core': 7.29.0
       '@babel/generator': 7.29.1
       '@babel/parser': 7.29.0
       '@babel/types': 7.29.0
@@ -24871,7 +24520,7 @@ snapshots:
   metro@0.81.5:
     dependencies:
       '@babel/code-frame': 7.29.0
-      '@babel/core': 7.28.0
+      '@babel/core': 7.29.0
       '@babel/generator': 7.29.1
       '@babel/parser': 7.29.0
       '@babel/template': 7.28.6
@@ -24918,7 +24567,7 @@ snapshots:
   metro@0.82.5:
     dependencies:
       '@babel/code-frame': 7.29.0
-      '@babel/core': 7.28.0
+      '@babel/core': 7.29.0
       '@babel/generator': 7.29.1
       '@babel/parser': 7.29.0
       '@babel/template': 7.28.6
@@ -26698,6 +26347,11 @@ snapshots:
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
 
+  react-virtuoso@4.18.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
   react-window@1.8.11(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
     dependencies:
       '@babel/runtime': 7.26.10
@@ -27655,6 +27309,12 @@ snapshots:
 
   tailwind-merge@3.4.0: {}
 
+  tailwind-variants@2.1.0(tailwind-merge@3.4.0)(tailwindcss@4.2.2):
+    dependencies:
+      tailwindcss: 4.2.2
+    optionalDependencies:
+      tailwind-merge: 3.4.0
+
   tailwind-variants@3.2.2(tailwind-merge@3.4.0)(tailwindcss@4.2.2):
     dependencies:
       tailwindcss: 4.2.2
@@ -27665,6 +27325,10 @@ snapshots:
     dependencies:
       tailwindcss: 3.4.17
 
+  tailwindcss-animate@1.0.7(tailwindcss@4.2.2):
+    dependencies:
+      tailwindcss: 4.2.2
+
   tailwindcss@3.4.17:
     dependencies:
       '@alloc/quick-lru': 5.2.0
@@ -28431,7 +28095,7 @@ snapshots:
       - tsx
       - yaml
 
-  vitest@4.1.0(@types/node@22.17.0)(@vitest/ui@3.2.4(vitest@3.2.4))(jiti@2.6.1)(jsdom@22.1.0)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1):
+  vitest@4.1.0(@types/node@22.17.0)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@22.1.0)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1):
     dependencies:
       '@vitest/expect': 4.1.0
       '@vitest/mocker': 4.1.0(vite@7.3.1(@types/node@22.17.0)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 80848320..cae74a38 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -1,6 +1,11 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
     "composite": true,
+    "paths": {
+      "@rozenite/ui": ["packages/ui/src/index.ts"],
+      "@rozenite/ui/*": ["packages/ui/*"]
+    },
     "declarationMap": true,
     "emitDeclarationOnly": true,
     "importHelpers": true,

From 591bbfca1d39fcf469515a991cf4b8ee9ed65097 Mon Sep 17 00:00:00 2001
From: Anatoly Belobrovik <anatoly.belobrovik@callstack.com>
Date: Thu, 30 Apr 2026 16:40:16 +0200
Subject: [PATCH 2/3] feat: unify ui

---
 packages/controls-plugin/package.json         |   6 +-
 packages/controls-plugin/postcss.config.js    |   3 +-
 packages/controls-plugin/src/ui/globals.css   |  88 +---
 packages/controls-plugin/src/ui/panel.tsx     | 247 ++++++---
 packages/controls-plugin/tailwind.config.ts   |  53 --
 packages/file-system-plugin/package.json      |  21 +-
 packages/file-system-plugin/postcss.config.js |   3 +-
 .../file-system-plugin/src/file-system.tsx    | 330 +++++++-----
 packages/file-system-plugin/src/types.ts      |   6 -
 .../src/ui/ConnectingScreen.tsx               |  53 +-
 .../file-system-plugin/src/ui/DetailLine.tsx  |  37 --
 .../file-system-plugin/src/ui/DetailPanel.tsx | 380 +++++++-------
 .../src/ui/FileEntryRow.tsx                   |  86 ---
 .../src/ui/FileEntryTable.tsx                 | 319 +++++++++++
 .../file-system-plugin/src/ui/PathDisplay.tsx | 190 ++-----
 packages/file-system-plugin/src/ui/TopBar.tsx | 244 ---------
 .../file-system-plugin/src/ui/globals.css     |   2 +
 .../file-system-plugin/tailwind.config.ts     |  94 ----
 packages/file-system-plugin/tsconfig.json     |   6 +
 .../mmkv-plugin/src/ui/editable-table.tsx     |  20 +-
 packages/mmkv-plugin/src/ui/globals.css       |  39 --
 packages/mmkv-plugin/src/ui/panel.tsx         |  98 ++--
 packages/overlay-plugin/package.json          |   8 +-
 packages/overlay-plugin/postcss.config.js     |   4 +-
 .../src/ui/components/GridSettings.tsx        | 326 ++++++++----
 .../src/ui/components/Header.tsx              |  14 -
 .../src/ui/components/ImageSettings.tsx       | 402 +++++++++-----
 .../overlay-plugin/src/ui/components/index.ts |   1 -
 packages/overlay-plugin/src/ui/globals.css    |  98 +---
 packages/overlay-plugin/src/ui/panel.tsx      |  57 +-
 packages/overlay-plugin/src/ui/styles.css     | 330 ------------
 packages/overlay-plugin/tailwind.config.ts    |  95 ----
 .../performance-monitor-plugin/package.json   |  12 +-
 .../postcss.config.js                         |   5 +
 .../performance-monitor-plugin/src/ui/App.css |  97 ----
 .../performance-monitor-plugin/src/ui/App.tsx | 263 ++++------
 .../src/ui/components/DataTable.tsx           | 223 +++++---
 .../src/ui/components/DetailsDisplay.tsx      |  93 +++-
 .../src/ui/components/DetailsSidebar.tsx      | 103 ++--
 .../src/ui/components/ExportModal.tsx         | 338 ++++++------
 .../src/ui/components/JsonTree.tsx            |  35 --
 .../src/ui/components/MarkDetails.tsx         |  52 +-
 .../src/ui/components/MarksTable.tsx          |  35 +-
 .../src/ui/components/MeasureDetails.tsx      |  77 +--
 .../src/ui/components/MeasuresTable.tsx       |  61 +--
 .../src/ui/components/MetricDetails.tsx       |  81 ++-
 .../src/ui/components/MetricsTable.tsx        |  52 +-
 .../src/ui/components/SessionDuration.tsx     |  55 +-
 .../src/ui/globals.css                        |   2 +
 .../src/ui/utils.ts                           |  94 ++++
 packages/react-navigation-plugin/package.json |   7 +-
 .../react-navigation-plugin/postcss.config.js |   3 +-
 .../components/ActionDetailPanel.tsx          |  89 ++--
 .../src/devtools-ui/components/ActionItem.tsx | 107 ++--
 .../src/devtools-ui/components/ActionList.tsx |  13 +-
 .../devtools-ui/components/ActionSidebar.tsx  |  67 +--
 .../devtools-ui/components/ActionTimeline.tsx |  41 +-
 .../devtools-ui/components/LinkingTester.tsx  |  69 ++-
 .../components/NavigationTree/Leaf.tsx        |  32 +-
 .../NavigationTree/NavigationNode.tsx         |  53 +-
 .../NavigationTree/NavigationTree.tsx         |  22 +-
 .../NavigationTree/navigationTreeColors.ts    | 133 +++--
 .../src/devtools-ui/components/Tabs.tsx       |  41 --
 .../src/devtools-ui/globals.css               | 125 +----
 .../src/devtools-ui/index.tsx                 |  63 ++-
 .../tailwind.config.ts                        | 103 ----
 .../storage-plugin/src/ui/editable-table.tsx  |  20 +-
 packages/storage-plugin/src/ui/globals.css    |  39 --
 packages/storage-plugin/src/ui/panel.tsx      | 100 ++--
 packages/ui/src/index.ts                      |  14 +
 packages/ui/src/plugin-header.tsx             | 114 ++++
 packages/ui/src/plugin-theme.tsx              | 236 +++++++++
 packages/ui/styles.css                        |  56 +-
 pnpm-lock.yaml                                | 494 ++++--------------
 74 files changed, 3427 insertions(+), 3952 deletions(-)
 delete mode 100644 packages/controls-plugin/tailwind.config.ts
 delete mode 100644 packages/file-system-plugin/src/types.ts
 delete mode 100644 packages/file-system-plugin/src/ui/DetailLine.tsx
 delete mode 100644 packages/file-system-plugin/src/ui/FileEntryRow.tsx
 create mode 100644 packages/file-system-plugin/src/ui/FileEntryTable.tsx
 delete mode 100644 packages/file-system-plugin/src/ui/TopBar.tsx
 create mode 100644 packages/file-system-plugin/src/ui/globals.css
 delete mode 100644 packages/file-system-plugin/tailwind.config.ts
 delete mode 100644 packages/overlay-plugin/src/ui/components/Header.tsx
 delete mode 100644 packages/overlay-plugin/src/ui/styles.css
 delete mode 100644 packages/overlay-plugin/tailwind.config.ts
 create mode 100644 packages/performance-monitor-plugin/postcss.config.js
 delete mode 100644 packages/performance-monitor-plugin/src/ui/App.css
 delete mode 100644 packages/performance-monitor-plugin/src/ui/components/JsonTree.tsx
 create mode 100644 packages/performance-monitor-plugin/src/ui/globals.css
 delete mode 100644 packages/react-navigation-plugin/src/devtools-ui/components/Tabs.tsx
 delete mode 100644 packages/react-navigation-plugin/tailwind.config.ts
 create mode 100644 packages/ui/src/plugin-header.tsx
 create mode 100644 packages/ui/src/plugin-theme.tsx

diff --git a/packages/controls-plugin/package.json b/packages/controls-plugin/package.json
index 468fbd3f..a9222995 100644
--- a/packages/controls-plugin/package.json
+++ b/packages/controls-plugin/package.json
@@ -22,10 +22,12 @@
   },
   "dependencies": {
     "@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",
@@ -35,7 +37,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:"
diff --git a/packages/controls-plugin/postcss.config.js b/packages/controls-plugin/postcss.config.js
index 2aa7205d..a34a3d56 100644
--- a/packages/controls-plugin/postcss.config.js
+++ b/packages/controls-plugin/postcss.config.js
@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };
diff --git a/packages/controls-plugin/src/ui/globals.css b/packages/controls-plugin/src/ui/globals.css
index c42d28c0..e862ec52 100644
--- a/packages/controls-plugin/src/ui/globals.css
+++ b/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';
diff --git a/packages/controls-plugin/src/ui/panel.tsx b/packages/controls-plugin/src/ui/panel.tsx
index 5f180a2d..7a8963ed 100644
--- a/packages/controls-plugin/src/ui/panel.tsx
+++ b/packages/controls-plugin/src/ui/panel.tsx
@@ -1,4 +1,19 @@
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import {
+  Button,
+  Card,
+  Chip,
+  Description,
+  FieldError,
+  Input,
+  ListBox,
+  PluginHeader,
+  PluginTheme,
+  Select,
+  Surface,
+  Switch,
+  TextField,
+} from '@rozenite/ui';
 import type { ReactNode } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import type {
@@ -6,7 +21,10 @@ import type {
   ControlsSnapshotEvent,
   ControlsUpdateResultEvent,
 } from '../shared/messaging';
-import type { ControlsItemSnapshot, ControlsSectionSnapshot } from '../shared/types';
+import type {
+  ControlsItemSnapshot,
+  ControlsSectionSnapshot,
+} from '../shared/types';
 import './globals.css';
 
 type ItemUiState = {
@@ -14,7 +32,8 @@ type ItemUiState = {
   message?: string;
 };
 
-const getItemKey = (sectionId: string, itemId: string) => `${sectionId}:${itemId}`;
+const getItemKey = (sectionId: string, itemId: string) =>
+  `${sectionId}:${itemId}`;
 
 const createRequestId = () =>
   `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
@@ -30,17 +49,21 @@ const RowShell = ({
   errorMessage?: string;
   children: ReactNode;
 }) => (
-  <div className="flex items-start justify-between gap-4 py-3">
+  <div className="flex flex-col gap-3 py-3 sm:flex-row sm:items-start sm:justify-between">
     <div className="min-w-0">
-      <div className="text-sm font-medium text-gray-100">{title}</div>
+      <div className="text-sm font-medium text-foreground">{title}</div>
       {description ? (
-        <div className="mt-1 text-xs text-gray-400">{description}</div>
+        <Description className="mt-1 text-xs text-muted">
+          {description}
+        </Description>
       ) : null}
       {errorMessage ? (
-        <div className="mt-1 text-xs text-red-400">{errorMessage}</div>
+        <FieldError className="mt-1">{errorMessage}</FieldError>
       ) : null}
     </div>
-    {children}
+    <div className="flex w-full shrink-0 items-center justify-end sm:w-auto">
+      {children}
+    </div>
   </div>
 );
 
@@ -61,16 +84,17 @@ const ToggleRow = ({
       description={item.description}
       errorMessage={uiState?.message}
     >
-      <label className="relative inline-flex cursor-pointer items-center">
-        <input
-          type="checkbox"
-          className="peer sr-only"
-          checked={item.value}
-          disabled={item.disabled || uiState?.pending}
-          onChange={(event) => onToggle(sectionId, item.id, event.target.checked)}
-        />
-        <div className="h-6 w-11 rounded-full bg-gray-700 transition peer-checked:bg-violet-500 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-5" />
-      </label>
+      <Switch
+        aria-label={item.title}
+        isDisabled={item.disabled || uiState?.pending}
+        isSelected={item.value}
+        onChange={(isSelected) => onToggle(sectionId, item.id, isSelected)}
+        size="sm"
+      >
+        <Switch.Control>
+          <Switch.Thumb />
+        </Switch.Control>
+      </Switch>
     </RowShell>
   );
 };
@@ -92,13 +116,13 @@ const ButtonRow = ({
       description={item.description}
       errorMessage={uiState?.message}
     >
-      <button
-        className="rounded-md border border-violet-500/60 bg-violet-500/10 px-3 py-1.5 text-xs font-semibold text-violet-100 transition hover:bg-violet-500/20 disabled:cursor-not-allowed disabled:border-gray-700 disabled:bg-gray-800 disabled:text-gray-500"
-        disabled={item.disabled || uiState?.pending}
-        onClick={() => onPress(sectionId, item.id)}
+      <Button
+        isDisabled={item.disabled || uiState?.pending}
+        onPress={() => onPress(sectionId, item.id)}
+        size="sm"
       >
-        {uiState?.pending ? 'Running...' : item.actionLabel ?? 'Run'}
-      </button>
+        {uiState?.pending ? 'Running...' : (item.actionLabel ?? 'Run')}
+      </Button>
     </RowShell>
   );
 };
@@ -120,18 +144,39 @@ const SelectRow = ({
       description={item.description}
       errorMessage={uiState?.message}
     >
-      <select
-        className="min-w-[160px] rounded-md border border-gray-700 bg-gray-950 px-3 py-2 text-xs text-gray-200 outline-none transition focus:border-violet-500 disabled:cursor-not-allowed disabled:opacity-50"
+      <Select
+        aria-label={item.title}
+        className="w-full sm:w-44"
+        isDisabled={item.disabled || uiState?.pending}
+        onChange={(key) => {
+          if (key == null) {
+            return;
+          }
+
+          onSelect(sectionId, item.id, String(key));
+        }}
         value={item.value}
-        disabled={item.disabled || uiState?.pending}
-        onChange={(event) => onSelect(sectionId, item.id, event.target.value)}
+        variant="secondary"
       >
-        {item.options.map((option) => (
-          <option key={option.value} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
+        <Select.Trigger>
+          <Select.Value />
+          <Select.Indicator />
+        </Select.Trigger>
+        <Select.Popover>
+          <ListBox aria-label={`${item.title} options`}>
+            {item.options.map((option) => (
+              <ListBox.Item
+                key={option.value}
+                id={option.value}
+                textValue={option.label}
+              >
+                {option.label}
+                <ListBox.ItemIndicator />
+              </ListBox.Item>
+            ))}
+          </ListBox>
+        </Select.Popover>
+      </Select>
     </RowShell>
   );
 };
@@ -143,9 +188,12 @@ const TextRow = ({
 }) => {
   return (
     <RowShell title={item.title} description={item.description}>
-      <div className="max-w-[50%] rounded-md bg-gray-950/80 px-3 py-1.5 text-right text-xs text-gray-300">
+      <Surface
+        className="wrap-anywhere w-full max-w-full rounded-md border border-border/70 px-3 py-2 text-left font-mono text-xs text-foreground sm:max-w-72 sm:text-right"
+        variant="secondary"
+      >
         {item.value}
-      </div>
+      </Surface>
     </RowShell>
   );
 };
@@ -166,6 +214,7 @@ const InputRow = ({
   onApply: (sectionId: string, itemId: string) => void;
 }) => {
   const isChanged = draftValue !== item.value;
+  const isDisabled = item.disabled || uiState?.pending;
 
   return (
     <RowShell
@@ -173,24 +222,32 @@ const InputRow = ({
       description={item.description}
       errorMessage={uiState?.message}
     >
-      <div className="flex min-w-[240px] items-center gap-2">
-        <input
-          className="flex-1 rounded-md border border-gray-700 bg-gray-950 px-3 py-2 text-xs text-gray-200 outline-none transition focus:border-violet-500 disabled:cursor-not-allowed disabled:opacity-50"
+      <div className="flex w-full min-w-0 items-center gap-2 sm:min-w-72">
+        <TextField
+          aria-label={item.title}
+          className="min-w-0 flex-1"
+          isDisabled={isDisabled}
+          name={getItemKey(sectionId, item.id)}
           type="text"
-          value={draftValue}
-          placeholder={item.placeholder}
-          disabled={item.disabled || uiState?.pending}
-          onChange={(event) =>
-            onDraftChange(sectionId, item.id, event.target.value)
-          }
-        />
-        <button
-          className="rounded-md border border-violet-500/60 bg-violet-500/10 px-3 py-2 text-xs font-semibold text-violet-100 transition hover:bg-violet-500/20 disabled:cursor-not-allowed disabled:border-gray-700 disabled:bg-gray-800 disabled:text-gray-500"
-          disabled={!isChanged || item.disabled || uiState?.pending}
-          onClick={() => onApply(sectionId, item.id)}
         >
-          {uiState?.pending ? 'Applying...' : item.applyLabel ?? 'Apply'}
-        </button>
+          <Input
+            disabled={isDisabled}
+            fullWidth
+            onChange={(event) =>
+              onDraftChange(sectionId, item.id, event.target.value)
+            }
+            placeholder={item.placeholder}
+            value={draftValue}
+            variant="secondary"
+          />
+        </TextField>
+        <Button
+          isDisabled={!isChanged || isDisabled}
+          onPress={() => onApply(sectionId, item.id)}
+          size="sm"
+        >
+          {uiState?.pending ? 'Applying...' : (item.applyLabel ?? 'Apply')}
+        </Button>
       </div>
     </RowShell>
   );
@@ -214,7 +271,11 @@ const renderItem = ({
   onToggle: (sectionId: string, itemId: string, value: boolean) => void;
   onPress: (sectionId: string, itemId: string) => void;
   onSelect: (sectionId: string, itemId: string, value: string) => void;
-  onInputDraftChange: (sectionId: string, itemId: string, value: string) => void;
+  onInputDraftChange: (
+    sectionId: string,
+    itemId: string,
+    value: string,
+  ) => void;
   onInputApply: (sectionId: string, itemId: string) => void;
 }) => {
   if (item.type === 'text') {
@@ -269,8 +330,12 @@ const renderItem = ({
 export default function ControlsPanel() {
   const [sections, setSections] = useState<ControlsSectionSnapshot[]>([]);
   const [loading, setLoading] = useState(true);
-  const [itemUiState, setItemUiState] = useState<Map<string, ItemUiState>>(new Map());
-  const [inputDrafts, setInputDrafts] = useState<Map<string, string>>(new Map());
+  const [itemUiState, setItemUiState] = useState<Map<string, ItemUiState>>(
+    new Map(),
+  );
+  const [inputDrafts, setInputDrafts] = useState<Map<string, string>>(
+    new Map(),
+  );
   const committedInputValuesRef = useRef<Map<string, string>>(new Map());
 
   const client = useRozeniteDevToolsClient<ControlsEventMap>({
@@ -292,7 +357,10 @@ export default function ControlsPanel() {
         event.sections.forEach((section) => {
           section.items.forEach((item) => {
             if (item.type === 'input') {
-              nextCommittedValues.set(getItemKey(section.id, item.id), item.value);
+              nextCommittedValues.set(
+                getItemKey(section.id, item.id),
+                item.value,
+              );
             }
           });
         });
@@ -310,7 +378,8 @@ export default function ControlsPanel() {
             const previousCommitted = committedInputValuesRef.current.get(key);
             const previousDraft = previous.get(key);
             const isDirty =
-              previousDraft !== undefined && previousDraft !== previousCommitted;
+              previousDraft !== undefined &&
+              previousDraft !== previousCommitted;
 
             if (!isDirty || previousDraft === committedValue) {
               next.set(key, committedValue);
@@ -321,7 +390,7 @@ export default function ControlsPanel() {
         });
 
         committedInputValuesRef.current = nextCommittedValues;
-      }
+      },
     );
     const updateResultSubscription = client.onMessage(
       'update-result',
@@ -336,7 +405,7 @@ export default function ControlsPanel() {
           });
           return next;
         });
-      }
+      },
     );
 
     client.send('get-snapshot', {
@@ -352,7 +421,7 @@ export default function ControlsPanel() {
   const sendUpdateRequest = (
     sectionId: string,
     itemId: string,
-    value: boolean | string
+    value: boolean | string,
   ) => {
     if (!client) {
       return;
@@ -403,7 +472,7 @@ export default function ControlsPanel() {
   const handleInputDraftChange = (
     sectionId: string,
     itemId: string,
-    value: string
+    value: string,
   ) => {
     const key = getItemKey(sectionId, itemId);
 
@@ -438,51 +507,55 @@ export default function ControlsPanel() {
   };
 
   return (
-    <div className="h-screen bg-gray-900 text-gray-100 flex flex-col">
-      <div className="flex items-center gap-2 border-b border-gray-700 bg-gray-800 p-2">
-        <span className="text-sm font-medium text-gray-200">Controls</span>
-        <div className="flex-1" />
-        <span className="text-xs text-gray-400">{sections.length} sections</span>
-      </div>
+    <PluginTheme
+      defaultTheme="dark"
+      storageKey="@rozenite/controls-plugin.theme"
+      className="flex h-screen flex-col bg-background text-foreground"
+    >
+      <PluginHeader
+        title="Controls"
+        actions={
+          <Chip className="shrink-0" variant="secondary">
+            {sections.length} sections
+          </Chip>
+        }
+      />
 
-      <div className="flex-1 overflow-auto p-4">
+      <div className="flex-1 overflow-auto p-4 pt-3">
         {loading ? (
-          <div className="rounded-lg border border-gray-800 bg-gray-800 p-6 text-sm text-gray-400">
+          <Surface className="text-sm text-muted" variant="secondary">
             Loading controls snapshot...
-          </div>
+          </Surface>
         ) : null}
 
         {!loading && sections.length === 0 ? (
-          <div className="rounded-lg border border-dashed border-gray-700 bg-gray-800/80 p-6 text-sm text-gray-400">
+          <Surface className="text-sm text-muted" variant="secondary">
             No controls registered on the device.
-          </div>
+          </Surface>
         ) : null}
 
         <div className="space-y-4">
           {sections.map((section) => (
-            <section
-              key={section.id}
-              className="rounded-xl border border-gray-800 bg-gray-800/90 shadow-lg shadow-black/10"
-            >
-              <div className="border-b border-gray-800 px-4 py-3">
-                <div className="text-sm font-semibold text-gray-100">
-                  {section.title}
-                </div>
+            <Card key={section.id}>
+              <Card.Header>
+                <Card.Title>{section.title}</Card.Title>
                 {section.description ? (
-                  <div className="mt-1 text-xs text-gray-400">
+                  <Card.Description className="mt-1 text-xs">
                     {section.description}
-                  </div>
+                  </Card.Description>
                 ) : null}
-              </div>
+              </Card.Header>
 
-              <div className="divide-y divide-gray-800 px-4">
+              <Card.Content>
                 {section.items.map((item) => (
                   <div key={item.id}>
                     {renderItem({
                       sectionId: section.id,
                       item,
                       uiState: itemUiState.get(getItemKey(section.id, item.id)),
-                      inputDraft: inputDrafts.get(getItemKey(section.id, item.id)),
+                      inputDraft: inputDrafts.get(
+                        getItemKey(section.id, item.id),
+                      ),
                       onToggle: handleToggle,
                       onPress: handlePress,
                       onSelect: handleSelect,
@@ -491,11 +564,11 @@ export default function ControlsPanel() {
                     })}
                   </div>
                 ))}
-              </div>
-            </section>
+              </Card.Content>
+            </Card>
           ))}
         </div>
       </div>
-    </div>
+    </PluginTheme>
   );
 }
diff --git a/packages/controls-plugin/tailwind.config.ts b/packages/controls-plugin/tailwind.config.ts
deleted file mode 100644
index b86c0671..00000000
--- a/packages/controls-plugin/tailwind.config.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import type { Config } from 'tailwindcss';
-
-const config: Config = {
-  darkMode: ['class'],
-  content: ['./src/ui/**/*.{js,ts,jsx,tsx,mdx}'],
-  theme: {
-    extend: {
-      colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-    },
-  },
-  plugins: [require('tailwindcss-animate')],
-};
-
-export default config;
diff --git a/packages/file-system-plugin/package.json b/packages/file-system-plugin/package.json
index c909fe92..eee906df 100644
--- a/packages/file-system-plugin/package.json
+++ b/packages/file-system-plugin/package.json
@@ -23,23 +23,28 @@
   },
   "dependencies": {
     "@rozenite/agent-bridge": "workspace:*",
-    "@rozenite/plugin-bridge": "workspace:*"
+    "@rozenite/plugin-bridge": "workspace:*",
+    "@rozenite/ui": "workspace:*"
   },
   "devDependencies": {
+    "@tanstack/react-table": "^8.21.3",
+    "@tailwindcss/postcss": "^4.2.2",
     "@rozenite/vite-plugin": "workspace:*",
-    "@types/react": "~18.3.12",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
     "autoprefixer": "^10.4.21",
     "lucide-react": "^0.263.1",
     "postcss": "^8.5.6",
-    "react": "18.3.1",
-    "react-dom": "18.3.0",
-    "react-native": "0.76.0",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-native": "catalog:",
     "react-native-web": "0.21.0",
     "rozenite": "workspace:*",
-    "tailwindcss": "^3.4.17",
+    "tailwind-variants": "^2.0.0",
+    "tailwindcss": "^4.2.2",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.7.3",
-    "vite": "^6.0.0",
+    "typescript": "~5.9.3",
+    "vite": "catalog:",
     "vitest": "^3.0.0"
   },
   "peerDependencies": {
diff --git a/packages/file-system-plugin/postcss.config.js b/packages/file-system-plugin/postcss.config.js
index 2aa7205d..a34a3d56 100644
--- a/packages/file-system-plugin/postcss.config.js
+++ b/packages/file-system-plugin/postcss.config.js
@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };
diff --git a/packages/file-system-plugin/src/file-system.tsx b/packages/file-system-plugin/src/file-system.tsx
index da33721d..2d74c8de 100644
--- a/packages/file-system-plugin/src/file-system.tsx
+++ b/packages/file-system-plugin/src/file-system.tsx
@@ -1,22 +1,38 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import {
-  ActivityIndicator,
-  FlatList,
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import {
+  Button,
+  Chip,
+  Input,
+  ListBox,
+  PluginHeader,
+  PluginTheme,
+  Select,
+  Surface,
+  TextField,
+} from '@rozenite/ui';
+import { ArrowLeft, Loader2, RefreshCcw } from 'lucide-react';
 import type { FileSystemEventMap, FsEntry } from './shared/protocol';
 import { PLUGIN_ID } from './shared/protocol';
-import { useFileSystemRequests } from './use-file-system-requests';
 import { useFileSystemNavigation } from './use-file-system-navigation';
+import { useFileSystemRequests } from './use-file-system-requests';
 import { ConnectingScreen } from './ui/ConnectingScreen';
-import { TopBar } from './ui/TopBar';
-import { FileEntryRow } from './ui/FileEntryRow';
 import { DetailPanel } from './ui/DetailPanel';
+import { FileEntryTable } from './ui/FileEntryTable';
 import { PathDisplay } from './ui/PathDisplay';
+import './ui/globals.css';
+
+function getProviderLabel(provider: string): string {
+  if (provider === 'expo') {
+    return 'Expo FileSystem';
+  }
+
+  if (provider === 'rnfs') {
+    return 'react-native-fs';
+  }
+
+  return 'No provider';
+}
 
 export default function FileSystemPanel() {
   const client = useRozeniteDevToolsClient<FileSystemEventMap>({
@@ -28,11 +44,27 @@ export default function FileSystemPanel() {
 
   const [selected, setSelected] = useState<FsEntry | null>(null);
 
-  // Clear selection when the directory changes (preserves original loadDir behavior)
   useEffect(() => {
     setSelected(null);
   }, [nav.currentPath]);
 
+  const activeRootId = useMemo(() => {
+    let nextRootId: string | null = null;
+    let matchedPathLength = -1;
+
+    nav.roots.forEach((root) => {
+      const isMatch =
+        nav.currentPath === root.path || nav.currentPath.startsWith(root.path);
+
+      if (isMatch && root.path.length > matchedPathLength) {
+        nextRootId = root.id;
+        matchedPathLength = root.path.length;
+      }
+    });
+
+    return nextRootId ?? '';
+  }, [nav.currentPath, nav.roots]);
+
   const onSelectEntry = useCallback(
     (entry: FsEntry) => {
       if (entry.isDirectory) {
@@ -40,126 +72,186 @@ export default function FileSystemPanel() {
         nav.setCurrentPath(entry.path);
         return;
       }
+
       setSelected(entry);
     },
     [nav.setCurrentPath],
   );
 
-  const renderItem = useCallback(
-    ({ item }: { item: FsEntry }) => (
-      <FileEntryRow
-        entry={item}
-        isSelected={selected?.path === item.path}
-        onPress={onSelectEntry}
-      />
-    ),
-    [selected?.path, onSelectEntry],
-  );
+  return (
+    <PluginTheme
+      className="flex h-screen flex-col bg-background text-foreground"
+      defaultTheme="dark"
+      storageKey="@rozenite/file-system-plugin.theme"
+    >
+      <PluginHeader
+        subtitle="Browse app files and preview contents in React Native DevTools."
+        title="File System"
+        actions={
+          <div className="flex items-center gap-2">
+            <Chip className="shrink-0" variant="secondary">
+              {getProviderLabel(nav.provider)}
+            </Chip>
+            <div className="w-56 max-w-[44vw] min-w-40">
+              <Select
+                isDisabled={nav.roots.length === 0}
+                onChange={(value) => {
+                  const rootId =
+                    typeof value === 'string'
+                      ? value
+                      : value == null
+                        ? null
+                        : String(value);
 
-  const keyExtractor = useCallback((item: FsEntry) => item.path, []);
+                  if (!rootId) {
+                    return;
+                  }
 
-  if (!client) {
-    return <ConnectingScreen />;
-  }
+                  const root = nav.roots.find((item) => item.id === rootId);
+                  if (!root) {
+                    return;
+                  }
 
-  return (
-    <SafeAreaView style={styles.container}>
-      <TopBar
-        provider={nav.provider}
-        roots={nav.roots}
-        pathInput={nav.pathInput}
-        setPathInput={nav.setPathInput}
-        currentPath={nav.currentPath}
-        setCurrentPath={nav.setCurrentPath}
-        canGoBack={nav.canGoBack}
-        onGo={nav.onGo}
-        onBack={nav.onBack}
-        onReload={nav.onReload}
+                  nav.setCurrentPath(root.path);
+                }}
+                placeholder="Select root"
+                value={activeRootId}
+              >
+                <Select.Trigger>
+                  <Select.Value />
+                  <Select.Indicator />
+                </Select.Trigger>
+                <Select.Popover>
+                  <ListBox aria-label="Root directories">
+                    {nav.roots.map((root) => (
+                      <ListBox.Item
+                        id={root.id}
+                        key={root.id}
+                        textValue={root.label}
+                      >
+                        {root.label}
+                        <ListBox.ItemIndicator />
+                      </ListBox.Item>
+                    ))}
+                  </ListBox>
+                </Select.Popover>
+              </Select>
+            </div>
+          </div>
+        }
       />
 
-      <View style={styles.body}>
-        <View style={styles.listPane}>
-          <View style={styles.listHeader}>
-            {nav.currentPath ? (
-              <PathDisplay path={nav.currentPath} />
-            ) : (
-              <Text style={styles.listHeaderTitle}>—</Text>
-            )}
-            {nav.loading ? <ActivityIndicator size="small" /> : null}
-          </View>
+      <div className="flex items-center gap-2 px-3 pb-3 pt-3">
+        <Button
+          aria-label="Go to parent directory"
+          isDisabled={!client || !nav.canGoBack}
+          isIconOnly
+          onPress={nav.onBack}
+          size="sm"
+          variant="secondary"
+        >
+          <ArrowLeft className="size-4" />
+        </Button>
+        <Button
+          aria-label="Reload current directory"
+          isDisabled={!client || !nav.currentPath}
+          isIconOnly
+          onPress={nav.onReload}
+          size="sm"
+          variant="secondary"
+        >
+          <RefreshCcw className="size-4" />
+        </Button>
+        <TextField aria-label="Directory path" className="min-w-0 flex-1">
+          <Input
+            disabled={!client}
+            fullWidth
+            onChange={(event) => nav.setPathInput(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                nav.onGo();
+              }
+            }}
+            placeholder="Enter a directory path..."
+            value={nav.pathInput}
+            variant="secondary"
+          />
+        </TextField>
+        <Button
+          isDisabled={!client || !nav.pathInput.trim()}
+          onPress={nav.onGo}
+          size="sm"
+        >
+          Go
+        </Button>
+      </div>
+
+      <main className="flex min-h-0 flex-1 flex-col gap-4 overflow-hidden p-3 pt-0 lg:flex-row">
+        <section className="flex min-h-0 min-w-0 flex-1 flex-col gap-3 overflow-hidden lg:flex-[3]">
+          {nav.currentPath ? (
+            <Surface
+              className="flex flex-col gap-3 rounded-xl border border-border/70 bg-surface px-3 py-3"
+              variant="secondary"
+            >
+              <div className="flex flex-wrap items-center gap-2">
+                <Chip className="shrink-0" variant="secondary">
+                  {nav.entries.length} items
+                </Chip>
+                {nav.loading ? (
+                  <Chip className="shrink-0" variant="secondary">
+                    <Loader2 className="size-3 animate-spin" />
+                    Loading
+                  </Chip>
+                ) : null}
+              </div>
+              <PathDisplay label="Current path" path={nav.currentPath} />
+            </Surface>
+          ) : null}
 
           {nav.error ? (
-            <View style={styles.errorBox}>
-              <Text style={styles.errorTitle}>Error</Text>
-              <Text style={styles.errorText}>{nav.error}</Text>
-            </View>
+            <Surface
+              className="rounded-xl border border-danger/25 bg-danger/10 px-4 py-4 text-sm text-danger"
+              variant="secondary"
+            >
+              <div className="font-medium">Error loading directory</div>
+              <div className="mt-1">{nav.error}</div>
+            </Surface>
           ) : null}
 
-          <FlatList
-            data={nav.entries}
-            keyExtractor={keyExtractor}
-            contentContainerStyle={styles.listContent}
-            renderItem={renderItem}
+          {!client ? (
+            <ConnectingScreen />
+          ) : nav.currentPath ? (
+            <div className="min-h-0 flex-1">
+              <FileEntryTable
+                entries={nav.entries}
+                loading={nav.loading}
+                onEntryPress={onSelectEntry}
+                selectedPath={selected?.path ?? null}
+              />
+            </div>
+          ) : nav.roots.length === 0 ? (
+            <Surface
+              className="flex min-h-48 items-center justify-center rounded-xl border border-border/70 bg-surface px-4 py-8 text-center text-sm text-muted"
+              variant="secondary"
+            >
+              No filesystem roots were reported by the active provider.
+            </Surface>
+          ) : (
+            <ConnectingScreen
+              description="Initializing the browser for the selected provider."
+              message="Loading filesystem roots..."
+            />
+          )}
+        </section>
+
+        <section className="flex min-h-0 min-w-0 flex-1 overflow-hidden lg:flex-[2]">
+          <DetailPanel
+            requestImagePreview={requests.requestImagePreview}
+            requestTextPreview={requests.requestTextPreview}
+            selected={selected}
           />
-        </View>
-
-        <DetailPanel
-          selected={selected}
-          requestImagePreview={requests.requestImagePreview}
-          requestTextPreview={requests.requestTextPreview}
-        />
-      </View>
-    </SafeAreaView>
+        </section>
+      </main>
+    </PluginTheme>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#0b0b0f',
-  },
-  body: {
-    flex: 1,
-    flexDirection: 'row',
-  },
-  listPane: {
-    flex: 1.2,
-    borderRightWidth: 1,
-    borderRightColor: '#1c1c24',
-  },
-  listHeader: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: '#1c1c24',
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 10,
-  },
-  listHeaderTitle: {
-    flex: 1,
-    color: '#eaeaf2',
-    fontSize: 12,
-    fontFamily: 'Menlo',
-  },
-  listContent: {
-    paddingVertical: 6,
-  },
-  errorBox: {
-    margin: 16,
-    padding: 12,
-    borderRadius: 10,
-    borderWidth: 1,
-    borderColor: 'rgba(255, 99, 132, 0.4)',
-    backgroundColor: 'rgba(255, 99, 132, 0.08)',
-    gap: 6,
-  },
-  errorTitle: {
-    color: '#ffb3c1',
-    fontWeight: '700',
-  },
-  errorText: {
-    color: '#ffb3c1',
-    fontSize: 12,
-  },
-});
diff --git a/packages/file-system-plugin/src/types.ts b/packages/file-system-plugin/src/types.ts
deleted file mode 100644
index 5efee8e3..00000000
--- a/packages/file-system-plugin/src/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { PressableStateCallbackType } from 'react-native';
-
-// Extended pressable state for react-native-web (includes hover)
-export type WebPressableState = PressableStateCallbackType & {
-  hovered?: boolean;
-};
diff --git a/packages/file-system-plugin/src/ui/ConnectingScreen.tsx b/packages/file-system-plugin/src/ui/ConnectingScreen.tsx
index 0b09dcec..16f7b48f 100644
--- a/packages/file-system-plugin/src/ui/ConnectingScreen.tsx
+++ b/packages/file-system-plugin/src/ui/ConnectingScreen.tsx
@@ -1,36 +1,25 @@
-import React from 'react';
-import {
-  ActivityIndicator,
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import { Surface } from '@rozenite/ui';
+import { Loader2 } from 'lucide-react';
 
-export function ConnectingScreen() {
+type ConnectingScreenProps = {
+  description?: string;
+  message?: string;
+};
+
+export function ConnectingScreen({
+  description = 'Waiting for the device plugin to become available.',
+  message = 'Connecting to React Native...',
+}: ConnectingScreenProps) {
   return (
-    <SafeAreaView style={styles.container}>
-      <View style={styles.center}>
-        <ActivityIndicator />
-        <Text style={styles.centerText}>Connecting to React Native…</Text>
-      </View>
-    </SafeAreaView>
+    <Surface
+      className="flex min-h-48 w-full flex-col items-center justify-center gap-3 rounded-xl border border-border/70 bg-surface px-4 py-8 text-center shadow-sm"
+      variant="secondary"
+    >
+      <Loader2 className="size-8 animate-spin text-accent" />
+      <div className="space-y-1">
+        <p className="text-sm font-medium text-foreground">{message}</p>
+        <p className="text-sm text-muted">{description}</p>
+      </div>
+    </Surface>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#0b0b0f',
-  },
-  center: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 12,
-  },
-  centerText: {
-    color: '#d6d6d6',
-    fontSize: 14,
-  },
-});
diff --git a/packages/file-system-plugin/src/ui/DetailLine.tsx b/packages/file-system-plugin/src/ui/DetailLine.tsx
deleted file mode 100644
index 003a3dd4..00000000
--- a/packages/file-system-plugin/src/ui/DetailLine.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-
-type DetailLineProps = {
-  label: string;
-  value: string;
-};
-
-export function DetailLine({ label, value }: DetailLineProps) {
-  return (
-    <View style={styles.detailLine}>
-      <Text style={styles.detailLabel}>{label}</Text>
-      <Text style={styles.detailValue} numberOfLines={1}>
-        {value}
-      </Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  detailLine: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    gap: 10,
-  },
-  detailLabel: {
-    color: '#9a9aa7',
-    fontSize: 11,
-  },
-  detailValue: {
-    color: '#eaeaf2',
-    fontSize: 11,
-    fontWeight: '600',
-    maxWidth: '70%',
-    textAlign: 'right',
-  },
-});
diff --git a/packages/file-system-plugin/src/ui/DetailPanel.tsx b/packages/file-system-plugin/src/ui/DetailPanel.tsx
index 15c5cf2a..df1cdca9 100644
--- a/packages/file-system-plugin/src/ui/DetailPanel.tsx
+++ b/packages/file-system-plugin/src/ui/DetailPanel.tsx
@@ -1,32 +1,47 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import {
-  ActivityIndicator,
-  Image,
-  ScrollView,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
-import type { FsEntry } from '../shared/protocol';
+import { useCallback, useEffect, useState } from 'react';
+import { Card, Chip, Separator, Surface } from '@rozenite/ui';
+import { FileImage, FileText, Loader2 } from 'lucide-react';
+import { formatTextPreview } from '../formatters';
 import { isLikelyImageFile } from '../shared/path';
+import type { FsEntry } from '../shared/protocol';
+import type { useFileSystemRequests } from '../use-file-system-requests';
 import { formatBytes, formatDate } from '../utils';
-import { formatTextPreview } from '../formatters';
-import { DetailLine } from './DetailLine';
 import { PathDisplay } from './PathDisplay';
-import type { useFileSystemRequests } from '../use-file-system-requests';
 
 type FileSystemRequests = ReturnType<typeof useFileSystemRequests>;
 
 type DetailPanelProps = {
-  selected: FsEntry | null;
   requestImagePreview: FileSystemRequests['requestImagePreview'];
   requestTextPreview: FileSystemRequests['requestTextPreview'];
+  selected: FsEntry | null;
 };
 
+function getEntryKind(entry: FsEntry): string {
+  return entry.isDirectory ? 'Directory' : 'File';
+}
+
+function DetailStat({
+  label,
+  value,
+}: {
+  label: string;
+  value: string;
+}) {
+  return (
+    <Surface
+      className="flex flex-col gap-1 rounded-lg border border-border/70 bg-surface-secondary px-3 py-2"
+      variant="secondary"
+    >
+      <span className="text-xs font-medium text-muted">{label}</span>
+      <span className="text-sm font-medium text-foreground">{value}</span>
+    </Surface>
+  );
+}
+
 export function DetailPanel({
-  selected,
   requestImagePreview,
   requestTextPreview,
+  selected,
 }: DetailPanelProps) {
   const [imagePreviewUri, setImagePreviewUri] = useState<string | null>(null);
   const [imagePreviewError, setImagePreviewError] = useState<string | null>(
@@ -38,10 +53,8 @@ export function DetailPanel({
   const [textPreviewError, setTextPreviewError] = useState<string | null>(null);
   const [textPreviewLoading, setTextPreviewLoading] = useState(false);
 
-  // Load preview when selected file changes
   const loadPreview = useCallback(
     async (entry: FsEntry) => {
-      // Reset preview state
       setImagePreviewUri(null);
       setImagePreviewError(null);
       setImagePreviewLoading(false);
@@ -49,39 +62,54 @@ export function DetailPanel({
       setTextPreviewError(null);
       setTextPreviewLoading(false);
 
-      if (entry.isDirectory) return;
+      if (entry.isDirectory) {
+        return;
+      }
 
-      // Handle image preview
       if (isLikelyImageFile(entry.path)) {
         setImagePreviewLoading(true);
+
         try {
           const res = await requestImagePreview(entry.path);
-          if (!res) return;
+          if (!res) {
+            return;
+          }
+
           if (res.error || !res.dataUri) {
             setImagePreviewError(res.error ?? 'No preview available');
             return;
           }
+
           setImagePreviewUri(res.dataUri);
-        } catch (e) {
-          setImagePreviewError(e instanceof Error ? e.message : String(e));
+        } catch (error) {
+          setImagePreviewError(
+            error instanceof Error ? error.message : String(error),
+          );
         } finally {
           setImagePreviewLoading(false);
         }
+
         return;
       }
 
-      // Handle text/file preview for any non-image file
       setTextPreviewLoading(true);
+
       try {
         const res = await requestTextPreview(entry.path);
-        if (!res) return;
+        if (!res) {
+          return;
+        }
+
         if (res.error || !res.content) {
           setTextPreviewError(res.error ?? 'No preview available');
           return;
         }
+
         setTextPreview(res.content);
-      } catch (e) {
-        setTextPreviewError(e instanceof Error ? e.message : String(e));
+      } catch (error) {
+        setTextPreviewError(
+          error instanceof Error ? error.message : String(error),
+        );
       } finally {
         setTextPreviewLoading(false);
       }
@@ -91,7 +119,6 @@ export function DetailPanel({
 
   useEffect(() => {
     if (!selected || selected.isDirectory) {
-      // Reset previews when deselected or directory selected
       setImagePreviewUri(null);
       setImagePreviewError(null);
       setImagePreviewLoading(false);
@@ -100,170 +127,149 @@ export function DetailPanel({
       setTextPreviewLoading(false);
       return;
     }
+
     loadPreview(selected);
-  }, [selected, loadPreview]);
+  }, [loadPreview, selected]);
 
-  return (
-    <View style={styles.detailPane}>
-      <Text style={styles.detailTitle}>Details</Text>
-      {!selected ? (
-        <Text style={styles.detailEmpty}>Select a file or directory.</Text>
-      ) : (
-        <View style={styles.detailCard}>
-          <Text style={styles.detailName} numberOfLines={2}>
-            {selected.name}
-          </Text>
-          <PathDisplay path={selected.path} />
-          <View style={styles.detailGrid}>
-            <DetailLine
-              label="Type"
-              value={selected.isDirectory ? 'Directory' : 'File'}
-            />
-            <DetailLine
-              label="Size"
-              value={selected.isDirectory ? '—' : formatBytes(selected.size)}
-            />
-            <DetailLine
-              label="Modified"
-              value={formatDate(selected.modifiedAtMs)}
-            />
-          </View>
+  const isImageEntry = selected ? isLikelyImageFile(selected.path) : false;
 
-          {!selected.isDirectory && isLikelyImageFile(selected.path) ? (
-            <View style={styles.previewBox}>
-              <Text style={styles.previewTitle}>Image preview</Text>
-              {imagePreviewLoading ? (
-                <View style={styles.previewLoading}>
-                  <ActivityIndicator />
-                  <Text style={styles.previewLoadingText}>
-                    Loading preview…
-                  </Text>
-                </View>
-              ) : imagePreviewError ? (
-                <Text style={styles.previewError}>{imagePreviewError}</Text>
-              ) : imagePreviewUri ? (
-                <Image
-                  source={{ uri: imagePreviewUri }}
-                  style={styles.previewImage}
-                  resizeMode="contain"
-                />
-              ) : (
-                <Text style={styles.previewHint}>
-                  Tap the file again to re-fetch preview (limited size).
-                </Text>
-              )}
-            </View>
+  return (
+    <Card className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+      <Card.Header>
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div className="min-w-0">
+            <Card.Title>{selected?.name ?? 'Details'}</Card.Title>
+            <Card.Description className="mt-1 text-xs">
+              {selected
+                ? 'Inspect metadata and preview file contents.'
+                : 'Select a file from the browser to inspect metadata and preview its contents.'}
+            </Card.Description>
+          </div>
+          {selected ? (
+            <Chip
+              className="shrink-0"
+              color={selected.isDirectory ? 'accent' : 'default'}
+              size="sm"
+              variant="soft"
+            >
+              {getEntryKind(selected)}
+            </Chip>
           ) : null}
+        </div>
+      </Card.Header>
 
-          {!selected.isDirectory && !isLikelyImageFile(selected.path) ? (
-            <View style={styles.previewBox}>
-              <Text style={styles.previewTitle}>File preview</Text>
-              {textPreviewLoading ? (
-                <View style={styles.previewLoading}>
-                  <ActivityIndicator />
-                  <Text style={styles.previewLoadingText}>
-                    Loading preview…
-                  </Text>
-                </View>
-              ) : textPreviewError ? (
-                <Text style={styles.previewError}>{textPreviewError}</Text>
-              ) : textPreview ? (
-                <ScrollView style={styles.textPreviewScroll}>
-                  <Text style={styles.textPreviewContent}>
-                    {formatTextPreview(textPreview)}
-                  </Text>
-                </ScrollView>
-              ) : (
-                <Text style={styles.previewHint}>
-                  Tap the file again to re-fetch preview (limited size).
-                </Text>
-              )}
-            </View>
-          ) : null}
-        </View>
-      )}
-    </View>
+      <Card.Content className="flex min-h-0 min-w-0 flex-1 flex-col gap-4 overflow-hidden">
+        {!selected ? (
+          <Surface
+            className="flex min-h-40 items-center justify-center rounded-xl border border-border/70 bg-surface px-4 py-6 text-center text-sm text-muted"
+            variant="secondary"
+          >
+            Select a file to inspect metadata and preview its contents.
+          </Surface>
+        ) : (
+          <>
+            <PathDisplay label="Path" path={selected.path} />
+
+            <div className="grid gap-3 sm:grid-cols-3">
+              <DetailStat label="Type" value={getEntryKind(selected)} />
+              <DetailStat
+                label="Size"
+                value={selected.isDirectory ? '-' : formatBytes(selected.size)}
+              />
+              <DetailStat
+                label="Modified"
+                value={formatDate(selected.modifiedAtMs)}
+              />
+            </div>
+
+            <Separator />
+
+            {isImageEntry ? (
+              <div className="flex min-h-0 min-w-0 flex-1 flex-col gap-3">
+                <div className="flex items-center gap-2 text-sm font-semibold text-foreground">
+                  <FileImage className="size-4 text-accent" />
+                  Image preview
+                </div>
+
+                {imagePreviewLoading ? (
+                  <Surface
+                    className="flex min-h-48 items-center justify-center gap-3 rounded-xl border border-border/70 bg-surface px-4 py-8 text-sm text-muted"
+                    variant="secondary"
+                  >
+                    <Loader2 className="size-5 animate-spin text-accent" />
+                    Loading preview...
+                  </Surface>
+                ) : imagePreviewError ? (
+                  <Surface
+                    className="rounded-xl border border-danger/25 bg-danger/10 px-4 py-4 text-sm text-danger"
+                    variant="secondary"
+                  >
+                    {imagePreviewError}
+                  </Surface>
+                ) : imagePreviewUri ? (
+                  <Surface
+                    className="min-w-0 overflow-hidden rounded-xl border border-border/70 bg-surface p-0"
+                    variant="secondary"
+                  >
+                    <img
+                      alt={`Preview of ${selected.name}`}
+                      className="h-auto max-h-80 w-full object-contain"
+                      src={imagePreviewUri}
+                    />
+                  </Surface>
+                ) : (
+                  <Surface
+                    className="rounded-xl border border-border/70 bg-surface px-4 py-4 text-sm text-muted"
+                    variant="secondary"
+                  >
+                    Select the file again to re-fetch the preview.
+                  </Surface>
+                )}
+              </div>
+            ) : (
+              <div className="flex min-h-0 min-w-0 flex-1 flex-col gap-3">
+                <div className="flex items-center gap-2 text-sm font-semibold text-foreground">
+                  <FileText className="size-4 text-accent" />
+                  File preview
+                </div>
+
+                {textPreviewLoading ? (
+                  <Surface
+                    className="flex min-h-48 items-center justify-center gap-3 rounded-xl border border-border/70 bg-surface px-4 py-8 text-sm text-muted"
+                    variant="secondary"
+                  >
+                    <Loader2 className="size-5 animate-spin text-accent" />
+                    Loading preview...
+                  </Surface>
+                ) : textPreviewError ? (
+                  <Surface
+                    className="rounded-xl border border-danger/25 bg-danger/10 px-4 py-4 text-sm text-danger"
+                    variant="secondary"
+                  >
+                    {textPreviewError}
+                  </Surface>
+                ) : textPreview ? (
+                  <Surface
+                    className="min-h-0 min-w-0 max-w-full overflow-x-auto overflow-y-auto rounded-xl border border-border/70 bg-surface px-4 py-4"
+                    variant="secondary"
+                  >
+                    <pre className="wrap-anywhere w-full max-w-full whitespace-pre-wrap break-all font-mono text-xs text-foreground">
+                      {formatTextPreview(textPreview)}
+                    </pre>
+                  </Surface>
+                ) : (
+                  <Surface
+                    className="rounded-xl border border-border/70 bg-surface px-4 py-4 text-sm text-muted"
+                    variant="secondary"
+                  >
+                    Select the file again to re-fetch the preview.
+                  </Surface>
+                )}
+              </div>
+            )}
+          </>
+        )}
+      </Card.Content>
+    </Card>
   );
 }
-
-const styles = StyleSheet.create({
-  detailPane: {
-    flex: 1,
-    padding: 16,
-  },
-  detailTitle: {
-    color: '#f2f2f2',
-    fontSize: 14,
-    fontWeight: '700',
-    marginBottom: 10,
-  },
-  detailEmpty: {
-    color: '#9a9aa7',
-    fontSize: 12,
-  },
-  detailCard: {
-    borderWidth: 1,
-    borderColor: '#1c1c24',
-    borderRadius: 12,
-    padding: 12,
-    backgroundColor: '#0f1016',
-    gap: 10,
-  },
-  detailName: {
-    color: '#f2f2f2',
-    fontSize: 13,
-    fontWeight: '700',
-  },
-  detailGrid: {
-    gap: 8,
-  },
-  previewBox: {
-    marginTop: 6,
-    borderTopWidth: 1,
-    borderTopColor: '#1c1c24',
-    paddingTop: 10,
-    gap: 8,
-  },
-  previewTitle: {
-    color: '#eaeaf2',
-    fontSize: 12,
-    fontWeight: '700',
-  },
-  previewHint: {
-    color: '#9a9aa7',
-    fontSize: 12,
-  },
-  previewError: {
-    color: '#ffb3c1',
-    fontSize: 12,
-  },
-  previewLoading: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 10,
-  },
-  previewLoadingText: {
-    color: '#cfcfe0',
-    fontSize: 12,
-  },
-  previewImage: {
-    width: '100%',
-    height: 240,
-    backgroundColor: '#0b0b0f',
-    borderRadius: 10,
-  },
-  textPreviewScroll: {
-    maxHeight: 300,
-    backgroundColor: '#0b0b0f',
-    borderRadius: 10,
-    padding: 12,
-    borderWidth: 1,
-    borderColor: '#1c1c24',
-  },
-  textPreviewContent: {
-    color: '#d6d6d6',
-    fontSize: 11,
-    fontFamily: 'Menlo',
-    lineHeight: 16,
-  },
-});
diff --git a/packages/file-system-plugin/src/ui/FileEntryRow.tsx b/packages/file-system-plugin/src/ui/FileEntryRow.tsx
deleted file mode 100644
index facddf55..00000000
--- a/packages/file-system-plugin/src/ui/FileEntryRow.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-import type { FsEntry } from '../shared/protocol';
-import { isLikelyImageFile, isLikelyTextFile } from '../shared/path';
-import { formatBytes, formatDate } from '../utils';
-import type { WebPressableState } from '../types';
-
-type FileEntryRowProps = {
-  entry: FsEntry;
-  isSelected: boolean;
-  onPress: (entry: FsEntry) => void;
-};
-
-function getFileIcon(entry: FsEntry): string {
-  if (entry.isDirectory) return '📁';
-  if (isLikelyImageFile(entry.path)) return '🖼️';
-  if (isLikelyTextFile(entry.path)) return '📝';
-  return '📄';
-}
-
-function FileEntryRowInner({ entry, isSelected, onPress }: FileEntryRowProps) {
-  return (
-    <Pressable
-      onPress={() => onPress(entry)}
-      style={(state: WebPressableState) => [
-        styles.row,
-        state.hovered && !isSelected && styles.rowHovered,
-        isSelected ? styles.rowSelected : undefined,
-      ]}
-    >
-      <Text style={styles.rowIcon}>{getFileIcon(entry)}</Text>
-      <View style={styles.rowMain}>
-        <Text style={styles.rowName} numberOfLines={1}>
-          {entry.name}
-        </Text>
-        <Text style={styles.rowMeta} numberOfLines={1}>
-          {entry.isDirectory
-            ? 'Directory'
-            : `${formatBytes(entry.size)} • ${formatDate(entry.modifiedAtMs)}`}
-        </Text>
-      </View>
-      <Text style={styles.rowChevron}>{entry.isDirectory ? '›' : ''}</Text>
-    </Pressable>
-  );
-}
-
-export const FileEntryRow = React.memo(FileEntryRowInner);
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 10,
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-  },
-  rowHovered: {
-    backgroundColor: 'rgba(255, 255, 255, 0.04)',
-  },
-  rowSelected: {
-    backgroundColor: 'rgba(130, 50, 255, 0.12)',
-  },
-  rowIcon: {
-    width: 24,
-    textAlign: 'center',
-    fontSize: 16,
-  },
-  rowMain: {
-    flex: 1,
-    gap: 2,
-  },
-  rowName: {
-    color: '#f2f2f2',
-    fontSize: 13,
-    fontWeight: '600',
-  },
-  rowMeta: {
-    color: '#9a9aa7',
-    fontSize: 11,
-  },
-  rowChevron: {
-    color: '#6f6f7e',
-    fontSize: 18,
-    paddingLeft: 6,
-  },
-});
diff --git a/packages/file-system-plugin/src/ui/FileEntryTable.tsx b/packages/file-system-plugin/src/ui/FileEntryTable.tsx
new file mode 100644
index 00000000..1f4e952a
--- /dev/null
+++ b/packages/file-system-plugin/src/ui/FileEntryTable.tsx
@@ -0,0 +1,319 @@
+import { useState, type ComponentProps, type ReactNode } from 'react';
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+} from '@tanstack/react-table';
+import { Chip, Surface, Table } from '@rozenite/ui';
+import {
+  ChevronRight,
+  ChevronUp,
+  File,
+  FileImage,
+  FileText,
+  Folder,
+  Inbox,
+  Loader2,
+} from 'lucide-react';
+import type { FsEntry } from '../shared/protocol';
+import { isLikelyImageFile, isLikelyTextFile } from '../shared/path';
+import { formatBytes, formatDate } from '../utils';
+
+type FileEntryTableProps = {
+  entries: FsEntry[];
+  loading?: boolean;
+  selectedPath?: string | null;
+  onEntryPress: (entry: FsEntry) => void;
+};
+
+const columnHelper = createColumnHelper<FsEntry>();
+
+type TableSortDescriptor = NonNullable<
+  ComponentProps<typeof Table.Content>['sortDescriptor']
+>;
+
+function toSortDescriptor(
+  sorting: SortingState,
+): TableSortDescriptor | undefined {
+  const firstSort = sorting[0];
+
+  if (!firstSort) {
+    return undefined;
+  }
+
+  return {
+    column: firstSort.id,
+    direction: firstSort.desc ? 'descending' : 'ascending',
+  };
+}
+
+function toSortingState(descriptor: TableSortDescriptor): SortingState {
+  return [
+    {
+      desc: descriptor.direction === 'descending',
+      id: String(descriptor.column),
+    },
+  ];
+}
+
+function SortableColumnHeader({
+  children,
+  sortDirection,
+}: {
+  children: ReactNode;
+  sortDirection?: 'ascending' | 'descending';
+}) {
+  return (
+    <span className="flex items-center justify-between gap-2">
+      <span>{children}</span>
+      {sortDirection ? (
+        <ChevronUp
+          className={`size-3 shrink-0 transition-transform duration-100 ease-out ${
+            sortDirection === 'descending' ? 'rotate-180' : ''
+          }`}
+        />
+      ) : null}
+    </span>
+  );
+}
+
+function getEntryKind(entry: FsEntry) {
+  if (entry.isDirectory) {
+    return 'Directory';
+  }
+
+  if (isLikelyImageFile(entry.path)) {
+    return 'Image';
+  }
+
+  if (isLikelyTextFile(entry.path)) {
+    return 'Text';
+  }
+
+  return 'File';
+}
+
+function getEntryKindColor(
+  entry: FsEntry,
+): 'success' | 'warning' | 'accent' | 'default' {
+  if (entry.isDirectory) {
+    return 'accent';
+  }
+
+  if (isLikelyImageFile(entry.path)) {
+    return 'warning';
+  }
+
+  if (isLikelyTextFile(entry.path)) {
+    return 'success';
+  }
+
+  return 'default';
+}
+
+function getEntryIcon(entry: FsEntry) {
+  if (entry.isDirectory) {
+    return Folder;
+  }
+
+  if (isLikelyImageFile(entry.path)) {
+    return FileImage;
+  }
+
+  if (isLikelyTextFile(entry.path)) {
+    return FileText;
+  }
+
+  return File;
+}
+
+export function FileEntryTable({
+  entries,
+  loading = false,
+  selectedPath,
+  onEntryPress,
+}: FileEntryTableProps) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const columns = [
+    columnHelper.display({
+      id: 'icon',
+      header: '',
+      cell: ({ row }) => {
+        const Icon = getEntryIcon(row.original);
+
+        return (
+          <span className="flex items-center justify-center">
+            <Icon
+              className={`size-4 ${
+                row.original.isDirectory ? 'text-accent' : 'text-muted'
+              }`}
+            />
+          </span>
+        );
+      },
+    }),
+    columnHelper.accessor('name', {
+      header: 'Name',
+      enableSorting: true,
+      cell: ({ row, getValue }) => (
+        <div className="flex min-w-0 items-center gap-2">
+          <span className="truncate text-sm font-medium text-foreground">
+            {getValue()}
+          </span>
+          {row.original.isDirectory ? (
+            <ChevronRight className="size-4 shrink-0 text-muted" />
+          ) : null}
+        </div>
+      ),
+    }),
+    columnHelper.accessor((entry) => getEntryKind(entry), {
+      id: 'kind',
+      header: 'Kind',
+      enableSorting: true,
+      cell: ({ row }) => (
+        <Chip
+          color={getEntryKindColor(row.original)}
+          size="sm"
+          variant="soft"
+        >
+          {getEntryKind(row.original)}
+        </Chip>
+      ),
+    }),
+    columnHelper.accessor((entry) => entry.isDirectory ? null : entry.size ?? null, {
+      id: 'size',
+      header: 'Size',
+      enableSorting: true,
+      cell: ({ row }) => (
+        <span className="text-sm text-foreground">
+          {row.original.isDirectory ? '-' : formatBytes(row.original.size)}
+        </span>
+      ),
+    }),
+    columnHelper.accessor((entry) => entry.modifiedAtMs ?? null, {
+      id: 'modified',
+      header: 'Modified',
+      enableSorting: true,
+      cell: ({ row }) => (
+        <span className="text-sm text-foreground">
+          {formatDate(row.original.modifiedAtMs)}
+        </span>
+      ),
+    }),
+  ];
+
+  const table = useReactTable({
+    data: entries,
+    columns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  if (loading) {
+    return (
+      <Surface
+        className="flex min-h-48 w-full flex-col items-center justify-center gap-3 rounded-xl border border-border/70 bg-surface px-4 py-8 text-center text-sm text-muted shadow-sm"
+        variant="secondary"
+      >
+        <Loader2 className="size-8 animate-spin text-accent" />
+        <p>Loading directory contents...</p>
+      </Surface>
+    );
+  }
+
+  return (
+    <Table
+      className="w-full border border-border/70 bg-surface shadow-sm"
+      variant="secondary"
+    >
+      <Table.ScrollContainer className="w-full">
+        <Table.Content
+          aria-label="File system entries"
+          className="min-w-full"
+          onRowAction={(key) => {
+            const entry = entries.find((item) => item.path === String(key));
+            if (entry) {
+              onEntryPress(entry);
+            }
+          }}
+          onSortChange={(descriptor) => setSorting(toSortingState(descriptor))}
+          sortDescriptor={toSortDescriptor(sorting)}
+        >
+          <Table.Header>
+            {table.getHeaderGroups()[0]?.headers.map((header) => (
+              <Table.Column
+                key={header.id}
+                allowsSorting={header.column.getCanSort()}
+                id={header.id}
+                isRowHeader={header.id === 'name'}
+              >
+                {({ sortDirection }) =>
+                  header.column.getCanSort() ? (
+                    <SortableColumnHeader sortDirection={sortDirection}>
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                    </SortableColumnHeader>
+                  ) : (
+                    flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
+                    )
+                  )
+                }
+              </Table.Column>
+            ))}
+          </Table.Header>
+          <Table.Body
+            renderEmptyState={() => (
+              <div className="flex h-full w-full flex-col items-center justify-center gap-4 px-4 py-10 text-center">
+                <Inbox className="size-6 text-muted" />
+                <span className="text-sm text-muted">
+                  This directory appears to be empty.
+                </span>
+              </div>
+            )}
+          >
+            {table.getRowModel().rows.map((row) => {
+              const isSelected = row.original.path === selectedPath;
+
+              return (
+                <Table.Row
+                  key={row.original.path}
+                  className={`cursor-pointer transition-colors ${
+                    isSelected
+                      ? 'bg-accent/10 hover:bg-accent/15'
+                      : 'hover:bg-surface-secondary/70'
+                  }`}
+                  id={row.original.path}
+                  textValue={row.original.name}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <Table.Cell
+                      key={cell.id}
+                      className={
+                        cell.column.id === 'name' ? 'min-w-0' : undefined
+                      }
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </Table.Cell>
+                  ))}
+                </Table.Row>
+              );
+            })}
+          </Table.Body>
+        </Table.Content>
+      </Table.ScrollContainer>
+    </Table>
+  );
+}
diff --git a/packages/file-system-plugin/src/ui/PathDisplay.tsx b/packages/file-system-plugin/src/ui/PathDisplay.tsx
index f137e5ce..184142b2 100644
--- a/packages/file-system-plugin/src/ui/PathDisplay.tsx
+++ b/packages/file-system-plugin/src/ui/PathDisplay.tsx
@@ -1,30 +1,43 @@
-import React, { useCallback, useState } from 'react';
-import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
-import type { WebPressableState } from '../types';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Button, Input, TextField } from '@rozenite/ui';
+import { AlertCircle, Check, Copy } from 'lucide-react';
 import { copyToClipboard } from '../utils';
 
 type CopyState = 'idle' | 'copied' | 'error';
 
 type PathDisplayProps = {
-  path: string;
   label?: string;
+  path: string;
 };
 
-export function PathDisplay({ path, label }: PathDisplayProps) {
+export function PathDisplay({ label, path }: PathDisplayProps) {
   const [copyState, setCopyState] = useState<CopyState>('idle');
+  const resetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (resetTimerRef.current) {
+        clearTimeout(resetTimerRef.current);
+      }
+    },
+    [],
+  );
 
   const handleCopy = useCallback(() => {
     const success = copyToClipboard(path);
-    if (success) {
-      setCopyState('copied');
-    } else {
-      setCopyState('error');
+
+    setCopyState(success ? 'copied' : 'error');
+
+    if (resetTimerRef.current) {
+      clearTimeout(resetTimerRef.current);
     }
-    setTimeout(() => setCopyState('idle'), 2000);
+
+    resetTimerRef.current = setTimeout(() => {
+      setCopyState('idle');
+      resetTimerRef.current = null;
+    }, 2000);
   }, [path]);
 
-  const copyIcon =
-    copyState === 'copied' ? '✓' : copyState === 'error' ? '✕' : '⧉';
   const copyLabel =
     copyState === 'copied'
       ? 'Copied!'
@@ -32,131 +45,36 @@ export function PathDisplay({ path, label }: PathDisplayProps) {
         ? 'Failed'
         : 'Copy';
 
+  const CopyIcon =
+    copyState === 'copied' ? Check : copyState === 'error' ? AlertCircle : Copy;
+
   return (
-    <View style={styles.pathDisplayContainer}>
-      {label ? <Text style={styles.pathDisplayLabel}>{label}</Text> : null}
-      <View style={styles.pathDisplayRow}>
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          style={styles.pathDisplayScroll}
-          contentContainerStyle={styles.pathDisplayScrollContent}
+    <div className="flex min-w-0 flex-col gap-2">
+      {label ? (
+        <p className="text-xs font-medium text-muted">{label}</p>
+      ) : null}
+      <div className="flex min-w-0 items-center gap-2">
+        <TextField aria-label={label ?? 'Path'} className="min-w-0 flex-1">
+          <Input fullWidth readOnly value={path} variant="secondary" />
+        </TextField>
+        <Button
+          className="shrink-0"
+          onPress={handleCopy}
+          size="sm"
+          variant="secondary"
         >
-          <Text style={styles.pathDisplayText} selectable>
-            {path}
-          </Text>
-        </ScrollView>
-        <View style={styles.pathDisplayActions}>
-          <Pressable
-            style={(state: WebPressableState) => [
-              styles.pathActionButton,
-              state.hovered && styles.pathActionButtonHovered,
-              copyState === 'copied' && styles.pathActionButtonSuccess,
-              copyState === 'error' && styles.pathActionButtonError,
-            ]}
-            onPress={handleCopy}
-          >
-            <Text
-              style={[
-                styles.pathActionIcon,
-                copyState === 'copied' && styles.pathActionIconSuccess,
-                copyState === 'error' && styles.pathActionIconError,
-              ]}
-            >
-              {copyIcon}
-            </Text>
-            <Text
-              style={[
-                styles.pathActionLabel,
-                copyState === 'copied' && styles.pathActionLabelSuccess,
-                copyState === 'error' && styles.pathActionLabelError,
-              ]}
-            >
-              {copyLabel}
-            </Text>
-          </Pressable>
-        </View>
-      </View>
-    </View>
+          <CopyIcon
+            className={`size-4 ${
+              copyState === 'copied'
+                ? 'text-success'
+                : copyState === 'error'
+                  ? 'text-danger'
+                  : 'text-muted'
+            }`}
+          />
+          {copyLabel}
+        </Button>
+      </div>
+    </div>
   );
 }
-
-const styles = StyleSheet.create({
-  pathDisplayContainer: {
-    flex: 1,
-    gap: 6,
-  },
-  pathDisplayLabel: {
-    color: '#9a9aa7',
-    fontSize: 11,
-    fontWeight: '600',
-  },
-  pathDisplayRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    backgroundColor: '#0b0b0f',
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: '#1c1c24',
-    paddingLeft: 10,
-    paddingVertical: 2,
-    overflow: 'hidden',
-  },
-  pathDisplayScroll: {
-    flex: 1,
-    maxHeight: 32,
-  },
-  pathDisplayScrollContent: {
-    alignItems: 'center',
-    paddingVertical: 6,
-  },
-  pathDisplayText: {
-    color: '#b8b8c8',
-    fontSize: 11,
-    fontFamily: 'Menlo',
-  },
-  pathDisplayActions: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  pathActionButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    borderLeftWidth: 1,
-    borderLeftColor: '#2a2b37',
-  },
-  pathActionButtonHovered: {
-    backgroundColor: 'rgba(255, 255, 255, 0.06)',
-  },
-  pathActionButtonSuccess: {
-    backgroundColor: 'rgba(74, 222, 128, 0.1)',
-  },
-  pathActionButtonError: {
-    backgroundColor: 'rgba(255, 99, 132, 0.1)',
-  },
-  pathActionIcon: {
-    color: '#9a9aa7',
-    fontSize: 12,
-  },
-  pathActionIconSuccess: {
-    color: '#4ade80',
-  },
-  pathActionIconError: {
-    color: '#ff6384',
-  },
-  pathActionLabel: {
-    color: '#9a9aa7',
-    fontSize: 10,
-    fontWeight: '600',
-  },
-  pathActionLabelSuccess: {
-    color: '#4ade80',
-  },
-  pathActionLabelError: {
-    color: '#ff6384',
-  },
-});
diff --git a/packages/file-system-plugin/src/ui/TopBar.tsx b/packages/file-system-plugin/src/ui/TopBar.tsx
deleted file mode 100644
index 8612bacf..00000000
--- a/packages/file-system-plugin/src/ui/TopBar.tsx
+++ /dev/null
@@ -1,244 +0,0 @@
-import React, { useMemo } from 'react';
-import {
-  Pressable,
-  StyleSheet,
-  Text,
-  TextInput,
-  View,
-} from 'react-native';
-import type { FileSystemProvider, FsRoots } from '../shared/protocol';
-import type { WebPressableState } from '../types';
-
-type TopBarProps = {
-  provider: FileSystemProvider;
-  roots: FsRoots['roots'];
-  pathInput: string;
-  setPathInput: (value: string) => void;
-  currentPath: string;
-  setCurrentPath: (path: string) => void;
-  canGoBack: boolean;
-  onGo: () => void;
-  onBack: () => void;
-  onReload: () => void;
-};
-
-function getProviderLabel(provider: FileSystemProvider): string {
-  if (provider === 'expo') return 'Expo FileSystem';
-  if (provider === 'rnfs') return 'react-native-fs';
-  return 'No provider';
-}
-
-export function TopBar({
-  provider,
-  roots,
-  pathInput,
-  setPathInput,
-  currentPath,
-  setCurrentPath,
-  canGoBack,
-  onGo,
-  onBack,
-  onReload,
-}: TopBarProps) {
-  const rootChips = useMemo(() => {
-    return roots.map((r) => {
-      const isActive = r.path === currentPath;
-      return (
-        <Pressable
-          key={r.id}
-          style={(state: WebPressableState) => [
-            styles.chip,
-            state.hovered && !isActive && styles.chipHovered,
-            isActive ? styles.chipActive : undefined,
-          ]}
-          onPress={() => setCurrentPath(r.path)}
-        >
-          <Text
-            style={[
-              styles.chipText,
-              isActive ? styles.chipTextActive : undefined,
-            ]}
-            numberOfLines={1}
-          >
-            {r.label}
-          </Text>
-        </Pressable>
-      );
-    });
-  }, [currentPath, roots, setCurrentPath]);
-
-  return (
-    <View style={styles.topBar}>
-      <View style={styles.topBarLeft}>
-        <Text style={styles.title}>File System</Text>
-        <Text style={styles.statusText}>{getProviderLabel(provider)}</Text>
-      </View>
-
-      <View style={styles.controls}>
-        <View style={styles.controlsRow}>
-          <Pressable
-            style={(state: WebPressableState) => [
-              styles.iconButton,
-              state.hovered && canGoBack && styles.iconButtonHovered,
-              !canGoBack ? styles.buttonDisabled : null,
-            ]}
-            onPress={onBack}
-            disabled={!canGoBack}
-          >
-            <Text style={styles.iconButtonText}>←</Text>
-          </Pressable>
-
-          <Pressable
-            style={(state: WebPressableState) => [
-              styles.iconButton,
-              state.hovered && !!currentPath && styles.iconButtonHovered,
-              !currentPath ? styles.buttonDisabled : null,
-            ]}
-            onPress={onReload}
-            disabled={!currentPath}
-          >
-            <Text style={styles.iconButtonText}>↻</Text>
-          </Pressable>
-
-          <View style={styles.pathInputWrap}>
-            <TextInput
-              style={styles.pathInput}
-              value={pathInput}
-              onChangeText={setPathInput}
-              placeholder="Enter a directory path…"
-              placeholderTextColor="#8a8a8a"
-              autoCorrect={false}
-              autoCapitalize="none"
-              onSubmitEditing={onGo}
-            />
-          </View>
-
-          <Pressable
-            style={(state: WebPressableState) => [
-              styles.primaryButton,
-              state.hovered && styles.primaryButtonHovered,
-            ]}
-            onPress={onGo}
-          >
-            <Text style={styles.primaryButtonText}>Go</Text>
-          </Pressable>
-        </View>
-
-        <View style={styles.chipsRow}>{rootChips}</View>
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  topBar: {
-    paddingHorizontal: 16,
-    paddingTop: 12,
-    paddingBottom: 10,
-    borderBottomWidth: 1,
-    borderBottomColor: '#1c1c24',
-    backgroundColor: '#0f1016',
-  },
-  topBarLeft: {
-    flexDirection: 'row',
-    alignItems: 'baseline',
-    justifyContent: 'space-between',
-    marginBottom: 10,
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: '#f2f2f2',
-  },
-  statusText: {
-    fontSize: 12,
-    color: '#9a9aa7',
-  },
-  controls: {
-    gap: 10,
-  },
-  controlsRow: {
-    flexDirection: 'row',
-    gap: 8,
-    alignItems: 'center',
-  },
-  chipsRow: {
-    flexDirection: 'row',
-    gap: 8,
-    flexWrap: 'wrap',
-  },
-  iconButton: {
-    width: 36,
-    height: 36,
-    borderRadius: 8,
-    backgroundColor: '#1b1c25',
-    borderWidth: 1,
-    borderColor: '#2a2b37',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  iconButtonHovered: {
-    backgroundColor: '#252633',
-  },
-  iconButtonText: {
-    color: '#e9e9ee',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  buttonDisabled: {
-    opacity: 0.4,
-  },
-  primaryButton: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 8,
-    backgroundColor: '#8232ff',
-  },
-  primaryButtonHovered: {
-    backgroundColor: '#9550ff',
-  },
-  primaryButtonText: {
-    color: '#ffffff',
-    fontSize: 12,
-    fontWeight: '700',
-  },
-  pathInputWrap: {
-    flex: 1,
-    minWidth: 240,
-  },
-  pathInput: {
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: '#2a2b37',
-    backgroundColor: '#0b0b0f',
-    color: '#f2f2f2',
-    fontSize: 12,
-  },
-  chip: {
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderRadius: 999,
-    backgroundColor: '#161723',
-    borderWidth: 1,
-    borderColor: '#2a2b37',
-    maxWidth: 220,
-  },
-  chipHovered: {
-    backgroundColor: '#1e1f2e',
-    borderColor: '#3a3b4a',
-  },
-  chipActive: {
-    borderColor: '#8232ff',
-    backgroundColor: 'rgba(130, 50, 255, 0.14)',
-  },
-  chipText: {
-    color: '#cfcfe0',
-    fontSize: 12,
-    fontWeight: '600',
-  },
-  chipTextActive: {
-    color: '#efe7ff',
-  },
-});
diff --git a/packages/file-system-plugin/src/ui/globals.css b/packages/file-system-plugin/src/ui/globals.css
new file mode 100644
index 00000000..e862ec52
--- /dev/null
+++ b/packages/file-system-plugin/src/ui/globals.css
@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@import '@rozenite/ui/styles.css';
diff --git a/packages/file-system-plugin/tailwind.config.ts b/packages/file-system-plugin/tailwind.config.ts
deleted file mode 100644
index d756b75a..00000000
--- a/packages/file-system-plugin/tailwind.config.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import type { Config } from 'tailwindcss';
-
-const config: Config = {
-  darkMode: ['class'],
-  content: ['./src/ui/**/*.{js,ts,jsx,tsx,mdx}'],
-  theme: {
-    extend: {
-      translate: {
-        '0.75': '0.1875rem',
-      },
-      colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        chart: {
-          '1': 'hsl(var(--chart-1))',
-          '2': 'hsl(var(--chart-2))',
-          '3': 'hsl(var(--chart-3))',
-          '4': 'hsl(var(--chart-4))',
-          '5': 'hsl(var(--chart-5))',
-        },
-        sidebar: {
-          DEFAULT: 'hsl(var(--sidebar-background))',
-          foreground: 'hsl(var(--sidebar-foreground))',
-          primary: 'hsl(var(--sidebar-primary))',
-          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-          accent: 'hsl(var(--sidebar-accent))',
-          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-          border: 'hsl(var(--sidebar-border))',
-          ring: 'hsl(var(--sidebar-ring))',
-        },
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      keyframes: {
-        'accordion-down': {
-          from: {
-            height: '0',
-          },
-          to: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-        },
-        'accordion-up': {
-          from: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-          to: {
-            height: '0',
-          },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-      },
-    },
-  },
-  plugins: [require('tailwindcss-animate')],
-};
-export default config;
diff --git a/packages/file-system-plugin/tsconfig.json b/packages/file-system-plugin/tsconfig.json
index c95eb1da..349b6a99 100644
--- a/packages/file-system-plugin/tsconfig.json
+++ b/packages/file-system-plugin/tsconfig.json
@@ -11,6 +11,12 @@
     "noFallthroughCasesInSwitch": true,
     "module": "ESNext",
     "moduleResolution": "bundler",
+    "baseUrl": ".",
+    "paths": {
+      "@rozenite/plugin-bridge": ["../plugin-bridge/src/index.ts"],
+      "@rozenite/ui": ["../ui/src/index.ts"],
+      "@rozenite/ui/*": ["../ui/*"]
+    },
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
diff --git a/packages/mmkv-plugin/src/ui/editable-table.tsx b/packages/mmkv-plugin/src/ui/editable-table.tsx
index 81692557..a8baaaf0 100644
--- a/packages/mmkv-plugin/src/ui/editable-table.tsx
+++ b/packages/mmkv-plugin/src/ui/editable-table.tsx
@@ -221,6 +221,12 @@ export const EditableTable = ({
           <Table.Content
             aria-label="MMKV entries"
             className="min-w-full"
+            onRowAction={(key) => {
+              const entry = data.find((item) => item.key === String(key));
+              if (entry) {
+                onRowClick?.(entry);
+              }
+            }}
             onSortChange={(descriptor) =>
               setSorting(toSortingState(descriptor))
             }
@@ -271,19 +277,7 @@ export const EditableTable = ({
                     onRowClick ? 'cursor-pointer' : ''
                   }`}
                   id={row.original.key}
-                  onClick={(event) => {
-                    const target = event.target as HTMLElement;
-                    if (
-                      target.tagName === 'BUTTON' ||
-                      target.closest('button') ||
-                      target.tagName === 'INPUT' ||
-                      target.closest('input')
-                    ) {
-                      return;
-                    }
-
-                    onRowClick?.(row.original);
-                  }}
+                  textValue={row.original.key}
                 >
                   {row.getVisibleCells().map((cell) => (
                     <Table.Cell
diff --git a/packages/mmkv-plugin/src/ui/globals.css b/packages/mmkv-plugin/src/ui/globals.css
index 77390a0f..e862ec52 100644
--- a/packages/mmkv-plugin/src/ui/globals.css
+++ b/packages/mmkv-plugin/src/ui/globals.css
@@ -1,41 +1,2 @@
 @import 'tailwindcss';
 @import '@rozenite/ui/styles.css';
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-
-  .wrap-anywhere {
-    overflow-wrap: anywhere;
-  }
-}
-
-/* Custom scrollbar styles to match plugin theme */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: #1f2937; /* gray-800 */
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #374151; /* gray-700 */
-  border-radius: 4px;
-  border: 1px solid #1f2937; /* gray-800 */
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #4b5563; /* gray-600 */
-}
-
-::-webkit-scrollbar-thumb:active {
-  background: #6b7280; /* gray-500 */
-}
-
-::-webkit-scrollbar-corner {
-  background: #1f2937; /* gray-800 */
-}
diff --git a/packages/mmkv-plugin/src/ui/panel.tsx b/packages/mmkv-plugin/src/ui/panel.tsx
index 375953d6..94bd68b6 100644
--- a/packages/mmkv-plugin/src/ui/panel.tsx
+++ b/packages/mmkv-plugin/src/ui/panel.tsx
@@ -1,6 +1,12 @@
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
 import { useEffect, useMemo, useState } from 'react';
-import { ListBox, SearchField, Select } from '@rozenite/ui';
+import {
+  ListBox,
+  PluginHeader,
+  PluginTheme,
+  SearchField,
+  Select,
+} from '@rozenite/ui';
 import type {
   MMKVDeleteEntryEvent,
   MMKVEventMap,
@@ -243,51 +249,53 @@ export default function MMKVPanel() {
   const instanceOptions = [...instances.keys()];
 
   return (
-    <div
-      data-theme="dark"
-      className="dark h-screen bg-background text-foreground flex flex-col"
+    <PluginTheme
+      defaultTheme="dark"
+      storageKey="@rozenite/mmkv-plugin.theme"
+      className="flex h-screen flex-col bg-background text-foreground"
     >
-      <div className="flex items-center gap-2 p-2">
-        <span className="text-sm font-medium text-default-foreground">
-          MMKV Storage
-        </span>
-        <div className="flex-1" />
-        <Select
-          placeholder="Select instance"
-          value={selectedInstance ?? ''}
-          onChange={(value) =>
-            setSelectedInstance(
-              typeof value === 'string'
-                ? value
-                : value == null
-                  ? null
-                  : String(value),
-            )
-          }
-          isDisabled={instances.size === 0}
-        >
-          <Select.Trigger>
-            <Select.Value />
-            <Select.Indicator />
-          </Select.Trigger>
-          <Select.Popover>
-            <ListBox>
-              {instanceOptions.map((instanceId) => (
-                <ListBox.Item
-                  key={instanceId}
-                  id={instanceId}
-                  textValue={instanceId}
-                >
-                  {instanceId}
-                  <ListBox.ItemIndicator />
-                </ListBox.Item>
-              ))}
-            </ListBox>
-          </Select.Popover>
-        </Select>
-      </div>
+      <PluginHeader
+        title="MMKV Storage"
+        actions={
+          <div className="w-56 max-w-[44vw] min-w-40">
+            <Select
+              placeholder="Select instance"
+              value={selectedInstance ?? ''}
+              onChange={(value) =>
+                setSelectedInstance(
+                  typeof value === 'string'
+                    ? value
+                    : value == null
+                      ? null
+                      : String(value),
+                )
+              }
+              isDisabled={instances.size === 0}
+            >
+              <Select.Trigger>
+                <Select.Value />
+                <Select.Indicator />
+              </Select.Trigger>
+              <Select.Popover>
+                <ListBox>
+                  {instanceOptions.map((instanceId) => (
+                    <ListBox.Item
+                      key={instanceId}
+                      id={instanceId}
+                      textValue={instanceId}
+                    >
+                      {instanceId}
+                      <ListBox.ItemIndicator />
+                    </ListBox.Item>
+                  ))}
+                </ListBox>
+              </Select.Popover>
+            </Select>
+          </div>
+        }
+      />
 
-      <div className="flex items-center gap-2 p-2">
+      <div className="flex items-center gap-2 px-3 pb-3 pt-3">
         <AddEntryDialog
           isDisabled={!selectedInstance}
           onAddEntry={handleAddEntry}
@@ -351,6 +359,6 @@ export default function MMKVPanel() {
         }}
         entry={editingEntry}
       />
-    </div>
+    </PluginTheme>
   );
 }
diff --git a/packages/overlay-plugin/package.json b/packages/overlay-plugin/package.json
index 5e6ca2d4..4d676b34 100644
--- a/packages/overlay-plugin/package.json
+++ b/packages/overlay-plugin/package.json
@@ -21,9 +21,12 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@rozenite/plugin-bridge": "workspace:*"
+    "@heroui/react": "^3.0.1",
+    "@rozenite/plugin-bridge": "workspace:*",
+    "@rozenite/ui": "workspace:*"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.2.2",
     "@rozenite/vite-plugin": "workspace:*",
     "@types/react": "catalog:",
     "autoprefixer": "^10.4.21",
@@ -35,7 +38,8 @@
     "react-native-svg": "~15.8.0",
     "react-native-web": "^0.21.2",
     "rozenite": "workspace:*",
-    "tailwindcss": "^3.4.17",
+    "tailwind-variants": "^2.0.0",
+    "tailwindcss": "^4.2.2",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "~5.9.3",
     "vite": "catalog:"
diff --git a/packages/overlay-plugin/postcss.config.js b/packages/overlay-plugin/postcss.config.js
index 1d926516..a34a3d56 100644
--- a/packages/overlay-plugin/postcss.config.js
+++ b/packages/overlay-plugin/postcss.config.js
@@ -1,7 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };
-
diff --git a/packages/overlay-plugin/src/ui/components/GridSettings.tsx b/packages/overlay-plugin/src/ui/components/GridSettings.tsx
index eb9c226f..9d7b6f15 100644
--- a/packages/overlay-plugin/src/ui/components/GridSettings.tsx
+++ b/packages/overlay-plugin/src/ui/components/GridSettings.tsx
@@ -1,13 +1,83 @@
-import { useState, useEffect } from 'react';
-import { GridConfig } from '../../shared/types';
+import { useEffect, useState } from 'react';
+import { parseColor } from '@heroui/react';
+import {
+  Card,
+  ColorArea,
+  ColorField,
+  ColorPicker,
+  ColorSlider,
+  ColorSwatch,
+  Description,
+  Slider,
+  Switch,
+} from '@rozenite/ui';
 import { Grid } from 'lucide-react';
+import { GridConfig } from '../../shared/types';
 import { useThrottledCallback } from '../hooks/useThrottledCallback';
 
+type SliderValue = number | number[];
+
 export type GridSettingsProps = {
   config: GridConfig;
   onConfigChange: (config: GridConfig) => void;
 };
 
+const FALLBACK_GRID_COLOR = parseColor('#FF0000');
+
+const getSliderNumber = (value: SliderValue) =>
+  Array.isArray(value) ? (value[0] ?? 0) : value;
+
+const getPickerColor = (value: string) => {
+  try {
+    return parseColor(value);
+  } catch {
+    return FALLBACK_GRID_COLOR;
+  }
+};
+
+type SliderControlProps = {
+  ariaLabel: string;
+  label: string;
+  maxValue: number;
+  minValue: number;
+  onChange: (value: number) => void;
+  step?: number;
+  value: number;
+  valueLabel: string;
+};
+
+const SliderControl = ({
+  ariaLabel,
+  label,
+  maxValue,
+  minValue,
+  onChange,
+  step = 1,
+  value,
+  valueLabel,
+}: SliderControlProps) => {
+  return (
+    <Slider
+      aria-label={ariaLabel}
+      className="gap-3"
+      maxValue={maxValue}
+      minValue={minValue}
+      step={step}
+      value={value}
+      onChange={(nextValue) => onChange(getSliderNumber(nextValue))}
+    >
+      <div className="flex items-center justify-between gap-3">
+        <div className="text-sm font-medium text-foreground">{label}</div>
+        <div className="text-xs text-muted">{valueLabel}</div>
+      </div>
+      <Slider.Track>
+        <Slider.Fill />
+        <Slider.Thumb />
+      </Slider.Track>
+    </Slider>
+  );
+};
+
 export const GridSettings = ({ config, onConfigChange }: GridSettingsProps) => {
   const [localOpacity, setLocalOpacity] = useState(config.opacity);
 
@@ -28,126 +98,160 @@ export const GridSettings = ({ config, onConfigChange }: GridSettingsProps) => {
     commitChange({ opacity: value });
   };
 
+  const pickerColor = getPickerColor(config.color);
+
   return (
-    <div className="settings-section">
-      <div className="section-header">
-        <div className="section-title">
-          <Grid size={18} />
-          <span>Grid overlay</span>
+    <Card className="flex min-h-0 flex-col">
+      <Card.Header className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <Card.Title className="flex items-center gap-2">
+            <Grid className="size-4" />
+            Grid overlay
+          </Card.Title>
+          <Card.Description className="mt-1 text-xs">
+            Tune spacing, line emphasis, and color for layout checks.
+          </Card.Description>
         </div>
-        <label className="toggle-switch">
-          <input
-            type="checkbox"
-            checked={config.enabled}
-            onChange={(e) => handleChange({ enabled: e.target.checked })}
-          />
-          <span className="toggle-slider"></span>
-        </label>
-      </div>
+        <Switch
+          aria-label="Toggle grid overlay"
+          isSelected={config.enabled}
+          size="sm"
+          onChange={(isSelected) => handleChange({ enabled: isSelected })}
+        >
+          <Switch.Control>
+            <Switch.Thumb />
+          </Switch.Control>
+        </Switch>
+      </Card.Header>
 
-      {config.enabled && (
-        <div className="section-content">
-          <div className="control-group">
-            <label className="control-label">Cell size ({config.size}px)</label>
-            <input
-              type="range"
-              min="4"
-              max="50"
+      <Card.Content className="space-y-5">
+        {config.enabled ? (
+          <>
+            <SliderControl
+              ariaLabel="Grid cell size"
+              label="Cell size"
+              maxValue={50}
+              minValue={4}
               value={config.size}
-              onChange={(e) => handleChange({ size: Number(e.target.value) })}
-              className="input-range"
+              valueLabel={`${config.size}px`}
+              onChange={(value) => handleChange({ size: value })}
             />
-          </div>
-
-          <div className="control-group">
-            <label className="control-label">
-              Major grid every {config.majorEvery > 0 ? `${config.majorEvery} cells` : 'Off'}
-            </label>
-            <input
-              type="range"
-              min="0"
-              max="20"
-              step="1"
+
+            <SliderControl
+              ariaLabel="Major grid interval"
+              label="Major grid every"
+              maxValue={20}
+              minValue={0}
               value={config.majorEvery}
-              onChange={(e) => handleChange({ majorEvery: Number(e.target.value) })}
-              className="input-range"
+              valueLabel={
+                config.majorEvery > 0 ? `${config.majorEvery} cells` : 'Off'
+              }
+              onChange={(value) => handleChange({ majorEvery: value })}
             />
-          </div>
-
-          <div className="control-group">
-            <label className="control-label">Line weights</label>
-            <div className="control-row" style={{ gap: '12px' }}>
-              <div style={{ flex: 1 }}>
-                <label
-                  className="control-label"
-                  style={{ fontSize: '11px', marginBottom: '4px', color: 'var(--color-text-secondary)' }}
-                >
-                  Minor ({config.minorLineWidth}px)
-                </label>
-                <input
-                  type="range"
-                  min="1"
-                  max="10"
-                  value={config.minorLineWidth}
-                  onChange={(e) => handleChange({ minorLineWidth: Number(e.target.value) })}
-                  className="input-range"
-                />
-              </div>
-              <div style={{ flex: 1 }}>
-                <label
-                  className="control-label"
-                  style={{ fontSize: '11px', marginBottom: '4px', color: 'var(--color-text-secondary)' }}
-                >
-                  Major ({config.majorLineWidth}px)
-                </label>
-                <input
-                  type="range"
-                  min="1"
-                  max="10"
-                  value={config.majorLineWidth}
-                  onChange={(e) => handleChange({ majorLineWidth: Number(e.target.value) })}
-                  className="input-range"
-                />
-              </div>
-            </div>
-          </div>
-
-          <div className="control-group">
-            <label className="control-label">Color</label>
-            <div className="control-row">
-              <input
-                type="color"
-                value={config.color}
-                onChange={(e) => handleChange({ color: e.target.value })}
-                className="input-control"
+
+            <div className="grid gap-4 sm:grid-cols-2">
+              <SliderControl
+                ariaLabel="Minor grid line width"
+                label="Minor line"
+                maxValue={10}
+                minValue={1}
+                value={config.minorLineWidth}
+                valueLabel={`${config.minorLineWidth}px`}
+                onChange={(value) => handleChange({ minorLineWidth: value })}
               />
-              <input
-                type="text"
-                value={config.color}
-                onChange={(e) => handleChange({ color: e.target.value })}
-                className="input-control"
-                placeholder="#FF0000"
-                style={{ flex: 1 }}
+
+              <SliderControl
+                ariaLabel="Major grid line width"
+                label="Major line"
+                maxValue={10}
+                minValue={1}
+                value={config.majorLineWidth}
+                valueLabel={`${config.majorLineWidth}px`}
+                onChange={(value) => handleChange({ majorLineWidth: value })}
               />
             </div>
-          </div>
-
-          <div className="control-group">
-            <label className="control-label">
-              Opacity ({Math.round(localOpacity * 100)}%)
-            </label>
-            <input
-              type="range"
-              min="0"
-              max="1"
-              step="0.01"
+
+            <div className="space-y-3">
+              <div>
+                <div className="text-sm font-medium text-foreground">Color</div>
+                <Description className="mt-1 text-xs text-muted">
+                  Pick the overlay stroke color used for both major and minor
+                  lines.
+                </Description>
+              </div>
+
+              <ColorPicker
+                aria-label="Grid overlay color"
+                value={pickerColor}
+                onChange={(value) =>
+                  handleChange({ color: value.toString('hex') })
+                }
+              >
+                <ColorPicker.Trigger className="flex w-full items-center justify-between gap-3 rounded-md border border-border/70 bg-field-background px-3 py-2 text-left shadow-xs transition hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus/40">
+                  <div className="flex min-w-0 items-center gap-3">
+                    <ColorSwatch
+                      className="size-6 shrink-0 rounded-md border border-border/70 shadow-xs"
+                      color={pickerColor}
+                    />
+                    <div className="min-w-0">
+                      <div className="truncate text-sm font-medium text-foreground">
+                        Pick grid color
+                      </div>
+                      <div className="truncate text-xs text-muted">
+                        {config.color}
+                      </div>
+                    </div>
+                  </div>
+                </ColorPicker.Trigger>
+
+                <ColorPicker.Popover className="w-[min(20rem,calc(100vw-2rem))]">
+                  <div className="space-y-4 p-4">
+                    <ColorArea
+                      aria-label="Grid color saturation and brightness"
+                      colorSpace="hsb"
+                      xChannel="saturation"
+                      yChannel="brightness"
+                    >
+                      <ColorArea.Thumb />
+                    </ColorArea>
+
+                    <ColorSlider
+                      aria-label="Grid color hue"
+                      channel="hue"
+                      colorSpace="hsb"
+                    >
+                      <ColorSlider.Track>
+                        <ColorSlider.Thumb />
+                      </ColorSlider.Track>
+                    </ColorSlider>
+
+                    <ColorField aria-label="Grid color value" fullWidth>
+                      <ColorField.Group fullWidth>
+                        <ColorField.Input />
+                      </ColorField.Group>
+                    </ColorField>
+                  </div>
+                </ColorPicker.Popover>
+              </ColorPicker>
+            </div>
+
+            <SliderControl
+              ariaLabel="Grid opacity"
+              label="Opacity"
+              maxValue={1}
+              minValue={0}
+              step={0.01}
               value={localOpacity}
-              onChange={(e) => handleOpacityChange(Number(e.target.value))}
-              className="input-range"
+              valueLabel={`${Math.round(localOpacity * 100)}%`}
+              onChange={handleOpacityChange}
             />
-          </div>
-        </div>
-      )}
-    </div>
+          </>
+        ) : (
+          <Description className="text-sm text-muted">
+            Enable the grid overlay to adjust spacing, line weight, and color.
+          </Description>
+        )}
+      </Card.Content>
+    </Card>
   );
 };
diff --git a/packages/overlay-plugin/src/ui/components/Header.tsx b/packages/overlay-plugin/src/ui/components/Header.tsx
deleted file mode 100644
index 401d596f..00000000
--- a/packages/overlay-plugin/src/ui/components/Header.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-export const Header = () => {
-  return (
-    <header className="header">
-      <div className="header-left">
-        <div className="logo">
-          <span className="logo-text">Overlay</span>
-        </div>
-      </div>
-      <div className="header-right">
-        {/* Placeholder for future header actions */}
-      </div>
-    </header>
-  );
-};
diff --git a/packages/overlay-plugin/src/ui/components/ImageSettings.tsx b/packages/overlay-plugin/src/ui/components/ImageSettings.tsx
index 4fcb7441..ad6aa792 100644
--- a/packages/overlay-plugin/src/ui/components/ImageSettings.tsx
+++ b/packages/overlay-plugin/src/ui/components/ImageSettings.tsx
@@ -1,17 +1,55 @@
-import { useRef, useState, useEffect } from 'react';
-import { ImageConfig, ImageResizeMode, MAX_IMAGE_SIZE_BYTES, MAX_IMAGE_SIZE_MB } from '../../shared';
-import { Image as ImageIcon, Upload, X, Clipboard } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import {
+  Button,
+  Card,
+  Description,
+  ListBox,
+  Radio,
+  RadioGroup,
+  Select,
+  Slider,
+  Surface,
+  Switch,
+} from '@rozenite/ui';
+import { Clipboard, Image as ImageIcon, Upload, X } from 'lucide-react';
+import {
+  ImageConfig,
+  ImageOverlayMode,
+  ImageResizeMode,
+  MAX_IMAGE_SIZE_BYTES,
+  MAX_IMAGE_SIZE_MB,
+} from '../../shared';
 import { useThrottledCallback } from '../hooks/useThrottledCallback';
 
+type SliderValue = number | number[];
+
 export type ImageSettingsProps = {
   config: ImageConfig;
   onConfigChange: (config: ImageConfig) => void;
 };
 
-export const ImageSettings = ({ config, onConfigChange }: ImageSettingsProps) => {
+const resizeModeOptions: Array<{
+  label: string;
+  value: ImageResizeMode;
+}> = [
+  { label: 'Contain', value: 'contain' },
+  { label: 'Cover', value: 'cover' },
+  { label: 'Stretch', value: 'stretch' },
+  { label: 'Center', value: 'center' },
+];
+
+const getSliderNumber = (value: SliderValue) =>
+  Array.isArray(value) ? (value[0] ?? 0) : value;
+
+export const ImageSettings = ({
+  config,
+  onConfigChange,
+}: ImageSettingsProps) => {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [localOpacity, setLocalOpacity] = useState(config.opacity);
-  const [isPasteSupported] = useState(() => navigator.clipboard && 'read' in navigator.clipboard);
+  const [isPasteSupported] = useState(
+    () => navigator.clipboard && 'read' in navigator.clipboard,
+  );
 
   useEffect(() => {
     setLocalOpacity(config.opacity);
@@ -31,17 +69,16 @@ export const ImageSettings = ({ config, onConfigChange }: ImageSettingsProps) =>
   };
 
   const processFile = (file: File | Blob) => {
-    // Check file size
     if (file.size > MAX_IMAGE_SIZE_BYTES) {
       alert(
-        `Image size (${(file.size / 1024 / 1024).toFixed(2)}MB) exceeds the maximum allowed size of ${MAX_IMAGE_SIZE_MB}MB.`
+        `Image size (${(file.size / 1024 / 1024).toFixed(2)}MB) exceeds the maximum allowed size of ${MAX_IMAGE_SIZE_MB}MB.`,
       );
       return;
     }
 
     const reader = new FileReader();
-    reader.onload = (e) => {
-      const base64 = e.target?.result as string;
+    reader.onload = (event) => {
+      const base64 = event.target?.result as string;
       handleChange({ uri: base64, enabled: true });
     };
     reader.onerror = () => {
@@ -52,15 +89,18 @@ export const ImageSettings = ({ config, onConfigChange }: ImageSettingsProps) =>
 
   const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
-    if (!file) return;
+    if (!file) {
+      return;
+    }
+
     processFile(file);
   };
 
   const handlePaste = async () => {
     try {
       const clipboardItems = await navigator.clipboard.read();
+
       for (const item of clipboardItems) {
-        // Look for an image type
         const imageType = item.types.find((type) => type.startsWith('image/'));
         if (imageType) {
           const blob = await item.getType(imageType);
@@ -68,10 +108,13 @@ export const ImageSettings = ({ config, onConfigChange }: ImageSettingsProps) =>
           return;
         }
       }
+
       alert('No image found in clipboard');
-    } catch (err) {
-      console.error('Failed to read clipboard contents: ', err);
-      alert('Failed to access clipboard. Please ensure you have granted permission.');
+    } catch (error) {
+      console.error('Failed to read clipboard contents: ', error);
+      alert(
+        'Failed to access clipboard. Please ensure you have granted permission.',
+      );
     }
   };
 
@@ -82,143 +125,250 @@ export const ImageSettings = ({ config, onConfigChange }: ImageSettingsProps) =>
     }
   };
 
+  const handleModeChange = (value: string) => {
+    handleChange({ mode: value as ImageOverlayMode });
+  };
+
   return (
-    <div className="settings-section">
-      <div className="section-header">
-        <div className="section-title">
-          <ImageIcon size={18} />
-          <span>Image verlay</span>
+    <Card className="flex min-h-0 flex-col">
+      <Card.Header className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <Card.Title className="flex items-center gap-2">
+            <ImageIcon className="size-4" />
+            Image overlay
+          </Card.Title>
+          <Card.Description className="mt-1 text-xs">
+            Compare the app against reference imagery without leaving DevTools.
+          </Card.Description>
         </div>
-        <label className="toggle-switch">
-          <input
-            type="checkbox"
-            checked={config.enabled}
-            onChange={(e) => handleChange({ enabled: e.target.checked })}
-          />
-          <span className="toggle-slider"></span>
-        </label>
-      </div>
+        <Switch
+          aria-label="Toggle image overlay"
+          isSelected={config.enabled}
+          size="sm"
+          onChange={(isSelected) => handleChange({ enabled: isSelected })}
+        >
+          <Switch.Control>
+            <Switch.Thumb />
+          </Switch.Control>
+        </Switch>
+      </Card.Header>
+
+      <Card.Content className="space-y-5">
+        <div className="space-y-3">
+          <div>
+            <div className="text-sm font-medium text-foreground">
+              Overlay image
+            </div>
+            <Description className="mt-1 text-xs text-muted">
+              Upload a design reference or paste directly from the clipboard.
+            </Description>
+          </div>
 
-      <div className="section-content">
-        <div className="control-group">
-          <label className="control-label">Overlay Image</label>
           {!config.uri ? (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-              <div
-                className="file-upload-area"
-                onClick={() => fileInputRef.current?.click()}
-                style={{ cursor: 'pointer' }}
+            <div className="space-y-3">
+              <Surface
+                className="relative overflow-hidden border border-dashed border-border/70 bg-linear-to-b from-surface-secondary/80 to-surface px-6 py-7"
+                variant="secondary"
               >
-                <Upload size={32} color="var(--color-text-muted)" />
-                <span style={{ color: 'var(--color-text-muted)', fontSize: '13px' }}>
-                  Click to upload reference image
-                </span>
-                <span style={{ color: 'var(--color-text-muted)', fontSize: '11px' }}>
-                  Max size: {MAX_IMAGE_SIZE_MB}MB
-                </span>
-              </div>
-              {isPasteSupported && (
-                <button
-                  className="btn"
-                  onClick={handlePaste}
-                  style={{ justifyContent: 'center', width: '100%' }}
-                >
-                  <Clipboard size={14} />
-                  Paste from Clipboard
-                </button>
-              )}
+                <div className="pointer-events-none absolute inset-x-8 top-0 h-px bg-linear-to-r from-transparent via-accent/45 to-transparent" />
+
+                <div className="flex flex-col items-center gap-4 text-center">
+                  <div className="flex size-14 items-center justify-center rounded-full bg-accent/10 text-accent">
+                    <Upload className="size-7" />
+                  </div>
+
+                  <div className="space-y-1.5">
+                    <div className="text-sm font-semibold text-foreground">
+                      Add a reference image
+                    </div>
+                    <Description className="mx-auto max-w-xs text-xs leading-5 text-muted">
+                      Choose a file or paste a screenshot to compare it against
+                      the running screen.
+                    </Description>
+                  </div>
+
+                  <div className="flex flex-wrap items-center justify-center gap-2">
+                    <Button
+                      size="sm"
+                      onPress={() => fileInputRef.current?.click()}
+                    >
+                      Choose image
+                    </Button>
+
+                    {isPasteSupported ? (
+                      <Button
+                        size="sm"
+                        variant="secondary"
+                        onPress={handlePaste}
+                      >
+                        <Clipboard className="size-4" />
+                        Paste screenshot
+                      </Button>
+                    ) : null}
+                  </div>
+
+                  <Description className="text-[11px] uppercase tracking-[0.14em] text-muted">
+                    Max size {MAX_IMAGE_SIZE_MB}MB
+                  </Description>
+                </div>
+              </Surface>
             </div>
           ) : (
-            <div className="control-group">
-              <div className="control-row" style={{ justifyContent: 'flex-end' }}>
-                <button className="btn btn-danger" onClick={handleRemoveImage}>
-                  <X size={14} />
+            <div className="space-y-3">
+              <div className="flex justify-end">
+                <Button size="sm" variant="danger" onPress={handleRemoveImage}>
+                  <X className="size-4" />
                   Remove
-                </button>
+                </Button>
               </div>
-              <img src={config.uri} alt="Overlay preview" className="file-preview" />
+
+              <Surface className="overflow-hidden p-2" variant="secondary">
+                <img
+                  alt="Overlay preview"
+                  className="max-h-[24rem] w-full rounded-md object-contain"
+                  src={config.uri}
+                />
+              </Surface>
             </div>
           )}
+
           <input
             ref={fileInputRef}
-            type="file"
             accept="image/*"
+            className="hidden"
+            type="file"
             onChange={handleFileSelect}
-            style={{ display: 'none' }}
           />
         </div>
 
-        {config.enabled && config.uri && (
+        {config.enabled && config.uri ? (
           <>
-            <div className="control-group">
-              <label className="control-label">Mode</label>
-              <div className="control-row">
-                <label style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '13px', color: 'var(--color-text)', cursor: 'pointer' }}>
-                  <input
-                    type="radio"
-                    name="mode"
-                    value="overlay"
-                    checked={config.mode === 'overlay'}
-                    onChange={() => handleChange({ mode: 'overlay' })}
-                  />
-                  Simple overlay
-                </label>
-                <label style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '13px', color: 'var(--color-text)', cursor: 'pointer' }}>
-                  <input
-                    type="radio"
-                    name="mode"
-                    value="slider"
-                    checked={config.mode === 'slider'}
-                    onChange={() => handleChange({ mode: 'slider' })}
-                  />
-                  Slider comparison
-                </label>
+            <div className="space-y-3">
+              <div>
+                <div className="text-sm font-medium text-foreground">Mode</div>
+                <Description className="mt-1 text-xs text-muted">
+                  Pick the comparison style that fits the screen you are
+                  reviewing.
+                </Description>
               </div>
+
+              <RadioGroup
+                aria-label="Overlay comparison mode"
+                className="grid gap-2 sm:grid-cols-2"
+                value={config.mode}
+                onChange={handleModeChange}
+              >
+                <Radio
+                  className="rounded-md border border-border/70 bg-surface-secondary/40 p-3"
+                  value="overlay"
+                >
+                  <Radio.Control>
+                    <Radio.Indicator />
+                  </Radio.Control>
+                  <Radio.Content>
+                    <div className="text-sm font-medium text-foreground">
+                      Simple overlay
+                    </div>
+                    <Description className="mt-1 text-xs text-muted">
+                      Layer the reference image directly over the app.
+                    </Description>
+                  </Radio.Content>
+                </Radio>
+
+                <Radio
+                  className="rounded-md border border-border/70 bg-surface-secondary/40 p-3"
+                  value="slider"
+                >
+                  <Radio.Control>
+                    <Radio.Indicator />
+                  </Radio.Control>
+                  <Radio.Content>
+                    <div className="text-sm font-medium text-foreground">
+                      Slider comparison
+                    </div>
+                    <Description className="mt-1 text-xs text-muted">
+                      Drag a divider on the device to compare both versions.
+                    </Description>
+                  </Radio.Content>
+                </Radio>
+              </RadioGroup>
             </div>
 
-            <div className="control-group">
-              <label className="control-label">Resize Mode</label>
-              <select
+            <div className="space-y-3">
+              <div>
+                <div className="text-sm font-medium text-foreground">
+                  Resize mode
+                </div>
+                <Description className="mt-1 text-xs text-muted">
+                  Control how the reference image fits the available screen
+                  space.
+                </Description>
+              </div>
+
+              <Select
+                aria-label="Image resize mode"
                 value={config.resizeMode}
-                onChange={(e) => handleChange({ resizeMode: e.target.value as ImageResizeMode })}
-                className="input-control"
-                style={{ width: '100%' }}
+                variant="secondary"
+                onChange={(value) => {
+                  if (typeof value === 'string') {
+                    handleChange({ resizeMode: value as ImageResizeMode });
+                  }
+                }}
               >
-                <option value="contain">Contain</option>
-                <option value="cover">Cover</option>
-                <option value="stretch">Stretch</option>
-                <option value="center">Center</option>
-              </select>
+                <Select.Trigger>
+                  <Select.Value />
+                  <Select.Indicator />
+                </Select.Trigger>
+                <Select.Popover>
+                  <ListBox aria-label="Resize mode options">
+                    {resizeModeOptions.map((option) => (
+                      <ListBox.Item
+                        key={option.value}
+                        id={option.value}
+                        textValue={option.label}
+                      >
+                        {option.label}
+                        <ListBox.ItemIndicator />
+                      </ListBox.Item>
+                    ))}
+                  </ListBox>
+                </Select.Popover>
+              </Select>
             </div>
 
-            <div className="control-group">
-              <label className="control-label">
-                Opacity ({Math.round(localOpacity * 100)}%)
-              </label>
-              <input
-                type="range"
-                min="0"
-                max="1"
-                step="0.01"
-                value={localOpacity}
-                onChange={(e) => handleOpacityChange(Number(e.target.value))}
-                className="input-range"
-              />
-              {config.mode === 'slider' && (
-                <p
-                  style={{
-                    fontSize: '11px',
-                    color: 'var(--color-text-muted)',
-                    marginTop: '4px',
-                  }}
-                >
-                  Drag the divider handle on your device to compare.
-                </p>
-              )}
-            </div>
+            <Slider
+              aria-label="Image overlay opacity"
+              className="gap-3"
+              maxValue={1}
+              minValue={0}
+              step={0.01}
+              value={localOpacity}
+              onChange={(value) =>
+                handleOpacityChange(getSliderNumber(value))
+              }
+            >
+              <div className="flex items-center justify-between gap-3">
+                <div className="text-sm font-medium text-foreground">
+                  Opacity
+                </div>
+                <div className="text-xs text-muted">
+                  {Math.round(localOpacity * 100)}%
+                </div>
+              </div>
+              <Slider.Track>
+                <Slider.Fill />
+                <Slider.Thumb />
+              </Slider.Track>
+            </Slider>
+
+            {config.mode === 'slider' ? (
+              <Description className="text-xs text-muted">
+                Drag the divider handle on your device to compare.
+              </Description>
+            ) : null}
           </>
-        )}
-      </div>
-    </div>
+        ) : null}
+      </Card.Content>
+    </Card>
   );
-};
\ No newline at end of file
+};
diff --git a/packages/overlay-plugin/src/ui/components/index.ts b/packages/overlay-plugin/src/ui/components/index.ts
index 74e6071c..897fd60f 100644
--- a/packages/overlay-plugin/src/ui/components/index.ts
+++ b/packages/overlay-plugin/src/ui/components/index.ts
@@ -1,3 +1,2 @@
-export * from './Header';
 export * from './GridSettings';
 export * from './ImageSettings';
diff --git a/packages/overlay-plugin/src/ui/globals.css b/packages/overlay-plugin/src/ui/globals.css
index cec62944..e862ec52 100644
--- a/packages/overlay-plugin/src/ui/globals.css
+++ b/packages/overlay-plugin/src/ui/globals.css
@@ -1,96 +1,2 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-
-  .wrap-anywhere {
-    overflow-wrap: anywhere;
-  }
-}
-
-@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% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-
-  .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%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --sidebar-background: 0 0% 3.9%;
-    --sidebar-foreground: 0 0% 98%;
-    --sidebar-primary: 0 0% 98%;
-    --sidebar-primary-foreground: 0 0% 9%;
-    --sidebar-accent: 0 0% 14.9%;
-    --sidebar-accent-foreground: 0 0% 98%;
-    --sidebar-border: 0 0% 14.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
+@import 'tailwindcss';
+@import '@rozenite/ui/styles.css';
diff --git a/packages/overlay-plugin/src/ui/panel.tsx b/packages/overlay-plugin/src/ui/panel.tsx
index f40898e7..1ad55fd1 100644
--- a/packages/overlay-plugin/src/ui/panel.tsx
+++ b/packages/overlay-plugin/src/ui/panel.tsx
@@ -1,9 +1,10 @@
 import { useEffect, useState } from 'react';
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import { PluginHeader, PluginTheme, Surface } from '@rozenite/ui';
 import { OverlayPluginEventMap } from '../shared';
 import { GridConfig, ImageConfig } from '../shared/types';
-import { Header, GridSettings, ImageSettings } from './components';
-import './styles.css';
+import { GridSettings, ImageSettings } from './components';
+import './globals.css';
 
 export default function OverlayPanel() {
   const [gridConfig, setGridConfig] = useState<GridConfig>({
@@ -34,7 +35,6 @@ export default function OverlayPanel() {
     }
 
     setLoading(true);
-    // Request initial state
     client.send('request-overlay-state', {});
 
     const subscription = client.onMessage('overlay-state', (state) => {
@@ -49,38 +49,45 @@ export default function OverlayPanel() {
   }, [client]);
 
   const updateGridConfig = (newConfig: GridConfig) => {
-    setGridConfig(newConfig); // Optimistic update
+    setGridConfig(newConfig);
     if (client) {
       client.send('set-grid-config', { config: newConfig });
     }
   };
 
   const updateImageConfig = (newConfig: ImageConfig) => {
-    setImageConfig(newConfig); // Optimistic update
+    setImageConfig(newConfig);
     if (client) {
       client.send('set-image-config', { config: newConfig });
     }
   };
 
-  if (loading) {
-    return (
-      <div className="app-container">
-        <Header />
-        <div className="main-content" style={{ alignItems: 'center', justifyContent: 'center' }}>
-          <div style={{ color: 'var(--color-text-secondary)' }}>Loading...</div>
-        </div>
-      </div>
-    );
-  }
-
   return (
-    <div className="app-container">
-      <Header />
-      <div className="main-content">
-        <GridSettings config={gridConfig} onConfigChange={updateGridConfig} />
-        <ImageSettings config={imageConfig} onConfigChange={updateImageConfig} />
-      </div>
-    </div>
-  );
-}
+    <PluginTheme
+      className="flex h-screen flex-col bg-background text-foreground"
+      defaultTheme="dark"
+      storageKey="@rozenite/overlay-plugin.theme"
+    >
+      <PluginHeader title="Overlay" />
 
+      <main className="flex-1 overflow-auto p-4 pt-3">
+        {loading ? (
+          <Surface className="text-sm text-muted" variant="secondary">
+            Loading overlay settings...
+          </Surface>
+        ) : (
+          <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+            <GridSettings
+              config={gridConfig}
+              onConfigChange={updateGridConfig}
+            />
+            <ImageSettings
+              config={imageConfig}
+              onConfigChange={updateImageConfig}
+            />
+          </div>
+        )}
+      </main>
+    </PluginTheme>
+  );
+};
diff --git a/packages/overlay-plugin/src/ui/styles.css b/packages/overlay-plugin/src/ui/styles.css
deleted file mode 100644
index 2bc4f769..00000000
--- a/packages/overlay-plugin/src/ui/styles.css
+++ /dev/null
@@ -1,330 +0,0 @@
-/* React DevTools-inspired theme */
-
-:root {
-  /* React DevTools color palette */
-  --color-background: #242424;
-  --color-background-hover: #2a2a2a;
-  --color-background-secondary: #1a1a1a;
-  --color-border: #3d3d3d;
-  --color-text: #e6e6e6;
-  --color-text-secondary: #8a8a8a;
-  --color-text-muted: #6e6e6e;
-
-  /* Accent colors from React DevTools */
-  --color-accent: #61dafb;
-  --color-accent-hover: #7de3fc;
-  --color-danger: #e63946;
-  --color-danger-hover: #ff6b6b;
-
-  /* UI elements */
-  --header-height: 48px;
-  --border-radius: 4px;
-  --transition-speed: 150ms;
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html,
-body {
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: var(--color-background);
-  color: var(--color-text);
-  overflow: hidden; /* Prevent body scroll, handle in app-container */
-  height: 100vh;
-  width: 100vw;
-}
-
-.app-container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  width: 100%;
-  overflow-y: auto; /* Allow scrolling the entire page */
-}
-
-/* Header */
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: var(--header-height);
-  padding: 0 16px;
-  background-color: var(--color-background-secondary);
-  border-bottom: 1px solid var(--color-border);
-  flex-shrink: 0;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.logo {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.logo-text {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--color-text);
-  letter-spacing: -0.2px;
-}
-
-/* Main content area */
-.main-content {
-  flex: 1;
-  padding: 24px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 24px;
-  width: 100%;
-  align-items: flex-start; /* Prevent items from stretching to fill row height */
-}
-
-/* Section styling */
-.settings-section {
-  background-color: var(--color-background-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  flex: 1 1 auto;
-  min-width: 300px;
-  display: flex;
-  flex-direction: column;
-}
-
-.section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--color-border);
-  background-color: rgba(255, 255, 255, 0.02);
-}
-
-.section-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--color-text);
-}
-
-.section-content {
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-/* Form controls */
-.control-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.control-label {
-  display: block;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--color-text);
-}
-
-.control-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.input-control {
-  padding: 8px 12px;
-  font-size: 13px;
-  color: var(--color-text);
-  background-color: var(--color-background);
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius);
-  transition: border-color var(--transition-speed) ease;
-}
-
-.input-control:focus {
-  outline: none;
-  border-color: var(--color-accent);
-}
-
-.input-control[type='color'] {
-  padding: 0;
-  width: 40px;
-  height: 32px;
-  border: none;
-  background: none;
-  cursor: pointer;
-}
-
-.input-range {
-  width: 100%;
-  accent-color: var(--color-accent);
-}
-
-/* Toggle Switch */
-.toggle-switch {
-  position: relative;
-  display: inline-block;
-  width: 44px;
-  height: 24px;
-}
-
-.toggle-switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.toggle-slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--color-background);
-  border: 1px solid var(--color-border);
-  transition: .4s;
-  border-radius: 24px;
-}
-
-.toggle-slider:before {
-  position: absolute;
-  content: "";
-  height: 18px;
-  width: 18px;
-  left: 2px;
-  bottom: 2px;
-  background-color: var(--color-text-secondary);
-  transition: .4s;
-  border-radius: 50%;
-}
-
-input:checked + .toggle-slider {
-  background-color: var(--color-accent);
-  border-color: var(--color-accent);
-}
-
-input:checked + .toggle-slider:before {
-  transform: translateX(20px);
-  background-color: var(--color-background);
-}
-
-/* Buttons */
-.btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--color-text);
-  background-color: var(--color-background);
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius);
-  cursor: pointer;
-  transition: all var(--transition-speed) ease;
-}
-
-.btn:hover {
-  background-color: var(--color-background-hover);
-  border-color: var(--color-text-secondary);
-}
-
-.btn-primary {
-  color: var(--color-background);
-  background-color: var(--color-accent);
-  border-color: var(--color-accent);
-}
-
-.btn-primary:hover {
-  background-color: var(--color-accent-hover);
-  border-color: var(--color-accent-hover);
-}
-
-.btn-danger {
-  color: var(--color-danger);
-  border-color: var(--color-danger);
-}
-
-.btn-danger:hover {
-  background-color: rgba(230, 57, 70, 0.1);
-}
-
-.btn-icon {
-  padding: 6px;
-  min-width: 28px;
-  justify-content: center;
-}
-
-/* File Upload */
-.file-upload-area {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 24px;
-  border: 2px dashed var(--color-border);
-  border-radius: 8px;
-  background-color: rgba(0, 0, 0, 0.1);
-  transition: all var(--transition-speed) ease;
-}
-
-.file-upload-area:hover {
-  border-color: var(--color-accent);
-  background-color: rgba(97, 218, 251, 0.05);
-}
-
-.file-preview {
-  width: 100%;
-  height: 200px;
-  object-fit: contain;
-  border: 1px solid var(--color-border);
-  border-radius: 4px;
-  background-color: #000;
-  background-image:
-    linear-gradient(45deg, #1a1a1a 25%, transparent 25%),
-    linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #1a1a1a 75%),
-    linear-gradient(-45deg, transparent 75%, #1a1a1a 75%);
-  background-size: 20px 20px;
-  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
-}
-
-/* Scrollbar styling */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--color-background);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--color-border);
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-muted);
-}
diff --git a/packages/overlay-plugin/tailwind.config.ts b/packages/overlay-plugin/tailwind.config.ts
deleted file mode 100644
index 9dcc6252..00000000
--- a/packages/overlay-plugin/tailwind.config.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import type { Config } from 'tailwindcss';
-
-const config: Config = {
-  darkMode: ['class'],
-  content: ['./src/ui/**/*.{js,ts,jsx,tsx,mdx}'],
-  theme: {
-    extend: {
-      translate: {
-        '0.75': '0.1875rem',
-      },
-      colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        chart: {
-          '1': 'hsl(var(--chart-1))',
-          '2': 'hsl(var(--chart-2))',
-          '3': 'hsl(var(--chart-3))',
-          '4': 'hsl(var(--chart-4))',
-          '5': 'hsl(var(--chart-5))',
-        },
-        sidebar: {
-          DEFAULT: 'hsl(var(--sidebar-background))',
-          foreground: 'hsl(var(--sidebar-foreground))',
-          primary: 'hsl(var(--sidebar-primary))',
-          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-          accent: 'hsl(var(--sidebar-accent))',
-          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-          border: 'hsl(var(--sidebar-border))',
-          ring: 'hsl(var(--sidebar-ring))',
-        },
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      keyframes: {
-        'accordion-down': {
-          from: {
-            height: '0',
-          },
-          to: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-        },
-        'accordion-up': {
-          from: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-          to: {
-            height: '0',
-          },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-      },
-    },
-  },
-  plugins: [require('tailwindcss-animate')],
-};
-export default config;
-
diff --git a/packages/performance-monitor-plugin/package.json b/packages/performance-monitor-plugin/package.json
index 9ad5bbfa..db5f7667 100644
--- a/packages/performance-monitor-plugin/package.json
+++ b/packages/performance-monitor-plugin/package.json
@@ -21,13 +21,11 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@rozenite/plugin-bridge": "workspace:*"
+    "@rozenite/plugin-bridge": "workspace:*",
+    "@rozenite/ui": "workspace:*"
   },
   "devDependencies": {
-    "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/themes": "^3.2.1",
+    "@tailwindcss/postcss": "^4.2.2",
     "@rozenite/vite-plugin": "workspace:*",
     "@tanstack/react-table": "^8.21.3",
     "@types/react": "catalog:",
@@ -35,13 +33,11 @@
     "postcss": "^8.5.6",
     "react": "catalog:",
     "react-dom": "catalog:",
-    "react-json-tree": "^0.20.0",
     "react-native": "catalog:",
     "react-native-performance": "5.1.4",
     "react-native-web": "^0.21.2",
-    "react-virtuoso": "^4.6.0",
     "rozenite": "workspace:*",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.2.2",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "~5.9.3",
     "vite": "catalog:"
diff --git a/packages/performance-monitor-plugin/postcss.config.js b/packages/performance-monitor-plugin/postcss.config.js
new file mode 100644
index 00000000..a34a3d56
--- /dev/null
+++ b/packages/performance-monitor-plugin/postcss.config.js
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
diff --git a/packages/performance-monitor-plugin/src/ui/App.css b/packages/performance-monitor-plugin/src/ui/App.css
deleted file mode 100644
index ce9a690a..00000000
--- a/packages/performance-monitor-plugin/src/ui/App.css
+++ /dev/null
@@ -1,97 +0,0 @@
-/* Custom scrollbar for dark theme */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: #1a1a1a;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #333333;
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #a0a0a0;
-}
-
-.radix-themes {
-  --cursor-button: pointer;
-  --cursor-checkbox: pointer;
-  --cursor-link: pointer;
-  --cursor-menu-item: pointer;
-  --cursor-radio: pointer;
-  --cursor-slider-thumb: grab;
-  --cursor-slider-thumb-active: grabbing;
-  --cursor-switch: pointer;
-}
-
-.table-row-hover:hover {
-  background-color: hsl(0 0% 16%) !important;
-}
-
-/* Data Table Styles */
-.data-table-container {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12px;
-  background: hsl(0 0% 3.9%);
-  color: hsl(0 0% 98%);
-}
-
-.data-table-header-row {
-  background: hsl(0 0% 3.9%);
-  border-bottom: 1px solid hsl(0 0% 14.9%);
-  position: sticky;
-  top: 0;
-  z-index: 10;
-}
-
-.data-table-header-cell {
-  padding: 8px 12px;
-  text-align: left;
-  font-weight: 600;
-  color: hsl(0 0% 98%);
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  border-bottom: 1px solid hsl(0 0% 14.9%);
-  transition: background-color 0.15s ease;
-}
-
-.data-table-header-cell:hover {
-  background-color: hsl(0 0% 16%);
-}
-
-.data-table-row {
-  border-bottom: 1px solid hsl(0 0% 14.9%);
-  transition: background-color 0.15s ease;
-}
-
-.data-table-row:hover {
-  background-color: hsl(0 0% 16%);
-}
-
-.data-table-cell {
-  padding: 8px 12px;
-  vertical-align: top;
-  border-bottom: 1px solid hsl(0 0% 14.9%);
-  color: hsl(0 0% 98%);
-}
-
-.index-cell,
-.index-header {
-  width: 40px;
-  text-align: center;
-  font-weight: 600;
-  color: hsl(0 0% 63.9%);
-  font-size: 11px;
-}
diff --git a/packages/performance-monitor-plugin/src/ui/App.tsx b/packages/performance-monitor-plugin/src/ui/App.tsx
index bf94eb8a..8fd0049a 100644
--- a/packages/performance-monitor-plugin/src/ui/App.tsx
+++ b/packages/performance-monitor-plugin/src/ui/App.tsx
@@ -1,32 +1,29 @@
 import {
   useRozeniteDevToolsClient,
-  Subscription,
+  type Subscription,
 } from '@rozenite/plugin-bridge';
+import { useEffect, useState } from 'react';
 import {
+  Button,
+  Chip,
+  PluginHeader,
+  PluginTheme,
+  Tabs,
+} from '@rozenite/ui';
+import type {
   PerformanceMonitorEventMap,
-  SerializedPerformanceMeasure,
+  SerializedPerformanceEntry,
   SerializedPerformanceMark,
+  SerializedPerformanceMeasure,
   SerializedPerformanceMetric,
-  SerializedPerformanceEntry,
 } from '../shared/types';
-import { useEffect, useState } from 'react';
-import {
-  Theme,
-  Tabs,
-  Button,
-  Heading,
-  Text,
-  Flex,
-  Box,
-} from '@radix-ui/themes';
-import '@radix-ui/themes/styles.css';
-import './App.css';
+import { DetailsSidebar } from './components/DetailsSidebar';
+import { ExportModal } from './components/ExportModal';
+import { MarksTable } from './components/MarksTable';
 import { MeasuresTable } from './components/MeasuresTable';
 import { MetricsTable } from './components/MetricsTable';
-import { MarksTable } from './components/MarksTable';
-import { DetailsSidebar } from './components/DetailsSidebar';
 import { SessionDuration } from './components/SessionDuration';
-import { ExportModal } from './components/ExportModal';
+import './globals.css';
 
 type PerformanceMonitorSession = {
   sessionStartedAt: number;
@@ -36,10 +33,13 @@ type PerformanceMonitorSession = {
   metrics: SerializedPerformanceMetric[];
 };
 
+type ActiveTabId = 'measures' | 'metrics' | 'marks';
+
 export default function PerformanceMonitorPanel() {
   const client = useRozeniteDevToolsClient<PerformanceMonitorEventMap>({
     pluginId: '@rozenite/performance-monitor-plugin',
   });
+  const [activeTabId, setActiveTabId] = useState<ActiveTabId>('measures');
   const [session, setSession] = useState<PerformanceMonitorSession>({
     sessionStartedAt: 0,
     clockShift: 0,
@@ -63,14 +63,14 @@ export default function PerformanceMonitorPanel() {
         const receivedAt = Date.now();
         setSession({
           sessionStartedAt: receivedAt,
-          // It's likely that there is a small clock shift between the device and the DevTools.
           clockShift: receivedAt - sessionStartedAt,
           measures: [],
           marks: [],
           metrics: [],
         });
+        setSelectedItem(null);
         setIsSessionActive(true);
-      })
+      }),
     );
 
     subscriptions.push(
@@ -85,7 +85,7 @@ export default function PerformanceMonitorPanel() {
             })),
           ],
         }));
-      })
+      }),
     );
 
     subscriptions.push(
@@ -100,7 +100,7 @@ export default function PerformanceMonitorPanel() {
             })),
           ],
         }));
-      })
+      }),
     );
 
     subscriptions.push(
@@ -115,7 +115,7 @@ export default function PerformanceMonitorPanel() {
             })),
           ],
         }));
-      })
+      }),
     );
 
     return () => {
@@ -138,149 +138,110 @@ export default function PerformanceMonitorPanel() {
     }
   };
 
-  const handleEntryClick = (entry: SerializedPerformanceEntry) => {
-    setSelectedItem(entry);
-  };
-
-  const handleCloseSidebar = () => {
-    setSelectedItem(null);
-  };
-
   return (
-    <Theme appearance="dark" accentColor="blue" radius="medium">
-      <Box
-        p="4"
-        height="100vh"
-        style={{ display: 'flex', flexDirection: 'column' }}
-      >
-        {/* Header */}
-        <Box mb="4" style={{ flexShrink: 0 }}>
-          <Heading size="6" mb="2">
-            Performance Monitor
-          </Heading>
-          <Flex gap="4" align="center">
+    <PluginTheme
+      className="flex h-screen flex-col bg-background text-foreground"
+      defaultTheme="dark"
+      storageKey="@rozenite/performance-monitor-plugin.theme"
+    >
+      <PluginHeader
+        subtitle="Track measures, marks, and metrics captured by react-native-performance."
+        title="Performance Monitor"
+        actions={
+          <div className="flex flex-wrap items-center justify-end gap-2">
             <SessionDuration
               isActive={isSessionActive}
               sessionStartedAt={session.sessionStartedAt}
             />
-          </Flex>
-        </Box>
+            <Chip
+              color={isSessionActive ? 'success' : 'default'}
+              size="sm"
+              variant="soft"
+            >
+              {isSessionActive ? 'Session Active' : 'Session Inactive'}
+            </Chip>
+            <Button
+              isDisabled={!client || isSessionActive}
+              onPress={handleStartSession}
+              size="sm"
+            >
+              Start Session
+            </Button>
+            <Button
+              isDisabled={!client || !isSessionActive}
+              onPress={handleStopSession}
+              size="sm"
+              variant="danger"
+            >
+              Stop Session
+            </Button>
+            <ExportModal
+              clockShift={session.clockShift}
+              marks={session.marks}
+              measures={session.measures}
+              metrics={session.metrics}
+              sessionStartedAt={session.sessionStartedAt}
+            />
+          </div>
+        }
+      />
 
-        {/* Toolbar */}
-        <Flex gap="3" align="center" mb="4" style={{ flexShrink: 0 }}>
-          <Button
-            onClick={handleStartSession}
-            disabled={isSessionActive}
-            color="green"
-          >
-            Start Session
-          </Button>
-          <Button
-            onClick={handleStopSession}
-            disabled={!isSessionActive}
-            color="red"
+      <Tabs.Root
+        className="flex min-h-0 flex-1 flex-col"
+        selectedKey={activeTabId}
+        onSelectionChange={(key) => {
+          setActiveTabId(String(key) as ActiveTabId);
+        }}
+      >
+        <Tabs.ListContainer className="overflow-x-auto px-3">
+          <Tabs.List
+            aria-label="Performance monitor views"
+            className="w-fit min-w-max justify-start"
           >
-            Stop Session
-          </Button>
-          <ExportModal
+            <Tabs.Tab className="w-auto shrink-0 whitespace-nowrap" id="measures">
+              Measures ({session.measures.length})
+              <Tabs.Indicator />
+            </Tabs.Tab>
+            <Tabs.Tab className="w-auto shrink-0 whitespace-nowrap" id="metrics">
+              Metrics ({session.metrics.length})
+              <Tabs.Indicator />
+            </Tabs.Tab>
+            <Tabs.Tab className="w-auto shrink-0 whitespace-nowrap" id="marks">
+              Marks ({session.marks.length})
+              <Tabs.Indicator />
+            </Tabs.Tab>
+          </Tabs.List>
+        </Tabs.ListContainer>
+
+        <Tabs.Panel
+          className="flex min-h-0 flex-1 overflow-hidden px-3 pb-3 pt-3"
+          id="measures"
+        >
+          <MeasuresTable
             measures={session.measures}
-            metrics={session.metrics}
-            marks={session.marks}
-            sessionStartedAt={session.sessionStartedAt}
-            clockShift={session.clockShift}
+            onRowClick={setSelectedItem}
           />
-          <Flex gap="2" align="center" ml="auto">
-            <Box
-              style={{
-                width: '8px',
-                height: '8px',
-                borderRadius: '50%',
-                backgroundColor: isSessionActive ? '#10b981' : '#ef4444',
-              }}
-            />
-            <Text size="2" color="gray">
-              {isSessionActive ? 'Session Active' : 'Session Inactive'}
-            </Text>
-          </Flex>
-        </Flex>
+        </Tabs.Panel>
 
-        {/* Tabs */}
-        <Box
-          style={{
-            flex: '1',
-            display: 'flex',
-            flexDirection: 'column',
-            minHeight: 0,
-          }}
+        <Tabs.Panel
+          className="flex min-h-0 flex-1 overflow-hidden px-3 pb-3 pt-3"
+          id="metrics"
         >
-          <Tabs.Root
-            defaultValue="measures"
-            style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
-          >
-            <Tabs.List style={{ flexShrink: 0 }}>
-              <Tabs.Trigger value="measures">
-                Measures ({session.measures.length})
-              </Tabs.Trigger>
-              <Tabs.Trigger value="metrics">
-                Metrics ({session.metrics.length})
-              </Tabs.Trigger>
-              <Tabs.Trigger value="marks">
-                Marks ({session.marks.length})
-              </Tabs.Trigger>
-            </Tabs.List>
-
-            <Box
-              style={{
-                flexGrow: '1',
-                display: 'flex',
-                flexDirection: 'column',
-                minHeight: 0,
-              }}
-            >
-              <Tabs.Content
-                value="measures"
-                style={{
-                  display: 'contents',
-                }}
-              >
-                <MeasuresTable
-                  measures={session.measures}
-                  onRowClick={handleEntryClick}
-                />
-              </Tabs.Content>
+          <MetricsTable metrics={session.metrics} onRowClick={setSelectedItem} />
+        </Tabs.Panel>
 
-              <Tabs.Content
-                value="metrics"
-                style={{
-                  display: 'contents',
-                }}
-              >
-                <MetricsTable
-                  metrics={session.metrics}
-                  onRowClick={handleEntryClick}
-                />
-              </Tabs.Content>
-
-              <Tabs.Content
-                value="marks"
-                style={{
-                  display: 'contents',
-                }}
-              >
-                <MarksTable
-                  marks={session.marks}
-                  onRowClick={handleEntryClick}
-                />
-              </Tabs.Content>
-            </Box>
-          </Tabs.Root>
-        </Box>
-      </Box>
+        <Tabs.Panel
+          className="flex min-h-0 flex-1 overflow-hidden px-3 pb-3 pt-3"
+          id="marks"
+        >
+          <MarksTable marks={session.marks} onRowClick={setSelectedItem} />
+        </Tabs.Panel>
+      </Tabs.Root>
 
       <DetailsSidebar
+        onClose={() => setSelectedItem(null)}
         selectedItem={selectedItem}
-        onClose={handleCloseSidebar}
       />
-    </Theme>
+    </PluginTheme>
   );
 }
diff --git a/packages/performance-monitor-plugin/src/ui/components/DataTable.tsx b/packages/performance-monitor-plugin/src/ui/components/DataTable.tsx
index 808282d9..9ca0de4c 100644
--- a/packages/performance-monitor-plugin/src/ui/components/DataTable.tsx
+++ b/packages/performance-monitor-plugin/src/ui/components/DataTable.tsx
@@ -1,117 +1,174 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { useMemo, useState } from 'react';
 import {
-  useReactTable,
-  getCoreRowModel,
   flexRender,
+  getCoreRowModel,
   getSortedRowModel,
-  SortingState,
-  ColumnDef,
+  useReactTable,
+  type ColumnDef,
+  type SortingState,
 } from '@tanstack/react-table';
-import { TableVirtuoso } from 'react-virtuoso';
-import { Text, Flex, Box } from '@radix-ui/themes';
-import { useState } from 'react';
+import { Table } from '@rozenite/ui';
 
 export type DataTableProps<TData> = {
+  ariaLabel: string;
   data: TData[];
   columns: ColumnDef<TData>[];
-  onRowClick?: (item: TData) => void;
   emptyMessage?: string;
+  getRowTextValue?: (item: TData, index: number) => string;
+  onRowClick?: (item: TData) => void;
 };
 
+type TableSortDescriptor = NonNullable<
+  ComponentProps<typeof Table.Content>['sortDescriptor']
+>;
+
+function toSortDescriptor(
+  sorting: SortingState,
+): TableSortDescriptor | undefined {
+  const firstSort = sorting[0];
+
+  if (!firstSort) {
+    return undefined;
+  }
+
+  return {
+    column: firstSort.id,
+    direction: firstSort.desc ? 'descending' : 'ascending',
+  };
+}
+
+function toSortingState(descriptor: TableSortDescriptor): SortingState {
+  return [
+    {
+      desc: descriptor.direction === 'descending',
+      id: String(descriptor.column),
+    },
+  ];
+}
+
+function SortableColumnHeader({
+  children,
+  sortDirection,
+}: {
+  children: ReactNode;
+  sortDirection?: 'ascending' | 'descending';
+}) {
+  return (
+    <span className="flex items-center justify-between gap-2">
+      <span>{children}</span>
+      {sortDirection ? (
+        <span
+          aria-hidden="true"
+          className="text-[11px] font-medium text-muted"
+        >
+          {sortDirection === 'ascending' ? '↑' : '↓'}
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
 export const DataTable = <TData,>({
+  ariaLabel,
   data,
   columns,
-  onRowClick,
   emptyMessage = 'No data available',
+  getRowTextValue,
+  onRowClick,
 }: DataTableProps<TData>) => {
   const [sorting, setSorting] = useState<SortingState>([]);
 
   const table = useReactTable({
     data,
     columns,
-    state: {
-      sorting,
-    },
+    state: { sorting },
     onSortingChange: setSorting,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
   });
-
-  const { rows } = table.getRowModel();
-
-  if (data.length === 0) {
-    return (
-      <Box pt="3" pl="3">
-        <Text size="2" color="gray">
-          {emptyMessage}
-        </Text>
-      </Box>
-    );
-  }
+  const rows = table.getRowModel().rows;
+  const sortDescriptor = useMemo(() => toSortDescriptor(sorting), [sorting]);
 
   return (
-    <div className="data-table-container">
-      <TableVirtuoso
-        style={{ height: '100%' }}
-        totalCount={rows.length}
-        components={{
-          Table: (props) => <table {...props} className="data-table" />,
-          TableRow: (props) => {
-            const index = props['data-index'];
-            const row = rows[index];
+    <Table
+      className="min-h-0 flex-1 overflow-hidden border border-border/70 bg-surface shadow-sm"
+      variant="secondary"
+    >
+      <Table.ScrollContainer className="h-full w-full">
+        <Table.Content
+          aria-label={ariaLabel}
+          className="min-w-full"
+          onRowAction={
+            onRowClick
+              ? (key) => {
+                  const row = rows.find((item) => item.id === String(key));
 
-            return (
-              <tr
-                {...props}
-                onClick={() => onRowClick?.(row.original)}
-                style={{
-                  cursor: onRowClick ? 'pointer' : 'default',
-                  transition: 'background-color 0.15s ease',
-                }}
-                className="data-table-row"
+                  if (row) {
+                    onRowClick(row.original);
+                  }
+                }
+              : undefined
+          }
+          onSortChange={(descriptor) => setSorting(toSortingState(descriptor))}
+          sortDescriptor={sortDescriptor}
+        >
+          <Table.Header>
+            {table.getHeaderGroups().map((headerGroup) =>
+              headerGroup.headers.map((header) => (
+                <Table.Column
+                  key={header.id}
+                  allowsSorting={header.column.getCanSort()}
+                  id={header.id}
+                  isRowHeader={header.column.getIndex() === 0}
+                >
+                  {({ sortDirection }) =>
+                    header.isPlaceholder ? null : header.column.getCanSort() ? (
+                      <SortableColumnHeader sortDirection={sortDirection}>
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                      </SortableColumnHeader>
+                    ) : (
+                      flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )
+                    )
+                  }
+                </Table.Column>
+              )),
+            )}
+          </Table.Header>
+          <Table.Body
+            renderEmptyState={() => (
+              <div className="flex h-full min-h-56 w-full items-center justify-center px-4 py-10 text-center">
+                <span className="text-sm text-muted">{emptyMessage}</span>
+              </div>
+            )}
+          >
+            {rows.map((row) => (
+              <Table.Row
+                key={row.id}
+                className={`transition-colors hover:bg-surface-secondary/70 ${
+                  onRowClick ? 'cursor-pointer' : ''
+                }`}
+                id={row.id}
+                textValue={
+                  getRowTextValue?.(row.original, row.index) ?? String(row.id)
+                }
               >
-                <td className="data-table-cell index-cell">{index + 1}</td>
                 {row.getVisibleCells().map((cell) => (
-                  <td key={cell.id} className="data-table-cell">
+                  <Table.Cell key={cell.id}>
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </td>
+                  </Table.Cell>
                 ))}
-              </tr>
-            );
-          },
-        }}
-        fixedHeaderContent={() => {
-          return table.getHeaderGroups().map((headerGroup) => (
-            <tr key={headerGroup.id} className="data-table-header-row">
-              <th className="data-table-header-cell index-header">#</th>
-              {headerGroup.headers.map((header) => (
-                <th
-                  key={header.id}
-                  className="data-table-header-cell"
-                  onClick={header.column.getToggleSortingHandler()}
-                  style={{
-                    cursor: header.column.getCanSort() ? 'pointer' : 'default',
-                  }}
-                >
-                  <Flex align="center" gap="2">
-                    {flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )}
-                    {header.column.getCanSort() && (
-                      <Text size="1" color="gray">
-                        {{
-                          asc: '⬆️',
-                          desc: '⬇️',
-                        }[header.column.getIsSorted() as string] ?? '↕️'}
-                      </Text>
-                    )}
-                  </Flex>
-                </th>
-              ))}
-            </tr>
-          ));
-        }}
-      />
-    </div>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table.Content>
+      </Table.ScrollContainer>
+    </Table>
   );
 };
diff --git a/packages/performance-monitor-plugin/src/ui/components/DetailsDisplay.tsx b/packages/performance-monitor-plugin/src/ui/components/DetailsDisplay.tsx
index 8023dc8b..12f95d97 100644
--- a/packages/performance-monitor-plugin/src/ui/components/DetailsDisplay.tsx
+++ b/packages/performance-monitor-plugin/src/ui/components/DetailsDisplay.tsx
@@ -1,26 +1,87 @@
-import { Box, Text, Heading } from '@radix-ui/themes';
-import { ReactNode } from 'react';
-import { JsonTree } from './JsonTree';
+import type { ReactNode } from 'react';
+import {
+  Card,
+  Description,
+  JsonInspector,
+  Surface,
+  usePluginTheme,
+} from '@rozenite/ui';
 
 export type DetailsDisplayProps = {
   details?: unknown;
 };
 
-export const DetailsDisplay = ({ details }: DetailsDisplayProps) => {
-  const renderValue = (value: unknown): ReactNode => {
-    if (value == null) {
-      return <Text color="gray">No details provided</Text>;
-    }
+export function DetailsCard({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description?: string;
+  children: ReactNode;
+}) {
+  return (
+    <Card>
+      <Card.Header>
+        <div>
+          <Card.Title>{title}</Card.Title>
+          {description ? (
+            <Card.Description className="mt-1 text-xs">
+              {description}
+            </Card.Description>
+          ) : null}
+        </div>
+      </Card.Header>
+      <Card.Content className="flex flex-col gap-0 p-0">
+        {children}
+      </Card.Content>
+    </Card>
+  );
+}
+
+export function DetailField({
+  label,
+  children,
+}: {
+  label: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="grid gap-3 border-t border-border/70 px-5 py-4 first:border-t-0 sm:grid-cols-[7rem_minmax(0,1fr)] sm:items-start">
+      <Description className="text-[11px] uppercase tracking-[0.14em] text-muted">
+        {label}
+      </Description>
+      <div className="min-w-0 text-sm text-foreground">{children}</div>
+    </div>
+  );
+}
 
-    return <JsonTree data={details} />;
-  };
+export const DetailsDisplay = ({ details }: DetailsDisplayProps) => {
+  const { resolvedTheme } = usePluginTheme();
 
   return (
-    <Box>
-      <Heading size="3" mb="3">
-        Details
-      </Heading>
-      <Box>{renderValue(details)}</Box>
-    </Box>
+    <section className="flex flex-col gap-2">
+      <div>
+        <h3 className="text-sm font-semibold text-foreground">Details</h3>
+        <Description className="mt-1 text-xs text-muted">
+          Structured metadata captured for this performance entry.
+        </Description>
+      </div>
+
+      <Surface className="min-h-0 overflow-auto p-4 text-sm" variant="secondary">
+        {details == null ? (
+          <div className="italic text-muted">No details provided</div>
+        ) : (
+          <JsonInspector
+            collectionLimit={50}
+            copyable
+            data={details}
+            hideRoot
+            shouldExpandNodeInitially={(keyPath) => keyPath.length <= 2}
+            theme={resolvedTheme === 'light' ? 'light' : 'dark'}
+          />
+        )}
+      </Surface>
+    </section>
   );
 };
diff --git a/packages/performance-monitor-plugin/src/ui/components/DetailsSidebar.tsx b/packages/performance-monitor-plugin/src/ui/components/DetailsSidebar.tsx
index fd5da93e..46cdfe33 100644
--- a/packages/performance-monitor-plugin/src/ui/components/DetailsSidebar.tsx
+++ b/packages/performance-monitor-plugin/src/ui/components/DetailsSidebar.tsx
@@ -1,22 +1,29 @@
-import { ScrollArea, Box, Button, Flex } from '@radix-ui/themes';
-import { Cross2Icon } from '@radix-ui/react-icons';
+import { Drawer } from '@rozenite/ui';
+import type { SerializedPerformanceEntry } from '../../shared/types';
+import { MarkDetails } from './MarkDetails';
 import { MeasureDetails } from './MeasureDetails';
 import { MetricDetails } from './MetricDetails';
-import { MarkDetails } from './MarkDetails';
-import { SerializedPerformanceEntry } from '../../shared/types';
 
 export type DetailsSidebarProps = {
   selectedItem: SerializedPerformanceEntry | null;
   onClose: () => void;
 };
 
+const entryTypeLabel: Record<SerializedPerformanceEntry['entryType'], string> = {
+  mark: 'Mark details',
+  measure: 'Measure details',
+  metric: 'Metric details',
+};
+
 export const DetailsSidebar = ({
   selectedItem,
   onClose,
 }: DetailsSidebarProps) => {
-  const renderDetails = () => {
-    if (!selectedItem) return null;
+  if (!selectedItem) {
+    return null;
+  }
 
+  const renderDetails = () => {
     switch (selectedItem.entryType) {
       case 'measure':
         return <MeasureDetails measure={selectedItem} />;
@@ -29,59 +36,39 @@ export const DetailsSidebar = ({
     }
   };
 
-  if (!selectedItem) {
-    return null;
-  }
-
   return (
-    <>
-      {/* Backdrop */}
-      <Box
-        position="fixed"
-        top="0"
-        left="0"
-        right="0"
-        bottom="0"
-        style={{
-          backgroundColor: 'rgba(0, 0, 0, 0.5)',
-          zIndex: 999,
-        }}
-        onClick={onClose}
-      />
-
-      {/* Sidebar */}
-      <Box
-        position="fixed"
-        top="0"
-        right="0"
-        minWidth="400px"
-        maxWidth="50vw"
-        height="100vh"
-        style={{
-          backgroundColor: '#1a1a1a',
-          borderLeft: '1px solid #333333',
-          zIndex: 1000,
-          boxShadow: '-4px 0 8px rgba(0, 0, 0, 0.3)',
-        }}
-      >
-        <Flex p="4" direction="column" height="100vh">
-          <Flex justify="between" align="center" mb="4">
-            <Box />
-            <Button
-              variant="ghost"
-              size="2"
-              onClick={onClose}
-              style={{ padding: '4px' }}
-            >
-              <Cross2Icon width="16" height="16" />
-            </Button>
-          </Flex>
+    <Drawer
+      isOpen
+      onOpenChange={(isOpen) => {
+        if (!isOpen) {
+          onClose();
+        }
+      }}
+    >
+      <Drawer.Backdrop variant="blur">
+        <Drawer.Content className="w-full max-w-2xl" placement="right">
+          <Drawer.Dialog
+            aria-label={entryTypeLabel[selectedItem.entryType]}
+            className="flex h-full flex-col overflow-hidden"
+          >
+            <Drawer.Header className="flex items-start justify-between gap-3 border-b border-border/70 px-5 py-4">
+              <div className="min-w-0">
+                <Drawer.Heading className="truncate">
+                  {selectedItem.name}
+                </Drawer.Heading>
+                <p className="mt-1 text-xs text-muted">
+                  {entryTypeLabel[selectedItem.entryType]}
+                </p>
+              </div>
+              <Drawer.CloseTrigger aria-label="Close details panel" />
+            </Drawer.Header>
 
-          <ScrollArea style={{ flex: 1 }}>
-            <Box pr="4">{renderDetails()}</Box>
-          </ScrollArea>
-        </Flex>
-      </Box>
-    </>
+            <Drawer.Body className="min-h-0 flex-1 overflow-auto p-5">
+              {renderDetails()}
+            </Drawer.Body>
+          </Drawer.Dialog>
+        </Drawer.Content>
+      </Drawer.Backdrop>
+    </Drawer>
   );
 };
diff --git a/packages/performance-monitor-plugin/src/ui/components/ExportModal.tsx b/packages/performance-monitor-plugin/src/ui/components/ExportModal.tsx
index a11c8a36..78c80d47 100644
--- a/packages/performance-monitor-plugin/src/ui/components/ExportModal.tsx
+++ b/packages/performance-monitor-plugin/src/ui/components/ExportModal.tsx
@@ -1,16 +1,15 @@
+import { useState } from 'react';
 import {
   Button,
   Checkbox,
-  Flex,
-  Text,
-  Box,
-  Dialog,
-  Callout,
-} from '@radix-ui/themes';
-import { useState, useEffect } from 'react';
-import {
-  SerializedPerformanceMeasure,
+  Chip,
+  Description,
+  Modal,
+  Surface,
+} from '@rozenite/ui';
+import type {
   SerializedPerformanceMark,
+  SerializedPerformanceMeasure,
   SerializedPerformanceMetric,
 } from '../../shared/types';
 import { downloadFile } from '../utils';
@@ -29,57 +28,45 @@ type ExportOptions = {
   marks: boolean;
 };
 
-type AlertMessage = {
-  type: 'success' | 'error';
-  message: string;
-} | null;
-
 type DataTypeCardProps = {
   title: string;
+  description: string;
   count: number;
   checked: boolean;
-  onToggle: () => void;
+  onChange: (checked: boolean) => void;
 };
 
 const DataTypeCard = ({
   title,
+  description,
   count,
   checked,
-  onToggle,
+  onChange,
 }: DataTypeCardProps) => {
   return (
-    <Box
-      style={{
-        padding: '16px',
-        border: checked
-          ? '1px solid var(--accent-9)'
-          : '1px solid var(--gray-6)',
-        borderRadius: 'var(--radius-3)',
-        backgroundColor: checked ? 'var(--accent-2)' : 'var(--gray-2)',
-        transition: 'all 0.2s ease',
-        cursor: 'pointer',
-        userSelect: 'none',
-      }}
-      onClick={onToggle}
+    <Surface
+      className={`p-4 transition-colors ${
+        checked ? 'border-accent/40 bg-accent/5' : ''
+      }`}
+      variant="secondary"
     >
-      <Flex align="center" justify="between">
-        <Flex align="center" gap="3">
-          <Checkbox
-            checked={checked}
-            onCheckedChange={() => onToggle()}
-            onClick={(e) => e.stopPropagation()}
-          />
-          <Box>
-            <Text size="3" weight="medium">
-              {title}
-            </Text>
-          </Box>
-        </Flex>
-        <Text size="2" color="gray" style={{ fontWeight: 500 }}>
-          {count}
-        </Text>
-      </Flex>
-    </Box>
+      <Checkbox className="w-full" isSelected={checked} onChange={onChange}>
+        <Checkbox.Control>
+          <Checkbox.Indicator />
+        </Checkbox.Control>
+        <Checkbox.Content className="flex w-full min-w-0 items-start justify-between gap-3">
+          <div className="min-w-0">
+            <div className="text-sm font-medium text-foreground">{title}</div>
+            <Description className="mt-1 text-xs text-muted">
+              {description}
+            </Description>
+          </div>
+          <Chip className="shrink-0" size="sm" variant="secondary">
+            {count}
+          </Chip>
+        </Checkbox.Content>
+      </Checkbox>
+    </Surface>
   );
 };
 
@@ -96,9 +83,24 @@ export function ExportModal({
     marks: true,
   });
   const [isOpen, setIsOpen] = useState(false);
-  const [alertMessage, setAlertMessage] = useState<AlertMessage>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const hasData = measures.length > 0 || metrics.length > 0 || marks.length > 0;
+  const selectedCount = Object.values(exportOptions).filter(Boolean).length;
+
+  const updateExportOption = (
+    key: keyof ExportOptions,
+    checked: boolean,
+  ) => {
+    setExportOptions((previous) => ({
+      ...previous,
+      [key]: checked,
+    }));
+  };
 
   const handleExport = async () => {
+    setErrorMessage(null);
+
     try {
       const exportData: Record<string, unknown> = {
         exportDate: new Date().toISOString(),
@@ -114,24 +116,21 @@ export function ExportModal({
       if (exportOptions.measures) {
         exportData.measures = measures;
       }
+
       if (exportOptions.metrics) {
         exportData.metrics = metrics;
       }
+
       if (exportOptions.marks) {
         exportData.marks = marks;
       }
 
       await downloadFile(exportData, 'performance-data.json');
-      setAlertMessage({
-        type: 'success',
-        message: 'Performance data exported successfully!',
-      });
       setIsOpen(false);
     } catch {
-      setAlertMessage({
-        type: 'error',
-        message: 'Failed to export performance data. Please try again.',
-      });
+      setErrorMessage(
+        'Failed to export performance data. Please try again.',
+      );
     }
   };
 
@@ -151,128 +150,125 @@ export function ExportModal({
     });
   };
 
-  const hasData = measures.length > 0 || metrics.length > 0 || marks.length > 0;
-
-  const clearAlert = () => {
-    setAlertMessage(null);
-  };
-
-  // Auto-clear success alerts after 3 seconds
-  useEffect(() => {
-    if (alertMessage?.type === 'success') {
-      const timer = setTimeout(clearAlert, 3000);
-      return () => clearTimeout(timer);
-    }
-  }, [alertMessage]);
-
   return (
-    <Dialog.Root
-      open={isOpen}
-      onOpenChange={(open) => {
-        setIsOpen(open);
-        if (!open) {
-          clearAlert();
-        }
-      }}
-    >
-      <Dialog.Trigger>
-        <Button disabled={!hasData} variant="outline">
-          Export Data
-        </Button>
-      </Dialog.Trigger>
-      <Dialog.Content style={{ maxWidth: 500, padding: '32px' }}>
-        {alertMessage && (
-          <Box mb="4">
-            <Callout.Root
-              color={alertMessage.type === 'success' ? 'green' : 'red'}
-            >
-              <Callout.Text>{alertMessage.message}</Callout.Text>
-            </Callout.Root>
-          </Box>
-        )}
+    <>
+      <Button
+        isDisabled={!hasData}
+        onPress={() => {
+          setErrorMessage(null);
+          setIsOpen(true);
+        }}
+        size="sm"
+        variant="secondary"
+      >
+        Export Data
+      </Button>
+
+      <Modal
+        isOpen={isOpen}
+        onOpenChange={(nextOpen) => {
+          setIsOpen(nextOpen);
 
-        <Box mb="4">
-          <Dialog.Title size="5" mb="0">
-            Export Performance Data
-          </Dialog.Title>
-          <Text size="2" color="gray">
-            Select which data types to include in the export file
-          </Text>
-        </Box>
+          if (!nextOpen) {
+            setErrorMessage(null);
+          }
+        }}
+      >
+        <Modal.Backdrop variant="blur">
+          <Modal.Container className="w-full max-w-xl" placement="center">
+            <Modal.Dialog aria-label="Export performance data">
+              <Modal.CloseTrigger />
+              <Modal.Header>
+                <Modal.Heading>Export Performance Data</Modal.Heading>
+              </Modal.Header>
 
-        <Box mb="5">
-          <Box mb="2">
-            <Text size="3" weight="medium">
-              Data Types
-            </Text>
-          </Box>
+              <Modal.Body className="flex flex-col gap-4 p-6">
+                <Description className="text-sm text-muted">
+                  Select which data types to include in the exported JSON file.
+                </Description>
 
-          <Flex direction="column" gap="4">
-            <DataTypeCard
-              title="Measures"
-              count={measures.length}
-              checked={exportOptions.measures}
-              onToggle={() =>
-                setExportOptions((prev) => ({
-                  ...prev,
-                  measures: !prev.measures,
-                }))
-              }
-            />
+                {errorMessage ? (
+                  <Surface
+                    className="border-danger/30 px-3 py-2 text-sm text-danger"
+                    variant="secondary"
+                  >
+                    {errorMessage}
+                  </Surface>
+                ) : null}
 
-            <DataTypeCard
-              title="Metrics"
-              count={metrics.length}
-              checked={exportOptions.metrics}
-              onToggle={() =>
-                setExportOptions((prev) => ({
-                  ...prev,
-                  metrics: !prev.metrics,
-                }))
-              }
-            />
+                <div className="flex flex-wrap items-center justify-between gap-2">
+                  <div>
+                    <h3 className="text-sm font-semibold text-foreground">
+                      Data Types
+                    </h3>
+                    <Description className="mt-1 text-xs text-muted">
+                      Counts reflect the entries captured in the current session.
+                    </Description>
+                  </div>
+                  <Chip size="sm" variant="secondary">
+                    {selectedCount} selected
+                  </Chip>
+                </div>
 
-            <DataTypeCard
-              title="Marks"
-              count={marks.length}
-              checked={exportOptions.marks}
-              onToggle={() =>
-                setExportOptions((prev) => ({
-                  ...prev,
-                  marks: !prev.marks,
-                }))
-              }
-            />
-          </Flex>
-        </Box>
+                <div className="flex flex-col gap-3">
+                  <DataTypeCard
+                    checked={exportOptions.measures}
+                    count={measures.length}
+                    description="Duration measurements captured between marks."
+                    onChange={(checked) =>
+                      updateExportOption('measures', checked)
+                    }
+                    title="Measures"
+                  />
+                  <DataTypeCard
+                    checked={exportOptions.metrics}
+                    count={metrics.length}
+                    description="Numeric or string metrics emitted by your app."
+                    onChange={(checked) =>
+                      updateExportOption('metrics', checked)
+                    }
+                    title="Metrics"
+                  />
+                  <DataTypeCard
+                    checked={exportOptions.marks}
+                    count={marks.length}
+                    description="Point-in-time marks recorded during the session."
+                    onChange={(checked) => updateExportOption('marks', checked)}
+                    title="Marks"
+                  />
+                </div>
 
-        <Box mb="6">
-          <Flex gap="2">
-            <Button size="2" variant="outline" onClick={handleSelectAll}>
-              Select All
-            </Button>
-            <Button size="2" variant="outline" onClick={handleSelectNone}>
-              Select None
-            </Button>
-          </Flex>
-        </Box>
+                <div className="flex flex-wrap items-center gap-2">
+                  <Button onPress={handleSelectAll} size="sm" variant="secondary">
+                    Select All
+                  </Button>
+                  <Button
+                    onPress={handleSelectNone}
+                    size="sm"
+                    variant="secondary"
+                  >
+                    Select None
+                  </Button>
+                </div>
+              </Modal.Body>
 
-        <Flex gap="3" justify="end">
-          <Button variant="outline" onClick={() => setIsOpen(false)}>
-            Cancel
-          </Button>
-          <Button
-            onClick={handleExport}
-            disabled={
-              !exportOptions.measures &&
-              !exportOptions.metrics &&
-              !exportOptions.marks
-            }
-          >
-            Export Data
-          </Button>
-        </Flex>
-      </Dialog.Content>
-    </Dialog.Root>
+              <Modal.Footer className="flex justify-end gap-2">
+                <Button onPress={() => setIsOpen(false)} variant="secondary">
+                  Cancel
+                </Button>
+                <Button
+                  isDisabled={!hasData || selectedCount === 0}
+                  onPress={() => {
+                    void handleExport();
+                  }}
+                >
+                  Export Data
+                </Button>
+              </Modal.Footer>
+            </Modal.Dialog>
+          </Modal.Container>
+        </Modal.Backdrop>
+      </Modal>
+    </>
   );
 }
diff --git a/packages/performance-monitor-plugin/src/ui/components/JsonTree.tsx b/packages/performance-monitor-plugin/src/ui/components/JsonTree.tsx
deleted file mode 100644
index 8fac96f0..00000000
--- a/packages/performance-monitor-plugin/src/ui/components/JsonTree.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { JSONTree } from 'react-json-tree';
-
-const THEME = {
-  base00: 'transparent',
-  base01: '#f3f4f6', // bg-gray-100
-  base02: '#e5e7eb', // bg-gray-200
-  base03: '#d1d5db', // text-gray-300
-  base04: '#9ca3af', // text-gray-400
-  base05: '#6b7280', // text-gray-500
-  base06: '#374151', // text-gray-700
-  base07: '#1f2937', // text-gray-800
-  base08: '#ef4444', // text-red-500
-  base09: '#f59e0b', // text-yellow-500
-  base0A: '#10b981', // text-green-500
-  base0B: '#3b82f6', // text-blue-500
-  base0C: '#06b6d4', // text-cyan-500
-  base0D: '#8b5cf6', // text-purple-500
-  base0E: '#ec4899', // text-pink-500
-  base0F: '#f97316', // text-orange-500
-};
-
-export type JsonTreeProps = {
-  data: unknown;
-};
-
-export const JsonTree = ({ data }: JsonTreeProps) => {
-  return (
-    <JSONTree
-      data={data}
-      theme={THEME}
-      invertTheme={false}
-      shouldExpandNodeInitially={() => true}
-    />
-  );
-};
diff --git a/packages/performance-monitor-plugin/src/ui/components/MarkDetails.tsx b/packages/performance-monitor-plugin/src/ui/components/MarkDetails.tsx
index 9cac86f1..0efca0b6 100644
--- a/packages/performance-monitor-plugin/src/ui/components/MarkDetails.tsx
+++ b/packages/performance-monitor-plugin/src/ui/components/MarkDetails.tsx
@@ -1,45 +1,29 @@
-import { Box, Text, Heading, Separator, Flex } from '@radix-ui/themes';
-import { SerializedPerformanceMark } from '../../shared/types';
-import { DetailsDisplay } from './DetailsDisplay';
+import type { SerializedPerformanceMark } from '../../shared/types';
+import { formatTime } from '../utils';
+import { DetailField, DetailsCard, DetailsDisplay } from './DetailsDisplay';
 
 export type MarkDetailsProps = {
   mark: SerializedPerformanceMark;
 };
 
 export const MarkDetails = ({ mark }: MarkDetailsProps) => {
-  const formatTime = (timestamp: number) => {
-    return new Date(timestamp).toLocaleTimeString();
-  };
-
   return (
-    <Box>
-      <Heading size="5" mb="4">
-        Mark Details
-      </Heading>
-
-      <Box mb="4">
-        <Flex align="center" gap="3">
-          <Text size="2" color="gray" style={{ minWidth: '80px' }}>
-            Name:
-          </Text>
-          <Text weight="medium" size="3">
-            {mark.name}
-          </Text>
-        </Flex>
-      </Box>
-
-      <Box mb="4">
-        <Flex align="center" gap="3">
-          <Text size="2" color="gray" style={{ minWidth: '80px' }}>
-            Recorded at:
-          </Text>
-          <Text size="3">{formatTime(mark.startTime)}</Text>
-        </Flex>
-      </Box>
-
-      <Separator size="4" my="4" />
+    <div className="flex flex-col gap-4">
+      <DetailsCard
+        description="Point-in-time information captured for this performance mark."
+        title="Overview"
+      >
+        <DetailField label="Name">
+          <span className="font-medium text-foreground">{mark.name}</span>
+        </DetailField>
+        <DetailField label="Recorded At">
+          <span className="tabular-nums text-foreground">
+            {formatTime(mark.startTime)}
+          </span>
+        </DetailField>
+      </DetailsCard>
 
       <DetailsDisplay details={mark.detail} />
-    </Box>
+    </div>
   );
 };
diff --git a/packages/performance-monitor-plugin/src/ui/components/MarksTable.tsx b/packages/performance-monitor-plugin/src/ui/components/MarksTable.tsx
index ee89ef91..ca21fca6 100644
--- a/packages/performance-monitor-plugin/src/ui/components/MarksTable.tsx
+++ b/packages/performance-monitor-plugin/src/ui/components/MarksTable.tsx
@@ -1,9 +1,7 @@
-import React from 'react';
-import { ColumnDef } from '@tanstack/react-table';
-import { Text } from '@radix-ui/themes';
-import { SerializedPerformanceMark } from '../../shared/types';
-import { DataTable } from './DataTable';
+import type { ColumnDef } from '@tanstack/react-table';
+import type { SerializedPerformanceMark } from '../../shared/types';
 import { formatTime } from '../utils';
+import { DataTable } from './DataTable';
 
 export type MarksTableProps = {
   marks: SerializedPerformanceMark[];
@@ -14,29 +12,32 @@ const columns: ColumnDef<SerializedPerformanceMark>[] = [
   {
     accessorKey: 'name',
     header: 'Name',
-    cell: ({ row }) => <Text weight="medium">{row.getValue('name')}</Text>,
+    cell: ({ row }) => (
+      <span className="font-medium text-foreground">
+        {String(row.getValue('name'))}
+      </span>
+    ),
   },
   {
     accessorKey: 'startTime',
-    header: 'Recorded at',
-    cell: ({ row }) => {
-      const startTime = row.getValue('startTime') as number;
-      return (
-        <Text size="2" color="gray">
-          {formatTime(startTime)}
-        </Text>
-      );
-    },
+    header: 'Recorded At',
+    cell: ({ row }) => (
+      <span className="tabular-nums text-sm text-muted">
+        {formatTime(row.getValue('startTime') as number)}
+      </span>
+    ),
   },
 ];
 
 export const MarksTable = ({ marks, onRowClick }: MarksTableProps) => {
   return (
     <DataTable
-      data={marks}
+      ariaLabel="Performance marks"
       columns={columns}
-      onRowClick={onRowClick}
+      data={marks}
       emptyMessage="No marks recorded"
+      getRowTextValue={(mark) => mark.name}
+      onRowClick={onRowClick}
     />
   );
 };
diff --git a/packages/performance-monitor-plugin/src/ui/components/MeasureDetails.tsx b/packages/performance-monitor-plugin/src/ui/components/MeasureDetails.tsx
index c21bfb18..a13b6aec 100644
--- a/packages/performance-monitor-plugin/src/ui/components/MeasureDetails.tsx
+++ b/packages/performance-monitor-plugin/src/ui/components/MeasureDetails.tsx
@@ -1,7 +1,6 @@
-import { Box, Text, Heading, Separator, Flex } from '@radix-ui/themes';
-import { SerializedPerformanceMeasure } from '../../shared/types';
-import { DetailsDisplay } from './DetailsDisplay';
-import { formatTime, formatDuration } from '../utils';
+import type { SerializedPerformanceMeasure } from '../../shared/types';
+import { formatDuration, formatTime } from '../utils';
+import { DetailField, DetailsCard, DetailsDisplay } from './DetailsDisplay';
 
 export type MeasureDetailsProps = {
   measure: SerializedPerformanceMeasure;
@@ -11,54 +10,32 @@ export const MeasureDetails = ({ measure }: MeasureDetailsProps) => {
   const endTime = measure.startTime + measure.duration;
 
   return (
-    <Box>
-      <Heading size="5" mb="4">
-        Measure Details
-      </Heading>
-
-      <Box mb="4">
-        <Flex align="center" gap="3">
-          <Text size="2" color="gray" style={{ minWidth: '80px' }}>
-            Name:
-          </Text>
-          <Text weight="medium" size="3">
-            {measure.name}
-          </Text>
-        </Flex>
-      </Box>
-
-      <Box mb="4">
-        <Flex align="center" gap="3">
-          <Text size="2" color="gray" style={{ minWidth: '80px' }}>
-            Duration:
-          </Text>
-          <Text color="blue" weight="medium" size="3">
+    <div className="flex flex-col gap-4">
+      <DetailsCard
+        description="Timing information captured for this performance measure."
+        title="Overview"
+      >
+        <DetailField label="Name">
+          <span className="font-medium text-foreground">{measure.name}</span>
+        </DetailField>
+        <DetailField label="Duration">
+          <span className="font-medium text-accent">
             {formatDuration(measure.duration)}
-          </Text>
-        </Flex>
-      </Box>
-
-      <Box mb="4">
-        <Flex align="center" gap="3">
-          <Text size="2" color="gray" style={{ minWidth: '80px' }}>
-            Start Time:
-          </Text>
-          <Text size="3">{formatTime(measure.startTime)}</Text>
-        </Flex>
-      </Box>
-
-      <Box mb="4">
-        <Flex align="center" gap="3">
-          <Text size="2" color="gray" style={{ minWidth: '80px' }}>
-            End Time:
-          </Text>
-          <Text size="3">{formatTime(endTime)}</Text>
-        </Flex>
-      </Box>
-
-      <Separator size="4" my="4" />
+          </span>
+        </DetailField>
+        <DetailField label="Start Time">
+          <span className="tabular-nums text-foreground">
+            {formatTime(measure.startTime)}
+          </span>
+        </DetailField>
+        <DetailField label="End Time">
+          <span className="tabular-nums text-foreground">
+            {formatTime(endTime)}
+          </span>
+        </DetailField>
+      </DetailsCard>
 
       <DetailsDisplay details={measure.detail} />
-    </Box>
+    </div>
   );
 };
diff --git a/packages/performance-monitor-plugin/src/ui/components/MeasuresTable.tsx b/packages/performance-monitor-plugin/src/ui/components/MeasuresTable.tsx
index 9a138599..f613fc03 100644
--- a/packages/performance-monitor-plugin/src/ui/components/MeasuresTable.tsx
+++ b/packages/performance-monitor-plugin/src/ui/components/MeasuresTable.tsx
@@ -1,8 +1,7 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { Text } from '@radix-ui/themes';
-import { SerializedPerformanceMeasure } from '../../shared/types';
+import type { ColumnDef } from '@tanstack/react-table';
+import type { SerializedPerformanceMeasure } from '../../shared/types';
+import { formatDuration, formatTime } from '../utils';
 import { DataTable } from './DataTable';
-import { formatTime, formatDuration } from '../utils';
 
 export type MeasuresTableProps = {
   measures: SerializedPerformanceMeasure[];
@@ -13,52 +12,54 @@ const columns: ColumnDef<SerializedPerformanceMeasure>[] = [
   {
     accessorKey: 'name',
     header: 'Name',
-    cell: ({ row }) => <Text weight="medium">{row.getValue('name')}</Text>,
+    cell: ({ row }) => (
+      <span className="font-medium text-foreground">
+        {String(row.getValue('name'))}
+      </span>
+    ),
   },
   {
     accessorKey: 'duration',
     header: 'Duration',
-    cell: ({ row }) => {
-      const duration = row.getValue('duration') as number;
-      return <Text color="blue">{formatDuration(duration)}</Text>;
-    },
+    cell: ({ row }) => (
+      <span className="font-medium text-accent">
+        {formatDuration(row.getValue('duration') as number)}
+      </span>
+    ),
   },
   {
     accessorKey: 'startTime',
     header: 'Start Time',
-    cell: ({ row }) => {
-      const startTime = row.getValue('startTime') as number;
-      return (
-        <Text size="2" color="gray">
-          {formatTime(startTime)}
-        </Text>
-      );
-    },
+    cell: ({ row }) => (
+      <span className="tabular-nums text-sm text-muted">
+        {formatTime(row.getValue('startTime') as number)}
+      </span>
+    ),
   },
   {
     id: 'endTime',
     accessorFn: (row) => row.startTime + row.duration,
     header: 'End Time',
-    cell: ({ row }) => {
-      const startTime = row.getValue('startTime') as number;
-      const duration = row.getValue('duration') as number;
-      const endTime = startTime + duration;
-      return (
-        <Text size="2" color="gray">
-          {formatTime(endTime)}
-        </Text>
-      );
-    },
+    cell: ({ row }) => (
+      <span className="tabular-nums text-sm text-muted">
+        {formatTime((row.original.startTime ?? 0) + row.original.duration)}
+      </span>
+    ),
   },
 ];
 
-export const MeasuresTable = ({ measures, onRowClick }: MeasuresTableProps) => {
+export const MeasuresTable = ({
+  measures,
+  onRowClick,
+}: MeasuresTableProps) => {
   return (
     <DataTable
-      data={measures}
+      ariaLabel="Performance measures"
       columns={columns}
-      onRowClick={onRowClick}
+      data={measures}
       emptyMessage="No measures recorded"
+      getRowTextValue={(measure) => measure.name}
+      onRowClick={onRowClick}
     />
   );
 };
diff --git a/packages/performance-monitor-plugin/src/ui/components/MetricDetails.tsx b/packages/performance-monitor-plugin/src/ui/components/MetricDetails.tsx
index 1ad01e3d..6b2562df 100644
--- a/packages/performance-monitor-plugin/src/ui/components/MetricDetails.tsx
+++ b/packages/performance-monitor-plugin/src/ui/components/MetricDetails.tsx
@@ -1,56 +1,49 @@
-import { Box, Text, Heading, Separator, Flex } from '@radix-ui/themes';
-import { SerializedPerformanceMetric } from '../../shared/types';
-import { DetailsDisplay } from './DetailsDisplay';
+import { Description } from '@rozenite/ui';
+import type { SerializedPerformanceMetric } from '../../shared/types';
+import {
+  formatTime,
+  getMetricUnit,
+  getMetricValueKind,
+} from '../utils';
+import { DetailField, DetailsCard, DetailsDisplay } from './DetailsDisplay';
 
 export type MetricDetailsProps = {
   metric: SerializedPerformanceMetric;
 };
 
 export const MetricDetails = ({ metric }: MetricDetailsProps) => {
-  const formatTime = (timestamp: number) => {
-    return new Date(timestamp).toLocaleTimeString();
-  };
+  const unit = getMetricUnit(metric.detail);
+  const valueKind = getMetricValueKind(metric.value);
 
   return (
-    <Box>
-      <Heading size="5" mb="4">
-        Metric Details
-      </Heading>
-
-      <Box mb="4">
-        <Flex align="center" gap="3">
-          <Text size="2" color="gray" style={{ minWidth: '80px' }}>
-            Name:
-          </Text>
-          <Text weight="medium" size="3">
-            {metric.name}
-          </Text>
-        </Flex>
-      </Box>
-
-      <Box mb="4">
-        <Flex align="center" gap="3">
-          <Text size="2" color="gray" style={{ minWidth: '80px' }}>
-            Value:
-          </Text>
-          <Text color="green" weight="medium" size="3">
-            {String(metric.value)}
-          </Text>
-        </Flex>
-      </Box>
-
-      <Box mb="4">
-        <Flex align="center" gap="3">
-          <Text size="2" color="gray" style={{ minWidth: '80px' }}>
-            Recorded at:
-          </Text>
-          <Text size="3">{formatTime(metric.startTime)}</Text>
-        </Flex>
-      </Box>
-
-      <Separator size="4" my="4" />
+    <div className="flex flex-col gap-4">
+      <DetailsCard
+        description="Metric metadata captured for this event."
+        title="Overview"
+      >
+        <DetailField label="Name">
+          <span className="font-medium text-foreground">{metric.name}</span>
+        </DetailField>
+        <DetailField label="Value">
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="break-all font-medium text-success">
+              {String(metric.value)}
+            </span>
+            {unit ? (
+              <Description className="text-xs text-muted">{unit}</Description>
+            ) : null}
+          </div>
+        </DetailField>
+        {unit ? <DetailField label="Unit">{unit}</DetailField> : null}
+        <DetailField label="Value Type">{valueKind}</DetailField>
+        <DetailField label="Recorded At">
+          <span className="tabular-nums text-foreground">
+            {formatTime(metric.startTime)}
+          </span>
+        </DetailField>
+      </DetailsCard>
 
       <DetailsDisplay details={metric.detail} />
-    </Box>
+    </div>
   );
 };
diff --git a/packages/performance-monitor-plugin/src/ui/components/MetricsTable.tsx b/packages/performance-monitor-plugin/src/ui/components/MetricsTable.tsx
index 6a04b967..5867de0a 100644
--- a/packages/performance-monitor-plugin/src/ui/components/MetricsTable.tsx
+++ b/packages/performance-monitor-plugin/src/ui/components/MetricsTable.tsx
@@ -1,9 +1,7 @@
-import React from 'react';
-import { ColumnDef } from '@tanstack/react-table';
-import { Text } from '@radix-ui/themes';
-import { SerializedPerformanceMetric } from '../../shared/types';
+import type { ColumnDef } from '@tanstack/react-table';
+import type { SerializedPerformanceMetric } from '../../shared/types';
+import { formatMetricRawValue, formatMetricValue, formatTime, getMetricUnit } from '../utils';
 import { DataTable } from './DataTable';
-import { formatTime } from '../utils';
 
 export type MetricsTableProps = {
   metrics: SerializedPerformanceMetric[];
@@ -14,41 +12,53 @@ const columns: ColumnDef<SerializedPerformanceMetric>[] = [
   {
     accessorKey: 'name',
     header: 'Name',
-    cell: ({ row }) => <Text weight="medium">{row.getValue('name')}</Text>,
+    cell: ({ row }) => (
+      <span className="font-medium text-foreground">
+        {String(row.getValue('name'))}
+      </span>
+    ),
   },
   {
     accessorKey: 'value',
     header: 'Value',
     cell: ({ row }) => {
-      const value = row.getValue('value');
+      const unit = getMetricUnit(row.original.detail);
+      const formattedValue = formatMetricValue(row.original.value, {
+        mode: 'compact',
+        unit,
+      });
+      const rawValue = formatMetricRawValue(row.original.value, unit);
+
       return (
-        <Text color="green" weight="medium">
-          {String(value)}
-        </Text>
+        <span
+          className="font-medium tabular-nums text-success"
+          title={rawValue}
+        >
+          {formattedValue}
+        </span>
       );
     },
   },
   {
     accessorKey: 'startTime',
-    header: 'Recorded at',
-    cell: ({ row }) => {
-      const startTime = row.getValue('startTime') as number;
-      return (
-        <Text size="2" color="gray">
-          {formatTime(startTime)}
-        </Text>
-      );
-    },
+    header: 'Recorded At',
+    cell: ({ row }) => (
+      <span className="tabular-nums text-sm text-muted">
+        {formatTime(row.getValue('startTime') as number)}
+      </span>
+    ),
   },
 ];
 
 export const MetricsTable = ({ metrics, onRowClick }: MetricsTableProps) => {
   return (
     <DataTable
-      data={metrics}
+      ariaLabel="Performance metrics"
       columns={columns}
-      onRowClick={onRowClick}
+      data={metrics}
       emptyMessage="No metrics recorded"
+      getRowTextValue={(metric) => metric.name}
+      onRowClick={onRowClick}
     />
   );
 };
diff --git a/packages/performance-monitor-plugin/src/ui/components/SessionDuration.tsx b/packages/performance-monitor-plugin/src/ui/components/SessionDuration.tsx
index bb907522..3dc07a0e 100644
--- a/packages/performance-monitor-plugin/src/ui/components/SessionDuration.tsx
+++ b/packages/performance-monitor-plugin/src/ui/components/SessionDuration.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { Text } from '@radix-ui/themes';
+import { Surface } from '@rozenite/ui';
+import { formatDuration, formatTime } from '../utils';
 
 export type SessionDurationProps = {
   isActive: boolean;
@@ -13,42 +14,46 @@ export const SessionDuration = ({
   const [currentTime, setCurrentTime] = useState<number | null>(null);
 
   useEffect(() => {
-    if (!isActive) {
+    if (!sessionStartedAt) {
+      setCurrentTime(null);
       return;
     }
 
     setCurrentTime(Date.now());
+
+    if (!isActive) {
+      return;
+    }
+
     const interval = setInterval(() => {
       setCurrentTime(Date.now());
     }, 1000);
 
     return () => clearInterval(interval);
-  }, [isActive]);
-
-  const formatTime = (timestamp: number) => {
-    return new Date(timestamp).toLocaleTimeString();
-  };
-
-  const formatDuration = (duration: number) => {
-    return `${Math.round(duration)}s`;
-  };
+  }, [isActive, sessionStartedAt]);
 
-  const getSessionDuration = () => {
-    if (!currentTime || !sessionStartedAt) return 0;
-    return currentTime - sessionStartedAt;
-  };
+  const duration =
+    currentTime && sessionStartedAt ? currentTime - sessionStartedAt : 0;
 
   return (
-    <>
-      <Text size="2" color="gray">
+    <Surface
+      className="min-w-0 px-3 py-2 text-xs leading-5 text-muted"
+      variant="secondary"
+    >
+      <div className="whitespace-nowrap">
         Session started:{' '}
-        {sessionStartedAt ? formatTime(sessionStartedAt) : 'Not started'}
-      </Text>
-      {!!sessionStartedAt && (
-        <Text size="2" color="gray">
-          Duration: {formatDuration(getSessionDuration() / 1000)}
-        </Text>
-      )}
-    </>
+        <span className="tabular-nums text-foreground">
+          {sessionStartedAt ? formatTime(sessionStartedAt) : 'Not started'}
+        </span>
+      </div>
+      {sessionStartedAt ? (
+        <div className="whitespace-nowrap">
+          Duration:{' '}
+          <span className="tabular-nums text-foreground">
+            {formatDuration(duration)}
+          </span>
+        </div>
+      ) : null}
+    </Surface>
   );
 };
diff --git a/packages/performance-monitor-plugin/src/ui/globals.css b/packages/performance-monitor-plugin/src/ui/globals.css
new file mode 100644
index 00000000..e862ec52
--- /dev/null
+++ b/packages/performance-monitor-plugin/src/ui/globals.css
@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@import '@rozenite/ui/styles.css';
diff --git a/packages/performance-monitor-plugin/src/ui/utils.ts b/packages/performance-monitor-plugin/src/ui/utils.ts
index f43803ca..4b83c248 100644
--- a/packages/performance-monitor-plugin/src/ui/utils.ts
+++ b/packages/performance-monitor-plugin/src/ui/utils.ts
@@ -22,3 +22,97 @@ export const formatDuration = (duration: number) => {
   }
   return `${duration.toFixed(2)}ms`;
 };
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null && !Array.isArray(value);
+
+const getMetricMaximumFractionDigits = (
+  value: number,
+  mode: 'compact' | 'full',
+) => {
+  if (Number.isInteger(value)) {
+    return 0;
+  }
+
+  const absoluteValue = Math.abs(value);
+
+  if (mode === 'compact') {
+    if (absoluteValue >= 100) {
+      return 1;
+    }
+
+    if (absoluteValue >= 1) {
+      return 2;
+    }
+
+    if (absoluteValue >= 0.01) {
+      return 4;
+    }
+
+    return 6;
+  }
+
+  if (absoluteValue >= 100) {
+    return 2;
+  }
+
+  if (absoluteValue >= 1) {
+    return 4;
+  }
+
+  if (absoluteValue >= 0.01) {
+    return 6;
+  }
+
+  return 8;
+};
+
+export const getMetricUnit = (detail: unknown): string | null => {
+  if (!isRecord(detail)) {
+    return null;
+  }
+
+  const unit = detail.unit;
+  return typeof unit === 'string' && unit.trim() ? unit.trim() : null;
+};
+
+export const formatMetricValue = (
+  value: string | number,
+  options: {
+    includeUnit?: boolean;
+    mode?: 'compact' | 'full';
+    unit?: string | null;
+  } = {},
+) => {
+  const { includeUnit = true, mode = 'compact', unit = null } = options;
+
+  const baseValue =
+    typeof value === 'number'
+      ? new Intl.NumberFormat(undefined, {
+          maximumFractionDigits: getMetricMaximumFractionDigits(value, mode),
+          minimumFractionDigits: 0,
+        }).format(value)
+      : value;
+
+  if (includeUnit && unit) {
+    return `${baseValue} ${unit}`;
+  }
+
+  return baseValue;
+};
+
+export const formatMetricRawValue = (
+  value: string | number,
+  unit?: string | null,
+) => {
+  const baseValue = typeof value === 'number' ? String(value) : value;
+  return unit ? `${baseValue} ${unit}` : baseValue;
+};
+
+export const getMetricValueKind = (value: string | number) => {
+  if (typeof value === 'number') {
+    return Number.isInteger(value) ? 'Integer' : 'Decimal';
+  }
+
+  return 'Text';
+};
diff --git a/packages/react-navigation-plugin/package.json b/packages/react-navigation-plugin/package.json
index b899c6dc..63c5a665 100644
--- a/packages/react-navigation-plugin/package.json
+++ b/packages/react-navigation-plugin/package.json
@@ -23,10 +23,12 @@
   "dependencies": {
     "@rozenite/agent-bridge": "workspace:*",
     "@rozenite/plugin-bridge": "workspace:*",
+    "@rozenite/ui": "workspace:*",
     "fast-deep-equal": "^3.1.3"
   },
   "devDependencies": {
     "@react-navigation/core": "^7.12.1",
+    "@tailwindcss/postcss": "^4.2.2",
     "@rozenite/vite-plugin": "workspace:*",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
@@ -34,13 +36,10 @@
     "postcss": "^8.5.6",
     "react": "catalog:",
     "react-dom": "catalog:",
-    "react-json-tree": "^0.20.0",
     "react-native": "catalog:",
     "react-native-web": "^0.21.2",
     "rozenite": "workspace:*",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^3.4.17",
-    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss": "^4.2.2",
     "typescript": "~5.9.3",
     "vite": "catalog:"
   },
diff --git a/packages/react-navigation-plugin/postcss.config.js b/packages/react-navigation-plugin/postcss.config.js
index 2aa7205d..a34a3d56 100644
--- a/packages/react-navigation-plugin/postcss.config.js
+++ b/packages/react-navigation-plugin/postcss.config.js
@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };
diff --git a/packages/react-navigation-plugin/src/devtools-ui/components/ActionDetailPanel.tsx b/packages/react-navigation-plugin/src/devtools-ui/components/ActionDetailPanel.tsx
index 2a468689..22e71a83 100644
--- a/packages/react-navigation-plugin/src/devtools-ui/components/ActionDetailPanel.tsx
+++ b/packages/react-navigation-plugin/src/devtools-ui/components/ActionDetailPanel.tsx
@@ -1,69 +1,52 @@
-import { JSONTree } from 'react-json-tree';
-import { NavigationAction, NavigationState } from '../../shared';
+import { JsonInspector, Surface } from '@rozenite/ui';
+import type { NavigationAction, NavigationState } from '../../shared';
 
 export type ActionDetailPanelProps = {
   action: NavigationAction;
   state: NavigationState | undefined;
 };
 
-const jsonTreeTheme = {
-  base00: '#1f2937', // gray-800
-  base01: '#374151', // gray-700
-  base02: '#4b5563', // gray-600
-  base03: '#6b7280', // gray-500
-  base04: '#9ca3af', // gray-400
-  base05: '#d1d5db', // gray-300
-  base06: '#e5e7eb', // gray-200
-  base07: '#f3f4f6', // gray-100
-  base08: '#ef4444', // red-500
-  base09: '#f97316', // orange-500
-  base0A: '#eab308', // yellow-500
-  base0B: '#22c55e', // green-500
-  base0C: '#06b6d4', // cyan-500
-  base0D: '#3b82f6', // blue-500
-  base0E: '#a855f7', // purple-500
-  base0F: '#92400e', // amber-800
-};
-
 export const ActionDetailPanel = ({
   action,
   state,
 }: ActionDetailPanelProps) => {
   return (
-    <div className="flex-1 overflow-auto bg-gray-900">
-      <div className="p-4">
-        <div className="mb-6">
-          <h3 className="mb-3 text-base font-bold text-gray-100">
-            Action Payload
-          </h3>
-          <div className="border border-gray-700 rounded bg-gray-800 p-3 text-sm">
-            <JSONTree
-              data={action}
-              theme={jsonTreeTheme}
-              invertTheme={false}
+    <div className="grid min-h-0 flex-1 gap-4 overflow-auto xl:grid-cols-2">
+      <section className="flex min-h-0 flex-col gap-2">
+        <h3 className="text-sm font-semibold text-foreground">
+          Action Payload
+        </h3>
+        <Surface
+          className="min-h-0 flex-1 overflow-auto p-3 text-sm"
+          variant="secondary"
+        >
+          <JsonInspector
+            data={action}
+            shouldExpandNodeInitially={(keyPath) => keyPath.length <= 2}
+            theme="dark"
+          />
+        </Surface>
+      </section>
+
+      <section className="flex min-h-0 flex-col gap-2">
+        <h3 className="text-sm font-semibold text-foreground">
+          Navigation State
+        </h3>
+        <Surface
+          className="min-h-0 flex-1 overflow-auto p-3 text-sm"
+          variant="secondary"
+        >
+          {state ? (
+            <JsonInspector
+              data={state}
               shouldExpandNodeInitially={(keyPath) => keyPath.length <= 2}
+              theme="dark"
             />
-          </div>
-        </div>
-
-        <div>
-          <h3 className="mb-3 text-base font-bold text-gray-100">
-            Navigation State
-          </h3>
-          <div className="border border-gray-700 rounded bg-gray-800 p-3 text-sm">
-            {state ? (
-              <JSONTree
-                data={state}
-                theme={jsonTreeTheme}
-                invertTheme={false}
-                shouldExpandNodeInitially={(keyPath) => keyPath.length <= 2}
-              />
-            ) : (
-              <div className="text-gray-400 italic">No state available</div>
-            )}
-          </div>
-        </div>
-      </div>
+          ) : (
+            <div className="text-sm italic text-muted">No state available</div>
+          )}
+        </Surface>
+      </section>
     </div>
   );
 };
diff --git a/packages/react-navigation-plugin/src/devtools-ui/components/ActionItem.tsx b/packages/react-navigation-plugin/src/devtools-ui/components/ActionItem.tsx
index f8ef986f..b1e2fc82 100644
--- a/packages/react-navigation-plugin/src/devtools-ui/components/ActionItem.tsx
+++ b/packages/react-navigation-plugin/src/devtools-ui/components/ActionItem.tsx
@@ -1,4 +1,5 @@
-import { NavigationAction } from '../../shared';
+import { Button, Chip, Surface } from '@rozenite/ui';
+import type { NavigationAction } from '../../shared';
 
 export type ActionItemProps = {
   action: NavigationAction;
@@ -8,19 +9,24 @@ export type ActionItemProps = {
   onGoToAction: () => void;
 };
 
-const getActionTypeColor = (type: string): string => {
-  const colors: { [key: string]: string } = {
-    NAVIGATE: 'text-green-400',
-    GO_BACK: 'text-orange-400',
-    PUSH: 'text-blue-400',
-    POP: 'text-red-400',
-    REPLACE: 'text-purple-400',
-    RESET: 'text-yellow-600',
-    SET_PARAMS: 'text-cyan-400',
-    SNAPSHOT: 'text-gray-400',
-    '@@UNKNOWN': 'text-gray-400',
+const getActionTypeColor = (
+  type: string
+): 'success' | 'warning' | 'accent' | 'danger' | 'default' => {
+  const colors: Record<
+    string,
+    'success' | 'warning' | 'accent' | 'danger' | 'default'
+  > = {
+    NAVIGATE: 'success',
+    GO_BACK: 'warning',
+    PUSH: 'accent',
+    POP: 'danger',
+    REPLACE: 'accent',
+    RESET: 'warning',
+    SET_PARAMS: 'default',
+    SNAPSHOT: 'default',
+    '@@UNKNOWN': 'default',
   };
-  return colors[type] || 'text-gray-400';
+  return colors[type] || 'default';
 };
 
 export const ActionItem = ({
@@ -39,36 +45,63 @@ export const ActionItem = ({
 
   return (
     <div
-      className={`m-1 p-3 rounded cursor-pointer transition-all duration-200 border ${
+      className={`cursor-pointer rounded-lg transition-colors ${
         isSelected
-          ? 'bg-blue-900/30 border-blue-500'
-          : 'bg-gray-800 border-gray-700 hover:bg-gray-700'
+          ? 'ring-1 ring-accent/25'
+          : ''
       }`}
       onClick={onSelect}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          onSelect();
+        }
+      }}
+      role="button"
+      tabIndex={0}
     >
-      <div className="flex items-center justify-between mb-2">
-        <div className="flex items-center gap-2">
-          <span
-            className={`font-bold text-sm ${getActionTypeColor(action.type)}`}
+      <Surface
+        className={`border px-3 py-3 transition-colors ${
+          isSelected
+            ? 'border-accent/60 bg-accent/10'
+            : 'border-border/70 bg-surface-secondary hover:bg-surface-tertiary'
+        }`}
+        variant="secondary"
+      >
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0 flex-1">
+            <div className="flex flex-wrap items-center gap-2">
+              <Chip
+                color={getActionTypeColor(action.type)}
+                size="sm"
+                variant="soft"
+              >
+                {action.type}
+              </Chip>
+              <span className="text-xs text-muted">#{index}</span>
+            </div>
+
+            {actionName ? (
+              <div className="mt-2 truncate text-sm text-foreground">
+                {actionName}
+              </div>
+            ) : (
+              <div className="mt-2 text-xs text-muted">
+                No route name attached to this action.
+              </div>
+            )}
+          </div>
+
+          <div
+            className="shrink-0"
+            onClick={(event) => event.stopPropagation()}
           >
-            {action.type}
-          </span>
-          <span className="text-xs text-gray-500">#{index}</span>
+            <Button onPress={onGoToAction} size="sm" variant="secondary">
+              Go to
+            </Button>
+          </div>
         </div>
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            onGoToAction();
-          }}
-          className="px-2 py-1 text-xs border border-blue-500 bg-blue-500 text-white hover:bg-blue-600 cursor-pointer rounded transition-colors duration-200"
-        >
-          Go to
-        </button>
-      </div>
-
-      {actionName && (
-        <div className="text-xs text-gray-300">→ {actionName}</div>
-      )}
+      </Surface>
     </div>
   );
 };
diff --git a/packages/react-navigation-plugin/src/devtools-ui/components/ActionList.tsx b/packages/react-navigation-plugin/src/devtools-ui/components/ActionList.tsx
index a02fb2f5..6cd05ccc 100644
--- a/packages/react-navigation-plugin/src/devtools-ui/components/ActionList.tsx
+++ b/packages/react-navigation-plugin/src/devtools-ui/components/ActionList.tsx
@@ -1,4 +1,5 @@
-import { NavigationAction, NavigationState } from '../../shared';
+import { Surface } from '@rozenite/ui';
+import type { NavigationAction, NavigationState } from '../../shared';
 import { ActionItem } from './ActionItem';
 
 export type ActionWithState = {
@@ -20,13 +21,13 @@ export const ActionList = ({
   onGoToAction,
 }: ActionListProps) => {
   return (
-    <div className="flex-1 overflow-auto">
+    <div className="h-full">
       {actionHistory.length === 0 ? (
-        <div className="p-4 text-center text-gray-400">
-          No actions recorded yet
-        </div>
+        <Surface className="text-sm text-muted" variant="secondary">
+          No actions recorded yet.
+        </Surface>
       ) : (
-        <div className="p-2">
+        <div className="space-y-2 pb-1">
           {actionHistory.map((entry, index) => (
             <ActionItem
               key={index}
diff --git a/packages/react-navigation-plugin/src/devtools-ui/components/ActionSidebar.tsx b/packages/react-navigation-plugin/src/devtools-ui/components/ActionSidebar.tsx
index 8b5bed86..2e9195bd 100644
--- a/packages/react-navigation-plugin/src/devtools-ui/components/ActionSidebar.tsx
+++ b/packages/react-navigation-plugin/src/devtools-ui/components/ActionSidebar.tsx
@@ -1,4 +1,6 @@
-import { ActionList, ActionWithState } from './ActionList';
+import { Button, Card, Chip } from '@rozenite/ui';
+import { ActionList } from './ActionList';
+import type { ActionWithState } from './ActionList';
 
 export type ActionSidebarProps = {
   actionHistory: ActionWithState[];
@@ -16,35 +18,40 @@ export const ActionSidebar = ({
   onClearActions,
 }: ActionSidebarProps) => {
   return (
-    <div className="w-80 border-r border-gray-700 overflow-hidden bg-gray-900 flex flex-col">
-      <div className="p-3 border-b border-gray-700">
-        <button
-          onClick={onClearActions}
-          className="w-full px-3 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-md transition-colors duration-200 flex items-center justify-center gap-2"
-          title="Clear all actions and request initial state"
+    <Card className="flex min-h-0 w-80 shrink-0 flex-col xl:w-[21rem]">
+      <Card.Header>
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <Card.Title>Timeline</Card.Title>
+            <Card.Description className="mt-1 text-xs">
+              Newest navigation actions appear first.
+            </Card.Description>
+          </div>
+          <Chip className="shrink-0" size="sm" variant="secondary">
+            {actionHistory.length}
+          </Chip>
+        </div>
+      </Card.Header>
+
+      <Card.Content className="flex min-h-0 flex-1 flex-col gap-3">
+        <Button
+          isDisabled={actionHistory.length === 0}
+          onPress={onClearActions}
+          size="sm"
+          variant="secondary"
         >
-          <svg
-            className="w-4 h-4"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-            />
-          </svg>
-          Clear Actions
-        </button>
-      </div>
-      <ActionList
-        actionHistory={actionHistory}
-        selectedActionIndex={selectedActionIndex}
-        onActionSelect={onActionSelect}
-        onGoToAction={onGoToAction}
-      />
-    </div>
+          Clear actions
+        </Button>
+
+        <div className="min-h-0 flex-1 overflow-auto">
+          <ActionList
+            actionHistory={actionHistory}
+            selectedActionIndex={selectedActionIndex}
+            onActionSelect={onActionSelect}
+            onGoToAction={onGoToAction}
+          />
+        </div>
+      </Card.Content>
+    </Card>
   );
 };
diff --git a/packages/react-navigation-plugin/src/devtools-ui/components/ActionTimeline.tsx b/packages/react-navigation-plugin/src/devtools-ui/components/ActionTimeline.tsx
index b20bb64c..42552f06 100644
--- a/packages/react-navigation-plugin/src/devtools-ui/components/ActionTimeline.tsx
+++ b/packages/react-navigation-plugin/src/devtools-ui/components/ActionTimeline.tsx
@@ -1,6 +1,7 @@
+import { Card, Surface } from '@rozenite/ui';
 import { ActionSidebar } from './ActionSidebar';
 import { ActionDetailPanel } from './ActionDetailPanel';
-import { ActionWithState } from './ActionList';
+import type { ActionWithState } from './ActionList';
 
 export type ActionTimelineProps = {
   actionHistory: ActionWithState[];
@@ -21,7 +22,7 @@ export const ActionTimeline = ({
     selectedActionIndex !== null ? actionHistory[selectedActionIndex] : null;
 
   return (
-    <div className="h-full bg-gray-900 text-gray-100 flex">
+    <div className="flex h-full min-h-0 w-full flex-1 gap-3">
       <ActionSidebar
         actionHistory={actionHistory}
         selectedActionIndex={selectedActionIndex}
@@ -30,16 +31,32 @@ export const ActionTimeline = ({
         onClearActions={onClearActions}
       />
 
-      {selectedEntry ? (
-        <ActionDetailPanel
-          action={selectedEntry.action}
-          state={selectedEntry.state}
-        />
-      ) : (
-        <div className="flex-1 flex items-center justify-center text-gray-400 bg-gray-900">
-          Select an action from the timeline to view its details
-        </div>
-      )}
+      <Card className="flex min-h-0 min-w-0 flex-1 flex-col">
+        <Card.Header>
+          <Card.Title>Action Details</Card.Title>
+          <Card.Description className="mt-1 text-xs">
+            {selectedEntry
+              ? 'Inspect the selected action payload and its resulting navigation state.'
+              : 'Select an action from the timeline to inspect its payload and navigation state.'}
+          </Card.Description>
+        </Card.Header>
+
+        <Card.Content className="flex min-h-0 flex-1 flex-col overflow-hidden">
+          {selectedEntry ? (
+            <ActionDetailPanel
+              action={selectedEntry.action}
+              state={selectedEntry.state}
+            />
+          ) : (
+            <Surface
+              className="flex flex-1 items-center justify-center text-sm text-muted"
+              variant="secondary"
+            >
+              Select an action from the timeline to view its details.
+            </Surface>
+          )}
+        </Card.Content>
+      </Card>
     </div>
   );
 };
diff --git a/packages/react-navigation-plugin/src/devtools-ui/components/LinkingTester.tsx b/packages/react-navigation-plugin/src/devtools-ui/components/LinkingTester.tsx
index fc20764f..e9be67ba 100644
--- a/packages/react-navigation-plugin/src/devtools-ui/components/LinkingTester.tsx
+++ b/packages/react-navigation-plugin/src/devtools-ui/components/LinkingTester.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { Button, Card, Input, Surface, TextField } from '@rozenite/ui';
 
 export type LinkingTesterProps = {
   onLinkOpen: (url: string) => void;
@@ -20,40 +21,52 @@ export const LinkingTester = ({ onLinkOpen }: LinkingTesterProps) => {
   };
 
   return (
-    <div className="h-full bg-gray-900 p-6 overflow-auto">
-      <div className="max-w-2xl">
-        <div className="space-y-4">
-          {/* URL Input */}
-          <form onSubmit={handleOpenLink} className="flex gap-2">
-            <input
-              id="url-input"
+    <div className="flex h-full min-h-0 overflow-auto">
+      <Card className="h-fit w-full max-w-2xl">
+        <Card.Header>
+          <Card.Title>Link Tester</Card.Title>
+          <Card.Description className="mt-1 text-xs">
+            Open a deep link against the connected app and keep the last value
+            handy while you debug.
+          </Card.Description>
+        </Card.Header>
+
+        <Card.Content className="space-y-4">
+          <form
+            className="flex flex-col gap-3 sm:flex-row sm:items-start"
+            onSubmit={handleOpenLink}
+          >
+            <TextField
+              aria-label="Deep link URL"
+              className="min-w-0 flex-1"
+              name="url-input"
               type="text"
-              value={url}
-              onChange={(e) => setUrl(e.target.value)}
-              placeholder="myapp://screen/param"
-              className="flex-1 px-3 py-2 bg-gray-800 border border-gray-600 rounded text-gray-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              autoComplete="off"
-            />
-            <button
-              type="submit"
-              disabled={!url.trim()}
-              className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors"
             >
+              <Input
+                autoComplete="off"
+                fullWidth
+                onChange={(event) => setUrl(event.target.value)}
+                placeholder="myapp://screen/param"
+                value={url}
+                variant="secondary"
+              />
+            </TextField>
+
+            <Button isDisabled={!url.trim()} type="submit">
               Open
-            </button>
+            </Button>
           </form>
 
-          {/* Last Opened */}
-          {lastOpened && (
-            <div className="p-3 bg-gray-800 rounded border border-gray-700">
-              <p className="text-sm text-gray-300">
-                <span className="text-green-400">Last opened:</span>{' '}
+          {lastOpened ? (
+            <Surface className="space-y-1 text-sm" variant="secondary">
+              <div className="font-medium text-foreground">Last opened</div>
+              <div className="break-all font-mono text-muted">
                 {lastOpened}
-              </p>
-            </div>
-          )}
-        </div>
-      </div>
+              </div>
+            </Surface>
+          ) : null}
+        </Card.Content>
+      </Card>
     </div>
   );
 };
diff --git a/packages/react-navigation-plugin/src/devtools-ui/components/NavigationTree/Leaf.tsx b/packages/react-navigation-plugin/src/devtools-ui/components/NavigationTree/Leaf.tsx
index 31cf0003..83573038 100644
--- a/packages/react-navigation-plugin/src/devtools-ui/components/NavigationTree/Leaf.tsx
+++ b/packages/react-navigation-plugin/src/devtools-ui/components/NavigationTree/Leaf.tsx
@@ -1,3 +1,6 @@
+import type { CSSProperties } from 'react';
+import type { NavigationTreeColor } from './navigationTreeColors';
+
 export const Leaf = ({
   title,
   isSelectedTab,
@@ -6,27 +9,40 @@ export const Leaf = ({
 }: {
   title: string;
   isSelectedTab?: boolean;
-  color: string;
+  color: NavigationTreeColor;
   subtitle?: string;
 }) => {
+  const shellStyle: CSSProperties | undefined = isSelectedTab
+    ? { borderColor: color.accent }
+    : undefined;
+  const leafStyle: CSSProperties = {
+    backgroundColor: color.accent,
+    color: color.onAccent,
+  };
+
   return (
     <div
-      className={`rounded-sm ${
-        isSelectedTab
-          ? `p-1 border-2 border-dashed border-${color}-600`
-          : 'px-1'
+      className={`rounded-md ${
+        isSelectedTab ? 'border-2 border-dashed p-1' : 'px-1'
       }`}
+      style={shellStyle}
     >
       <button
-        className={`p-2 text-center rounded-sm bg-${color}-600`}
+        className="flex flex-col items-center gap-1 rounded-md px-3 py-2 text-center shadow-sm"
         onClick={(e) => {
           e.stopPropagation();
         }}
+        style={leafStyle}
+        type="button"
       >
-        <span className={`text-gray-100 ${isSelectedTab ? 'underline' : ''}`}>
+        <span className={`text-sm font-medium ${isSelectedTab ? 'underline' : ''}`}>
           {title}
         </span>
-        {subtitle ? <span className="text-gray-100">{subtitle}</span> : null}
+        {subtitle ? (
+          <span className="max-w-52 break-all text-[11px] opacity-80">
+            {subtitle}
+          </span>
+        ) : null}
       </button>
     </div>
   );
diff --git a/packages/react-navigation-plugin/src/devtools-ui/components/NavigationTree/NavigationNode.tsx b/packages/react-navigation-plugin/src/devtools-ui/components/NavigationTree/NavigationNode.tsx
index 2d3f521a..645528ed 100644
--- a/packages/react-navigation-plugin/src/devtools-ui/components/NavigationTree/NavigationNode.tsx
+++ b/packages/react-navigation-plugin/src/devtools-ui/components/NavigationTree/NavigationNode.tsx
@@ -1,20 +1,17 @@
-import React, { ReactNode } from 'react';
-
-import { PartialState } from '@react-navigation/core';
-import { NavigationState } from '../../../shared';
+import React, { type CSSProperties, type ReactNode } from 'react';
+import type { PartialState } from '@react-navigation/core';
+import type { NavigationState } from '../../../shared';
 import { Leaf } from './Leaf';
-import { generateColor } from './navigationTreeColors';
+import { generateColor, type NavigationTreeColor } from './navigationTreeColors';
 
 export const NavigationNode = ({
   name,
   state,
   parentColor,
-  isParamsVisible,
 }: {
   name: string;
   state: NavigationState | PartialState<NavigationState>;
-  parentColor: string;
-  isParamsVisible?: boolean;
+  parentColor: NavigationTreeColor;
 }) => {
   const [isClosed, setIsClosed] = React.useState(false);
 
@@ -53,18 +50,10 @@ export const NavigationNode = ({
                 name={route.name}
                 state={route.state}
                 parentColor={color}
-                isParamsVisible={isParamsVisible}
               />
             ) : (
               <Leaf
                 title={route.name}
-                subtitle={
-                  isParamsVisible &&
-                  route.params &&
-                  Object.keys(route.params).length > 0
-                    ? `${JSON.stringify(route.params)}`
-                    : undefined
-                }
                 isSelectedTab={
                   state.type === 'tab' &&
                   state.index === state.routes.length - 1 - index
@@ -76,7 +65,12 @@ export const NavigationNode = ({
           </React.Fragment>
         ))}
       </StackWrapper>
-      <span className={`text-${color}-600 self-center`}>{name}</span>
+      <span
+        className="self-center px-2 pt-2 text-xs font-semibold uppercase tracking-[0.12em]"
+        style={{ color: color.accent }}
+      >
+        {name}
+      </span>
     </NodeContainer>
   );
 };
@@ -87,7 +81,7 @@ const ClosedNode = ({
   openNode,
 }: {
   name: string;
-  color: string;
+  color: NavigationTreeColor;
   openNode: () => void;
 }) => {
   return (
@@ -99,7 +93,12 @@ const ClosedNode = ({
       }}
       isClosed
     >
-      <span className={`text-${color}-600`}>{name}</span>
+      <span
+        className="px-3 py-1 text-xs font-semibold uppercase tracking-[0.12em]"
+        style={{ color: color.accent }}
+      >
+        {name}
+      </span>
     </NodeContainer>
   );
 };
@@ -110,7 +109,7 @@ export const NodeContainer = ({
   children,
   onClick,
 }: {
-  color: string;
+  color: NavigationTreeColor;
   isClosed?: boolean;
   children: ReactNode;
   onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
@@ -127,14 +126,22 @@ export const NodeContainer = ({
     e.stopPropagation();
   };
 
+  const style: CSSProperties = {
+    backgroundColor: isHovered ? color.soft : 'transparent',
+    borderColor: color.accent,
+    boxShadow: isHovered ? `0 0 0 1px ${color.softBorder}` : undefined,
+  };
+
   return (
     <button
-      className={`items-stretch flex flex-col rounded-sm cursor-pointer border-2 border-solid p-1 text-center border-${color}-600 ${
+      className={`flex cursor-pointer flex-col items-stretch rounded-md border-2 p-1 text-center transition-colors ${
         isClosed ? '' : 'border-t-0 rounded-t-none'
-      } ${isHovered ? `bg-${color}-600 bg-opacity-30` : 'bg-transparent'}`}
+      }`}
       onMouseOver={handleMouseOver}
       onMouseOut={handleMouseOut}
       onClick={onClick}
+      style={style}
+      type="button"
     >
       {children}
     </button>
@@ -143,7 +150,7 @@ export const NodeContainer = ({
 
 const TabContainer = ({ children }: { children: ReactNode }) => {
   return (
-    <div className="flex flex-1 flex-row items-center justify-around">
+    <div className="flex flex-1 flex-row items-center justify-around gap-2">
       {children}
     </div>
   );
diff --git a/packages/react-navigation-plugin/src/devtools-ui/components/NavigationTree/NavigationTree.tsx b/packages/react-navigation-plugin/src/devtools-ui/components/NavigationTree/NavigationTree.tsx
index fef77b3a..064519a7 100644
--- a/packages/react-navigation-plugin/src/devtools-ui/components/NavigationTree/NavigationTree.tsx
+++ b/packages/react-navigation-plugin/src/devtools-ui/components/NavigationTree/NavigationTree.tsx
@@ -1,4 +1,5 @@
-import { ActionWithState } from '../ActionList';
+import { Chip, Surface } from '@rozenite/ui';
+import type { ActionWithState } from '../ActionList';
 import { NavigationNode } from './NavigationNode';
 import { generateColor } from './navigationTreeColors';
 
@@ -11,18 +12,25 @@ export function NavigationTree({ actionHistory }: NavigationTreeProps) {
     .map((action) => action.state)
     .filter((state) => state !== undefined);
 
+  if (states.length === 0) {
+    return (
+      <Surface className="text-sm text-muted" variant="secondary">
+        No navigation state has been captured yet.
+      </Surface>
+    );
+  }
+
   return (
-    <div className="flex-1 flex-row-reverse overflow-auto overflow-x-scroll flex pb-[12px] h-full">
+    <div className="flex h-full min-h-0 flex-1 flex-row-reverse gap-4 overflow-auto pb-3">
       {states.map((state, index) => (
         <div
           key={states.length - index}
-          className="flex flex-col-reverse items-center overflow-auto h-full min-w-[34vw]"
+          className="flex h-full min-w-[34vw] flex-col-reverse items-center gap-4 overflow-auto"
         >
-          <span className="font-bold text-sm text-gray-400">
+          <Chip size="sm" variant="secondary">
             Navigation state n°{states.length - index}
-          </span>
-          <div className="h-4" />
-          <div className="flex flex-col-reverse items-center overflow-auto h-full min-w-[34vw]">
+          </Chip>
+          <div className="flex h-full min-w-[34vw] flex-col-reverse items-center overflow-auto">
             {state && (
               <NavigationNode
                 name="root"
diff --git a/packages/react-navigation-plugin/src/devtools-ui/components/NavigationTree/navigationTreeColors.ts b/packages/react-navigation-plugin/src/devtools-ui/components/NavigationTree/navigationTreeColors.ts
index 47bfba85..dbbd274b 100644
--- a/packages/react-navigation-plugin/src/devtools-ui/components/NavigationTree/navigationTreeColors.ts
+++ b/packages/react-navigation-plugin/src/devtools-ui/components/NavigationTree/navigationTreeColors.ts
@@ -1,53 +1,98 @@
-const colorMap: Record<string, NavigationTreeColors> = {};
-let currentIndex = 0;
-
-export const colorList = [
-  'red',
-  'orange',
-  'amber',
-  'yellow',
-  'lime',
-  'green',
-  'emerald',
-  'teal',
-  'cyan',
-  'sky',
-  'blue',
-  'indigo',
-  'violet',
-  'purple',
-  'fuchsia',
-  'pink',
-  'rose',
-] as const;
-
-type NavigationTreeColors = (typeof colorList)[number];
-
-export const getNavigationTreeColor = (color: NavigationTreeColors): string => {
-  return `text-${color}-600`;
+export type NavigationTreeColor = {
+  accent: string;
+  onAccent: string;
+  soft: string;
+  softBorder: string;
 };
 
-export const getNavigationTreeBorderColor = (
-  color: NavigationTreeColors
-): string => {
-  return `border-${color}-600`;
-};
+const navigationTreeColors: NavigationTreeColor[] = [
+  {
+    accent: '#ef4444',
+    onAccent: '#ffffff',
+    soft: 'rgba(239, 68, 68, 0.14)',
+    softBorder: 'rgba(239, 68, 68, 0.35)',
+  },
+  {
+    accent: '#f97316',
+    onAccent: '#ffffff',
+    soft: 'rgba(249, 115, 22, 0.14)',
+    softBorder: 'rgba(249, 115, 22, 0.35)',
+  },
+  {
+    accent: '#eab308',
+    onAccent: '#111827',
+    soft: 'rgba(234, 179, 8, 0.16)',
+    softBorder: 'rgba(234, 179, 8, 0.36)',
+  },
+  {
+    accent: '#84cc16',
+    onAccent: '#111827',
+    soft: 'rgba(132, 204, 22, 0.16)',
+    softBorder: 'rgba(132, 204, 22, 0.36)',
+  },
+  {
+    accent: '#22c55e',
+    onAccent: '#052e16',
+    soft: 'rgba(34, 197, 94, 0.14)',
+    softBorder: 'rgba(34, 197, 94, 0.34)',
+  },
+  {
+    accent: '#14b8a6',
+    onAccent: '#042f2e',
+    soft: 'rgba(20, 184, 166, 0.14)',
+    softBorder: 'rgba(20, 184, 166, 0.34)',
+  },
+  {
+    accent: '#06b6d4',
+    onAccent: '#083344',
+    soft: 'rgba(6, 182, 212, 0.14)',
+    softBorder: 'rgba(6, 182, 212, 0.34)',
+  },
+  {
+    accent: '#3b82f6',
+    onAccent: '#eff6ff',
+    soft: 'rgba(59, 130, 246, 0.14)',
+    softBorder: 'rgba(59, 130, 246, 0.34)',
+  },
+  {
+    accent: '#6366f1',
+    onAccent: '#eef2ff',
+    soft: 'rgba(99, 102, 241, 0.14)',
+    softBorder: 'rgba(99, 102, 241, 0.34)',
+  },
+  {
+    accent: '#8b5cf6',
+    onAccent: '#f5f3ff',
+    soft: 'rgba(139, 92, 246, 0.14)',
+    softBorder: 'rgba(139, 92, 246, 0.34)',
+  },
+  {
+    accent: '#d946ef',
+    onAccent: '#fdf4ff',
+    soft: 'rgba(217, 70, 239, 0.14)',
+    softBorder: 'rgba(217, 70, 239, 0.34)',
+  },
+  {
+    accent: '#ec4899',
+    onAccent: '#fdf2f8',
+    soft: 'rgba(236, 72, 153, 0.14)',
+    softBorder: 'rgba(236, 72, 153, 0.34)',
+  },
+];
 
-export const getNavigationTreeBackgroundColor = (
-  color: NavigationTreeColors
-): string => {
-  return `bg-${color}-600`;
-};
+const colorMap = new Map<string, NavigationTreeColor>();
+let currentIndex = -1;
 
-export const generateColor = (key: string): NavigationTreeColors => {
-  if (colorMap[key]) {
-    return colorMap[key];
-  }
+export const generateColor = (key: string): NavigationTreeColor => {
+  const existingColor = colorMap.get(key);
 
-  currentIndex = (currentIndex + 1) % colorList.length;
-  const newColor = colorList[currentIndex];
+  if (existingColor) {
+    return existingColor;
+  }
 
-  colorMap[key] = newColor;
+  currentIndex = (currentIndex + 1) % navigationTreeColors.length;
+  const newColor = navigationTreeColors[currentIndex];
 
+  colorMap.set(key, newColor);
   return newColor;
 };
diff --git a/packages/react-navigation-plugin/src/devtools-ui/components/Tabs.tsx b/packages/react-navigation-plugin/src/devtools-ui/components/Tabs.tsx
deleted file mode 100644
index b6514334..00000000
--- a/packages/react-navigation-plugin/src/devtools-ui/components/Tabs.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { ReactNode } from 'react';
-
-export type Tab = {
-  id: string;
-  label: string;
-  content: ReactNode;
-};
-
-export type TabsProps = {
-  tabs: Tab[];
-  activeTabId: string;
-  onTabChange: (tabId: string) => void;
-};
-
-export const Tabs = ({ tabs, activeTabId, onTabChange }: TabsProps) => {
-  return (
-    <div className="h-full flex flex-col">
-      {/* Tab Headers */}
-      <div className="flex border-b border-gray-700 bg-gray-800">
-        {tabs.map((tab) => (
-          <button
-            key={tab.id}
-            onClick={() => onTabChange(tab.id)}
-            className={`px-4 py-2 text-sm font-medium transition-colors ${
-              activeTabId === tab.id
-                ? 'text-blue-400 border-b-2 border-blue-400 bg-gray-700'
-                : 'text-gray-400 hover:text-gray-200 hover:bg-gray-700'
-            }`}
-          >
-            {tab.label}
-          </button>
-        ))}
-      </div>
-
-      {/* Tab Content */}
-      <div className="flex-1 overflow-hidden">
-        {tabs.find((tab) => tab.id === activeTabId)?.content}
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react-navigation-plugin/src/devtools-ui/globals.css b/packages/react-navigation-plugin/src/devtools-ui/globals.css
index 2bf47da0..e862ec52 100644
--- a/packages/react-navigation-plugin/src/devtools-ui/globals.css
+++ b/packages/react-navigation-plugin/src/devtools-ui/globals.css
@@ -1,123 +1,2 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-
-  .wrap-anywhere {
-    overflow-wrap: anywhere;
-  }
-}
-
-@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% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-  .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%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-/* Custom scrollbar styles to match plugin theme */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: #1f2937; /* gray-800 */
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #374151; /* gray-700 */
-  border-radius: 4px;
-  border: 1px solid #1f2937; /* gray-800 */
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #4b5563; /* gray-600 */
-}
-
-::-webkit-scrollbar-thumb:active {
-  background: #6b7280; /* gray-500 */
-}
-
-::-webkit-scrollbar-corner {
-  background: #1f2937; /* gray-800 */
-}
+@import 'tailwindcss';
+@import '@rozenite/ui/styles.css';
diff --git a/packages/react-navigation-plugin/src/devtools-ui/index.tsx b/packages/react-navigation-plugin/src/devtools-ui/index.tsx
index 8317d143..359c5125 100644
--- a/packages/react-navigation-plugin/src/devtools-ui/index.tsx
+++ b/packages/react-navigation-plugin/src/devtools-ui/index.tsx
@@ -1,18 +1,17 @@
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
 import { useEffect, useState } from 'react';
+import { PluginHeader, PluginTheme, Tabs } from '@rozenite/ui';
 import { ReactNavigationPluginEventMap } from '../shared';
-import { ActionWithState } from './components/ActionList';
+import type { ActionWithState } from './components/ActionList';
 import { ActionTimeline } from './components/ActionTimeline';
 import { LinkingTester } from './components/LinkingTester';
-import { Tab, Tabs } from './components/Tabs';
-
 import { NavigationTree } from './components/NavigationTree/NavigationTree';
 import './globals.css';
 
 export default function ReactNavigationPanel() {
   const [actionHistory, setActionHistory] = useState<ActionWithState[]>([]);
   const [selectedActionIndex, setSelectedActionIndex] = useState<number | null>(
-    null
+    null,
   );
   const [activeTabId, setActiveTabId] = useState('timeline');
 
@@ -80,10 +79,10 @@ export default function ReactNavigationPanel() {
     });
   };
 
-  const tabs: Tab[] = [
+  const tabs = [
     {
       id: 'timeline',
-      label: 'Action Timeline',
+      label: 'Timeline',
       content: (
         <ActionTimeline
           actionHistory={actionHistory}
@@ -96,23 +95,57 @@ export default function ReactNavigationPanel() {
     },
     {
       id: 'linking',
-      label: 'Link Tester',
+      label: 'Deep Links',
       content: <LinkingTester onLinkOpen={onLinkOpen} />,
     },
     {
       id: 'tree',
-      label: 'Navigation Tree',
+      label: 'Tree',
       content: <NavigationTree actionHistory={actionHistory} />,
     },
   ];
 
   return (
-    <div className="h-screen bg-gray-900 text-gray-100">
-      <Tabs
-        tabs={tabs}
-        activeTabId={activeTabId}
-        onTabChange={setActiveTabId}
-      />
-    </div>
+    <PluginTheme
+      defaultTheme="dark"
+      storageKey="@rozenite/react-navigation-plugin.theme"
+      className="flex h-screen flex-col bg-background text-foreground"
+    >
+      <PluginHeader title="React Navigation" />
+
+      <Tabs.Root
+        className="flex min-h-0 flex-1 flex-col"
+        selectedKey={activeTabId}
+        onSelectionChange={(key) => setActiveTabId(String(key))}
+      >
+        <Tabs.ListContainer className="overflow-x-auto px-3">
+          <Tabs.List
+            aria-label="React Navigation views"
+            className="w-fit min-w-max justify-start"
+          >
+            {tabs.map((tab) => (
+              <Tabs.Tab
+                key={tab.id}
+                className="w-auto shrink-0 whitespace-nowrap"
+                id={tab.id}
+              >
+                {tab.label}
+                <Tabs.Indicator />
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
+        </Tabs.ListContainer>
+
+        {tabs.map((tab) => (
+          <Tabs.Panel
+            key={tab.id}
+            className="flex min-h-0 flex-1 overflow-hidden px-3 pb-3 pt-3"
+            id={tab.id}
+          >
+            {tab.content}
+          </Tabs.Panel>
+        ))}
+      </Tabs.Root>
+    </PluginTheme>
   );
 }
diff --git a/packages/react-navigation-plugin/tailwind.config.ts b/packages/react-navigation-plugin/tailwind.config.ts
deleted file mode 100644
index 8fa447ac..00000000
--- a/packages/react-navigation-plugin/tailwind.config.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import type { Config } from 'tailwindcss';
-import { colorList } from './src/devtools-ui/components/NavigationTree/navigationTreeColors';
-
-const config: Config = {
-  darkMode: ['class'],
-  content: ['./src/devtools-ui/**/*.{js,ts,jsx,tsx,mdx}'],
-  theme: {
-    extend: {
-      translate: {
-        '0.75': '0.1875rem',
-      },
-      colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        chart: {
-          '1': 'hsl(var(--chart-1))',
-          '2': 'hsl(var(--chart-2))',
-          '3': 'hsl(var(--chart-3))',
-          '4': 'hsl(var(--chart-4))',
-          '5': 'hsl(var(--chart-5))',
-        },
-        sidebar: {
-          DEFAULT: 'hsl(var(--sidebar-background))',
-          foreground: 'hsl(var(--sidebar-foreground))',
-          primary: 'hsl(var(--sidebar-primary))',
-          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-          accent: 'hsl(var(--sidebar-accent))',
-          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-          border: 'hsl(var(--sidebar-border))',
-          ring: 'hsl(var(--sidebar-ring))',
-        },
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      keyframes: {
-        'accordion-down': {
-          from: {
-            height: '0',
-          },
-          to: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-        },
-        'accordion-up': {
-          from: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-          to: {
-            height: '0',
-          },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-      },
-    },
-  },
-  plugins: [require('tailwindcss-animate')],
-  safelist: [
-    ...colorList.flatMap((color) => [
-      `text-${color}-600`,
-      `border-${color}-600`,
-      `bg-${color}-600`,
-      `hover:bg-${color}-600`,
-    ]),
-  ],
-};
-export default config;
diff --git a/packages/storage-plugin/src/ui/editable-table.tsx b/packages/storage-plugin/src/ui/editable-table.tsx
index 721ee7c5..3a4e06ee 100644
--- a/packages/storage-plugin/src/ui/editable-table.tsx
+++ b/packages/storage-plugin/src/ui/editable-table.tsx
@@ -231,6 +231,12 @@ export const EditableTable = ({
           <Table.Content
             aria-label="Storage entries"
             className="min-w-full"
+            onRowAction={(key) => {
+              const entry = data.find((item) => item.key === String(key));
+              if (entry) {
+                onRowClick?.(entry);
+              }
+            }}
             onSortChange={(descriptor) =>
               setSorting(toSortingState(descriptor))
             }
@@ -281,19 +287,7 @@ export const EditableTable = ({
                     onRowClick ? 'cursor-pointer' : ''
                   }`}
                   id={row.original.key}
-                  onClick={(event) => {
-                    const target = event.target as HTMLElement;
-                    if (
-                      target.tagName === 'BUTTON' ||
-                      target.closest('button') ||
-                      target.tagName === 'INPUT' ||
-                      target.closest('input')
-                    ) {
-                      return;
-                    }
-
-                    onRowClick?.(row.original);
-                  }}
+                  textValue={row.original.key}
                 >
                   {row.getVisibleCells().map((cell) => (
                     <Table.Cell
diff --git a/packages/storage-plugin/src/ui/globals.css b/packages/storage-plugin/src/ui/globals.css
index 77390a0f..e862ec52 100644
--- a/packages/storage-plugin/src/ui/globals.css
+++ b/packages/storage-plugin/src/ui/globals.css
@@ -1,41 +1,2 @@
 @import 'tailwindcss';
 @import '@rozenite/ui/styles.css';
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-
-  .wrap-anywhere {
-    overflow-wrap: anywhere;
-  }
-}
-
-/* Custom scrollbar styles to match plugin theme */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: #1f2937; /* gray-800 */
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #374151; /* gray-700 */
-  border-radius: 4px;
-  border: 1px solid #1f2937; /* gray-800 */
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #4b5563; /* gray-600 */
-}
-
-::-webkit-scrollbar-thumb:active {
-  background: #6b7280; /* gray-500 */
-}
-
-::-webkit-scrollbar-corner {
-  background: #1f2937; /* gray-800 */
-}
diff --git a/packages/storage-plugin/src/ui/panel.tsx b/packages/storage-plugin/src/ui/panel.tsx
index 970155d1..26dd41d8 100644
--- a/packages/storage-plugin/src/ui/panel.tsx
+++ b/packages/storage-plugin/src/ui/panel.tsx
@@ -1,6 +1,12 @@
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
 import { useEffect, useMemo, useState } from 'react';
-import { ListBox, Select, SearchField } from '@rozenite/ui';
+import {
+  ListBox,
+  PluginHeader,
+  PluginTheme,
+  Select,
+  SearchField,
+} from '@rozenite/ui';
 import type {
   StorageDeleteEntryEvent,
   StorageEventMap,
@@ -308,53 +314,53 @@ export default function StoragePanel() {
   }));
 
   return (
-    <div
-      data-theme="dark"
-      className="dark h-screen bg-background text-foreground flex flex-col"
+    <PluginTheme
+      defaultTheme="dark"
+      storageKey="@rozenite/storage-plugin.theme"
+      className="flex h-screen flex-col bg-background text-foreground"
     >
-      <div className="flex items-center gap-2 p-2">
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-medium text-default-foreground">
-            Storage
-          </span>
-        </div>
-        <div className="flex-1" />
-        <Select
-          placeholder="Select storage"
-          value={selectedStorageViewId ?? ''}
-          onChange={(value) =>
-            setSelectedStorageViewId(
-              typeof value === 'string'
-                ? value
-                : value == null
-                  ? null
-                  : String(value),
-            )
-          }
-          isDisabled={snapshots.size === 0}
-        >
-          <Select.Trigger>
-            <Select.Value />
-            <Select.Indicator />
-          </Select.Trigger>
-          <Select.Popover>
-            <ListBox>
-              {storageOptions.map((option) => (
-                <ListBox.Item
-                  key={option.viewId}
-                  id={option.viewId}
-                  textValue={option.label}
-                >
-                  {option.label}
-                  <ListBox.ItemIndicator />
-                </ListBox.Item>
-              ))}
-            </ListBox>
-          </Select.Popover>
-        </Select>
-      </div>
+      <PluginHeader
+        title="Storage"
+        actions={
+          <div className="w-56 max-w-[44vw] min-w-40">
+            <Select
+              placeholder="Select storage"
+              value={selectedStorageViewId ?? ''}
+              onChange={(value) =>
+                setSelectedStorageViewId(
+                  typeof value === 'string'
+                    ? value
+                    : value == null
+                      ? null
+                      : String(value),
+                )
+              }
+              isDisabled={snapshots.size === 0}
+            >
+              <Select.Trigger>
+                <Select.Value />
+                <Select.Indicator />
+              </Select.Trigger>
+              <Select.Popover>
+                <ListBox>
+                  {storageOptions.map((option) => (
+                    <ListBox.Item
+                      key={option.viewId}
+                      id={option.viewId}
+                      textValue={option.label}
+                    >
+                      {option.label}
+                      <ListBox.ItemIndicator />
+                    </ListBox.Item>
+                  ))}
+                </ListBox>
+              </Select.Popover>
+            </Select>
+          </div>
+        }
+      />
 
-      <div className="flex items-center gap-2 p-2">
+      <div className="flex items-center gap-2 px-3 pb-3 pt-3">
         <AddEntryDialog
           isDisabled={!selectedStorage}
           onAddEntry={handleAddEntry}
@@ -421,6 +427,6 @@ export default function StoragePanel() {
         supportedTypes={supportedTypes}
         entry={editingEntry}
       />
-    </div>
+    </PluginTheme>
   );
 }
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 4aaa5bf1..c027dbed 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -3,7 +3,13 @@ export {
   AlertDialog,
   Button,
   Card,
+  Checkbox,
   Chip,
+  ColorArea,
+  ColorField,
+  ColorPicker,
+  ColorSlider,
+  ColorSwatch,
   Description,
   Drawer,
   FieldError,
@@ -12,9 +18,12 @@ export {
   Label,
   ListBox,
   Modal,
+  Radio,
+  RadioGroup,
   Select,
   Separator,
   SearchField,
+  Slider,
   Surface,
   Switch,
   Table,
@@ -23,6 +32,7 @@ export {
   TextArea as Textarea,
   TextField,
   Tooltip,
+  parseColor,
   useOverlayState,
 } from '@heroui/react';
 
@@ -30,6 +40,10 @@ export { createColumnHelper } from '@tanstack/react-table';
 export type { ColumnDef, Row, SortingState } from '@tanstack/react-table';
 export { JsonInspector } from './json-inspector';
 export type { JsonInspectorProps, JsonInspectorTheme } from './json-inspector';
+export { PluginHeader } from './plugin-header';
+export { PluginTheme } from './plugin-theme';
+export type { PluginThemeContextValue, PluginThemeName, PluginThemeProps } from './plugin-theme';
+export { usePluginTheme } from './plugin-theme';
 export { parseJsonForInspection } from './utils/json';
 export type {
   JsonInspectionParseMode,
diff --git a/packages/ui/src/plugin-header.tsx b/packages/ui/src/plugin-header.tsx
new file mode 100644
index 00000000..4ee3f2b4
--- /dev/null
+++ b/packages/ui/src/plugin-header.tsx
@@ -0,0 +1,114 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ToggleButton, ToggleButtonGroup } from '@heroui/react';
+import { Monitor, MoonStar, SunMedium } from 'lucide-react';
+import { cn } from './utils/cn.js';
+import { usePluginTheme, type PluginThemeName } from './plugin-theme.js';
+
+type PluginHeaderProps = ComponentPropsWithoutRef<'header'> & {
+  title: string;
+  subtitle?: string;
+  actions?: ReactNode;
+  showThemeSwitcher?: boolean;
+};
+
+type ThemeOption = {
+  label: string;
+  theme: Extract<PluginThemeName, 'light' | 'dark' | 'system'>;
+  icon: typeof SunMedium;
+};
+
+const themeOptions: ThemeOption[] = [
+  {
+    label: 'Light theme',
+    theme: 'light',
+    icon: SunMedium,
+  },
+  {
+    label: 'Dark theme',
+    theme: 'dark',
+    icon: MoonStar,
+  },
+  {
+    label: 'System theme',
+    theme: 'system',
+    icon: Monitor,
+  },
+];
+
+function PluginThemeSwitcher() {
+  const { theme, setTheme } = usePluginTheme();
+  const selectedTheme = theme === 'default' ? 'system' : theme;
+
+  return (
+    <ToggleButtonGroup
+      aria-label="Theme switcher"
+      disallowEmptySelection
+      orientation="horizontal"
+      selectedKeys={[selectedTheme]}
+      selectionMode="single"
+      size="sm"
+      onSelectionChange={(keys) => {
+        const [nextTheme] = Array.from(keys);
+
+        if (
+          nextTheme === 'light' ||
+          nextTheme === 'dark' ||
+          nextTheme === 'system'
+        ) {
+          setTheme(nextTheme);
+        }
+      }}
+    >
+      {themeOptions.map((option) => {
+        const Icon = option.icon;
+
+        return (
+          <ToggleButton
+            key={option.theme}
+            aria-label={`Use ${option.label.toLowerCase()}`}
+            id={option.theme}
+            isIconOnly
+            variant="default"
+          >
+            <Icon />
+          </ToggleButton>
+        );
+      })}
+    </ToggleButtonGroup>
+  );
+}
+
+export function PluginHeader({
+  title,
+  subtitle,
+  actions,
+  showThemeSwitcher = true,
+  className,
+  ...props
+}: PluginHeaderProps) {
+  return (
+    <header
+      className={cn('sticky top-0 z-20 px-3 pt-3 pb-3', className)}
+      {...props}
+    >
+      <div className="flex flex-wrap items-center gap-3 px-4 py-3">
+        <div className="min-w-0 flex-1">
+          <h1 className="truncate text-sm font-semibold text-foreground">
+            {title}
+          </h1>
+          {subtitle ? (
+            <p className="mt-1 truncate text-xs text-muted">{subtitle}</p>
+          ) : null}
+        </div>
+
+        {actions ? (
+          <div className="flex min-w-0 shrink-0 items-center gap-2">
+            {actions}
+          </div>
+        ) : null}
+
+        {showThemeSwitcher ? <PluginThemeSwitcher /> : null}
+      </div>
+    </header>
+  );
+}
diff --git a/packages/ui/src/plugin-theme.tsx b/packages/ui/src/plugin-theme.tsx
new file mode 100644
index 00000000..a96cf6b5
--- /dev/null
+++ b/packages/ui/src/plugin-theme.tsx
@@ -0,0 +1,236 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { cn } from './utils/cn.js';
+
+const THEME_CLASS_NAME = 'dark';
+const THEME_ATTR_NAME = 'data-theme';
+const SYSTEM_THEME_MEDIA_QUERY = '(prefers-color-scheme: dark)';
+
+type AppliedThemeName = 'light' | 'dark' | 'default';
+
+export type PluginThemeName = 'light' | 'dark' | 'default' | 'system';
+
+export type PluginThemeProps = ComponentPropsWithoutRef<'div'> & {
+  theme?: PluginThemeName;
+  defaultTheme?: PluginThemeName;
+  onThemeChange?: (theme: PluginThemeName) => void;
+  storageKey?: string;
+  syncDocument?: boolean;
+};
+
+export type PluginThemeContextValue = {
+  theme: PluginThemeName;
+  resolvedTheme: AppliedThemeName;
+  setTheme: (theme: PluginThemeName) => void;
+};
+
+type ThemeSnapshot = {
+  htmlTheme: string | null;
+  bodyTheme: string | null;
+  htmlHasDarkClass: boolean;
+  bodyHasDarkClass: boolean;
+};
+
+const PluginThemeContext = createContext<PluginThemeContextValue | null>(null);
+
+const isPluginThemeName = (value: string | null): value is PluginThemeName =>
+  value === 'light' ||
+  value === 'dark' ||
+  value === 'default' ||
+  value === 'system';
+
+const getSystemTheme = (): Exclude<AppliedThemeName, 'default'> => {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+    return 'light';
+  }
+
+  return window.matchMedia(SYSTEM_THEME_MEDIA_QUERY).matches
+    ? 'dark'
+    : 'light';
+};
+
+const getResolvedTheme = (
+  theme: PluginThemeName,
+  systemTheme: Exclude<AppliedThemeName, 'default'>,
+): AppliedThemeName => {
+  if (theme === 'system') {
+    return systemTheme;
+  }
+
+  return theme;
+};
+
+const readStoredTheme = (
+  storageKey: string | undefined,
+  fallbackTheme: PluginThemeName,
+) => {
+  if (!storageKey || typeof window === 'undefined') {
+    return fallbackTheme;
+  }
+
+  const storedTheme = window.localStorage.getItem(storageKey);
+  return isPluginThemeName(storedTheme) ? storedTheme : fallbackTheme;
+};
+
+const setTheme = (element: HTMLElement, theme: AppliedThemeName) => {
+  element.setAttribute(THEME_ATTR_NAME, theme);
+
+  if (theme === 'dark') {
+    element.classList.add(THEME_CLASS_NAME);
+  } else {
+    element.classList.remove(THEME_CLASS_NAME);
+  }
+};
+
+const restoreTheme = (
+  element: HTMLElement,
+  theme: string | null,
+  hasDarkClass: boolean,
+) => {
+  if (theme === null) {
+    element.removeAttribute(THEME_ATTR_NAME);
+  } else {
+    element.setAttribute(THEME_ATTR_NAME, theme);
+  }
+
+  if (hasDarkClass) {
+    element.classList.add(THEME_CLASS_NAME);
+  } else {
+    element.classList.remove(THEME_CLASS_NAME);
+  }
+};
+
+const snapshotTheme = (): ThemeSnapshot => ({
+  htmlTheme: document.documentElement.getAttribute(THEME_ATTR_NAME),
+  bodyTheme: document.body.getAttribute(THEME_ATTR_NAME),
+  htmlHasDarkClass: document.documentElement.classList.contains(
+    THEME_CLASS_NAME,
+  ),
+  bodyHasDarkClass: document.body.classList.contains(THEME_CLASS_NAME),
+});
+
+export function PluginTheme({
+  theme,
+  defaultTheme = 'default',
+  onThemeChange,
+  storageKey,
+  syncDocument = true,
+  className,
+  children,
+  ...props
+}: PluginThemeProps) {
+  const [uncontrolledTheme, setUncontrolledTheme] = useState<PluginThemeName>(
+    () => readStoredTheme(storageKey, defaultTheme),
+  );
+  const [systemTheme, setSystemTheme] = useState<
+    Exclude<AppliedThemeName, 'default'>
+  >(() => getSystemTheme());
+  const selectedTheme = theme ?? uncontrolledTheme;
+  const resolvedTheme = getResolvedTheme(selectedTheme, systemTheme);
+
+  const updateTheme = useCallback(
+    (nextTheme: PluginThemeName) => {
+      if (theme === undefined) {
+        setUncontrolledTheme(nextTheme);
+      }
+
+      if (storageKey && typeof window !== 'undefined') {
+        window.localStorage.setItem(storageKey, nextTheme);
+      }
+
+      onThemeChange?.(nextTheme);
+    },
+    [onThemeChange, storageKey, theme],
+  );
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return;
+    }
+
+    const mediaQueryList = window.matchMedia(SYSTEM_THEME_MEDIA_QUERY);
+    const handleChange = (event: MediaQueryListEvent) => {
+      setSystemTheme(event.matches ? 'dark' : 'light');
+    };
+
+    setSystemTheme(mediaQueryList.matches ? 'dark' : 'light');
+
+    mediaQueryList.addEventListener('change', handleChange);
+    return () => {
+      mediaQueryList.removeEventListener('change', handleChange);
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    if (storageKey && typeof window !== 'undefined') {
+      window.localStorage.setItem(storageKey, selectedTheme);
+    }
+  }, [selectedTheme, storageKey]);
+
+  useLayoutEffect(() => {
+    if (!syncDocument) {
+      return;
+    }
+
+    const previousTheme = snapshotTheme();
+
+    setTheme(document.documentElement, resolvedTheme);
+    setTheme(document.body, resolvedTheme);
+
+    return () => {
+      restoreTheme(
+        document.documentElement,
+        previousTheme.htmlTheme,
+        previousTheme.htmlHasDarkClass,
+      );
+      restoreTheme(
+        document.body,
+        previousTheme.bodyTheme,
+        previousTheme.bodyHasDarkClass,
+      );
+    };
+  }, [resolvedTheme, syncDocument]);
+
+  const contextValue = useMemo<PluginThemeContextValue>(
+    () => ({
+      theme: selectedTheme,
+      resolvedTheme,
+      setTheme: updateTheme,
+    }),
+    [resolvedTheme, selectedTheme, updateTheme],
+  );
+
+  return (
+    <PluginThemeContext.Provider value={contextValue}>
+      <div
+        data-theme={resolvedTheme}
+        className={cn(
+          resolvedTheme === 'dark' && THEME_CLASS_NAME,
+          'min-h-0',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </PluginThemeContext.Provider>
+  );
+}
+
+export function usePluginTheme(): PluginThemeContextValue {
+  const context = useContext(PluginThemeContext);
+
+  if (!context) {
+    throw new Error('usePluginTheme must be used within a PluginTheme.');
+  }
+
+  return context;
+}
diff --git a/packages/ui/styles.css b/packages/ui/styles.css
index 04a645ac..5b05584a 100644
--- a/packages/ui/styles.css
+++ b/packages/ui/styles.css
@@ -23,6 +23,7 @@
 .default,
 [data-theme='light'],
 [data-theme='default'] {
+  color-scheme: light;
   --accent: oklch(55.59% 0.2717 292.75);
   --accent-foreground: oklch(99.11% 0 0);
   --background: oklch(97.02% 0.0011 292.75);
@@ -39,7 +40,10 @@
   --muted: oklch(55.17% 0.0022 292.75);
   --overlay: oklch(100% 0.0003 292.75);
   --overlay-foreground: oklch(21.03% 0.0011 292.75);
-  --scrollbar: oklch(87.1% 0.0011 292.75);
+  --scrollbar: oklch(84.5% 0.0011 292.75);
+  --scrollbar-track: oklch(95.24% 0.0009 292.75);
+  --scrollbar-thumb-hover: oklch(76% 0.0011 292.75);
+  --scrollbar-thumb-active: oklch(68% 0.0011 292.75);
   --segment: oklch(100% 0.0011 292.75);
   --segment-foreground: oklch(21.03% 0.0011 292.75);
   --separator: oklch(92% 0.0011 292.75);
@@ -80,7 +84,10 @@
   --muted: oklch(70.5% 0.0022 292.75);
   --overlay: oklch(21.03% 0.0022 292.75);
   --overlay-foreground: oklch(99.11% 0.0011 292.75);
-  --scrollbar: oklch(70.5% 0.0011 292.75);
+  --scrollbar: oklch(39.64% 0.0011 292.75);
+  --scrollbar-track: oklch(21.03% 0.0022 292.75);
+  --scrollbar-thumb-hover: oklch(47% 0.0011 292.75);
+  --scrollbar-thumb-active: oklch(55% 0.0011 292.75);
   --segment: oklch(39.64% 0.0011 292.75);
   --segment-foreground: oklch(99.11% 0.0011 292.75);
   --separator: oklch(25% 0.0011 292.75);
@@ -95,3 +102,48 @@
   --warning: oklch(82.03% 0.1391 81.01);
   --warning-foreground: oklch(21.03% 0.0059 81.01);
 }
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  .wrap-anywhere {
+    overflow-wrap: anywhere;
+  }
+}
+
+@layer base {
+  * {
+    scrollbar-color: var(--scrollbar) var(--scrollbar-track);
+    scrollbar-width: thin;
+  }
+
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--scrollbar-track);
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--scrollbar);
+    border-radius: 4px;
+    border: 1px solid var(--scrollbar-track);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-thumb-hover);
+  }
+
+  ::-webkit-scrollbar-thumb:active {
+    background: var(--scrollbar-thumb-active);
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: var(--scrollbar-track);
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d9d4f3c7..33926bba 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -119,7 +119,7 @@ importers:
         version: 2.37.0(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       '@expo/vector-icons':
         specifier: ^15.0.3
-        version: 15.0.3(expo-font@55.0.3(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+        version: 15.0.3(expo-font@55.0.3)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       '@react-native-async-storage/async-storage':
         specifier: ^3.0.1
         version: 3.0.1(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
@@ -438,10 +438,16 @@ importers:
       '@rozenite/plugin-bridge':
         specifier: workspace:*
         version: link:../plugin-bridge
+      '@rozenite/ui':
+        specifier: workspace:*
+        version: link:../ui
     devDependencies:
       '@rozenite/vite-plugin':
         specifier: workspace:*
         version: link:../vite-plugin
+      '@tailwindcss/postcss':
+        specifier: ^4.2.2
+        version: 4.2.2
       '@types/react':
         specifier: 'catalog:'
         version: 19.2.14
@@ -470,11 +476,11 @@ importers:
         specifier: workspace:*
         version: link:../cli
       tailwindcss:
-        specifier: ^3.4.17
-        version: 3.4.17
+        specifier: ^4.2.2
+        version: 4.2.2
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.17)
+        version: 1.0.7(tailwindcss@4.2.2)
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
@@ -551,46 +557,61 @@ importers:
       '@rozenite/plugin-bridge':
         specifier: workspace:*
         version: link:../plugin-bridge
+      '@rozenite/ui':
+        specifier: workspace:*
+        version: link:../ui
     devDependencies:
       '@rozenite/vite-plugin':
         specifier: workspace:*
         version: link:../vite-plugin
+      '@tailwindcss/postcss':
+        specifier: ^4.2.2
+        version: 4.2.2
+      '@tanstack/react-table':
+        specifier: ^8.21.3
+        version: 8.21.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@types/react':
-        specifier: ~18.3.12
-        version: 18.3.28
+        specifier: 'catalog:'
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: 'catalog:'
+        version: 19.1.11(@types/react@19.2.14)
       autoprefixer:
         specifier: ^10.4.21
         version: 10.4.21(postcss@8.5.6)
       lucide-react:
         specifier: ^0.263.1
-        version: 0.263.1(react@18.3.1)
+        version: 0.263.1(react@19.2.0)
       postcss:
         specifier: ^8.5.6
         version: 8.5.6
       react:
-        specifier: 18.3.1
-        version: 18.3.1
+        specifier: 'catalog:'
+        version: 19.2.0
       react-dom:
-        specifier: 18.3.0
-        version: 18.3.0(react@18.3.1)
+        specifier: 'catalog:'
+        version: 19.2.0(react@19.2.0)
       react-native:
-        specifier: 0.76.0
-        version: 0.76.0(@babel/core@7.29.0)(@types/react@18.3.28)(react@18.3.1)
+        specifier: 'catalog:'
+        version: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
       react-native-web:
         specifier: 0.21.0
-        version: 0.21.0(react-dom@18.3.0(react@18.3.1))(react@18.3.1)
+        version: 0.21.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       rozenite:
         specifier: workspace:*
         version: link:../cli
+      tailwind-variants:
+        specifier: ^2.0.0
+        version: 2.1.0(tailwind-merge@3.4.0)(tailwindcss@4.2.2)
       tailwindcss:
-        specifier: ^3.4.17
-        version: 3.4.17
+        specifier: ^4.2.2
+        version: 4.2.2
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.17)
+        version: 1.0.7(tailwindcss@4.2.2)
       typescript:
-        specifier: ^5.7.3
-        version: 5.8.3
+        specifier: ~5.9.3
+        version: 5.9.3
       vite:
         specifier: ^7.3.1
         version: 7.3.1(@types/node@22.17.0)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
@@ -652,7 +673,7 @@ importers:
         version: 7.7.0
       vitest:
         specifier: ^4.0.18
-        version: 4.1.0(@types/node@22.17.0)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@22.1.0)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
+        version: 4.1.0(@types/node@22.17.0)(@vitest/ui@3.2.4(vitest@3.2.4))(jiti@2.6.1)(jsdom@22.1.0)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
 
   packages/mmkv-plugin:
     dependencies:
@@ -838,13 +859,22 @@ importers:
 
   packages/overlay-plugin:
     dependencies:
+      '@heroui/react':
+        specifier: ^3.0.1
+        version: 3.0.1(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(tailwindcss@4.2.2)
       '@rozenite/plugin-bridge':
         specifier: workspace:*
         version: link:../plugin-bridge
+      '@rozenite/ui':
+        specifier: workspace:*
+        version: link:../ui
     devDependencies:
       '@rozenite/vite-plugin':
         specifier: workspace:*
         version: link:../vite-plugin
+      '@tailwindcss/postcss':
+        specifier: ^4.2.2
+        version: 4.2.2
       '@types/react':
         specifier: 'catalog:'
         version: 19.2.14
@@ -875,12 +905,15 @@ importers:
       rozenite:
         specifier: workspace:*
         version: link:../cli
+      tailwind-variants:
+        specifier: ^2.0.0
+        version: 2.1.0(tailwind-merge@3.4.0)(tailwindcss@4.2.2)
       tailwindcss:
-        specifier: ^3.4.17
-        version: 3.4.17
+        specifier: ^4.2.2
+        version: 4.2.2
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.17)
+        version: 1.0.7(tailwindcss@4.2.2)
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
@@ -893,22 +926,16 @@ importers:
       '@rozenite/plugin-bridge':
         specifier: workspace:*
         version: link:../plugin-bridge
+      '@rozenite/ui':
+        specifier: workspace:*
+        version: link:../ui
     devDependencies:
-      '@radix-ui/react-icons':
-        specifier: ^1.3.2
-        version: 1.3.2(react@19.2.0)
-      '@radix-ui/react-separator':
-        specifier: ^1.1.7
-        version: 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-tabs':
-        specifier: ^1.1.12
-        version: 1.1.12(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/themes':
-        specifier: ^3.2.1
-        version: 3.2.1(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@rozenite/vite-plugin':
         specifier: workspace:*
         version: link:../vite-plugin
+      '@tailwindcss/postcss':
+        specifier: ^4.2.2
+        version: 4.2.2
       '@tanstack/react-table':
         specifier: ^8.21.3
         version: 8.21.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -927,9 +954,6 @@ importers:
       react-dom:
         specifier: 'catalog:'
         version: 19.2.0(react@19.2.0)
-      react-json-tree:
-        specifier: ^0.20.0
-        version: 0.20.0(@types/react@19.2.14)(react@19.2.0)
       react-native:
         specifier: 'catalog:'
         version: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
@@ -939,18 +963,15 @@ importers:
       react-native-web:
         specifier: ^0.21.2
         version: 0.21.2(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react-virtuoso:
-        specifier: ^4.6.0
-        version: 4.14.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       rozenite:
         specifier: workspace:*
         version: link:../cli
       tailwindcss:
-        specifier: ^3.4.17
-        version: 3.4.17
+        specifier: ^4.2.2
+        version: 4.2.2
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.17)
+        version: 1.0.7(tailwindcss@4.2.2)
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
@@ -972,6 +993,9 @@ importers:
       '@rozenite/plugin-bridge':
         specifier: workspace:*
         version: link:../plugin-bridge
+      '@rozenite/ui':
+        specifier: workspace:*
+        version: link:../ui
       fast-deep-equal:
         specifier: ^3.1.3
         version: 3.1.3
@@ -982,6 +1006,9 @@ importers:
       '@rozenite/vite-plugin':
         specifier: workspace:*
         version: link:../vite-plugin
+      '@tailwindcss/postcss':
+        specifier: ^4.2.2
+        version: 4.2.2
       '@types/react':
         specifier: 'catalog:'
         version: 19.2.14
@@ -1000,9 +1027,6 @@ importers:
       react-dom:
         specifier: 'catalog:'
         version: 19.2.0(react@19.2.0)
-      react-json-tree:
-        specifier: ^0.20.0
-        version: 0.20.0(@types/react@19.2.14)(react@19.2.0)
       react-native:
         specifier: 'catalog:'
         version: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
@@ -1012,15 +1036,9 @@ importers:
       rozenite:
         specifier: workspace:*
         version: link:../cli
-      tailwind-merge:
-        specifier: ^3.3.1
-        version: 3.3.1
       tailwindcss:
-        specifier: ^3.4.17
-        version: 3.4.17
-      tailwindcss-animate:
-        specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.17)
+        specifier: ^4.2.2
+        version: 4.2.2
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
@@ -4352,18 +4370,10 @@ packages:
     peerDependencies:
       react-native: '*'
 
-  '@react-native/assets-registry@0.76.0':
-    resolution: {integrity: sha512-U8KLV+PC/cRIiDpb1VbeGuEfKq2riZZtNVLp1UOyKWfPbWWu8j6Fr95w7j+nglp41z70iBeF2OmCiVnRvtNklA==}
-    engines: {node: '>=18'}
-
   '@react-native/assets-registry@0.83.1':
     resolution: {integrity: sha512-AT7/T6UwQqO39bt/4UL5EXvidmrddXrt0yJa7ENXndAv+8yBzMsZn6fyiax6+ERMt9GLzAECikv3lj22cn2wJA==}
     engines: {node: '>= 20.19.4'}
 
-  '@react-native/babel-plugin-codegen@0.76.0':
-    resolution: {integrity: sha512-HOi45pqlZnCTeR4jJ/zK0FB12r08CI9O70uBjVUqmzvHIrWmL5FaEFp6BPVFOjjXtUsl3JZ2Mle7WpsAP2PQBA==}
-    engines: {node: '>=18'}
-
   '@react-native/babel-plugin-codegen@0.76.9':
     resolution: {integrity: sha512-vxL/vtDEIYHfWKm5oTaEmwcnNGsua/i9OjIxBDBFiJDu5i5RU3bpmDiXQm/bJxrJNPRp5lW0I0kpGihVhnMAIQ==}
     engines: {node: '>=18'}
@@ -4376,10 +4386,6 @@ packages:
     resolution: {integrity: sha512-+b+kilQXUMEREXyFZxmSrnvUZ6rIW2ATu6pkMZLsituRUx85fg22A8Z+hKHXj7q9Hyny1W0+506gHoxYr6zevw==}
     engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
-  '@react-native/babel-preset@0.76.0':
-    resolution: {integrity: sha512-HgQt4MyuWLcnrIglXn7GNPPVwtzZ4ffX+SUisdhmPtJCHuP8AOU3HsgOKLhqVfEGWTBlE4kbWoTmmLU87IJaOw==}
-    engines: {node: '>=18'}
-
   '@react-native/babel-preset@0.76.9':
     resolution: {integrity: sha512-TbSeCplCM6WhL3hR2MjC/E1a9cRnMLz7i767T7mP90oWkklEjyPxWl+0GGoVGnJ8FC/jLUupg/HvREKjjif6lw==}
     engines: {node: '>=18'}
@@ -4396,12 +4402,6 @@ packages:
     peerDependencies:
       '@babel/core': '*'
 
-  '@react-native/codegen@0.76.0':
-    resolution: {integrity: sha512-x0zzK1rb7ZSIAeHRcRSjRo+VtLROjln1IKnQSPLEZEdyQfWNXqgiMk59E5hW7KE6I05upqfbf85PRAb5WndXdw==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      '@babel/preset-env': ^7.1.6
-
   '@react-native/codegen@0.76.9':
     resolution: {integrity: sha512-AzlCHMTKrAVC2709V4ZGtBXmGVtWTpWm3Ruv5vXcd3/anH4mGucfJ4rjbWKdaYQJMpXa3ytGomQrsIsT/s8kgA==}
     engines: {node: '>=18'}
@@ -4411,8 +4411,6 @@ packages:
   '@react-native/codegen@0.83.1':
     resolution: {integrity: sha512-FpRxenonwH+c2a5X5DZMKUD7sCudHxB3eSQPgV9R+uxd28QWslyAWrpnJM/Az96AEksHnymDzEmzq2HLX5nb+g==}
     engines: {node: '>= 20.19.4'}
-    peerDependencies:
-      '@babel/core': '*'
 
   '@react-native/codegen@0.85.0':
     resolution: {integrity: sha512-5CHJkC9UpBxQokGju7gD6W615RO1zR17INuB1PB4kcXNy3rre7tyy6ufct+sllDD6ildRC9A//cyh6TI03+jxA==}
@@ -4420,15 +4418,6 @@ packages:
     peerDependencies:
       '@babel/core': '*'
 
-  '@react-native/community-cli-plugin@0.76.0':
-    resolution: {integrity: sha512-JFU5kmo+lUf5vOsieJ/dGS71Z2+qV3leXbKW6p8cn5aVfupVmtz/uYcFVdGzEGIGJ3juorYOZjpG8Qz91FrUZw==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      '@react-native-community/cli-server-api': '*'
-    peerDependenciesMeta:
-      '@react-native-community/cli-server-api':
-        optional: true
-
   '@react-native/community-cli-plugin@0.83.1':
     resolution: {integrity: sha512-FqR1ftydr08PYlRbrDF06eRiiiGOK/hNmz5husv19sK6iN5nHj1SMaCIVjkH/a5vryxEddyFhU6PzO/uf4kOHg==}
     engines: {node: '>= 20.19.4'}
@@ -4461,18 +4450,10 @@ packages:
     resolution: {integrity: sha512-QJaSfNRzj3Lp7MmlCRgSBlt1XZ38xaBNXypXAp/3H3OdFifnTZOeYOpFmcpjcXYnDqkxetuwZg8VL65SQhB8dg==}
     engines: {node: '>= 20.19.4'}
 
-  '@react-native/gradle-plugin@0.76.0':
-    resolution: {integrity: sha512-MhsAahV/Ju0Md1x79ljaDsNzzFY02TsDqxSfOS8vc4trZuM0imFf7VEBitOydNDTf9NqzAqJ9p8j7OSuxUEvLg==}
-    engines: {node: '>=18'}
-
   '@react-native/gradle-plugin@0.83.1':
     resolution: {integrity: sha512-6ESDnwevp1CdvvxHNgXluil5OkqbjkJAkVy7SlpFsMGmVhrSxNAgD09SSRxMNdKsnLtzIvMsFCzyHLsU/S4PtQ==}
     engines: {node: '>= 20.19.4'}
 
-  '@react-native/js-polyfills@0.76.0':
-    resolution: {integrity: sha512-0UzEqvg85Bn0BpgNG80wzbiWvNypwdl64sbRs/sEvIDjzgq/tM+u3KoneSD5tP72BCydAqXFfepff3FZgImfbA==}
-    engines: {node: '>=18'}
-
   '@react-native/js-polyfills@0.76.9':
     resolution: {integrity: sha512-s6z6m8cK4SMjIX1hm8LT187aQ6//ujLrjzDBogqDCYXRbfjbAYovw5as/v2a2rhUIyJbS3UjokZm3W0H+Oh/RQ==}
     engines: {node: '>=18'}
@@ -4481,10 +4462,6 @@ packages:
     resolution: {integrity: sha512-qgPpdWn/c5laA+3WoJ6Fak8uOm7CG50nBsLlPsF8kbT7rUHIVB9WaP6+GPsoKV/H15koW7jKuLRoNVT7c3Ht3w==}
     engines: {node: '>= 20.19.4'}
 
-  '@react-native/metro-babel-transformer@0.76.0':
-    resolution: {integrity: sha512-aq0MrjaOxDitSqQbttBcOt+5tjemCabhEX2gGthy8cNeZokBa2raoHQInDo9iBBN1ePKDCwKGypyC8zKA5dksQ==}
-    engines: {node: '>=18'}
-
   '@react-native/metro-babel-transformer@0.76.9':
     resolution: {integrity: sha512-HGq11347UHNiO/NvVbAO35hQCmH8YZRs7in7nVq7SL99pnpZK4WXwLdAXmSuwz5uYqOuwnKYDlpadz8fkE94Mg==}
     engines: {node: '>=18'}
@@ -4496,23 +4473,9 @@ packages:
   '@react-native/normalize-colors@0.74.89':
     resolution: {integrity: sha512-qoMMXddVKVhZ8PA1AbUCk83trpd6N+1nF2A6k1i6LsQObyS92fELuk8kU/lQs6M7BsMHwqyLCpQJ1uFgNvIQXg==}
 
-  '@react-native/normalize-colors@0.76.0':
-    resolution: {integrity: sha512-r+pjeIhzehb+bJUUUrztOQb+n6J9DeaLbF6waLgiHa5mFOiwP/4/iWS68inSZnnBtmXHkN2IYiMXzExx8hieWA==}
-
   '@react-native/normalize-colors@0.83.1':
     resolution: {integrity: sha512-84feABbmeWo1kg81726UOlMKAhcQyFXYz2SjRKYkS78QmfhVDhJ2o/ps1VjhFfBz0i/scDwT1XNv9GwmRIghkg==}
 
-  '@react-native/virtualized-lists@0.76.0':
-    resolution: {integrity: sha512-WT3Xi1+ikmWWdbrv3xnl8wYxobj1+N5JfiOQx7o/tiGUCx8m12pf5tlutXByH2m7X8bAZ+BBcRuu1vwt7XaRhQ==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      '@types/react': ^18.2.6
-      react: '*'
-      react-native: '*'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@react-native/virtualized-lists@0.83.1':
     resolution: {integrity: sha512-MdmoAbQUTOdicCocm5XAFDJWsswxk7hxa6ALnm6Y88p01HFML0W593hAn6qOt9q6IM1KbAcebtH6oOd4gcQy8w==}
     engines: {node: '>= 20.19.4'}
@@ -5870,9 +5833,6 @@ packages:
   '@types/pg@8.15.5':
     resolution: {integrity: sha512-LF7lF6zWEKxuT3/OR8wAZGzkg4ENGXFNyiV/JeOt9z5B+0ZVwbql9McqX5c/WStFq1GaGso7H1AzP/qSzmlCKQ==}
 
-  '@types/prop-types@15.7.15':
-    resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
-
   '@types/qs@6.14.0':
     resolution: {integrity: sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==}
 
@@ -5889,9 +5849,6 @@ packages:
     peerDependencies:
       '@types/react': '*'
 
-  '@types/react@18.3.28':
-    resolution: {integrity: sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==}
-
   '@types/react@19.1.9':
     resolution: {integrity: sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==}
 
@@ -6653,9 +6610,6 @@ packages:
     peerDependencies:
       styled-components: '>= 2'
 
-  babel-plugin-syntax-hermes-parser@0.23.1:
-    resolution: {integrity: sha512-uNLD0tk2tLUjGFdmCk+u/3FEw2o+BAwW4g+z2QVlxJrzZYOOPADroEcNtTPt5lNiScctaUmnsTkVEnOwZUOLhA==}
-
   babel-plugin-syntax-hermes-parser@0.25.1:
     resolution: {integrity: sha512-IVNpGzboFLfXZUAwkLFcI/bnqVbwky0jP3eBno4HKtqvQJAHBLdgxiG6lQ4to0+Q/YCN3PO0od5NZwIKyY4REQ==}
 
@@ -9268,9 +9222,6 @@ packages:
   jsan@3.1.14:
     resolution: {integrity: sha512-wStfgOJqMv4QKktuH273f5fyi3D3vy2pHOiSDGPvpcS/q+wb/M7AK3vkCcaHbkZxDOlDU/lDJgccygKSG2OhtA==}
 
-  jsc-android@250231.0.0:
-    resolution: {integrity: sha512-rS46PvsjYmdmuz1OAWXY/1kCYG7pnf1TBqeTiOJr1iDz7s5DLxxC9n/ZMknLDxzYzNVfI7R95MH10emSSG1Wuw==}
-
   jsc-safe-url@0.2.4:
     resolution: {integrity: sha512-0wM3YBWtYePOjfyXQH5MWQ8H7sdk5EXSwZvmSLKk2RboVQ2Bu239jycHDz5J/8Blf3K0Qnoy2b6xD+z10MFB+Q==}
 
@@ -10952,17 +10903,9 @@ packages:
   react-base16-styling@0.10.0:
     resolution: {integrity: sha512-H1k2eFB6M45OaiRru3PBXkuCcn2qNmx+gzLb4a9IPMR7tMH8oBRXU5jGbPDYG1Hz+82d88ED0vjR8BmqU3pQdg==}
 
-  react-devtools-core@5.3.2:
-    resolution: {integrity: sha512-crr9HkVrDiJ0A4zot89oS0Cgv0Oa4OG1Em4jit3P3ZxZSKPMYyMjfwMqgcJna9o625g8oN87rBm8SWWrSTBZxg==}
-
   react-devtools-core@6.1.5:
     resolution: {integrity: sha512-ePrwPfxAnB+7hgnEr8vpKxL9cmnp7F322t8oqcPshbIQQhDKgFDW4tjhF2wjVbdXF9O/nyuy3sQWd9JGpiLPvA==}
 
-  react-dom@18.3.0:
-    resolution: {integrity: sha512-zaKdLBftQJnvb7FtDIpZtsAIb2MZU087RM8bRDZU8LVCCFYjPTsDZJNFUWPcVz3HFSN1n/caxi0ca4B/aaVQGQ==}
-    peerDependencies:
-      react: ^18.3.0
-
   react-dom@19.1.1:
     resolution: {integrity: sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==}
     peerDependencies:
@@ -11128,17 +11071,6 @@ packages:
       react: '*'
       react-native: '*'
 
-  react-native@0.76.0:
-    resolution: {integrity: sha512-isbLzmY7fhhLdN/oss4jlRHeDmEShuTYsp1Zq93UM0/JssQK4g+2Ub4mHdhxDFm2LN+0ryBgVJK1nO7l93cfsA==}
-    engines: {node: '>=18'}
-    hasBin: true
-    peerDependencies:
-      '@types/react': ^18.2.6
-      react: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   react-native@0.83.1:
     resolution: {integrity: sha512-mL1q5HPq5cWseVhWRLl+Fwvi5z1UO+3vGOpjr+sHFwcUletPRZ5Kv+d0tUfqHmvi73/53NjlQqX1Pyn4GguUfA==}
     engines: {node: '>= 20.19.4'}
@@ -11272,10 +11204,6 @@ packages:
       react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  react@18.3.1:
-    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
-    engines: {node: '>=0.10.0'}
-
   react@19.1.1:
     resolution: {integrity: sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==}
     engines: {node: '>=0.10.0'}
@@ -11306,9 +11234,6 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
-  readline@1.3.0:
-    resolution: {integrity: sha512-k2d6ACCkiNYz222Fs/iNze30rRJ1iIicW7JuX/7/cozvih6YCkFZH+J6mAFDVgv0dRBaAyr4jDqC95R2y4IADg==}
-
   real-require@0.2.0:
     resolution: {integrity: sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==}
     engines: {node: '>= 12.13.0'}
@@ -11594,12 +11519,6 @@ packages:
   sc-formatter@4.0.0:
     resolution: {integrity: sha512-MgUIvuca+90fBrCWY5LdlU9YUWjlkPFwdpvmomcwQEu3t2id/6YHdG2nhB6o7nhRp4ocfmcXQTh00r/tJtynSg==}
 
-  scheduler@0.23.2:
-    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
-
-  scheduler@0.24.0-canary-efb381bbf-20230505:
-    resolution: {integrity: sha512-ABvovCDe/k9IluqSh4/ISoq8tIJnW8euVAWYt5j/bg6dRnqwQwiGO1F/V4AyK96NGF/FB04FhOUDuWj8IKfABA==}
-
   scheduler@0.26.0:
     resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
 
@@ -14662,7 +14581,7 @@ snapshots:
 
   '@expo/dom-webview@55.0.3(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)':
     dependencies:
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       react: 19.2.0
       react-native: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
 
@@ -14715,7 +14634,7 @@ snapshots:
     dependencies:
       '@expo/dom-webview': 55.0.3(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       anser: 1.4.10
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       react: 19.2.0
       react-native: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
       stacktrace-parser: 0.1.11
@@ -14742,7 +14661,7 @@ snapshots:
       postcss: 8.4.49
       resolve-from: 5.0.0
     optionalDependencies:
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
     transitivePeerDependencies:
       - bufferutil
       - supports-color
@@ -14752,7 +14671,7 @@ snapshots:
     dependencies:
       '@expo/log-box': 55.0.6(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       anser: 1.4.10
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       pretty-format: 29.7.0
       react: 19.2.0
       react-native: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
@@ -14810,7 +14729,7 @@ snapshots:
       '@expo/json-file': 10.0.12
       '@react-native/normalize-colors': 0.83.1
       debug: 4.4.3(supports-color@5.5.0)
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       resolve-from: 5.0.0
       semver: 7.7.3
       xml2js: 0.6.0
@@ -14865,7 +14784,7 @@ snapshots:
 
   '@expo/sudo-prompt@9.3.2': {}
 
-  '@expo/vector-icons@15.0.3(expo-font@55.0.3(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)':
+  '@expo/vector-icons@15.0.3(expo-font@55.0.3)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)':
     dependencies:
       expo-font: 55.0.3(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       react: 19.2.0
@@ -17153,17 +17072,8 @@ snapshots:
       react-native: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
       tslib: 2.8.1
 
-  '@react-native/assets-registry@0.76.0': {}
-
   '@react-native/assets-registry@0.83.1': {}
 
-  '@react-native/babel-plugin-codegen@0.76.0':
-    dependencies:
-      '@react-native/codegen': 0.76.0
-    transitivePeerDependencies:
-      - '@babel/preset-env'
-      - supports-color
-
   '@react-native/babel-plugin-codegen@0.76.9':
     dependencies:
       '@react-native/codegen': 0.76.9
@@ -17171,12 +17081,11 @@ snapshots:
       - '@babel/preset-env'
       - supports-color
 
-  '@react-native/babel-plugin-codegen@0.83.1(@babel/core@7.29.0)':
+  '@react-native/babel-plugin-codegen@0.83.1':
     dependencies:
       '@babel/traverse': 7.29.0(supports-color@5.5.0)
-      '@react-native/codegen': 0.83.1(@babel/core@7.29.0)
+      '@react-native/codegen': 0.83.1
     transitivePeerDependencies:
-      - '@babel/core'
       - supports-color
 
   '@react-native/babel-plugin-codegen@0.85.0(@babel/core@7.29.0)':
@@ -17187,57 +17096,6 @@ snapshots:
       - '@babel/core'
       - supports-color
 
-  '@react-native/babel-preset@0.76.0':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/plugin-proposal-export-default-from': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.29.0)
-      '@babel/plugin-syntax-export-default-from': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.29.0)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.29.0)
-      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-async-generator-functions': 7.28.0(@babel/core@7.29.0)
-      '@babel/plugin-transform-async-to-generator': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-block-scoping': 7.28.0(@babel/core@7.29.0)
-      '@babel/plugin-transform-class-properties': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-classes': 7.28.4(@babel/core@7.29.0)
-      '@babel/plugin-transform-computed-properties': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-destructuring': 7.28.0(@babel/core@7.29.0)
-      '@babel/plugin-transform-flow-strip-types': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-function-name': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-literals': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-logical-assignment-operators': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-named-capturing-groups-regex': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-numeric-separator': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-object-rest-spread': 7.28.0(@babel/core@7.29.0)
-      '@babel/plugin-transform-optional-catch-binding': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-optional-chaining': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.29.0)
-      '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-private-property-in-object': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-react-display-name': 7.28.0(@babel/core@7.29.0)
-      '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-regenerator': 7.28.4(@babel/core@7.29.0)
-      '@babel/plugin-transform-runtime': 7.28.0(@babel/core@7.29.0)
-      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-spread': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-sticky-regex': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.29.0)
-      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.29.0)
-      '@babel/template': 7.28.6
-      '@react-native/babel-plugin-codegen': 0.76.0
-      babel-plugin-syntax-hermes-parser: 0.23.1
-      babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.29.0)
-      react-refresh: 0.14.2
-    transitivePeerDependencies:
-      - '@babel/preset-env'
-      - supports-color
-
   '@react-native/babel-preset@0.76.9':
     dependencies:
       '@babel/core': 7.29.0
@@ -17332,7 +17190,7 @@ snapshots:
       '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.29.0)
       '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.29.0)
       '@babel/template': 7.28.6
-      '@react-native/babel-plugin-codegen': 0.83.1(@babel/core@7.29.0)
+      '@react-native/babel-plugin-codegen': 0.83.1
       babel-plugin-syntax-hermes-parser: 0.32.0
       babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.29.0)
       react-refresh: 0.14.2
@@ -17377,19 +17235,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@react-native/codegen@0.76.0':
-    dependencies:
-      '@babel/parser': 7.29.0
-      glob: 7.2.3
-      hermes-parser: 0.23.1
-      invariant: 2.2.4
-      jscodeshift: 0.14.0
-      mkdirp: 0.5.6
-      nullthrows: 1.1.1
-      yargs: 17.7.2
-    transitivePeerDependencies:
-      - supports-color
-
   '@react-native/codegen@0.76.9':
     dependencies:
       '@babel/parser': 7.29.0
@@ -17403,7 +17248,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@react-native/codegen@0.83.1(@babel/core@7.29.0)':
+  '@react-native/codegen@0.83.1':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/parser': 7.29.0
@@ -17412,6 +17257,8 @@ snapshots:
       invariant: 2.2.4
       nullthrows: 1.1.1
       yargs: 17.7.2
+    transitivePeerDependencies:
+      - supports-color
 
   '@react-native/codegen@0.85.0(@babel/core@7.29.0)':
     dependencies:
@@ -17423,25 +17270,6 @@ snapshots:
       tinyglobby: 0.2.15
       yargs: 17.7.2
 
-  '@react-native/community-cli-plugin@0.76.0':
-    dependencies:
-      '@react-native/dev-middleware': 0.76.0
-      '@react-native/metro-babel-transformer': 0.76.0
-      chalk: 4.1.2
-      execa: 5.1.1
-      invariant: 2.2.4
-      metro: 0.81.5
-      metro-config: 0.81.5
-      metro-core: 0.81.5
-      node-fetch: 2.7.0
-      readline: 1.3.0
-    transitivePeerDependencies:
-      - '@babel/preset-env'
-      - bufferutil
-      - encoding
-      - supports-color
-      - utf-8-validate
-
   '@react-native/community-cli-plugin@0.83.1(@react-native/metro-config@0.76.9)':
     dependencies:
       '@react-native/dev-middleware': 0.83.1
@@ -17504,26 +17332,12 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@react-native/gradle-plugin@0.76.0': {}
-
   '@react-native/gradle-plugin@0.83.1': {}
 
-  '@react-native/js-polyfills@0.76.0': {}
-
   '@react-native/js-polyfills@0.76.9': {}
 
   '@react-native/js-polyfills@0.83.1': {}
 
-  '@react-native/metro-babel-transformer@0.76.0':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@react-native/babel-preset': 0.76.0
-      hermes-parser: 0.23.1
-      nullthrows: 1.1.1
-    transitivePeerDependencies:
-      - '@babel/preset-env'
-      - supports-color
-
   '@react-native/metro-babel-transformer@0.76.9':
     dependencies:
       '@babel/core': 7.29.0
@@ -17548,19 +17362,8 @@ snapshots:
 
   '@react-native/normalize-colors@0.74.89': {}
 
-  '@react-native/normalize-colors@0.76.0': {}
-
   '@react-native/normalize-colors@0.83.1': {}
 
-  '@react-native/virtualized-lists@0.76.0(@types/react@18.3.28)(react-native@0.76.0(@babel/core@7.29.0)(@types/react@18.3.28)(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      invariant: 2.2.4
-      nullthrows: 1.1.1
-      react: 18.3.1
-      react-native: 0.76.0(@babel/core@7.29.0)(@types/react@18.3.28)(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.28
-
   '@react-native/virtualized-lists@0.83.1(@types/react@19.2.14)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)':
     dependencies:
       invariant: 2.2.4
@@ -19254,8 +19057,6 @@ snapshots:
       pg-protocol: 1.10.3
       pg-types: 2.2.0
 
-  '@types/prop-types@15.7.15': {}
-
   '@types/qs@6.14.0': {}
 
   '@types/range-parser@1.2.7': {}
@@ -19268,11 +19069,6 @@ snapshots:
     dependencies:
       '@types/react': 19.2.14
 
-  '@types/react@18.3.28':
-    dependencies:
-      '@types/prop-types': 15.7.15
-      csstype: 3.2.3
-
   '@types/react@19.1.9':
     dependencies:
       csstype: 3.1.3
@@ -20251,10 +20047,6 @@ snapshots:
       - '@babel/core'
       - supports-color
 
-  babel-plugin-syntax-hermes-parser@0.23.1:
-    dependencies:
-      hermes-parser: 0.23.1
-
   babel-plugin-syntax-hermes-parser@0.25.1:
     dependencies:
       hermes-parser: 0.25.1
@@ -20324,7 +20116,7 @@ snapshots:
       resolve-from: 5.0.0
     optionalDependencies:
       '@babel/runtime': 7.26.10
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
     transitivePeerDependencies:
       - '@babel/core'
       - supports-color
@@ -21853,7 +21645,7 @@ snapshots:
   expo-asset@55.0.4(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0):
     dependencies:
       '@expo/image-utils': 0.8.12
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       expo-constants: 55.0.4(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))
       react: 19.2.0
       react-native: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
@@ -21882,19 +21674,19 @@ snapshots:
     dependencies:
       '@expo/config': 55.0.4
       '@expo/env': 2.1.0
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       react-native: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
     transitivePeerDependencies:
       - supports-color
 
   expo-file-system@55.0.5(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)):
     dependencies:
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       react-native: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
 
   expo-font@55.0.3(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0):
     dependencies:
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       fontfaceobserver: 2.3.0
       react: 19.2.0
       react-native: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
@@ -21920,7 +21712,7 @@ snapshots:
 
   expo-keep-awake@55.0.2(expo@55.0.0-preview.10)(react@19.2.0):
     dependencies:
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       react: 19.2.0
 
   expo-linking@55.0.4(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0):
@@ -22012,7 +21804,7 @@ snapshots:
   expo-sqlite@55.0.11(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0):
     dependencies:
       await-lock: 2.2.2
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       react: 19.2.0
       react-native: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
 
@@ -22059,7 +21851,7 @@ snapshots:
       '@expo/log-box': 55.0.6(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       '@expo/metro': 54.2.0
       '@expo/metro-config': 55.0.5(expo@55.0.0-preview.10)
-      '@expo/vector-icons': 15.0.3(expo-font@55.0.3(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      '@expo/vector-icons': 15.0.3(expo-font@55.0.3)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       '@ungap/structured-clone': 1.3.0
       babel-preset-expo: 55.0.4(@babel/core@7.29.0)(@babel/runtime@7.26.10)(expo@55.0.0-preview.10)(react-refresh@0.14.2)
       expo-asset: 55.0.4(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
@@ -22099,7 +21891,7 @@ snapshots:
       '@expo/log-box': 55.0.6(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       '@expo/metro': 54.2.0
       '@expo/metro-config': 55.0.5(expo@55.0.0-preview.10)
-      '@expo/vector-icons': 15.0.3(expo-font@55.0.3(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      '@expo/vector-icons': 15.0.3(expo-font@55.0.3)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       '@ungap/structured-clone': 1.3.0
       babel-preset-expo: 55.0.4(@babel/core@7.29.0)(@babel/runtime@7.26.10)(expo@55.0.0-preview.10)(react-refresh@0.14.2)
       expo-asset: 55.0.4(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
@@ -23462,8 +23254,6 @@ snapshots:
 
   jsan@3.1.14: {}
 
-  jsc-android@250231.0.0: {}
-
   jsc-safe-url@0.2.4: {}
 
   jscodeshift@0.14.0:
@@ -23882,10 +23672,6 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
-  lucide-react@0.263.1(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-
   lucide-react@0.263.1(react@19.2.0):
     dependencies:
       react: 19.2.0
@@ -25842,14 +25628,6 @@ snapshots:
       csstype: 3.2.3
       lodash-es: 4.17.21
 
-  react-devtools-core@5.3.2:
-    dependencies:
-      shell-quote: 1.8.3
-      ws: 7.5.10
-    transitivePeerDependencies:
-      - bufferutil
-      - utf-8-validate
-
   react-devtools-core@6.1.5:
     dependencies:
       shell-quote: 1.8.3
@@ -25858,12 +25636,6 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  react-dom@18.3.0(react@18.3.1):
-    dependencies:
-      loose-envify: 1.4.0
-      react: 18.3.1
-      scheduler: 0.23.2
-
   react-dom@19.1.1(react@19.1.1):
     dependencies:
       react: 19.1.1
@@ -26020,7 +25792,7 @@ snapshots:
       react-native: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
       warn-once: 0.1.1
 
-  react-native-web@0.21.0(react-dom@18.3.0(react@18.3.1))(react@18.3.1):
+  react-native-web@0.21.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
     dependencies:
       '@babel/runtime': 7.26.10
       '@react-native/normalize-colors': 0.74.89
@@ -26029,8 +25801,8 @@ snapshots:
       memoize-one: 6.0.0
       nullthrows: 1.1.1
       postcss-value-parser: 4.2.0
-      react: 18.3.1
-      react-dom: 18.3.0(react@18.3.1)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
       styleq: 0.1.3
     transitivePeerDependencies:
       - encoding
@@ -26069,63 +25841,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  react-native@0.76.0(@babel/core@7.29.0)(@types/react@18.3.28)(react@18.3.1):
-    dependencies:
-      '@jest/create-cache-key-function': 29.7.0
-      '@react-native/assets-registry': 0.76.0
-      '@react-native/codegen': 0.76.0
-      '@react-native/community-cli-plugin': 0.76.0
-      '@react-native/gradle-plugin': 0.76.0
-      '@react-native/js-polyfills': 0.76.0
-      '@react-native/normalize-colors': 0.76.0
-      '@react-native/virtualized-lists': 0.76.0(@types/react@18.3.28)(react-native@0.76.0(@babel/core@7.29.0)(@types/react@18.3.28)(react@18.3.1))(react@18.3.1)
-      abort-controller: 3.0.0
-      anser: 1.4.10
-      ansi-regex: 5.0.1
-      babel-jest: 29.7.0(@babel/core@7.29.0)
-      babel-plugin-syntax-hermes-parser: 0.23.1
-      base64-js: 1.5.1
-      chalk: 4.1.2
-      commander: 12.1.0
-      event-target-shim: 5.0.1
-      flow-enums-runtime: 0.0.6
-      glob: 7.2.3
-      invariant: 2.2.4
-      jest-environment-node: 29.7.0
-      jsc-android: 250231.0.0
-      memoize-one: 5.2.1
-      metro-runtime: 0.81.5
-      metro-source-map: 0.81.5
-      mkdirp: 0.5.6
-      nullthrows: 1.1.1
-      pretty-format: 29.7.0
-      promise: 8.3.0
-      react: 18.3.1
-      react-devtools-core: 5.3.2
-      react-refresh: 0.14.2
-      regenerator-runtime: 0.13.11
-      scheduler: 0.24.0-canary-efb381bbf-20230505
-      semver: 7.7.3
-      stacktrace-parser: 0.1.11
-      whatwg-fetch: 3.6.20
-      ws: 6.2.3
-      yargs: 17.7.2
-    optionalDependencies:
-      '@types/react': 18.3.28
-    transitivePeerDependencies:
-      - '@babel/core'
-      - '@babel/preset-env'
-      - '@react-native-community/cli-server-api'
-      - bufferutil
-      - encoding
-      - supports-color
-      - utf-8-validate
-
   react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0):
     dependencies:
       '@jest/create-cache-key-function': 29.7.0
       '@react-native/assets-registry': 0.83.1
-      '@react-native/codegen': 0.83.1(@babel/core@7.29.0)
+      '@react-native/codegen': 0.83.1
       '@react-native/community-cli-plugin': 0.83.1(@react-native/metro-config@0.76.9)
       '@react-native/gradle-plugin': 0.83.1
       '@react-native/js-polyfills': 0.83.1
@@ -26173,7 +25893,7 @@ snapshots:
     dependencies:
       '@jest/create-cache-key-function': 29.7.0
       '@react-native/assets-registry': 0.83.1
-      '@react-native/codegen': 0.83.1(@babel/core@7.29.0)
+      '@react-native/codegen': 0.83.1
       '@react-native/community-cli-plugin': 0.83.1(@react-native/metro-config@0.76.9)
       '@react-native/gradle-plugin': 0.83.1
       '@react-native/js-polyfills': 0.83.1
@@ -26359,10 +26079,6 @@ snapshots:
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
 
-  react@18.3.1:
-    dependencies:
-      loose-envify: 1.4.0
-
   react@19.1.1: {}
 
   react@19.2.0: {}
@@ -26400,8 +26116,6 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
-  readline@1.3.0: {}
-
   real-require@0.2.0: {}
 
   recast@0.21.5:
@@ -26754,14 +26468,6 @@ snapshots:
 
   sc-formatter@4.0.0: {}
 
-  scheduler@0.23.2:
-    dependencies:
-      loose-envify: 1.4.0
-
-  scheduler@0.24.0-canary-efb381bbf-20230505:
-    dependencies:
-      loose-envify: 1.4.0
-
   scheduler@0.26.0: {}
 
   scheduler@0.27.0: {}
@@ -28095,7 +27801,7 @@ snapshots:
       - tsx
       - yaml
 
-  vitest@4.1.0(@types/node@22.17.0)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@22.1.0)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1):
+  vitest@4.1.0(@types/node@22.17.0)(@vitest/ui@3.2.4(vitest@3.2.4))(jiti@2.6.1)(jsdom@22.1.0)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1):
     dependencies:
       '@vitest/expect': 4.1.0
       '@vitest/mocker': 4.1.0(vite@7.3.1(@types/node@22.17.0)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))

From 6b2296b430bf6b32c836cd66c5f4969b4f28ef6c Mon Sep 17 00:00:00 2001
From: Anatoly Belobrovik <anatoly.belobrovik@callstack.com>
Date: Fri, 19 Jun 2026 09:47:07 +0200
Subject: [PATCH 3/3] refactor: use shared ui in sqlite plugin

---
 packages/sqlite-plugin/package.json           |    6 +-
 .../src/ui/__tests__/value-utils.test.tsx     |   14 +-
 .../src/ui/cell-detail-drawer.tsx             |   70 +-
 packages/sqlite-plugin/src/ui/globals.css     | 1270 +----------------
 packages/sqlite-plugin/src/ui/panel.tsx       | 1214 +++++++++-------
 .../src/ui/query-result-table.tsx             |   45 +-
 packages/sqlite-plugin/src/ui/sql-editor.tsx  |   71 +-
 .../src/ui/sqlite-data-table.tsx              |   63 +-
 .../src/ui/sqlite-modal-controls.tsx          |   32 -
 .../src/ui/sqlite-row-delete-modal.tsx        |  138 +-
 .../src/ui/sqlite-row-edit-modal.tsx          |  561 ++++----
 packages/sqlite-plugin/src/ui/value-utils.tsx |   46 +-
 packages/ui/src/json-inspector.tsx            |   37 +-
 pnpm-lock.yaml                                | 1260 +++-------------
 14 files changed, 1434 insertions(+), 3393 deletions(-)
 delete mode 100644 packages/sqlite-plugin/src/ui/sqlite-modal-controls.tsx

diff --git a/packages/sqlite-plugin/package.json b/packages/sqlite-plugin/package.json
index b4733a23..a9fa3350 100644
--- a/packages/sqlite-plugin/package.json
+++ b/packages/sqlite-plugin/package.json
@@ -22,7 +22,8 @@
     "test": "vitest --run"
   },
   "dependencies": {
-    "@rozenite/plugin-bridge": "workspace:*"
+    "@rozenite/plugin-bridge": "workspace:*",
+    "@rozenite/ui": "workspace:*"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -34,8 +35,6 @@
     "@codemirror/search": "^6.6.0",
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.40.0",
-    "@heroui/react": "^3.0.1",
-    "@heroui/styles": "^3.0.1",
     "@lezer/highlight": "^1.2.3",
     "@rozenite/vite-plugin": "workspace:*",
     "@tailwindcss/postcss": "^4.2.2",
@@ -48,7 +47,6 @@
     "postcss": "^8.5.6",
     "react": "catalog:",
     "react-dom": "catalog:",
-    "react-json-tree": "^0.20.0",
     "react-native": "catalog:",
     "react-native-web": "^0.21.2",
     "rozenite": "workspace:*",
diff --git a/packages/sqlite-plugin/src/ui/__tests__/value-utils.test.tsx b/packages/sqlite-plugin/src/ui/__tests__/value-utils.test.tsx
index bbf314a9..70b21a58 100644
--- a/packages/sqlite-plugin/src/ui/__tests__/value-utils.test.tsx
+++ b/packages/sqlite-plugin/src/ui/__tests__/value-utils.test.tsx
@@ -1,5 +1,10 @@
+import { JsonInspector } from '@rozenite/ui';
 import { describe, expect, it } from 'vitest';
-import { getValuePreview, stringifyValue } from '../value-utils';
+import {
+  getValuePreview,
+  renderStructuredValue,
+  stringifyValue,
+} from '../value-utils';
 
 describe('value utils', () => {
   it('stringifyValue returns a string for undefined values', () => {
@@ -9,4 +14,11 @@ describe('value utils', () => {
   it('getValuePreview does not crash for undefined values', () => {
     expect(getValuePreview(undefined)).toBe('undefined');
   });
+
+  it('renderStructuredValue uses the shared JsonInspector', () => {
+    const result = renderStructuredValue({ ok: true });
+
+    expect(result?.type).toBe(JsonInspector);
+    expect(result?.props.data).toEqual({ ok: true });
+  });
 });
diff --git a/packages/sqlite-plugin/src/ui/cell-detail-drawer.tsx b/packages/sqlite-plugin/src/ui/cell-detail-drawer.tsx
index a50b3a06..0f34f4d5 100644
--- a/packages/sqlite-plugin/src/ui/cell-detail-drawer.tsx
+++ b/packages/sqlite-plugin/src/ui/cell-detail-drawer.tsx
@@ -1,6 +1,5 @@
-import { Modal, useOverlayState } from '@heroui/react';
+import { Drawer, Surface } from '@rozenite/ui';
 import { Rows } from 'lucide-react';
-import { SqliteModalCloseButton } from './sqlite-modal-controls';
 import { renderStructuredValue } from './value-utils';
 
 type CellDetailDrawerProps = {
@@ -16,50 +15,45 @@ export const CellDetailDrawer = ({
   isOpen,
   onClose,
 }: CellDetailDrawerProps) => {
-  const overlay = useOverlayState({
-    isOpen,
-    onOpenChange: (open: boolean) => {
-      if (!open) {
-        onClose();
-      }
-    },
-  });
-
   return (
-    <Modal state={overlay}>
-      <Modal.Backdrop
-        variant="blur"
-        isDismissable
-        className="bg-[rgba(5,10,16,0.24)] backdrop-blur-[2px]"
-      >
-        <Modal.Container placement="center" size="lg" scroll="inside">
-          <Modal.Dialog
+    <Drawer
+      isOpen={isOpen}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          onClose();
+        }
+      }}
+    >
+      <Drawer.Backdrop variant="blur">
+        <Drawer.Content className="w-full max-w-4xl" placement="right">
+          <Drawer.Dialog
             aria-label={title}
-            className="w-full max-w-4xl overflow-hidden border border-white/10 bg-[#0a121b] p-0 text-white shadow-[0_30px_90px_rgba(0,0,0,0.42)]"
+            className="flex h-full flex-col overflow-hidden"
           >
-            <div className="flex items-center justify-between gap-4 border-b border-white/8 px-5 py-5">
-              <div>
+            <Drawer.Header className="flex items-start justify-between gap-3 border-b border-border/70 px-5 py-4">
+              <div className="min-w-0">
                 <div className="flex items-center gap-2">
-                  <Rows aria-hidden="true" className="h-4 w-4 text-sky-300" />
-                  <h2 className="text-lg font-semibold text-white">{title}</h2>
+                  <Rows aria-hidden="true" className="size-4 text-info" />
+                  <Drawer.Heading className="truncate">{title}</Drawer.Heading>
                 </div>
-                <p className="mt-1 text-sm text-slate-400">
+                <p className="mt-1 text-xs text-muted">
                   Inspect the selected row in full detail.
                 </p>
               </div>
-              <SqliteModalCloseButton onClose={onClose} />
-            </div>
+              <Drawer.CloseTrigger aria-label="Close row details" />
+            </Drawer.Header>
 
-            <Modal.Body className="space-y-0 p-0">
-              <div className="px-5 py-5">
-                <div className="max-h-[70vh] overflow-auto rounded-[22px] border border-white/8 bg-white/[0.02] p-4">
-                  {renderStructuredValue(value)}
-                </div>
-              </div>
-            </Modal.Body>
-          </Modal.Dialog>
-        </Modal.Container>
-      </Modal.Backdrop>
-    </Modal>
+            <Drawer.Body className="min-h-0 flex-1 overflow-auto p-5">
+              <Surface
+                className="min-h-full rounded-xl border border-border/70 bg-surface-secondary p-4"
+                variant="secondary"
+              >
+                {renderStructuredValue(value)}
+              </Surface>
+            </Drawer.Body>
+          </Drawer.Dialog>
+        </Drawer.Content>
+      </Drawer.Backdrop>
+    </Drawer>
   );
 };
diff --git a/packages/sqlite-plugin/src/ui/globals.css b/packages/sqlite-plugin/src/ui/globals.css
index 671d29e7..9a3ae969 100644
--- a/packages/sqlite-plugin/src/ui/globals.css
+++ b/packages/sqlite-plugin/src/ui/globals.css
@@ -1,31 +1,5 @@
 @import 'tailwindcss';
-@import '@heroui/styles';
-
-@layer theme {
-  :root {
-    --radius: 0.875rem;
-    --sqlite-bg: #07111a;
-    --sqlite-bg-soft: #0b1722;
-    --sqlite-surface: rgba(12, 23, 35, 0.9);
-    --sqlite-surface-strong: rgba(14, 28, 44, 0.96);
-    --sqlite-surface-muted: rgba(19, 35, 53, 0.76);
-    --sqlite-line: rgba(167, 194, 220, 0.14);
-    --sqlite-line-strong: rgba(167, 194, 220, 0.24);
-    --sqlite-text: rgba(243, 248, 252, 0.96);
-    --sqlite-muted: rgba(165, 185, 204, 0.86);
-    --sqlite-muted-soft: rgba(165, 185, 204, 0.58);
-    --sqlite-accent: #8232ff;
-    --sqlite-accent-strong: #6921d6;
-    --sqlite-accent-soft: rgba(130, 50, 255, 0.14);
-    --sqlite-success: #4fce92;
-    --sqlite-success-soft: rgba(79, 206, 146, 0.16);
-    --sqlite-warning: #ffbf69;
-    --sqlite-warning-soft: rgba(255, 191, 105, 0.14);
-    --sqlite-danger: #ff7b7b;
-    --sqlite-danger-soft: rgba(255, 123, 123, 0.14);
-    --sqlite-shadow: 0 24px 64px rgba(2, 8, 16, 0.42);
-  }
-}
+@import '@rozenite/ui/styles.css';
 
 @layer base {
   html,
@@ -34,28 +8,10 @@
     min-height: 100%;
   }
 
-  html {
-    color-scheme: dark;
-  }
-
   body {
     margin: 0;
-    font-size: 14px;
-    font-family:
-      'IBM Plex Sans', 'Satoshi', 'Inter', ui-sans-serif, system-ui, sans-serif;
-    background:
-      radial-gradient(
-        circle at top left,
-        rgba(130, 50, 255, 0.18),
-        transparent 22%
-      ),
-      radial-gradient(
-        circle at right,
-        rgba(70, 193, 190, 0.08),
-        transparent 18%
-      ),
-      linear-gradient(180deg, #07111a 0%, #091520 52%, #07111a 100%);
-    color: var(--sqlite-text);
+    background: var(--background);
+    color: var(--foreground);
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -77,7 +33,6 @@
   code,
   pre,
   textarea,
-  .sqlite-select,
   .sqlite-tabular,
   .sqlite-editor-shell .cm-scroller,
   .sqlite-editor-shell .cm-gutters {
@@ -88,713 +43,7 @@
   }
 }
 
-@utility wrap-anywhere {
-  overflow-wrap: anywhere;
-}
-
 @layer components {
-  .sqlite-app-shell {
-    min-height: 100vh;
-    min-height: 100dvh;
-    height: 100vh;
-    height: 100dvh;
-    padding: 0.5rem;
-  }
-
-  .sqlite-skip-link {
-    position: absolute;
-    left: 1rem;
-    top: -3rem;
-    z-index: 60;
-    border-radius: 999px;
-    border: 1px solid var(--sqlite-line-strong);
-    background: rgba(12, 27, 41, 0.98);
-    color: white;
-    padding: 0.65rem 1rem;
-    text-decoration: none;
-    transition:
-      top 160ms ease,
-      opacity 160ms ease;
-    opacity: 0;
-  }
-
-  .sqlite-skip-link:focus-visible {
-    top: 1rem;
-    opacity: 1;
-  }
-
-  .sqlite-topbar,
-  .sqlite-sidebar-panel,
-  .sqlite-workspace-panel {
-    position: relative;
-    overflow: hidden;
-    border: 1px solid var(--sqlite-line);
-    border-radius: 1.5rem;
-    background:
-      linear-gradient(180deg, rgba(13, 24, 36, 0.96), rgba(8, 17, 26, 0.96)),
-      radial-gradient(circle at top, rgba(130, 50, 255, 0.08), transparent 34%);
-    box-shadow: var(--sqlite-shadow);
-    backdrop-filter: blur(18px);
-  }
-
-  .sqlite-topbar::before,
-  .sqlite-sidebar-panel::before,
-  .sqlite-workspace-panel::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    border-radius: inherit;
-    background: linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.05),
-      transparent 18%
-    );
-  }
-
-  .sqlite-topbar {
-    display: grid;
-    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr) minmax(
-        0,
-        1.2fr
-      );
-    gap: 0.9rem;
-    align-items: center;
-    padding: 0.9rem 1rem;
-    min-height: 4.5rem;
-  }
-
-  .sqlite-topbar-section {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    min-width: 0;
-  }
-
-  .sqlite-topbar-search {
-    justify-content: center;
-  }
-
-  .sqlite-brand {
-    display: flex;
-    align-items: center;
-    gap: 0.85rem;
-    min-width: 0;
-  }
-
-  .sqlite-brand-mark {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 2.5rem;
-    height: 2.5rem;
-    border-radius: 0.95rem;
-    border: 1px solid rgba(130, 50, 255, 0.28);
-    background: linear-gradient(
-      180deg,
-      rgba(130, 50, 255, 0.24),
-      rgba(105, 33, 214, 0.18)
-    );
-    color: white;
-  }
-
-  .sqlite-brand-title {
-    margin: 0;
-    font-size: 0.98rem;
-    font-weight: 600;
-    text-wrap: balance;
-  }
-
-  .sqlite-brand-subtitle {
-    margin: 0.1rem 0 0;
-    color: var(--sqlite-muted-soft);
-    font-size: 0.76rem;
-    text-transform: uppercase;
-    letter-spacing: 0.12em;
-  }
-
-  .sqlite-topbar-meta,
-  .sqlite-toolbar-actions,
-  .sqlite-subtoolbar-group,
-  .sqlite-status-cluster,
-  .sqlite-editor-pills,
-  .sqlite-chip-row,
-  .sqlite-inline-metadata {
-    display: flex;
-    align-items: center;
-    gap: 0.6rem;
-    min-width: 0;
-    flex-wrap: wrap;
-  }
-
-  .sqlite-topbar-meta {
-    justify-content: flex-end;
-  }
-
-  .sqlite-input,
-  .sqlite-select {
-    width: 100%;
-    border: 1px solid var(--sqlite-line);
-    border-radius: 0.95rem;
-    background: linear-gradient(
-      180deg,
-      rgba(10, 18, 29, 0.98),
-      rgba(11, 22, 34, 0.98)
-    );
-    color: var(--sqlite-text);
-    box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.025),
-      0 10px 24px rgba(0, 0, 0, 0.14);
-    transition:
-      border-color 140ms ease,
-      box-shadow 140ms ease,
-      background-color 140ms ease,
-      transform 140ms ease;
-  }
-
-  .sqlite-input,
-  .sqlite-select {
-    min-height: 2.5rem;
-    padding: 0.62rem 0.85rem;
-    line-height: 1.25;
-  }
-
-  .sqlite-input::placeholder,
-  .sqlite-editor-shell .cm-placeholder {
-    color: rgba(165, 185, 204, 0.5);
-  }
-
-  .sqlite-input:focus-visible,
-  .sqlite-select:focus-visible,
-  .sqlite-chip:focus-visible,
-  .sqlite-icon-button:focus-visible,
-  .sqlite-button:focus-visible,
-  .sqlite-workspace-tab:focus-visible,
-  .sqlite-section-tab:focus-visible,
-  .sqlite-cell-button:focus-visible,
-  .sqlite-connection-row:focus-visible,
-  .sqlite-schema-row:focus-visible,
-  .sqlite-object-row:focus-visible {
-    outline: 2px solid transparent;
-    border-color: rgba(130, 50, 255, 0.54);
-    box-shadow:
-      0 0 0 2px rgba(130, 50, 255, 0.18),
-      0 0 0 4px rgba(130, 50, 255, 0.08);
-  }
-
-  .sqlite-select {
-    appearance: none;
-    background-image:
-      linear-gradient(45deg, transparent 50%, rgba(165, 185, 204, 0.8) 50%),
-      linear-gradient(135deg, rgba(165, 185, 204, 0.8) 50%, transparent 50%);
-    background-position:
-      calc(100% - 18px) calc(50% - 2px),
-      calc(100% - 12px) calc(50% - 2px);
-    background-size:
-      6px 6px,
-      6px 6px;
-    background-repeat: no-repeat;
-    padding-right: 2.7rem;
-  }
-
-  .sqlite-input-with-icon {
-    position: relative;
-    display: flex;
-    align-items: center;
-    min-width: 0;
-  }
-
-  .sqlite-input-with-icon > svg {
-    position: absolute;
-    left: 0.85rem;
-    color: var(--sqlite-muted-soft);
-    pointer-events: none;
-  }
-
-  .sqlite-input-with-icon .sqlite-input {
-    padding-left: 2.55rem;
-  }
-
-  .sqlite-input-search {
-    width: min(100%, 30rem);
-  }
-
-  .sqlite-button,
-  .sqlite-chip,
-  .sqlite-icon-button,
-  .sqlite-workspace-tab,
-  .sqlite-section-tab,
-  .sqlite-connection-row,
-  .sqlite-schema-row,
-  .sqlite-object-row {
-    touch-action: manipulation;
-    -webkit-tap-highlight-color: rgba(130, 50, 255, 0.2);
-    cursor: pointer;
-  }
-
-  .sqlite-button {
-    border: 1px solid var(--sqlite-line);
-    cursor: pointer;
-    transition:
-      border-color 140ms ease,
-      background-color 140ms ease,
-      box-shadow 140ms ease,
-      transform 140ms ease,
-      color 140ms ease;
-  }
-
-  .sqlite-button:disabled,
-  .sqlite-icon-button:disabled,
-  .sqlite-chip:disabled,
-  .sqlite-cell-button:disabled {
-    cursor: not-allowed;
-    opacity: 0.45;
-  }
-
-  .sqlite-button-primary {
-    border-color: rgba(130, 50, 255, 0.3);
-    background: linear-gradient(
-      180deg,
-      rgba(130, 50, 255, 0.98),
-      rgba(105, 33, 214, 0.94)
-    );
-    color: white;
-    box-shadow: 0 12px 32px rgba(72, 28, 142, 0.3);
-  }
-
-  .sqlite-button-primary:hover:not(:disabled) {
-    background: linear-gradient(
-      180deg,
-      rgba(145, 74, 255, 0.98),
-      rgba(114, 42, 227, 0.96)
-    );
-  }
-
-  .sqlite-button-secondary,
-  .sqlite-button-ghost,
-  .sqlite-icon-button,
-  .sqlite-chip,
-  .sqlite-workspace-tab,
-  .sqlite-section-tab {
-    border: 1px solid var(--sqlite-line);
-    background: rgba(255, 255, 255, 0.035);
-    color: rgba(238, 246, 252, 0.9);
-  }
-
-  .sqlite-button-secondary:hover:not(:disabled),
-  .sqlite-button-ghost:hover:not(:disabled),
-  .sqlite-icon-button:hover:not(:disabled),
-  .sqlite-chip:hover:not(:disabled),
-  .sqlite-workspace-tab:hover,
-  .sqlite-section-tab:hover {
-    border-color: var(--sqlite-line-strong);
-    background: rgba(255, 255, 255, 0.07);
-    color: white;
-  }
-
-  .sqlite-icon-button {
-    width: 2.5rem;
-    height: 2.5rem;
-    justify-content: center;
-    flex-shrink: 0;
-  }
-
-  .sqlite-badge,
-  .sqlite-chip,
-  .sqlite-count-pill {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-    min-width: 0;
-    padding: 0.35rem 0.65rem;
-    border-radius: 999px;
-    font-size: 0.72rem;
-    font-weight: 600;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    line-height: 1;
-  }
-
-  .sqlite-badge-neutral,
-  .sqlite-count-pill,
-  .sqlite-chip,
-  .sqlite-chip-static {
-    border: 1px solid var(--sqlite-line);
-    background: rgba(255, 255, 255, 0.04);
-    color: rgba(231, 241, 249, 0.86);
-  }
-
-  .sqlite-badge-accent {
-    border: 1px solid rgba(130, 50, 255, 0.3);
-    background: rgba(130, 50, 255, 0.14);
-    color: rgba(222, 237, 255, 0.95);
-  }
-
-  .sqlite-badge-success {
-    border: 1px solid rgba(79, 206, 146, 0.28);
-    background: var(--sqlite-success-soft);
-    color: rgba(203, 249, 225, 0.95);
-  }
-
-  .sqlite-badge-warning {
-    border: 1px solid rgba(255, 191, 105, 0.26);
-    background: var(--sqlite-warning-soft);
-    color: rgba(255, 232, 196, 0.95);
-  }
-
-  .sqlite-app-body {
-    display: flex;
-    gap: 0.5rem;
-    min-height: 0;
-    height: calc(100vh - 1rem);
-    height: calc(100dvh - 1rem);
-  }
-
-  .sqlite-sidebar-wrap {
-    display: flex;
-    gap: 0.35rem;
-    min-width: 4.5rem;
-    min-height: 0;
-    height: 100%;
-    max-width: min(26rem, 45vw);
-  }
-
-  .sqlite-sidebar-panel,
-  .sqlite-workspace-panel {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    flex: 1;
-    height: 100%;
-  }
-
-  .sqlite-sidebar-header,
-  .sqlite-workspace-header,
-  .sqlite-sidebar-toolbar,
-  .sqlite-subtoolbar,
-  .sqlite-results-header,
-  .sqlite-object-header,
-  .sqlite-status-footer {
-    position: relative;
-    z-index: 1;
-    padding: 0.6rem 0.7rem;
-    border-bottom: 1px solid var(--sqlite-line);
-  }
-
-  .sqlite-status-footer {
-    border-bottom: 0;
-    border-top: 1px solid var(--sqlite-line);
-  }
-
-  .sqlite-sidebar-header,
-  .sqlite-workspace-header,
-  .sqlite-subtoolbar,
-  .sqlite-results-header,
-  .sqlite-object-header,
-  .sqlite-status-footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.6rem;
-    flex-wrap: wrap;
-  }
-
-  .sqlite-sidebar-header,
-  .sqlite-sidebar-toolbar {
-    padding-inline: 0.7rem;
-  }
-
-  .sqlite-sidebar-scroll,
-  .sqlite-workspace-content,
-  .sqlite-results-scroll,
-  .sqlite-editor-gutter {
-    min-height: 0;
-    overflow: auto;
-  }
-
-  .sqlite-sidebar-scroll {
-    flex: 1;
-    padding: 0.55rem;
-  }
-
-  .sqlite-sidebar-skeleton,
-  .sqlite-structure-skeleton,
-  .sqlite-results-loading {
-    display: grid;
-    gap: 0.75rem;
-  }
-
-  .sqlite-sidebar-skeleton-row,
-  .sqlite-structure-skeleton-row,
-  .sqlite-results-loading-bar {
-    position: relative;
-    overflow: hidden;
-    border-radius: 0.9rem;
-    background: rgba(255, 255, 255, 0.06);
-  }
-
-  .sqlite-sidebar-skeleton-row {
-    height: 3.1rem;
-  }
-
-  .sqlite-structure-skeleton-row {
-    height: 4.5rem;
-  }
-
-  .sqlite-results-loading-row {
-    display: grid;
-    gap: 0.75rem;
-    padding: 0.85rem 0.9rem;
-    border-radius: 1rem;
-    border: 1px solid var(--sqlite-line);
-    background: rgba(255, 255, 255, 0.03);
-  }
-
-  .sqlite-results-loading-bar {
-    height: 0.9rem;
-  }
-
-  .sqlite-sidebar-skeleton-row::after,
-  .sqlite-structure-skeleton-row::after,
-  .sqlite-results-loading-bar::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    transform: translateX(-100%);
-    background: linear-gradient(
-      90deg,
-      transparent,
-      rgba(255, 255, 255, 0.12),
-      transparent
-    );
-    animation: sqlite-shimmer 1.2s linear infinite;
-  }
-
-  .sqlite-sidebar-resizer {
-    width: 0.4rem;
-    border-radius: 999px;
-    background: rgba(255, 255, 255, 0.04);
-    cursor: col-resize;
-  }
-
-  .sqlite-sidebar-resizer:hover {
-    background: rgba(130, 50, 255, 0.2);
-  }
-
-  .sqlite-workspace {
-    min-width: 0;
-    flex: 1;
-    display: flex;
-    min-height: 0;
-  }
-
-  .sqlite-workspace-header {
-    align-items: center;
-  }
-
-  .sqlite-workspace-tabs,
-  .sqlite-section-tabs {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-    padding: 0.2rem;
-    border-radius: 0.85rem;
-    border: 1px solid var(--sqlite-line);
-    background: rgba(255, 255, 255, 0.03);
-  }
-
-  .sqlite-workspace-tab,
-  .sqlite-section-tab {
-    border-radius: 0.7rem;
-    padding: 0.5rem 0.75rem;
-    font-size: 0.9rem;
-    font-weight: 600;
-  }
-
-  .sqlite-workspace-tab.is-active,
-  .sqlite-section-tab.is-active {
-    border-color: rgba(130, 50, 255, 0.28);
-    background: var(--sqlite-accent-soft);
-    color: white;
-  }
-
-  .sqlite-workspace-content {
-    padding: 0.5rem;
-    display: flex;
-    flex: 1;
-    min-height: 0;
-    height: 100%;
-  }
-
-  .sqlite-empty-state {
-    display: grid;
-    place-items: center;
-    gap: 1rem;
-    min-height: 100%;
-    border: 1px dashed var(--sqlite-line);
-    border-radius: 1.2rem;
-    background: rgba(255, 255, 255, 0.02);
-    padding: 1.5rem;
-  }
-
-  .sqlite-empty-state-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 3.2rem;
-    height: 3.2rem;
-    border-radius: 1rem;
-    border: 1px solid var(--sqlite-line);
-    background: rgba(255, 255, 255, 0.03);
-    color: var(--sqlite-muted);
-  }
-
-  .sqlite-eyebrow {
-    margin: 0;
-    color: var(--sqlite-muted-soft);
-    font-size: 0.72rem;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-    font-weight: 600;
-  }
-
-  .sqlite-helper-text {
-    margin: 0.2rem 0 0;
-    color: var(--sqlite-muted);
-    font-size: 0.82rem;
-    line-height: 1.45;
-  }
-
-  .sqlite-section-title,
-  .sqlite-detail-card-title {
-    margin: 0;
-    font-size: 0.94rem;
-    font-weight: 600;
-    text-wrap: balance;
-  }
-
-  .sqlite-field {
-    display: grid;
-    gap: 0.35rem;
-    min-width: 0;
-  }
-
-  .sqlite-field label {
-    color: var(--sqlite-muted-soft);
-    font-size: 0.72rem;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    font-weight: 600;
-  }
-
-  .sqlite-field-compact {
-    min-width: min(14rem, 100%);
-  }
-
-  .sqlite-field-inline {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    min-width: auto;
-  }
-
-  .sqlite-field-inline label {
-    white-space: nowrap;
-  }
-
-  .sqlite-field-inline .sqlite-select {
-    width: auto;
-    min-width: 5.5rem;
-  }
-
-  .sqlite-field-grow {
-    flex: 1 1 auto;
-  }
-
-  .sqlite-subtoolbar-group-grow {
-    flex: 1 1 20rem;
-  }
-
-  .sqlite-subtoolbar-group-grow .sqlite-field {
-    width: 100%;
-  }
-
-  .sqlite-content-stack,
-  .sqlite-query-layout,
-  .sqlite-query-editor-pane,
-  .sqlite-query-results-pane,
-  .sqlite-main-pane,
-  .sqlite-editor-frame,
-  .sqlite-results-panel,
-  .sqlite-structure-panel {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    flex: 1;
-  }
-
-  .sqlite-query-layout,
-  .sqlite-content-stack,
-  .sqlite-main-pane,
-  .sqlite-structure-panel,
-  .sqlite-results-panel,
-  .sqlite-editor-frame {
-    border: 1px solid var(--sqlite-line);
-    border-radius: 1.25rem;
-    background: linear-gradient(
-      180deg,
-      rgba(10, 18, 29, 0.98),
-      rgba(8, 15, 24, 0.98)
-    );
-  }
-
-  .sqlite-content-stack,
-  .sqlite-main-stack,
-  .sqlite-main-pane,
-  .sqlite-structure-panel,
-  .sqlite-results-panel,
-  .sqlite-editor-frame {
-    overflow: hidden;
-  }
-
-  .sqlite-results-panel,
-  .sqlite-structure-panel-flush {
-    border-radius: 0;
-  }
-
-  .sqlite-query-layout,
-  .sqlite-editor-frame {
-    border-radius: 0;
-  }
-
-  .sqlite-query-layout {
-    min-height: 22rem;
-    height: 100%;
-  }
-
-  .sqlite-query-editor-pane {
-    min-height: 0;
-  }
-
-  .sqlite-query-results-pane {
-    min-height: 0;
-    flex: 1 1 0;
-  }
-
-  .sqlite-main-stack {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    gap: 0.5rem;
-    min-height: 0;
-    height: 100%;
-  }
-
-  .sqlite-main-tabs {
-    align-self: flex-start;
-    flex-shrink: 0;
-  }
-
   .sqlite-editor-shell {
     display: flex;
     width: 100%;
@@ -811,15 +60,16 @@
     flex: 1 1 auto;
     height: 100%;
     background: transparent;
-    color: var(--sqlite-text);
+    color: var(--foreground);
   }
 
   .sqlite-editor-shell .cm-scroller {
-    align-items: stretch;
+    display: flex;
     width: 100%;
     height: 100%;
-    flex: 1 1 auto;
     min-height: 0;
+    flex: 1 1 auto;
+    align-items: stretch;
     line-height: 1.55;
   }
 
@@ -872,6 +122,7 @@
 
   .sqlite-editor-shell .cm-placeholder {
     font-style: italic;
+    color: var(--muted);
   }
 
   .sqlite-editor-shell .cm-activeLine {
@@ -879,11 +130,7 @@
   }
 
   .sqlite-editor-shell .cm-sqlite-errorLine {
-    background: linear-gradient(
-      90deg,
-      rgba(255, 123, 123, 0.16),
-      rgba(255, 123, 123, 0.08)
-    );
+    background: color-mix(in srgb, var(--danger) 16%, transparent);
   }
 
   .sqlite-editor-shell .cm-tooltip-autocomplete {
@@ -896,9 +143,9 @@
   }
 
   .sqlite-editor-shell .cm-tooltip-autocomplete ul li {
-    border-radius: 0.6rem;
     margin: 0.1rem 0;
     padding-block: 0.32rem;
+    border-radius: 0.6rem;
   }
 
   .sqlite-editor-shell .cm-completionLabel,
@@ -915,501 +162,4 @@
     padding: 0.75rem 0.85rem;
     backdrop-filter: blur(14px);
   }
-
-  .sqlite-view-splitter {
-    position: relative;
-    flex-shrink: 0;
-    height: 0.8rem;
-    cursor: row-resize;
-    border-top: 1px solid var(--sqlite-line);
-    border-bottom: 1px solid var(--sqlite-line);
-    background: rgba(255, 255, 255, 0.02);
-  }
-
-  .sqlite-view-splitter::before {
-    content: '';
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    width: 4rem;
-    height: 0.18rem;
-    transform: translate(-50%, -50%);
-    border-radius: 999px;
-    background: rgba(165, 185, 204, 0.42);
-  }
-
-  .sqlite-results-header,
-  .sqlite-object-header,
-  .sqlite-subtoolbar,
-  .sqlite-status-footer {
-    background: rgba(255, 255, 255, 0.018);
-  }
-
-  .sqlite-inline-error {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 0.6rem;
-    flex-wrap: wrap;
-    margin: 0.7rem;
-    padding: 0.7rem 0.8rem;
-    border: 1px solid rgba(255, 123, 123, 0.28);
-    border-radius: 1rem;
-    background: rgba(255, 123, 123, 0.1);
-  }
-
-  .sqlite-query-statement-switcher {
-    min-width: 0;
-    flex: 1 1 auto;
-    max-width: 100%;
-  }
-
-  .sqlite-query-statement-switcher .sqlite-select {
-    width: 100%;
-    min-width: 0;
-    max-width: 100%;
-  }
-
-  .sqlite-query-results-header {
-    flex-wrap: nowrap;
-  }
-
-  .sqlite-query-results-header .sqlite-toolbar-actions {
-    min-width: 0;
-    flex-wrap: nowrap;
-  }
-
-  .sqlite-query-results-header-main {
-    flex: 1 1 auto;
-    overflow: hidden;
-  }
-
-  .sqlite-query-results-header-main .sqlite-helper-text {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .sqlite-query-results-header-actions {
-    flex: 0 0 auto;
-  }
-
-  .sqlite-results-shell,
-  .sqlite-metadata-table-wrap {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    flex: 1;
-  }
-
-  .sqlite-results-scroll,
-  .sqlite-metadata-table-wrap,
-  .sqlite-structure-panel {
-    padding: 0.6rem;
-  }
-
-  .sqlite-results-scroll {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-height: 0;
-  }
-
-  .sqlite-results-scroll-flush {
-    padding: 0;
-  }
-
-  .sqlite-metadata-table-wrap-flush,
-  .sqlite-structure-panel-flush {
-    padding: 0;
-  }
-
-  .sqlite-results-empty {
-    display: grid;
-    flex: 1;
-    place-items: center;
-    min-height: 12rem;
-    border: 1px dashed var(--sqlite-line);
-    border-radius: 1rem;
-    background: rgba(255, 255, 255, 0.02);
-    padding: 1.1rem;
-  }
-
-  .sqlite-results-table,
-  .sqlite-metadata-table {
-    width: 100%;
-    display: grid;
-    border-collapse: separate;
-    border-spacing: 0;
-    table-layout: fixed;
-  }
-
-  .sqlite-results-table thead,
-  .sqlite-metadata-table thead,
-  .sqlite-results-table tbody,
-  .sqlite-metadata-table tbody {
-    display: grid;
-  }
-
-  .sqlite-results-table tbody,
-  .sqlite-metadata-table tbody {
-    position: relative;
-  }
-
-  .sqlite-table-row-shell,
-  .sqlite-results-table tbody tr,
-  .sqlite-metadata-table tbody tr {
-    display: flex;
-    width: 100%;
-  }
-
-  .sqlite-results-table tbody tr,
-  .sqlite-metadata-table tbody tr {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-
-  .sqlite-results-table thead th,
-  .sqlite-metadata-table thead th {
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    background: rgba(8, 17, 26, 0.98);
-    color: rgba(200, 216, 230, 0.76);
-    font-size: 0.68rem;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    text-align: left;
-    line-height: 1.2;
-    padding: 0.55rem 0.65rem;
-    border-bottom: 1px solid var(--sqlite-line);
-    display: flex;
-  }
-
-  .sqlite-results-table tbody td,
-  .sqlite-metadata-table tbody td {
-    padding: 0.55rem 0.65rem;
-    border-bottom: 1px solid rgba(167, 194, 220, 0.08);
-    vertical-align: top;
-    line-height: 1.35;
-    color: rgba(240, 246, 251, 0.92);
-    display: flex;
-    align-items: flex-start;
-  }
-
-  .sqlite-results-table tbody tr:hover td,
-  .sqlite-metadata-table tbody tr:hover td {
-    background: rgba(130, 50, 255, 0.05);
-  }
-
-  .sqlite-results-number-col,
-  .sqlite-results-row-number {
-    width: 4.5rem;
-  }
-
-  .sqlite-results-row-number {
-    color: var(--sqlite-muted-soft);
-  }
-
-  .sqlite-results-row {
-    cursor: pointer;
-  }
-
-  .sqlite-results-row:focus-visible {
-    outline: none;
-  }
-
-  .sqlite-results-row:focus-visible td {
-    background: rgba(130, 50, 255, 0.08);
-    box-shadow:
-      inset 0 1px 0 rgba(130, 50, 255, 0.18),
-      inset 0 -1px 0 rgba(130, 50, 255, 0.18);
-  }
-
-  .sqlite-table-header-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.4rem;
-    min-width: 0;
-    padding-right: 0.45rem;
-  }
-
-  .sqlite-column-resizer {
-    position: absolute;
-    top: 0.35rem;
-    right: -0.45rem;
-    width: 0.9rem;
-    height: calc(100% - 0.7rem);
-    cursor: col-resize;
-    touch-action: none;
-    user-select: none;
-    z-index: 3;
-  }
-
-  .sqlite-column-resizer::before {
-    content: '';
-    position: absolute;
-    left: 50%;
-    top: 0;
-    width: 1px;
-    height: 100%;
-    transform: translateX(-50%);
-    border-radius: 999px;
-    background: rgba(167, 194, 220, 0.28);
-    transition:
-      background-color 140ms ease,
-      box-shadow 140ms ease;
-  }
-
-  .sqlite-column-resizer:hover::before,
-  .sqlite-column-resizer.is-active::before {
-    background: rgba(130, 50, 255, 0.92);
-    box-shadow: 0 0 0 1px rgba(130, 50, 255, 0.22);
-  }
-
-  .sqlite-column-resizer:focus-visible::before {
-    background: rgba(130, 50, 255, 0.92);
-    box-shadow:
-      0 0 0 1px rgba(130, 50, 255, 0.22),
-      0 0 0 4px rgba(130, 50, 255, 0.08);
-  }
-
-  .sqlite-table-column-resizing {
-    background: rgba(130, 50, 255, 0.06);
-  }
-
-  .sqlite-cell-kind,
-  .sqlite-object-section-title,
-  .sqlite-tree-empty {
-    color: var(--sqlite-muted-soft);
-    font-size: 0.72rem;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-  }
-
-  .sqlite-cell-value {
-    display: grid;
-    gap: 0.2rem;
-    width: 100%;
-    min-width: 0;
-    text-align: left;
-  }
-
-  .sqlite-cell-preview {
-    color: rgba(241, 247, 251, 0.94);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 0;
-  }
-
-  .sqlite-cell-kind {
-    white-space: nowrap;
-  }
-
-  .sqlite-connection-list,
-  .sqlite-tree-shell,
-  .sqlite-object-list,
-  .sqlite-schema-content {
-    display: grid;
-    gap: 0.55rem;
-    min-width: 0;
-  }
-
-  .sqlite-connection-card,
-  .sqlite-schema-group {
-    display: grid;
-    gap: 0.3rem;
-    min-width: 0;
-  }
-
-  .sqlite-tree-shell {
-    padding-left: 0.45rem;
-  }
-
-  .sqlite-connection-row,
-  .sqlite-schema-row,
-  .sqlite-object-row {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    min-width: 0;
-    width: 100%;
-    padding: 0.58rem 0.7rem;
-    border-radius: 0.85rem;
-    border: 1px solid transparent;
-    background: rgba(255, 255, 255, 0.025);
-    color: rgba(238, 246, 252, 0.9);
-    text-align: left;
-    cursor: pointer;
-    transition:
-      background-color 140ms ease,
-      border-color 140ms ease,
-      color 140ms ease,
-      transform 140ms ease;
-  }
-
-  .sqlite-connection-row:hover,
-  .sqlite-schema-row:hover,
-  .sqlite-object-row:hover {
-    background: rgba(255, 255, 255, 0.055);
-    color: white;
-  }
-
-  .sqlite-object-row.is-active {
-    border-color: rgba(130, 50, 255, 0.24);
-    background: rgba(130, 50, 255, 0.12);
-    color: white;
-  }
-
-  .sqlite-schema-content {
-    padding-left: 0.85rem;
-    border-left: 1px solid rgba(167, 194, 220, 0.08);
-  }
-
-  .sqlite-inline-stat {
-    color: var(--sqlite-muted);
-    font-size: 0.76rem;
-  }
-
-  .sqlite-structure-grid {
-    display: grid;
-    gap: 0.85rem;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .sqlite-detail-card,
-  .sqlite-key-row {
-    border: 1px solid var(--sqlite-line);
-    border-radius: 1rem;
-    background: rgba(255, 255, 255, 0.03);
-  }
-
-  .sqlite-detail-card {
-    padding: 0.8rem;
-  }
-
-  .sqlite-detail-card > header {
-    margin-bottom: 0.75rem;
-  }
-
-  .sqlite-key-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.6rem;
-    padding: 0.65rem 0.75rem;
-  }
-
-  .sqlite-key-row > div {
-    min-width: 0;
-  }
-
-  .sqlite-status-footer {
-    color: var(--sqlite-muted);
-    font-size: 0.76rem;
-  }
-
-  .sqlite-tree-empty {
-    padding: 0.7rem;
-    border: 1px dashed var(--sqlite-line);
-    border-radius: 0.95rem;
-    background: rgba(255, 255, 255, 0.02);
-  }
-
-  .sqlite-object-section-title {
-    margin: 0 0 0.15rem;
-  }
-
-  .sqlite-chip {
-    cursor: pointer;
-  }
-
-  .sqlite-chip-static {
-    cursor: default;
-  }
-
-  .sqlite-panel-shell .button[data-variant='ghost'] {
-    border-color: var(--sqlite-line);
-    background: rgba(255, 255, 255, 0.03);
-    color: rgba(226, 232, 240, 0.9);
-  }
-
-  .sqlite-panel-shell .button[data-variant='ghost']:hover {
-    border-color: var(--sqlite-line-strong);
-    background: rgba(255, 255, 255, 0.07);
-  }
-
-  .sqlite-panel-shell .drawer__dialog,
-  .sqlite-panel-shell .modal__dialog {
-    border-color: var(--sqlite-line-strong);
-    background: linear-gradient(
-      180deg,
-      rgba(11, 20, 30, 0.98),
-      rgba(7, 13, 21, 0.98)
-    );
-    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
-  }
-
-  .sqlite-panel-shell .drawer__backdrop,
-  .sqlite-panel-shell .modal__backdrop {
-    background: rgba(2, 6, 12, 0.66);
-    backdrop-filter: blur(18px);
-    overscroll-behavior: contain;
-  }
-
-  .sqlite-panel-shell .tabs__tab {
-    color: rgba(148, 163, 184, 0.9);
-  }
-
-  .sqlite-panel-shell .tabs__tab[data-selected='true'] {
-    background: var(--sqlite-accent-soft);
-    color: white;
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-
-  @media (max-width: 1180px) {
-    .sqlite-topbar {
-      grid-template-columns: 1fr;
-    }
-
-    .sqlite-topbar-search,
-    .sqlite-topbar-section {
-      justify-content: flex-start;
-    }
-
-    .sqlite-structure-grid {
-      grid-template-columns: 1fr;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-      scroll-behavior: auto !important;
-    }
-  }
-
-  @keyframes sqlite-shimmer {
-    to {
-      transform: translateX(100%);
-    }
-  }
 }
diff --git a/packages/sqlite-plugin/src/ui/panel.tsx b/packages/sqlite-plugin/src/ui/panel.tsx
index 3e86df5f..c863f193 100644
--- a/packages/sqlite-plugin/src/ui/panel.tsx
+++ b/packages/sqlite-plugin/src/ui/panel.tsx
@@ -1,4 +1,16 @@
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import {
+  Button,
+  Card,
+  Chip,
+  ListBox,
+  PluginHeader,
+  PluginTheme,
+  SearchField,
+  Select,
+  Surface,
+  Tabs,
+} from '@rozenite/ui';
 import type { CompletionSource } from '@codemirror/autocomplete';
 import type { ColumnDef, Updater } from '@tanstack/react-table';
 import {
@@ -7,8 +19,9 @@ import {
   useMemo,
   useRef,
   useState,
-  type ChangeEvent,
+  type CSSProperties,
   type PointerEvent as ReactPointerEvent,
+  type ReactNode,
 } from 'react';
 import {
   ChevronDown,
@@ -22,7 +35,6 @@ import {
   Pencil,
   Play,
   RefreshCw,
-  Search,
   Table2,
   TerminalSquare,
   Trash2,
@@ -306,16 +318,86 @@ const buildExplorerGroups = (
     .filter((group) => group.visible);
 };
 
-const toneButtonClassName =
-  'sqlite-button inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2 text-sm font-medium';
+type SelectOption = {
+  id: string;
+  label: string;
+};
 
-const secondaryButtonClassName = `${toneButtonClassName} sqlite-button-secondary`;
-const ghostButtonClassName = `${toneButtonClassName} sqlite-button-ghost`;
-const iconButtonClassName =
-  'sqlite-icon-button inline-flex h-10 w-10 items-center justify-center rounded-xl';
-const primaryIconButtonClassName = `${iconButtonClassName} sqlite-button-primary`;
-const secondaryIconButtonClassName = `${iconButtonClassName} sqlite-button-secondary`;
-const ghostIconButtonClassName = `${iconButtonClassName} sqlite-button-ghost`;
+const SharedSelect = ({
+  ariaLabel,
+  className,
+  isDisabled = false,
+  options,
+  placeholder,
+  value,
+  onChange,
+}: {
+  ariaLabel: string;
+  className?: string;
+  isDisabled?: boolean;
+  options: SelectOption[];
+  placeholder?: string;
+  value: string | null;
+  onChange: (value: string | null) => void;
+}) => (
+  <Select
+    aria-label={ariaLabel}
+    className={className}
+    isDisabled={isDisabled}
+    onChange={(nextValue) =>
+      onChange(nextValue == null ? null : String(nextValue))
+    }
+    placeholder={placeholder}
+    value={value ?? ''}
+    variant="secondary"
+  >
+    <Select.Trigger>
+      <Select.Value />
+      <Select.Indicator />
+    </Select.Trigger>
+    <Select.Popover>
+      <ListBox aria-label={ariaLabel}>
+        {options.map((option) => (
+          <ListBox.Item
+            key={option.id}
+            id={option.id}
+            textValue={option.label}
+          >
+            {option.label}
+            <ListBox.ItemIndicator />
+          </ListBox.Item>
+        ))}
+      </ListBox>
+    </Select.Popover>
+  </Select>
+);
+
+const InlineError = ({
+  title,
+  message,
+  action,
+  className,
+}: {
+  title: string;
+  message: ReactNode;
+  action?: ReactNode;
+  className?: string;
+}) => (
+  <Surface
+    aria-live="polite"
+    className={joinClassNames(
+      'mx-3 mt-3 flex flex-wrap items-start justify-between gap-3 rounded-xl border border-danger/35 bg-danger/10 px-4 py-3 text-danger',
+      className,
+    )}
+    variant="secondary"
+  >
+    <div>
+      <p className="font-medium">{title}</p>
+      <p className="mt-1 text-sm text-danger">{message}</p>
+    </div>
+    {action}
+  </Surface>
+);
 
 const renderEmptyState = (
   title: string,
@@ -327,23 +409,68 @@ const renderEmptyState = (
       ? TerminalSquare
       : icon === 'structure'
         ? FolderTree
-        : icon === 'table'
+      : icon === 'table'
           ? Table2
           : Database;
 
   return (
-    <div className="sqlite-empty-state">
-      <div className="sqlite-empty-state-icon">
-        <Icon aria-hidden="true" className="h-6 w-6" />
+    <Surface
+      className="flex min-h-[16rem] flex-1 flex-col items-center justify-center gap-4 rounded-xl border border-dashed border-border/70 bg-surface-secondary/50 px-6 py-8 text-center"
+      variant="secondary"
+    >
+      <div className="flex size-12 items-center justify-center rounded-xl border border-border/70 bg-surface-tertiary text-muted">
+        <Icon aria-hidden="true" className="size-5" />
       </div>
       <div className="max-w-md space-y-2 text-center">
-        <h2 className="text-lg font-semibold text-white">{title}</h2>
-        <p className="text-sm leading-6 text-slate-400">{description}</p>
+        <h2 className="text-lg font-semibold text-foreground">{title}</h2>
+        <p className="text-sm leading-6 text-muted">{description}</p>
       </div>
-    </div>
+    </Surface>
   );
 };
 
+const PANEL_CLASS_NAME =
+  'flex min-h-0 min-w-0 w-full flex-1 flex-col overflow-hidden rounded-[1.4rem] border border-border/60 bg-surface';
+const WORKSPACE_PANEL_CLASS_NAME =
+  "relative flex min-h-0 min-w-0 w-full flex-1 flex-col overflow-hidden rounded-[1.4rem] border border-border/60 bg-surface before:absolute before:inset-x-6 before:top-0 before:h-px before:rounded-full before:bg-accent/40 before:content-['']";
+const CONTENT_PANEL_CLASS_NAME =
+  'flex min-h-0 min-w-0 w-full flex-1 flex-col overflow-hidden rounded-[1.2rem] border border-border/60 bg-surface';
+const QUERY_SECTION_CLASS_NAME =
+  'flex min-h-0 min-w-0 w-full flex-col overflow-hidden';
+const QUERY_SECTION_HEADER_CLASS_NAME =
+  'flex flex-wrap items-center justify-between gap-3 px-4 py-3';
+const PANEL_HEADER_CLASS_NAME =
+  'flex flex-wrap items-center justify-between gap-3 border-b border-border/60 px-4 py-3';
+const PANEL_SECTION_HEADER_CLASS_NAME =
+  'flex items-center justify-between gap-3 border-b border-border/60 px-4 py-3';
+const INLINE_STAT_CLASS_NAME =
+  'sqlite-tabular inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs text-muted';
+const TREE_STACK_CLASS_NAME = 'grid min-w-0 gap-2';
+const TREE_GROUP_CLASS_NAME = 'grid min-w-0 gap-1.5';
+const TREE_BUTTON_CLASS_NAME =
+  'flex w-full min-w-0 items-center gap-2 rounded-xl border border-transparent bg-transparent px-3 py-2.5 text-left text-foreground transition-colors hover:bg-surface-secondary';
+const TREE_ACTIVE_BUTTON_CLASS_NAME = 'border-accent/30 bg-accent/10';
+const TREE_SECTION_TITLE_CLASS_NAME =
+  'm-0 text-[0.72rem] uppercase tracking-[0.08em] text-muted';
+const SKELETON_ROW_CLASS_NAME = 'h-12 animate-pulse rounded-2xl bg-surface-tertiary';
+const STRUCTURE_SKELETON_ROW_CLASS_NAME =
+  'h-[4.5rem] animate-pulse rounded-2xl bg-surface-tertiary';
+
+const InlineStat = ({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) => (
+  <Surface
+    className={joinClassNames(INLINE_STAT_CLASS_NAME, className)}
+    variant="secondary"
+  >
+    {children}
+  </Surface>
+);
+
 export default function SqlitePanel() {
   const client = useRozeniteDevToolsClient<SqliteEventMap>({
     pluginId: PLUGIN_ID,
@@ -362,7 +489,7 @@ export default function SqlitePanel() {
 
   const [activeTab, setActiveTab] = useState<ActiveTab>('query');
   const [sidebarWidth, setSidebarWidth] = useState(304);
-  const [editorSplit, setEditorSplit] = useState(50);
+  const [editorSplit, setEditorSplit] = useState(60);
   const [expandedDatabaseIds, setExpandedDatabaseIds] = useState<string[]>([]);
   const [expandedSchemaKeys, setExpandedSchemaKeys] = useState<string[]>([]);
   const [structureSection, setStructureSection] =
@@ -668,7 +795,10 @@ export default function SqlitePanel() {
     [selectedQueryStatement],
   );
 
-  const selectedQueryStatementValue = selectedQueryStatement?.index ?? '';
+  const selectedQueryStatementValue =
+    selectedQueryStatement?.index != null
+      ? String(selectedQueryStatement.index)
+      : null;
 
   const queryTableId = useMemo(
     () =>
@@ -1524,6 +1654,8 @@ export default function SqlitePanel() {
       }
 
       event.preventDefault();
+      event.stopPropagation();
+      event.currentTarget.setPointerCapture?.(event.pointerId);
 
       const startX = event.clientX;
       const startWidth = sidebarWidth;
@@ -1564,6 +1696,8 @@ export default function SqlitePanel() {
       }
 
       event.preventDefault();
+      event.stopPropagation();
+      event.currentTarget.setPointerCapture?.(event.pointerId);
 
       const rect = container.getBoundingClientRect();
       const totalHeight = rect.height;
@@ -1760,46 +1894,70 @@ export default function SqlitePanel() {
     return () => readySubscription.remove();
   }, [client, refreshExplorerData]);
 
+  const queryStatementOptions = useMemo(
+    () =>
+      (queryExecution?.statements ?? []).map((statement) => ({
+        id: String(statement.index),
+        label: getStatementSelectorLabel(statement),
+      })),
+    [queryExecution],
+  );
+  const queryLimitOptions = useMemo<SelectOption[]>(
+    () => [25, 50, 100, 250, 500].map((value) => ({
+      id: String(value),
+      label: String(value),
+    })),
+    [],
+  );
+  const pageSizeOptions = useMemo<SelectOption[]>(
+    () => [25, 50, 100].map((value) => ({
+      id: String(value),
+      label: String(value),
+    })),
+    [],
+  );
+
   const queryTabHeader = (
-    <div className="sqlite-subtoolbar">
-      <div className="sqlite-subtoolbar-group">
-        <button
-          type="button"
-          className={primaryIconButtonClassName}
-          onClick={() => void handleRun()}
-          disabled={!selectedDatabaseId || queryLoading || !queryInput.trim()}
+    <div className={QUERY_SECTION_HEADER_CLASS_NAME}>
+      <div className="flex items-center gap-2">
+        <Button
           aria-label="Run all statements"
-          title="Run all statements"
+          isDisabled={!selectedDatabaseId || queryLoading || !queryInput.trim()}
+          isIconOnly
+          onPress={() => void handleRun()}
+          size="sm"
+          variant="primary"
         >
-          <Play aria-hidden="true" className="h-4 w-4" />
-        </button>
+          <Play aria-hidden="true" className="size-4" />
+        </Button>
       </div>
 
-      <div className="sqlite-subtoolbar-group">
-        <button
-          type="button"
-          className={secondaryIconButtonClassName}
-          onClick={handleFormatQuery}
-          disabled={!queryInput.trim()}
+      <div className="flex flex-wrap items-center gap-2">
+        <Button
           aria-label="Format SQL"
-          title="Format SQL"
+          isDisabled={!queryInput.trim()}
+          isIconOnly
+          onPress={handleFormatQuery}
+          size="sm"
+          variant="secondary"
         >
-          <Wand2 aria-hidden="true" className="h-4 w-4" />
-        </button>
-        <button
-          type="button"
-          className={secondaryIconButtonClassName}
-          onClick={handleSaveQuery}
-          disabled={!queryInput.trim()}
+          <Wand2 aria-hidden="true" className="size-4" />
+        </Button>
+        <Button
           aria-label="Save query"
-          title="Save query"
+          isDisabled={!queryInput.trim()}
+          isIconOnly
+          onPress={handleSaveQuery}
+          size="sm"
+          variant="secondary"
         >
-          <Download aria-hidden="true" className="h-4 w-4" />
-        </button>
-        <button
-          type="button"
-          className={ghostIconButtonClassName}
-          onClick={() => {
+          <Download aria-hidden="true" className="size-4" />
+        </Button>
+        <Button
+          aria-label="Clear query"
+          isDisabled={!queryInput && !queryExecution && !queryError}
+          isIconOnly
+          onPress={() => {
             setQueryInput('');
             setQueryExecution(null);
             setSelectedQueryStatementIndex(null);
@@ -1808,12 +1966,11 @@ export default function SqlitePanel() {
             setQueryMessage('Cleared the query editor.');
             queueMicrotask(() => editorRef.current?.focus());
           }}
-          disabled={!queryInput && !queryExecution && !queryError}
-          aria-label="Clear query"
-          title="Clear query"
+          size="sm"
+          variant="ghost"
         >
-          <X aria-hidden="true" className="h-4 w-4" />
-        </button>
+          <X aria-hidden="true" className="size-4" />
+        </Button>
       </div>
     </div>
   );
@@ -1825,13 +1982,16 @@ export default function SqlitePanel() {
       'database',
     )
   ) : (
-    <div ref={querySplitRef} className="sqlite-query-layout">
+    <section
+      ref={querySplitRef}
+      className={joinClassNames(CONTENT_PANEL_CLASS_NAME, 'min-h-[32rem]')}
+    >
       <section
-        className="sqlite-query-editor-pane"
+        className={QUERY_SECTION_CLASS_NAME}
         style={{ flex: `0 0 ${editorSplit}%` }}
       >
         {queryTabHeader}
-        <div className="sqlite-editor-frame">
+        <div className="flex min-h-0 min-w-0 flex-1 border-t border-border/60 bg-background">
           <SqlEditor
             ref={editorRef}
             ariaLabel="SQL query editor"
@@ -1864,116 +2024,113 @@ export default function SqlitePanel() {
         role="separator"
         aria-orientation="horizontal"
         aria-label="Resize query editor and results"
-        className="sqlite-view-splitter"
+        className="relative h-4 shrink-0 cursor-row-resize border-y border-border/60 bg-surface/90 before:absolute before:left-1/2 before:top-1/2 before:h-0.5 before:w-16 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-muted/70 before:content-['']"
         onPointerDown={handleQuerySplitResizeStart}
       />
 
-      <section className="sqlite-query-results-pane">
-        <div className="sqlite-results-header sqlite-query-results-header">
-          <div className="sqlite-toolbar-actions sqlite-query-results-header-main">
+      <section
+        className={joinClassNames(
+          QUERY_SECTION_CLASS_NAME,
+          'min-h-0 flex-1 border-t border-border/60',
+        )}
+      >
+        <div
+          className={joinClassNames(
+            QUERY_SECTION_HEADER_CLASS_NAME,
+            'border-b border-border/60',
+          )}
+        >
+          <div className="flex min-w-0 flex-1 flex-wrap items-center gap-3">
             {!queryExecution ? (
-              <span className="sqlite-helper-text">
+              <p className="truncate text-sm text-muted">
                 Run SQL to inspect per-statement results.
-              </span>
+              </p>
             ) : null}
 
             {queryExecution && queryExecution.statements.length > 1 ? (
-              <div className="sqlite-query-statement-switcher">
-                <select
-                  id="sqlite-query-statement-select"
-                  aria-label="Selected query statement result"
-                  name="queryStatementResult"
-                  autoComplete="off"
-                  className="sqlite-select"
-                  value={selectedQueryStatementValue}
-                  onChange={(event: ChangeEvent<HTMLSelectElement>) => {
-                    setSelectedQueryStatementIndex(Number(event.target.value));
-                  }}
-                >
-                  {queryExecution.statements.map((statement) => {
-                    return (
-                      <option key={statement.index} value={statement.index}>
-                        {getStatementSelectorLabel(statement)}
-                      </option>
+              <div className="min-w-0 flex-1 basis-[22rem]">
+                <SharedSelect
+                  ariaLabel="Selected query statement result"
+                  className="w-full"
+                  onChange={(value) => {
+                    setSelectedQueryStatementIndex(
+                      value == null ? null : Number(value),
                     );
-                  })}
-                </select>
+                  }}
+                  options={queryStatementOptions}
+                  value={selectedQueryStatementValue}
+                />
               </div>
             ) : null}
           </div>
 
-          <div className="sqlite-toolbar-actions ml-auto sqlite-query-results-header-actions">
-            <div className="sqlite-field sqlite-field-inline">
-              <label htmlFor="sqlite-query-limit">Row Limit</label>
-              <select
-                id="sqlite-query-limit"
-                aria-label="Default query row limit"
-                name="queryLimit"
-                autoComplete="off"
-                className="sqlite-select"
-                value={queryRowLimit}
-                onChange={(event: ChangeEvent<HTMLSelectElement>) => {
-                  setQueryRowLimit(Number(event.target.value));
+          <div className="flex flex-wrap items-center gap-2">
+            <div className="flex items-center gap-2">
+              <span className="text-xs font-medium uppercase tracking-[0.16em] text-muted">
+                Row Limit
+              </span>
+              <SharedSelect
+                ariaLabel="Default query row limit"
+                className="w-24"
+                onChange={(value) => {
+                  if (value != null) {
+                    setQueryRowLimit(Number(value));
+                  }
                 }}
-              >
-                {[25, 50, 100, 250, 500].map((value) => (
-                  <option key={value} value={value}>
-                    {value}
-                  </option>
-                ))}
-              </select>
+                options={queryLimitOptions}
+                value={String(queryRowLimit)}
+              />
             </div>
-            <button
-              type="button"
-              className={secondaryIconButtonClassName}
-              onClick={handleCopyResults}
-              disabled={!activeQueryResult}
+            <Button
               aria-label="Copy results"
-              title="Copy results"
+              isDisabled={!activeQueryResult}
+              isIconOnly
+              onPress={() => void handleCopyResults()}
+              size="sm"
+              variant="secondary"
             >
-              <Copy aria-hidden="true" className="h-4 w-4" />
-            </button>
-            <button
-              type="button"
-              className={secondaryIconButtonClassName}
-              onClick={handleExportResults}
-              disabled={!activeQueryResult}
+              <Copy aria-hidden="true" className="size-4" />
+            </Button>
+            <Button
               aria-label="Export results"
-              title="Export results"
+              isDisabled={!activeQueryResult}
+              isIconOnly
+              onPress={() => void handleExportResults()}
+              size="sm"
+              variant="secondary"
             >
-              <Download aria-hidden="true" className="h-4 w-4" />
-            </button>
+              <Download aria-hidden="true" className="size-4" />
+            </Button>
           </div>
         </div>
 
         {queryError ? (
-          <div className="sqlite-inline-error" aria-live="polite">
-            <div>
-              <p className="font-medium text-rose-100">
-                {(queryExecution?.totalStatementCount ??
-                  queryStatements.length) > 1
-                  ? 'Script Error'
-                  : 'SQL Error'}
-              </p>
-              <p className="mt-1 text-sm text-rose-100/90">{queryError}</p>
-              {queryErrorLine ? (
-                <p className="mt-1 text-xs text-rose-100/70">
-                  Approximate location: line {formatNumber(queryErrorLine)}
-                </p>
-              ) : null}
-            </div>
-            <button
-              type="button"
-              className={ghostButtonClassName}
-              onClick={handleCopyError}
-            >
-              <Copy aria-hidden="true" className="h-4 w-4" />
-              Copy Error
-            </button>
-          </div>
+          <InlineError
+            action={
+              <Button onPress={() => void handleCopyError()} size="sm" variant="ghost">
+                <Copy aria-hidden="true" className="size-4" />
+                Copy Error
+              </Button>
+            }
+            message={
+              <>
+                {queryError}
+                {queryErrorLine ? (
+                  <span className="mt-1 block text-xs text-danger">
+                    Approximate location: line {formatNumber(queryErrorLine)}
+                  </span>
+                ) : null}
+              </>
+            }
+            title={
+              (queryExecution?.totalStatementCount ?? queryStatements.length) > 1
+                ? 'Script Error'
+                : 'SQL Error'
+            }
+          />
         ) : null}
 
-        <div className="sqlite-results-panel">
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background">
           <QueryResultTable
             tableId={queryTableId}
             result={activeQueryResult}
@@ -1989,7 +2146,7 @@ export default function SqlitePanel() {
             loading={queryLoading}
             showMetadata={false}
             shellClassName="h-full min-h-0"
-            scrollContainerClassName="min-h-0 sqlite-results-scroll-flush"
+            scrollContainerClassName="min-h-0 p-0"
             emptyTitle={
               selectedQueryStatement?.error ? 'Statement Failed' : 'No Results'
             }
@@ -2001,7 +2158,7 @@ export default function SqlitePanel() {
           />
         </div>
       </section>
-    </div>
+    </section>
   );
 
   const dataRowActions = canMutateRows
@@ -2012,44 +2169,40 @@ export default function SqlitePanel() {
           const rowNumber = browseOffset + rowIndex + 1;
 
           return (
-            <div className="flex items-center justify-end gap-2">
-              <button
-                type="button"
-                className={secondaryIconButtonClassName}
-                disabled={editableColumns.length === 0}
+            <div className="flex items-center justify-end gap-1">
+              <Button
                 aria-label={`Edit row ${rowNumber}`}
-                title={
-                  editableColumns.length === 0
-                    ? 'No editable columns'
-                    : `Edit row ${rowNumber}`
-                }
-                onClick={(event) => {
-                  event.stopPropagation();
+                isDisabled={editableColumns.length === 0}
+                isIconOnly
+                onClick={(event) => event.stopPropagation()}
+                onPress={() => {
                   setDeletingRow(null);
                   setEditingRow({
                     row,
                     rowIndex,
                   });
                 }}
+                size="sm"
+                variant="ghost"
               >
-                <Pencil aria-hidden="true" className="h-3.5 w-3.5" />
-              </button>
-              <button
-                type="button"
-                className={secondaryIconButtonClassName}
+                <Pencil aria-hidden="true" className="size-4" />
+              </Button>
+              <Button
                 aria-label={`Delete row ${rowNumber}`}
-                title={`Delete row ${rowNumber}`}
-                onClick={(event) => {
-                  event.stopPropagation();
+                isIconOnly
+                onClick={(event) => event.stopPropagation()}
+                onPress={() => {
                   setEditingRow(null);
                   setDeletingRow({
                     row,
                     rowIndex,
                   });
                 }}
+                size="sm"
+                variant="ghost"
               >
-                <Trash2 aria-hidden="true" className="h-3.5 w-3.5" />
-              </button>
+                <Trash2 aria-hidden="true" className="size-4 text-danger" />
+              </Button>
             </div>
           );
         },
@@ -2069,70 +2222,73 @@ export default function SqlitePanel() {
       'table',
     )
   ) : (
-    <div className="sqlite-content-stack">
-      <header className="sqlite-object-header">
-        <div className="sqlite-toolbar-actions sqlite-subtoolbar-group-grow">
-          <div className="sqlite-field sqlite-field-grow">
-            <label htmlFor="sqlite-data-search" className="sr-only">
-              Search current result
-            </label>
-            <div className="sqlite-input-with-icon">
-              <Search aria-hidden="true" className="h-4 w-4" />
-              <input
-                id="sqlite-data-search"
-                type="text"
-                name="dataSearch"
-                autoComplete="off"
-                spellCheck={false}
-                value={dataSearch}
-                onChange={(event) => setDataSearch(event.target.value)}
-                placeholder="Filter visible rows…"
-                className="sqlite-input"
-              />
-            </div>
-          </div>
-          {dataSearch.trim() ? (
-            <button
-              type="button"
-              className="sqlite-chip"
-              onClick={() => setDataSearch('')}
+    <div className={joinClassNames(CONTENT_PANEL_CLASS_NAME, 'h-full')}>
+      <header className="border-b border-border/60 px-4 py-3">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="min-w-0 flex-1">
+            <SearchField
+              className="w-full max-w-xl"
+              fullWidth
+              name="dataSearch"
+              onChange={setDataSearch}
+              value={dataSearch}
             >
-              contains {dataSearch}
-              <X aria-hidden="true" className="h-3.5 w-3.5" />
-            </button>
-          ) : null}
-        </div>
+              <SearchField.Group className="w-full min-w-0">
+                <SearchField.SearchIcon />
+                <SearchField.Input placeholder="Filter visible rows…" />
+                <SearchField.ClearButton />
+              </SearchField.Group>
+            </SearchField>
+          </div>
 
-        <div className="sqlite-toolbar-actions">
-          <button
-            type="button"
-            className={secondaryIconButtonClassName}
-            onClick={() => void loadBrowse()}
-            disabled={browseLoading || !isQueryableEntity(selectedEntity)}
+          <Button
             aria-label="Refresh data"
-            title="Refresh data"
+            isDisabled={browseLoading || !isQueryableEntity(selectedEntity)}
+            isIconOnly
+            onPress={() => void loadBrowse()}
+            size="sm"
+            variant="secondary"
           >
             <RefreshCw
               aria-hidden="true"
               className={joinClassNames(
-                'h-4 w-4',
+                'size-4',
                 browseLoading && 'animate-spin',
               )}
             />
-          </button>
+          </Button>
         </div>
+
+        {dataSearch.trim() ? (
+          <div className="mt-3 border-t border-border/60 pt-3">
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <span className="text-[0.72rem] font-medium uppercase tracking-[0.16em] text-muted">
+                Filter: contains
+              </span>
+              <Button
+                onPress={() => setDataSearch('')}
+                size="sm"
+                variant="ghost"
+              >
+                Clear
+                <X aria-hidden="true" className="size-4" />
+              </Button>
+            </div>
+            <Surface
+              className="mt-2 min-w-0 break-words rounded-xl border border-border/70 px-3 py-2 text-sm text-foreground"
+              variant="secondary"
+            >
+              {dataSearch}
+            </Surface>
+          </div>
+        ) : null}
       </header>
 
       {browseError ? (
-        <div className="sqlite-inline-error" aria-live="polite">
-          <div>
-            <p className="font-medium text-rose-100">Data Load Failed</p>
-            <p className="mt-1 text-sm text-rose-100/90">{browseError}</p>
-          </div>
-        </div>
+        <InlineError message={browseError} title="Data Load Failed" />
       ) : null}
 
-      <div className="sqlite-results-panel flex-1">
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background">
         <QueryResultTable
           tableId={dataTableId}
           result={filteredBrowseResult}
@@ -2145,7 +2301,7 @@ export default function SqlitePanel() {
           loading={browseLoading}
           showMetadata={false}
           shellClassName="h-full min-h-0"
-          scrollContainerClassName="min-h-0 sqlite-results-scroll-flush"
+          scrollContainerClassName="min-h-0 p-0"
           emptyTitle={
             selectedEntity ? 'No Rows On This Page' : 'No Table Selected'
           }
@@ -2161,67 +2317,70 @@ export default function SqlitePanel() {
         />
       </div>
 
-      <footer className="sqlite-status-footer">
-        <div className="sqlite-status-cluster sqlite-tabular">
-          <span>Page {currentDataPage > 0 ? currentDataPage : '—'}</span>
-          <span>
+      <footer
+        className={joinClassNames(
+          PANEL_HEADER_CLASS_NAME,
+          'border-b-0 border-t',
+        )}
+      >
+        <div className="flex min-w-0 flex-wrap gap-2">
+          <InlineStat>
+            Page {currentDataPage > 0 ? currentDataPage : '—'}
+          </InlineStat>
+          <InlineStat>
             Rows{' '}
             {dataPageStart > 0
               ? `${formatNumber(dataPageStart)}–${formatNumber(dataPageEnd)}`
               : '—'}
-          </span>
-          <span>Total {formatNumber(entityRowCount)}</span>
-          <span>Visible {formatNumber(filteredBrowseRows.length)}</span>
+          </InlineStat>
+          <InlineStat>
+            Total {formatNumber(entityRowCount)}
+          </InlineStat>
+          <InlineStat>
+            Visible {formatNumber(filteredBrowseRows.length)}
+          </InlineStat>
         </div>
-        <div className="sqlite-toolbar-actions">
-          <div className="sqlite-field sqlite-field-inline">
-            <label htmlFor="sqlite-data-page-size">Page Size</label>
-            <select
-              id="sqlite-data-page-size"
-              aria-label="Data page size"
-              name="dataPageSize"
-              autoComplete="off"
-              className="sqlite-select"
-              value={browsePageSize}
-              onChange={(event: ChangeEvent<HTMLSelectElement>) => {
-                setBrowsePageSize(Number(event.target.value));
-                setBrowseOffset(0);
+        <div className="flex flex-wrap items-center gap-2">
+          <div className="flex items-center gap-2">
+            <span className="text-xs font-medium uppercase tracking-[0.16em] text-muted">
+              Page Size
+            </span>
+            <SharedSelect
+              ariaLabel="Data page size"
+              className="w-24"
+              onChange={(value) => {
+                if (value != null) {
+                  setBrowsePageSize(Number(value));
+                  setBrowseOffset(0);
+                }
               }}
-            >
-              {[25, 50, 100].map((value) => (
-                <option key={value} value={value}>
-                  {value}
-                </option>
-              ))}
-            </select>
+              options={pageSizeOptions}
+              value={String(browsePageSize)}
+            />
           </div>
-          <button
-            type="button"
-            className={secondaryButtonClassName}
-            onClick={() =>
-              setBrowseOffset((current) =>
-                Math.max(0, current - browsePageSize),
-              )
+          <Button
+            isDisabled={browseLoading || !canBrowseBackward}
+            onPress={() =>
+              setBrowseOffset((current) => Math.max(0, current - browsePageSize))
             }
-            disabled={browseLoading || !canBrowseBackward}
+            size="sm"
+            variant="secondary"
           >
             Previous
-          </button>
-          <button
-            type="button"
-            className={secondaryButtonClassName}
-            onClick={() =>
+          </Button>
+          <Button
+            isDisabled={browseLoading || !canBrowseForward}
+            onPress={() =>
               setBrowseOffset((current) => current + browsePageSize)
             }
-            disabled={browseLoading || !canBrowseForward}
+            size="sm"
+            variant="secondary"
           >
             Next
-          </button>
-          <span className="sqlite-badge sqlite-badge-neutral sqlite-tabular">
-            {totalDataPages > 0
-              ? `${currentDataPage}/${totalDataPages}`
-              : '0/0'}
-          </span>
+          </Button>
+          <InlineStat>
+            {totalDataPages > 0 ? `${currentDataPage}/${totalDataPages}` : '0/0'}
+          </InlineStat>
         </div>
       </footer>
     </div>
@@ -2240,73 +2399,66 @@ export default function SqlitePanel() {
       'structure',
     )
   ) : (
-    <div className="sqlite-content-stack">
-      <header className="sqlite-object-header">
-        <div
-          className="sqlite-section-tabs"
-          role="tablist"
-          aria-label="Structure sections"
-        >
-          {(
-            [
-              ['columns', 'Columns'],
-              ['keys', 'Keys'],
-              ['indexes', 'Indexes'],
-            ] as Array<[StructureSection, string]>
-          ).map(([key, label]) => (
-            <button
-              key={key}
-              type="button"
-              role="tab"
-              aria-selected={structureSection === key}
-              className={joinClassNames(
-                'sqlite-section-tab',
-                structureSection === key && 'is-active',
-              )}
-              onClick={() => setStructureSection(key)}
-            >
-              {label}
-            </button>
-          ))}
-        </div>
-
-        <div className="sqlite-toolbar-actions">
-          <button
-            type="button"
-            className={secondaryIconButtonClassName}
-            onClick={() => void loadStructure()}
-            disabled={structureLoading}
-            aria-label="Refresh structure"
-            title="Refresh structure"
+    <div className={joinClassNames(CONTENT_PANEL_CLASS_NAME, 'h-full')}>
+      <header className={PANEL_HEADER_CLASS_NAME}>
+        <div className="min-w-0 flex-1">
+          <Tabs.Root
+            className="min-w-0"
+            onSelectionChange={(key) =>
+              setStructureSection(String(key) as StructureSection)
+            }
+            selectedKey={structureSection}
           >
-            <RefreshCw
-              aria-hidden="true"
-              className={joinClassNames(
-                'h-4 w-4',
-                structureLoading && 'animate-spin',
-              )}
-            />
-          </button>
+            <Tabs.ListContainer className="overflow-x-auto">
+              <Tabs.List
+                aria-label="Structure sections"
+                className="w-fit min-w-max justify-start"
+              >
+                {(
+                  [
+                    ['columns', 'Columns'],
+                    ['keys', 'Keys'],
+                    ['indexes', 'Indexes'],
+                  ] as Array<[StructureSection, string]>
+                ).map(([key, label]) => (
+                  <Tabs.Tab
+                    className="w-auto shrink-0 whitespace-nowrap"
+                    id={key}
+                    key={key}
+                  >
+                    {label}
+                    <Tabs.Indicator />
+                  </Tabs.Tab>
+                ))}
+              </Tabs.List>
+            </Tabs.ListContainer>
+          </Tabs.Root>
         </div>
+
+        <Button
+          aria-label="Refresh structure"
+          isDisabled={structureLoading}
+          isIconOnly
+          onPress={() => void loadStructure()}
+          size="sm"
+          variant="secondary"
+        >
+          <RefreshCw
+            aria-hidden="true"
+            className={joinClassNames(
+              'size-4',
+              structureLoading && 'animate-spin',
+            )}
+          />
+        </Button>
       </header>
 
       {structureError ? (
-        <div className="sqlite-inline-error" aria-live="polite">
-          <div>
-            <p className="font-medium text-rose-100">Structure Load Failed</p>
-            <p className="mt-1 text-sm text-rose-100/90">{structureError}</p>
-          </div>
-        </div>
+        <InlineError message={structureError} title="Structure Load Failed" />
       ) : null}
 
-      <div
-        className={joinClassNames(
-          'sqlite-structure-panel',
-          (structureSection === 'columns' || structureSection === 'indexes') &&
-            'sqlite-structure-panel-flush',
-        )}
-      >
-        {structureSection === 'columns' ? (
+      {structureSection === 'columns' ? (
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background">
           <SqliteDataTable
             tableId={structureColumnsTableId}
             data={structureColumnRows}
@@ -2322,82 +2474,92 @@ export default function SqlitePanel() {
             loading={structureLoading}
             emptyTitle="No Columns Found"
             emptyDescription="This table or view does not expose columns."
-            shellClassName="sqlite-metadata-table-wrap sqlite-metadata-table-wrap-flush"
+            shellClassName="p-0"
             scrollContainerClassName="p-0"
-            tableClassName="sqlite-metadata-table"
           />
-        ) : structureSection === 'keys' ? (
-          structureLoading ? (
-            <div className="sqlite-structure-skeleton" aria-live="polite">
-              {Array.from({ length: 4 }, (_, index) => (
-                <div key={index} className="sqlite-structure-skeleton-row" />
-              ))}
-            </div>
-          ) : (
-            <div className="sqlite-structure-grid">
-              <section className="sqlite-detail-card">
-                <header className="mb-3">
-                  <h3 className="sqlite-detail-card-title">Primary Key</h3>
-                </header>
+        </div>
+      ) : null}
+
+      {structureSection === 'keys' ? (
+        <div className="min-h-0 flex-1 overflow-auto bg-background p-4">
+        {structureLoading ? (
+          <div aria-live="polite" className="grid gap-3">
+            {Array.from({ length: 4 }, (_, index) => (
+              <div key={index} className={STRUCTURE_SKELETON_ROW_CLASS_NAME} />
+            ))}
+          </div>
+        ) : (
+          <div className="grid gap-3 lg:grid-cols-2">
+            <Card>
+              <Card.Header>
+                <Card.Title>Primary Key</Card.Title>
+              </Card.Header>
+              <Card.Content>
                 {primaryKeyColumns.length === 0 ? (
-                  <p className="sqlite-helper-text">No primary key defined.</p>
+                  <p className="text-sm text-muted">No primary key defined.</p>
                 ) : (
-                  <div className="sqlite-chip-row">
+                  <div className="flex flex-wrap gap-2">
                     {primaryKeyColumns
                       .sort(
                         (left, right) =>
                           left.primaryKeyOrder - right.primaryKeyOrder,
                       )
                       .map((column) => (
-                        <span
+                        <Chip
                           key={column.name}
-                          className="sqlite-chip sqlite-chip-static"
+                          size="sm"
+                          variant="soft"
                         >
-                          <KeyRound
-                            aria-hidden="true"
-                            className="h-3.5 w-3.5"
-                          />
+                          <KeyRound aria-hidden="true" className="size-3.5" />
                           {column.name}
-                        </span>
+                        </Chip>
                       ))}
                   </div>
                 )}
-              </section>
-
-              <section className="sqlite-detail-card">
-                <header className="mb-3">
-                  <h3 className="sqlite-detail-card-title">Foreign Keys</h3>
-                </header>
+              </Card.Content>
+            </Card>
+
+            <Card>
+              <Card.Header>
+                <Card.Title>Foreign Keys</Card.Title>
+              </Card.Header>
+              <Card.Content>
                 {structureState.foreignKeys.length === 0 ? (
-                  <p className="sqlite-helper-text">No foreign keys defined.</p>
+                  <p className="text-sm text-muted">No foreign keys defined.</p>
                 ) : (
                   <div className="space-y-3">
                     {structureState.foreignKeys.map((foreignKey) => (
-                      <div
+                      <Surface
                         key={`${foreignKey.id}-${foreignKey.seq}`}
-                        className="sqlite-key-row"
+                        className="flex flex-wrap items-start justify-between gap-3 rounded-xl border border-border/70 px-4 py-3"
+                        variant="secondary"
                       >
                         <div>
-                          <p className="font-medium text-white">
+                          <p className="font-medium text-foreground">
                             {foreignKey.from} → {foreignKey.table}
                             {foreignKey.to ? `.${foreignKey.to}` : ''}
                           </p>
-                          <p className="sqlite-helper-text">
+                          <p className="mt-1 text-sm text-muted">
                             Update {foreignKey.onUpdate} · Delete{' '}
                             {foreignKey.onDelete}
                           </p>
                         </div>
-                        <span className="sqlite-badge sqlite-badge-neutral">
+                        <Chip size="sm" variant="soft">
                           Match {foreignKey.match}
-                        </span>
-                      </div>
+                        </Chip>
+                      </Surface>
                     ))}
                   </div>
                 )}
-              </section>
-            </div>
-          )
-        ) : (
+              </Card.Content>
+            </Card>
+          </div>
+        )}
+        </div>
+      ) : null}
+
+      {structureSection === 'indexes' ? (
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background">
           <SqliteDataTable
             tableId={structureIndexesTableId}
             data={structureIndexRows}
@@ -2413,76 +2575,109 @@ export default function SqlitePanel() {
             loading={structureLoading}
             emptyTitle="No Indexes Defined"
             emptyDescription="This table or view does not define indexes."
-            shellClassName="sqlite-metadata-table-wrap sqlite-metadata-table-wrap-flush"
+            shellClassName="p-0"
             scrollContainerClassName="p-0"
-            tableClassName="sqlite-metadata-table"
           />
-        )}
-      </div>
+        </div>
+      ) : null}
     </div>
   );
 
+  const headerSubtitle = selectedDatabase
+    ? selectedEntity
+      ? `${selectedDatabase.name} · ${selectedEntity.schemaName}.${selectedEntity.name}`
+      : selectedDatabase.name
+    : 'Query, browse, and edit SQLite data.';
+  const sidebarStyle = {
+    '--sqlite-sidebar-width': `${sidebarWidth}px`,
+  } as CSSProperties;
+
   return (
-    <div className="sqlite-app-shell">
-      <a href="#sqlite-main-content" className="sqlite-skip-link">
+    <PluginTheme
+      className="flex h-screen flex-col bg-background text-foreground"
+      defaultTheme="dark"
+      storageKey="@rozenite/sqlite-plugin.theme"
+    >
+      <a
+        href="#sqlite-main-content"
+        className="absolute left-4 top-[-3rem] z-50 rounded-full border border-border/80 bg-surface px-4 py-2.5 text-foreground opacity-0 transition-[top,opacity] duration-150 ease-out focus-visible:top-4 focus-visible:opacity-100"
+      >
         Skip To Workspace
       </a>
-      <div className="sqlite-app-body">
+
+      <PluginHeader
+        subtitle={headerSubtitle}
+        title="SQLite"
+        actions={
+          <div className="flex flex-wrap items-center gap-2">
+            <Chip className="shrink-0" size="sm" variant="secondary">
+              {formatNumber(databases.length)}{' '}
+              {databases.length === 1 ? 'database' : 'databases'}
+            </Chip>
+            {selectedDatabase ? (
+              <Chip className="max-w-56 truncate" color="accent" size="sm" variant="soft">
+                {selectedDatabase.name}
+              </Chip>
+            ) : null}
+            <Button
+              aria-label="Refresh SQLite explorer"
+              isDisabled={databaseLoading || entityLoading}
+              isIconOnly
+              onPress={() => void refreshWorkspace()}
+              size="sm"
+              variant="secondary"
+            >
+              <RefreshCw
+                aria-hidden="true"
+                className={joinClassNames(
+                  'size-4',
+                  (databaseLoading || entityLoading) && 'animate-spin',
+                )}
+              />
+            </Button>
+          </div>
+        }
+      />
+
+      <div className="flex min-h-0 flex-1 flex-col gap-3 px-3 pb-3 lg:flex-row">
         <aside
           ref={sidebarRef}
-          className="sqlite-sidebar-wrap"
-          style={{ width: sidebarWidth }}
+          className="flex h-[min(28rem,42vh)] min-h-0 w-full min-w-0 max-w-none gap-2 lg:h-full lg:min-w-72 lg:w-[var(--sqlite-sidebar-width)] lg:max-w-[min(28rem,48vw)]"
+          style={sidebarStyle}
         >
-          <section className="sqlite-sidebar-panel">
-            <header className="sqlite-sidebar-header">
-              <div className="sqlite-toolbar-actions">
-                <h1 className="sqlite-section-title">Databases</h1>
-              </div>
-              <div className="sqlite-toolbar-actions">
-                <button
-                  type="button"
-                  className={iconButtonClassName}
-                  aria-label="Refresh databases"
-                  title="Refresh databases"
-                  onClick={() => void refreshWorkspace()}
-                  disabled={databaseLoading || entityLoading}
-                >
-                  <RefreshCw
-                    aria-hidden="true"
-                    className={joinClassNames(
-                      'h-4 w-4',
-                      (databaseLoading || entityLoading) && 'animate-spin',
-                    )}
-                  />
-                </button>
-              </div>
+          <section className={PANEL_CLASS_NAME}>
+            <header className={PANEL_SECTION_HEADER_CLASS_NAME}>
+              <h2 className="text-sm font-semibold text-foreground">Databases</h2>
+              <InlineStat>
+                {formatNumber(databases.length)}
+              </InlineStat>
             </header>
 
-            <div className="sqlite-sidebar-toolbar">
-              <label htmlFor="sqlite-sidebar-filter" className="sr-only">
-                Filter databases, tables, and views
-              </label>
-              <div className="sqlite-input-with-icon">
-                <Search aria-hidden="true" className="h-4 w-4" />
-                <input
-                  id="sqlite-sidebar-filter"
-                  type="text"
-                  name="sidebarFilter"
-                  autoComplete="off"
-                  spellCheck={false}
-                  value={objectSearch}
-                  onChange={(event) => setObjectSearch(event.target.value)}
-                  placeholder="Filter databases, tables, views…"
-                  className="sqlite-input"
-                />
-              </div>
+            <div className="border-b border-border/70 bg-surface-secondary/60 px-3 py-3">
+              <SearchField
+                className="w-full min-w-0"
+                fullWidth
+                name="sidebarFilter"
+                onChange={setObjectSearch}
+                value={objectSearch}
+              >
+                <SearchField.Group className="w-full min-w-0">
+                  <SearchField.SearchIcon />
+                  <SearchField.Input
+                    className="min-w-0"
+                    placeholder="Filter explorer items…"
+                    ref={objectSearchRef}
+                  />
+                  <SearchField.ClearButton />
+                </SearchField.Group>
+              </SearchField>
             </div>
 
-            <div className="sqlite-sidebar-scroll">
+            <div className="min-h-0 flex-1 overflow-auto p-3">
               {databaseLoading && databases.length === 0 ? (
-                <div className="sqlite-sidebar-skeleton" aria-live="polite">
+                <div aria-live="polite" className="grid gap-3">
                   {Array.from({ length: 6 }, (_, index) => (
-                    <div key={index} className="sqlite-sidebar-skeleton-row" />
+                    <div key={index} className={SKELETON_ROW_CLASS_NAME} />
                   ))}
                 </div>
               ) : databases.length === 0 ? (
@@ -2495,7 +2690,7 @@ export default function SqlitePanel() {
                   'database',
                 )
               ) : (
-                <div className="sqlite-connection-list">
+                <div className={TREE_STACK_CLASS_NAME}>
                   {databases.map((database) => {
                     const isExpanded = expandedDatabaseIds.includes(
                       database.id,
@@ -2510,10 +2705,10 @@ export default function SqlitePanel() {
                     );
 
                     return (
-                      <div key={database.id} className="sqlite-connection-card">
+                      <div key={database.id} className={TREE_GROUP_CLASS_NAME}>
                         <button
                           type="button"
-                          className="sqlite-connection-row"
+                          className={TREE_BUTTON_CLASS_NAME}
                           onClick={() => {
                             setSelectedDatabaseId(database.id);
                             setExpandedDatabaseIds((current) =>
@@ -2548,38 +2743,33 @@ export default function SqlitePanel() {
                         </button>
 
                         {isExpanded ? (
-                          <div className="sqlite-tree-shell">
+                          <div className="grid min-w-0 gap-2 pl-2">
                             {databaseExplorerState.loading ||
                             !databaseExplorerState.loaded ? (
                               <div
-                                className="sqlite-sidebar-skeleton"
                                 aria-live="polite"
+                                className="grid gap-3"
                               >
                                 {Array.from({ length: 4 }, (_, index) => (
                                   <div
                                     key={index}
-                                    className="sqlite-sidebar-skeleton-row"
+                                    className={SKELETON_ROW_CLASS_NAME}
                                   />
                                 ))}
                               </div>
                             ) : databaseExplorerState.error ? (
-                              <div
-                                className="sqlite-inline-error"
-                                aria-live="polite"
-                              >
-                                <div>
-                                  <p className="font-medium text-rose-100">
-                                    Explorer Load Failed
-                                  </p>
-                                  <p className="mt-1 text-sm text-rose-100/90">
-                                    {databaseExplorerState.error}
-                                  </p>
-                                </div>
-                              </div>
+                              <InlineError
+                                className="mx-0 mt-0"
+                                message={databaseExplorerState.error}
+                                title="Explorer Load Failed"
+                              />
                             ) : databaseExplorerGroups.length === 0 ? (
-                              <div className="sqlite-tree-empty">
+                              <Surface
+                                className="rounded-xl border border-dashed border-border/70 px-3 py-3 text-xs uppercase tracking-[0.16em] text-muted"
+                                variant="secondary"
+                              >
                                 No objects match this filter.
-                              </div>
+                              </Surface>
                             ) : (
                               databaseExplorerGroups.map(
                                 ({ schema, tables, views }) => {
@@ -2593,11 +2783,11 @@ export default function SqlitePanel() {
                                   return (
                                     <div
                                       key={`${database.id}-${schema.name}`}
-                                      className="sqlite-schema-group"
+                                      className={TREE_GROUP_CLASS_NAME}
                                     >
                                       <button
                                         type="button"
-                                        className="sqlite-schema-row"
+                                        className={TREE_BUTTON_CLASS_NAME}
                                         onClick={() => {
                                           setExpandedSchemaKeys((current) =>
                                             current.includes(schemaKey)
@@ -2630,13 +2820,13 @@ export default function SqlitePanel() {
                                       </button>
 
                                       {isSchemaExpanded ? (
-                                        <div className="sqlite-schema-content">
+                                        <div className="grid min-w-0 gap-3 border-l border-border/70 pl-3">
                                           {tables.length > 0 ? (
-                                            <div className="sqlite-object-section">
-                                              <p className="sqlite-object-section-title">
+                                            <div className={TREE_GROUP_CLASS_NAME}>
+                                              <p className={TREE_SECTION_TITLE_CLASS_NAME}>
                                                 Tables
                                               </p>
-                                              <div className="sqlite-object-list">
+                                              <div className={TREE_STACK_CLASS_NAME}>
                                                 {tables.map((entity) => {
                                                   const isSelected =
                                                     getEntityKey(
@@ -2650,9 +2840,9 @@ export default function SqlitePanel() {
                                                       key={`${database.id}-${entity.schemaName}-${entity.name}`}
                                                       type="button"
                                                       className={joinClassNames(
-                                                        'sqlite-object-row',
+                                                        TREE_BUTTON_CLASS_NAME,
                                                         isSelected &&
-                                                          'is-active',
+                                                          TREE_ACTIVE_BUTTON_CLASS_NAME,
                                                       )}
                                                       onClick={() => {
                                                         setEntitySelection(
@@ -2677,11 +2867,11 @@ export default function SqlitePanel() {
                                           ) : null}
 
                                           {views.length > 0 ? (
-                                            <div className="sqlite-object-section">
-                                              <p className="sqlite-object-section-title">
+                                            <div className={TREE_GROUP_CLASS_NAME}>
+                                              <p className={TREE_SECTION_TITLE_CLASS_NAME}>
                                                 Views
                                               </p>
-                                              <div className="sqlite-object-list">
+                                              <div className={TREE_STACK_CLASS_NAME}>
                                                 {views.map((entity) => {
                                                   const isSelected =
                                                     getEntityKey(
@@ -2695,9 +2885,9 @@ export default function SqlitePanel() {
                                                       key={`${database.id}-${entity.schemaName}-${entity.name}`}
                                                       type="button"
                                                       className={joinClassNames(
-                                                        'sqlite-object-row',
+                                                        TREE_BUTTON_CLASS_NAME,
                                                         isSelected &&
-                                                          'is-active',
+                                                          TREE_ACTIVE_BUTTON_CLASS_NAME,
                                                       )}
                                                       onClick={() => {
                                                         setEntitySelection(
@@ -2743,73 +2933,73 @@ export default function SqlitePanel() {
             role="separator"
             aria-orientation="vertical"
             aria-label="Resize database explorer"
-            className="sqlite-sidebar-resizer"
+            className="relative hidden w-3 shrink-0 cursor-col-resize border-x border-border/70 bg-surface-secondary/60 transition-colors hover:bg-surface-secondary lg:block before:absolute before:left-1/2 before:top-1/2 before:h-16 before:w-0.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-muted/70 before:content-['']"
             onPointerDown={handleSidebarResizeStart}
           />
         </aside>
 
-        <main id="sqlite-main-content" className="sqlite-workspace">
-          <section className="sqlite-workspace-panel">
-            <div className="sqlite-workspace-content">
-              <div className="sqlite-main-stack">
-                <div
-                  className="sqlite-workspace-tabs sqlite-main-tabs"
-                  role="tablist"
-                  aria-label="Workspace tabs"
-                >
-                  {(
-                    [
-                      ['query', 'Query'],
-                      ['data', 'Data'],
-                      ['structure', 'Structure'],
-                    ] as Array<[ActiveTab, string]>
-                  ).map(([tab, label]) => (
-                    <button
-                      key={tab}
-                      type="button"
-                      role="tab"
-                      aria-selected={activeTab === tab}
-                      className={joinClassNames(
-                        'sqlite-workspace-tab',
-                        activeTab === tab && 'is-active',
-                      )}
-                      onClick={() => setActiveTab(tab)}
-                    >
-                      {label}
-                    </button>
-                  ))}
-                </div>
+        <main id="sqlite-main-content" className="flex min-h-0 min-w-0 flex-1">
+          <div className={WORKSPACE_PANEL_CLASS_NAME}>
+            <div className="px-3 pt-3">
+              <Tabs.Root
+                className="shrink-0"
+                onSelectionChange={(key) => setActiveTab(String(key) as ActiveTab)}
+                selectedKey={activeTab}
+              >
+                <Tabs.ListContainer className="overflow-x-auto px-1">
+                  <Tabs.List
+                    aria-label="Workspace tabs"
+                    className="w-fit min-w-max justify-start"
+                  >
+                    {(
+                      [
+                        ['query', 'Query'],
+                        ['data', 'Data'],
+                        ['structure', 'Structure'],
+                      ] as Array<[ActiveTab, string]>
+                    ).map(([tab, label]) => (
+                      <Tabs.Tab
+                        className="w-auto shrink-0 whitespace-nowrap"
+                        id={tab}
+                        key={tab}
+                      >
+                        {label}
+                        <Tabs.Indicator />
+                      </Tabs.Tab>
+                    ))}
+                  </Tabs.List>
+                </Tabs.ListContainer>
+              </Tabs.Root>
+            </div>
 
-                <div className="sqlite-main-pane">
-                  {activeTab === 'query'
-                    ? queryPane
-                    : activeTab === 'data'
-                      ? dataPane
-                      : structurePane}
-                </div>
-              </div>
+            <div className="flex min-h-0 min-w-0 flex-1 px-3 pb-3 pt-2">
+              {activeTab === 'query'
+                ? queryPane
+                : activeTab === 'data'
+                  ? dataPane
+                  : structurePane}
             </div>
-          </section>
+          </div>
         </main>
+      </div>
 
-        <SqliteRowEditModal
-          isOpen={!!editingRow && !!selectedEntity}
-          rowNumber={browseOffset + (editingRow?.rowIndex ?? 0) + 1}
-          entityName={selectedEntity?.name ?? 'row'}
-          row={editingRow?.row ?? null}
-          columns={structureState.columns}
-          onClose={() => setEditingRow(null)}
-          onSave={handleSaveRow}
-        />
+      <SqliteRowEditModal
+        isOpen={!!editingRow && !!selectedEntity}
+        rowNumber={browseOffset + (editingRow?.rowIndex ?? 0) + 1}
+        entityName={selectedEntity?.name ?? 'row'}
+        row={editingRow?.row ?? null}
+        columns={structureState.columns}
+        onClose={() => setEditingRow(null)}
+        onSave={handleSaveRow}
+      />
 
-        <SqliteRowDeleteModal
-          isOpen={!!deletingRow && !!selectedEntity}
-          rowNumber={browseOffset + (deletingRow?.rowIndex ?? 0) + 1}
-          entityName={selectedEntity?.name ?? 'row'}
-          onClose={() => setDeletingRow(null)}
-          onDelete={handleDeleteRow}
-        />
-      </div>
-    </div>
+      <SqliteRowDeleteModal
+        isOpen={!!deletingRow && !!selectedEntity}
+        rowNumber={browseOffset + (deletingRow?.rowIndex ?? 0) + 1}
+        entityName={selectedEntity?.name ?? 'row'}
+        onClose={() => setDeletingRow(null)}
+        onDelete={handleDeleteRow}
+      />
+    </PluginTheme>
   );
 }
diff --git a/packages/sqlite-plugin/src/ui/query-result-table.tsx b/packages/sqlite-plugin/src/ui/query-result-table.tsx
index 97318b64..dd964675 100644
--- a/packages/sqlite-plugin/src/ui/query-result-table.tsx
+++ b/packages/sqlite-plugin/src/ui/query-result-table.tsx
@@ -1,9 +1,10 @@
+import { Chip, Surface } from '@rozenite/ui';
 import { useMemo, useState, type ReactNode } from 'react';
 import type { CellContext, ColumnDef, OnChangeFn } from '@tanstack/react-table';
 import type { SqliteQueryResult } from '../shared/types';
 import { formatDuration, formatNumber } from './utils';
 import {
-  getMetadataBadgeClassName,
+  getMetadataChipColor,
   getValueKind,
   getValuePreview,
 } from './value-utils';
@@ -44,9 +45,8 @@ type DrawerPayload = {
   value: Record<string, unknown>;
 } | null;
 
-const joinClassNames = (
-  ...classNames: Array<string | false | null | undefined>
-) => classNames.filter(Boolean).join(' ');
+const RESULT_STAT_CLASS_NAME =
+  'sqlite-tabular inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs text-muted';
 
 const getColumnHeaderTitle = (
   column: string,
@@ -115,11 +115,13 @@ export const QueryResultTable = ({
           const value = row.original[column];
 
           return (
-            <div className="sqlite-cell-value">
-              <span className="sqlite-cell-preview">
+            <div className="grid min-w-0 w-full gap-1 text-left">
+              <span className="truncate text-foreground">
                 {getValuePreview(value)}
               </span>
-              <span className="sqlite-cell-kind">{getValueKind(value)}</span>
+              <span className="text-[0.72rem] uppercase tracking-[0.08em] text-muted">
+                {getValueKind(value)}
+              </span>
             </div>
           );
         },
@@ -144,27 +146,26 @@ export const QueryResultTable = ({
   return (
     <>
       {showMetadata && metadata ? (
-        <div className="sqlite-inline-metadata">
-          <span
-            className={joinClassNames(
-              'sqlite-badge',
-              getMetadataBadgeClassName(metadata),
-            )}
+        <div className="flex min-w-0 flex-wrap gap-2 px-3 pt-3">
+          <Chip
+            color={getMetadataChipColor(metadata)}
+            size="sm"
+            variant="soft"
           >
             {metadata.statementType}
-          </span>
-          <span className="sqlite-inline-stat sqlite-tabular">
+          </Chip>
+          <Surface className={RESULT_STAT_CLASS_NAME} variant="secondary">
             {formatNumber(metadata.rowCount)} rows
-          </span>
-          <span className="sqlite-inline-stat sqlite-tabular">
+          </Surface>
+          <Surface className={RESULT_STAT_CLASS_NAME} variant="secondary">
             {formatNumber(metadata.changes)} changes
-          </span>
-          <span className="sqlite-inline-stat sqlite-tabular">
+          </Surface>
+          <Surface className={RESULT_STAT_CLASS_NAME} variant="secondary">
             last insert {formatNumber(metadata.lastInsertRowId)}
-          </span>
-          <span className="sqlite-inline-stat sqlite-tabular">
+          </Surface>
+          <Surface className={RESULT_STAT_CLASS_NAME} variant="secondary">
             {formatDuration(metadata.durationMs)}
-          </span>
+          </Surface>
         </div>
       ) : null}
 
diff --git a/packages/sqlite-plugin/src/ui/sql-editor.tsx b/packages/sqlite-plugin/src/ui/sql-editor.tsx
index c0e42434..029736e1 100644
--- a/packages/sqlite-plugin/src/ui/sql-editor.tsx
+++ b/packages/sqlite-plugin/src/ui/sql-editor.tsx
@@ -77,45 +77,45 @@ const emptyDecorations = Decoration.set([]);
 const sqlHighlightStyle = HighlightStyle.define([
   {
     tag: [tags.keyword, tags.operatorKeyword],
-    color: '#8ec5ff',
+    color: 'var(--accent)',
     fontWeight: '600',
   },
   {
     tag: [tags.string, tags.special(tags.string)],
-    color: '#8fe0ba',
+    color: 'var(--success)',
   },
   {
     tag: [tags.number, tags.integer, tags.float, tags.bool],
-    color: '#f9c97a',
+    color: 'var(--warning)',
   },
   {
     tag: [tags.comment, tags.lineComment, tags.blockComment],
-    color: 'rgba(165, 185, 204, 0.56)',
+    color: 'var(--muted)',
     fontStyle: 'italic',
   },
   {
     tag: [tags.name, tags.variableName, tags.propertyName],
-    color: '#edf5fb',
+    color: 'var(--foreground)',
   },
   {
     tag: [tags.definition(tags.name), tags.typeName, tags.namespace],
-    color: '#9ecbff',
+    color: 'var(--accent)',
   },
   {
     tag: [tags.function(tags.variableName), tags.function(tags.propertyName)],
-    color: '#7fd8ff',
+    color: 'var(--accent)',
   },
   {
     tag: [tags.operator, tags.compareOperator, tags.logicOperator],
-    color: 'rgba(190, 216, 238, 0.88)',
+    color: 'var(--foreground)',
   },
   {
     tag: tags.null,
-    color: '#ff9f7f',
+    color: 'var(--danger)',
   },
   {
     tag: [tags.paren, tags.squareBracket, tags.brace, tags.punctuation],
-    color: 'rgba(226, 236, 245, 0.82)',
+    color: 'var(--muted)',
   },
 ]);
 
@@ -126,7 +126,7 @@ const sqlEditorTheme = EditorView.theme(
       flex: '1 1 auto',
       minHeight: '0',
       height: '100%',
-      color: 'var(--sqlite-text)',
+      color: 'var(--foreground)',
       backgroundColor: 'transparent',
       fontSize: '0.8rem',
     },
@@ -147,54 +147,59 @@ const sqlEditorTheme = EditorView.theme(
     },
     '.cm-content': {
       minHeight: '100%',
-      caretColor: '#f7fbff',
+      caretColor: 'var(--foreground)',
     },
     '.cm-cursor, .cm-dropCursor': {
-      borderLeftColor: '#f7fbff',
+      borderLeftColor: 'var(--foreground)',
     },
     '.cm-selectionBackground, &.cm-focused .cm-selectionBackground, ::selection':
       {
-        backgroundColor: 'rgba(89, 163, 255, 0.2)',
+        backgroundColor: 'color-mix(in srgb, var(--accent) 22%, transparent)',
       },
     '.cm-activeLine': {
-      backgroundColor: 'rgba(255, 255, 255, 0.032)',
+      backgroundColor:
+        'color-mix(in srgb, var(--surface-secondary) 18%, transparent)',
     },
     '.cm-activeLineGutter': {
-      backgroundColor: 'rgba(255, 255, 255, 0.028)',
-      color: 'rgba(244, 249, 253, 0.96)',
+      backgroundColor:
+        'color-mix(in srgb, var(--surface-secondary) 24%, transparent)',
+      color: 'var(--foreground)',
     },
     '.cm-gutters': {
-      color: 'rgba(165, 185, 204, 0.5)',
-      backgroundColor: 'rgba(255, 255, 255, 0.02)',
-      borderRight: '1px solid var(--sqlite-line)',
+      color: 'var(--muted)',
+      backgroundColor:
+        'color-mix(in srgb, var(--surface-secondary) 28%, var(--background) 72%)',
+      borderRight: '1px solid var(--border)',
     },
     '.cm-tooltip': {
-      border: '1px solid var(--sqlite-line-strong)',
-      backgroundColor: 'rgba(10, 20, 31, 0.98)',
-      color: 'var(--sqlite-text)',
+      border: '1px solid var(--border)',
+      backgroundColor: 'var(--surface)',
+      color: 'var(--foreground)',
       borderRadius: '0.9rem',
       boxShadow: '0 20px 52px rgba(0, 0, 0, 0.34)',
       overflow: 'hidden',
     },
     '.cm-tooltip-autocomplete > ul > li[aria-selected]': {
-      backgroundColor: 'rgba(89, 163, 255, 0.18)',
-      color: '#fff',
+      backgroundColor: 'color-mix(in srgb, var(--accent) 18%, transparent)',
+      color: 'var(--foreground)',
     },
     '.cm-panels': {
-      backgroundColor: 'rgba(255, 255, 255, 0.02)',
-      color: 'var(--sqlite-text)',
-      borderBottom: '1px solid var(--sqlite-line)',
+      backgroundColor: 'var(--background)',
+      color: 'var(--foreground)',
+      borderBottom: '1px solid var(--border)',
     },
     '.cm-searchMatch': {
-      backgroundColor: 'rgba(255, 191, 105, 0.2)',
-      outline: '1px solid rgba(255, 191, 105, 0.22)',
+      backgroundColor:
+        'color-mix(in srgb, var(--warning) 22%, transparent)',
+      outline: '1px solid color-mix(in srgb, var(--warning) 32%, transparent)',
     },
     '.cm-searchMatch.cm-searchMatch-selected': {
-      backgroundColor: 'rgba(89, 163, 255, 0.26)',
+      backgroundColor: 'color-mix(in srgb, var(--accent) 28%, transparent)',
     },
     '.cm-matchingBracket, .cm-nonmatchingBracket': {
-      backgroundColor: 'rgba(255, 255, 255, 0.06)',
-      outline: '1px solid rgba(255, 255, 255, 0.08)',
+      backgroundColor:
+        'color-mix(in srgb, var(--surface-tertiary) 80%, transparent)',
+      outline: '1px solid color-mix(in srgb, var(--border) 75%, transparent)',
     },
   },
   { dark: true },
diff --git a/packages/sqlite-plugin/src/ui/sqlite-data-table.tsx b/packages/sqlite-plugin/src/ui/sqlite-data-table.tsx
index 691461bc..3fb26b89 100644
--- a/packages/sqlite-plugin/src/ui/sqlite-data-table.tsx
+++ b/packages/sqlite-plugin/src/ui/sqlite-data-table.tsx
@@ -24,11 +24,11 @@ const joinClassNames = (
 ) => classNames.filter(Boolean).join(' ');
 
 const LoadingState = ({ columns }: { columns: number }) => (
-  <div className="sqlite-results-loading" aria-live="polite">
+  <div aria-live="polite" className="grid gap-3">
     {Array.from({ length: 6 }, (_, rowIndex) => (
       <div
         key={`loading-${rowIndex}`}
-        className="sqlite-results-loading-row"
+        className="grid gap-3 rounded-xl border border-border/60 bg-background/80 px-4 py-3"
         style={{
           gridTemplateColumns: `repeat(${Math.max(columns, 3)}, minmax(12rem, 1fr))`,
         }}
@@ -36,7 +36,7 @@ const LoadingState = ({ columns }: { columns: number }) => (
         {Array.from({ length: Math.max(columns, 3) }, (_, columnIndex) => (
           <span
             key={`${rowIndex}-${columnIndex}`}
-            className="sqlite-results-loading-bar"
+            className="h-3 animate-pulse rounded-xl bg-surface-secondary"
           />
         ))}
       </div>
@@ -74,15 +74,15 @@ const SortableColumnHeader = <TData extends RowData>({
     <th
       scope="col"
       className={joinClassNames(
-        header.column.id === SQLITE_ROW_NUMBER_COLUMN_ID &&
-          'sqlite-results-number-col',
-        header.column.getIsResizing() && 'sqlite-table-column-resizing',
+        'relative flex border-b border-border/60 bg-background/80 px-[0.65rem] py-[0.6rem] text-left text-[0.68rem] leading-[1.2] font-medium uppercase tracking-[0.1em] text-muted',
+        header.column.id === SQLITE_ROW_NUMBER_COLUMN_ID && 'w-[4.5rem]',
+        header.column.getIsResizing() && 'bg-accent/5',
       )}
       style={{
         width: header.getSize(),
       }}
     >
-      <div className="sqlite-table-header-content">
+      <div className="flex min-w-0 items-center justify-between gap-1.5 pr-2">
         <div className="min-w-0">
           {header.isPlaceholder
             ? null
@@ -92,14 +92,18 @@ const SortableColumnHeader = <TData extends RowData>({
       {header.column.getCanResize() ? (
         <div
           aria-hidden="true"
-          className={joinClassNames(
-            'sqlite-column-resizer',
-            header.column.getIsResizing() && 'is-active',
-          )}
+          className="absolute inset-y-1.5 -right-2 z-30 w-4 cursor-col-resize touch-none select-none"
           onDoubleClick={() => header.column.resetSize()}
           onMouseDown={header.getResizeHandler()}
           onTouchStart={header.getResizeHandler()}
-        />
+        >
+          <span
+            className={joinClassNames(
+              'pointer-events-none absolute left-1/2 top-0 h-full w-px -translate-x-1/2 rounded-full bg-border/90 transition-colors',
+              header.column.getIsResizing() && 'bg-accent ring-1 ring-accent/25',
+            )}
+          />
+        </div>
       ) : null}
     </th>
   );
@@ -135,7 +139,7 @@ export const SqliteDataTable = <TData extends RowData>({
       minSize: 72,
       maxSize: 72,
       cell: ({ row }) => (
-        <span className="sqlite-results-row-number sqlite-tabular">
+        <span className="sqlite-tabular text-muted">
           {formatNumber(rowNumberOffset + row.index + 1)}
         </span>
       ),
@@ -197,12 +201,15 @@ export const SqliteDataTable = <TData extends RowData>({
 
   const renderTable = (): ReactNode => (
     <table
-      className={joinClassNames('sqlite-results-table', tableClassName)}
+      className={joinClassNames(
+        'grid w-full border-separate border-spacing-0',
+        tableClassName,
+      )}
       style={{ minWidth: table.getTotalSize() }}
     >
-      <thead>
+      <thead className="grid">
         {table.getHeaderGroups().map((headerGroup) => (
-          <tr key={headerGroup.id} className="sqlite-table-row-shell">
+          <tr key={headerGroup.id} className="flex w-full">
             {headerGroup.headers.map((header) => (
               <SortableColumnHeader key={header.id} header={header} />
             ))}
@@ -210,6 +217,7 @@ export const SqliteDataTable = <TData extends RowData>({
         ))}
       </thead>
       <tbody
+        className="relative grid"
         style={{
           height: rowVirtualizer.getTotalSize(),
         }}
@@ -230,7 +238,10 @@ export const SqliteDataTable = <TData extends RowData>({
                 }
               }}
               data-index={virtualRow.index}
-              className={joinClassNames(onRowClick && 'sqlite-results-row')}
+              className={joinClassNames(
+                'group absolute left-0 top-0 flex w-full',
+                onRowClick && 'cursor-pointer focus:outline-none',
+              )}
               role={onRowClick ? 'button' : undefined}
               tabIndex={onRowClick ? 0 : undefined}
               aria-label={
@@ -251,8 +262,9 @@ export const SqliteDataTable = <TData extends RowData>({
                 <td
                   key={cell.id}
                   className={joinClassNames(
+                    'flex items-start border-b border-border/60 px-[0.65rem] py-[0.55rem] align-top leading-[1.35] text-foreground transition-colors group-hover:bg-accent/4 group-focus-within:bg-accent/8',
                     cell.column.id === SQLITE_ROW_NUMBER_COLUMN_ID &&
-                      'sqlite-results-row-number',
+                      'sqlite-tabular w-[4.5rem] text-muted',
                   )}
                   style={{ width: cell.column.getSize() }}
                 >
@@ -268,23 +280,28 @@ export const SqliteDataTable = <TData extends RowData>({
 
   return (
     <div
-      className={joinClassNames('sqlite-results-shell', shellClassName)}
+      className={joinClassNames(
+        'flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden',
+        shellClassName,
+      )}
       data-table-id={tableId}
     >
       <div
         ref={scrollElementRef}
         className={joinClassNames(
-          'sqlite-results-scroll',
+          'flex min-h-0 min-w-0 flex-1 flex-col overflow-auto p-3',
           scrollContainerClassName,
         )}
       >
         {loading ? (
           <LoadingState columns={loadingColumns} />
         ) : data.length === 0 || columns.length === 0 ? (
-          <div className="sqlite-results-empty">
+          <div className="flex min-h-[12rem] flex-1 items-center justify-center rounded-xl border border-border/50 bg-background/70 p-4">
             <div className="max-w-sm space-y-2 text-center">
-              <p className="text-base font-medium text-white">{emptyTitle}</p>
-              <p className="text-sm text-slate-400">{emptyDescription}</p>
+              <p className="text-base font-medium text-foreground">
+                {emptyTitle}
+              </p>
+              <p className="text-sm text-muted">{emptyDescription}</p>
             </div>
           </div>
         ) : (
diff --git a/packages/sqlite-plugin/src/ui/sqlite-modal-controls.tsx b/packages/sqlite-plugin/src/ui/sqlite-modal-controls.tsx
deleted file mode 100644
index 649a1bb9..00000000
--- a/packages/sqlite-plugin/src/ui/sqlite-modal-controls.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { X } from 'lucide-react';
-
-const toneButtonClassName =
-  'sqlite-button inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2 text-sm font-medium';
-
-export const sqliteSecondaryButtonClassName = `${toneButtonClassName} sqlite-button-secondary`;
-export const sqlitePrimaryButtonClassName = `${toneButtonClassName} sqlite-button-primary`;
-export const sqliteModalIconButtonClassName = `${sqliteSecondaryButtonClassName} h-10 w-10 shrink-0 px-0 py-0`;
-
-type SqliteModalCloseButtonProps = {
-  onClose: () => void;
-  disabled?: boolean;
-  ariaLabel?: string;
-};
-
-export const SqliteModalCloseButton = ({
-  onClose,
-  disabled = false,
-  ariaLabel = 'Close modal',
-}: SqliteModalCloseButtonProps) => {
-  return (
-    <button
-      type="button"
-      className={sqliteModalIconButtonClassName}
-      aria-label={ariaLabel}
-      onClick={onClose}
-      disabled={disabled}
-    >
-      <X aria-hidden="true" className="h-4 w-4" />
-    </button>
-  );
-};
diff --git a/packages/sqlite-plugin/src/ui/sqlite-row-delete-modal.tsx b/packages/sqlite-plugin/src/ui/sqlite-row-delete-modal.tsx
index 6cae032e..d77107ab 100644
--- a/packages/sqlite-plugin/src/ui/sqlite-row-delete-modal.tsx
+++ b/packages/sqlite-plugin/src/ui/sqlite-row-delete-modal.tsx
@@ -1,10 +1,6 @@
-import { Modal, useOverlayState } from '@heroui/react';
+import { AlertDialog, Button, Surface } from '@rozenite/ui';
 import { AlertTriangle, Trash2 } from 'lucide-react';
 import { useEffect, useState } from 'react';
-import {
-  SqliteModalCloseButton,
-  sqliteSecondaryButtonClassName,
-} from './sqlite-modal-controls';
 
 type SqliteRowDeleteModalProps = {
   isOpen: boolean;
@@ -14,10 +10,6 @@ type SqliteRowDeleteModalProps = {
   onDelete: () => Promise<void>;
 };
 
-const toneButtonClassName =
-  'sqlite-button inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2 text-sm font-medium';
-const dangerButtonClassName = `${toneButtonClassName} border border-rose-400/30 bg-rose-500/16 text-rose-50 hover:bg-rose-500/24`;
-
 export const SqliteRowDeleteModal = ({
   isOpen,
   rowNumber,
@@ -25,14 +17,6 @@ export const SqliteRowDeleteModal = ({
   onClose,
   onDelete,
 }: SqliteRowDeleteModalProps) => {
-  const overlay = useOverlayState({
-    isOpen,
-    onOpenChange: (open: boolean) => {
-      if (!open) {
-        onClose();
-      }
-    },
-  });
   const [deleting, setDeleting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -59,72 +43,74 @@ export const SqliteRowDeleteModal = ({
   };
 
   return (
-    <Modal state={overlay}>
-      <Modal.Backdrop
-        variant="blur"
+    <AlertDialog
+      isOpen={isOpen}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          onClose();
+        }
+      }}
+    >
+      <AlertDialog.Backdrop
+        className="bg-overlay/70 backdrop-blur-sm"
         isDismissable={!deleting}
-        className="bg-[rgba(5,10,16,0.24)] backdrop-blur-[2px]"
+        variant="opaque"
       >
-        <Modal.Container placement="center" size="md" scroll="inside">
-          <Modal.Dialog
+        <AlertDialog.Container className="w-full max-w-xl" placement="center">
+          <AlertDialog.Dialog
             aria-label={`Delete row ${rowNumber} from ${entityName}`}
-            className="w-full max-w-xl overflow-hidden border border-white/10 bg-[#0a121b] p-0 text-white shadow-[0_30px_90px_rgba(0,0,0,0.42)]"
+            className="bg-surface text-foreground"
           >
-            <div className="flex items-center justify-between gap-4 border-b border-white/8 px-5 py-5">
-              <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-rose-500/12 text-rose-200">
-                  <AlertTriangle aria-hidden="true" className="h-5 w-5" />
-                </div>
-                <div>
-                  <h2 className="text-lg font-semibold text-white">
-                    Delete Row {rowNumber}
-                  </h2>
-                  <p className="mt-1 text-sm text-slate-400">{entityName}</p>
-                </div>
+            <AlertDialog.Header className="flex items-center gap-3 border-b border-border/70 px-5 py-4">
+              <AlertDialog.Icon status="danger">
+                <AlertTriangle className="size-5" />
+              </AlertDialog.Icon>
+              <div className="min-w-0">
+                <AlertDialog.Heading className="text-base font-semibold text-foreground">
+                  Delete Row {rowNumber}
+                </AlertDialog.Heading>
+                <p className="mt-1 text-xs text-muted">{entityName}</p>
               </div>
-              <SqliteModalCloseButton onClose={onClose} disabled={deleting} />
-            </div>
-
-            <Modal.Body className="space-y-0 p-0">
-              <div className="space-y-5 px-5 py-5">
-                <p className="text-sm leading-6 text-slate-300">
-                  This will permanently delete the selected row and immediately
-                  refetch the current page.
-                </p>
+            </AlertDialog.Header>
 
-                {error ? (
-                  <div className="sqlite-inline-error" aria-live="polite">
-                    <div>
-                      <p className="font-medium text-rose-100">Delete Failed</p>
-                      <p className="mt-1 text-sm text-rose-100/90">{error}</p>
-                    </div>
-                  </div>
-                ) : null}
-              </div>
+            <AlertDialog.Body className="space-y-4 px-5 py-4 text-sm leading-6 text-muted">
+              <p>
+                This will permanently delete the selected row and immediately
+                refetch the current page.
+              </p>
 
-              <div className="flex items-center justify-end gap-3 border-t border-white/8 px-5 py-5">
-                <button
-                  type="button"
-                  className={sqliteSecondaryButtonClassName}
-                  onClick={onClose}
-                  disabled={deleting}
+              {error ? (
+                <Surface
+                  aria-live="polite"
+                  className="rounded-xl border border-danger/35 bg-danger/10 px-4 py-3 text-danger"
+                  variant="secondary"
                 >
-                  Cancel
-                </button>
-                <button
-                  type="button"
-                  className={dangerButtonClassName}
-                  onClick={() => void handleDelete()}
-                  disabled={deleting}
-                >
-                  <Trash2 aria-hidden="true" className="h-4 w-4" />
-                  {deleting ? 'Deleting…' : 'Delete Row'}
-                </button>
-              </div>
-            </Modal.Body>
-          </Modal.Dialog>
-        </Modal.Container>
-      </Modal.Backdrop>
-    </Modal>
+                  <p className="font-medium">Delete Failed</p>
+                  <p className="mt-1 text-sm text-danger">{error}</p>
+                </Surface>
+              ) : null}
+            </AlertDialog.Body>
+
+            <AlertDialog.Footer className="flex justify-end gap-2 border-t border-border/70 px-5 py-4">
+              <Button
+                isDisabled={deleting}
+                onPress={onClose}
+                variant="secondary"
+              >
+                Cancel
+              </Button>
+              <Button
+                isDisabled={deleting}
+                onPress={() => void handleDelete()}
+                variant="danger"
+              >
+                <Trash2 aria-hidden="true" className="size-4" />
+                {deleting ? 'Deleting…' : 'Delete Row'}
+              </Button>
+            </AlertDialog.Footer>
+          </AlertDialog.Dialog>
+        </AlertDialog.Container>
+      </AlertDialog.Backdrop>
+    </AlertDialog>
   );
 };
diff --git a/packages/sqlite-plugin/src/ui/sqlite-row-edit-modal.tsx b/packages/sqlite-plugin/src/ui/sqlite-row-edit-modal.tsx
index 2067f7c7..235f4744 100644
--- a/packages/sqlite-plugin/src/ui/sqlite-row-edit-modal.tsx
+++ b/packages/sqlite-plugin/src/ui/sqlite-row-edit-modal.tsx
@@ -1,12 +1,19 @@
-import { Modal, useOverlayState } from '@heroui/react';
+import {
+  Button,
+  Chip,
+  Description,
+  Input,
+  Label,
+  ListBox,
+  Modal,
+  Select,
+  Surface,
+  TextArea,
+  TextField,
+} from '@rozenite/ui';
 import { Pencil, Save } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 import type { SqliteColumnInfo } from './sqlite-introspection';
-import {
-  SqliteModalCloseButton,
-  sqlitePrimaryButtonClassName,
-  sqliteSecondaryButtonClassName,
-} from './sqlite-modal-controls';
 import {
   canColumnBeNull,
   getCompatibleValueKinds,
@@ -87,6 +94,30 @@ const createFieldDraft = (
   };
 };
 
+const getKindLabel = (kind: EditableValueKind) => {
+  if (kind === 'blob-ish') {
+    return 'Blob';
+  }
+
+  if (kind === 'json') {
+    return 'JSON';
+  }
+
+  if (kind === 'boolean') {
+    return 'Boolean';
+  }
+
+  if (kind === 'number') {
+    return 'Number';
+  }
+
+  if (kind === 'null') {
+    return 'NULL';
+  }
+
+  return 'Text';
+};
+
 export const SqliteRowEditModal = ({
   isOpen,
   rowNumber,
@@ -96,14 +127,6 @@ export const SqliteRowEditModal = ({
   onClose,
   onSave,
 }: SqliteRowEditModalProps) => {
-  const overlay = useOverlayState({
-    isOpen,
-    onOpenChange: (open: boolean) => {
-      if (!open) {
-        onClose();
-      }
-    },
-  });
   const primaryKeyColumns = useMemo(
     () => getPrimaryKeyColumns(columns),
     [columns],
@@ -195,188 +218,242 @@ export const SqliteRowEditModal = ({
   };
 
   return (
-    <Modal state={overlay}>
-      <Modal.Backdrop
-        variant="blur"
-        isDismissable={!submitting}
-        className="bg-[rgba(5,10,16,0.24)] backdrop-blur-[2px]"
-      >
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          onClose();
+        }
+      }}
+    >
+      <Modal.Backdrop variant="blur">
         <Modal.Container placement="center" size="lg" scroll="inside">
           <Modal.Dialog
             aria-label={`Edit row ${rowNumber} in ${entityName}`}
-            className="w-full max-w-4xl overflow-hidden border border-white/10 bg-[#0a121b] p-0 text-white shadow-[0_30px_90px_rgba(0,0,0,0.42)]"
+            className="w-full max-w-4xl"
           >
-            <div className="flex items-center justify-between gap-4 border-b border-white/8 px-5 py-5">
-              <div>
-                <div className="flex items-center gap-2">
-                  <Pencil aria-hidden="true" className="h-4 w-4 text-sky-300" />
-                  <h2 className="text-lg font-semibold text-white">
-                    Edit Row {rowNumber}
-                  </h2>
-                </div>
-                <p className="mt-1 text-sm text-slate-400">{entityName}</p>
+            <Modal.CloseTrigger isDisabled={submitting} />
+            <Modal.Header>
+              <Modal.Icon className="bg-info/15 text-info">
+                <Pencil className="size-5" />
+              </Modal.Icon>
+              <div className="min-w-0">
+                <Modal.Heading>Edit Row {rowNumber}</Modal.Heading>
+                <p className="mt-1 text-xs text-muted">{entityName}</p>
               </div>
-              <SqliteModalCloseButton onClose={onClose} disabled={submitting} />
-            </div>
-
-            <Modal.Body className="space-y-0 p-0">
-              <div className="space-y-5 px-5 py-5">
-                {primaryKeyColumns.length > 0 ? (
-                  <section className="space-y-3">
-                    <div>
-                      <h3 className="text-sm font-medium text-slate-200">
-                        Row Identifier
-                      </h3>
-                      <p className="mt-1 text-xs text-slate-400">
-                        Primary-key fields are shown for reference and cannot be
-                        edited.
-                      </p>
-                    </div>
-                    <div className="grid gap-3 md:grid-cols-2">
-                      {primaryKeyColumns.map((column) => (
-                        <div
+            </Modal.Header>
+
+            <Modal.Body className="flex flex-col gap-5 p-6">
+              {primaryKeyColumns.length > 0 ? (
+                <section className="space-y-3">
+                  <div>
+                    <h3 className="text-sm font-medium text-foreground">
+                      Row Identifier
+                    </h3>
+                    <p className="mt-1 text-xs text-muted">
+                      Primary-key fields are shown for reference and cannot be
+                      edited.
+                    </p>
+                  </div>
+                  <div className="grid gap-3 md:grid-cols-2">
+                    {primaryKeyColumns.map((column) => (
+                      <Surface
+                        key={column.name}
+                        className="rounded-xl border border-border/70 p-3"
+                        variant="secondary"
+                      >
+                        <div className="flex items-center justify-between gap-3">
+                          <div>
+                            <p className="text-sm font-medium text-foreground">
+                              {column.name}
+                            </p>
+                            <p className="text-xs uppercase tracking-[0.24em] text-muted">
+                              {column.type || 'value'}
+                            </p>
+                          </div>
+                          <Chip size="sm" variant="soft">
+                            PK
+                          </Chip>
+                        </div>
+                        <p className="mt-3 break-all font-mono text-sm text-foreground">
+                          {getValuePreview(row?.[column.name])}
+                        </p>
+                        <p className="mt-1 text-xs text-muted">
+                          {getValueKind(row?.[column.name])}
+                        </p>
+                      </Surface>
+                    ))}
+                  </div>
+                </section>
+              ) : null}
+
+              <section className="space-y-3">
+                <div>
+                  <h3 className="text-sm font-medium text-foreground">
+                    Editable Values
+                  </h3>
+                  <p className="mt-1 text-xs text-muted">
+                    Update any non-primary-key column and save to write the row
+                    back to SQLite.
+                  </p>
+                </div>
+
+                {editableColumns.length === 0 ? (
+                  <Surface
+                    className="rounded-xl border border-border/70 p-4 text-sm text-muted"
+                    variant="secondary"
+                  >
+                    This row does not expose editable, non-primary-key columns.
+                  </Surface>
+                ) : (
+                  <div className="space-y-4">
+                    {editableColumns.map((column) => {
+                      const draft =
+                        drafts[column.name] ??
+                        createFieldDraft(column, row?.[column.name]);
+                      const compatibleKinds = getCompatibleValueKinds(
+                        column,
+                        row?.[column.name],
+                      );
+                      const allowNull = canColumnBeNull(column);
+                      const shouldUseTextArea =
+                        draft.kind === 'blob-ish' ||
+                        draft.kind === 'json' ||
+                        (draft.kind === 'text' &&
+                          draft.rawValue.includes('\n'));
+
+                      return (
+                        <Surface
                           key={column.name}
-                          className="rounded-2xl border border-white/8 bg-white/[0.03] p-3"
+                          className="rounded-xl border border-border/70 p-4"
+                          variant="secondary"
                         >
-                          <div className="flex items-center justify-between gap-3">
-                            <div>
-                              <p className="text-sm font-medium text-white">
+                          <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+                            <div className="min-w-0">
+                              <Label htmlFor={`sqlite-row-edit-${column.name}`}>
                                 {column.name}
-                              </p>
-                              <p className="text-xs uppercase tracking-[0.24em] text-slate-500">
+                              </Label>
+                              <p className="mt-1 text-xs text-muted">
                                 {column.type || 'value'}
                               </p>
                             </div>
-                            <span className="sqlite-chip sqlite-chip-static">
-                              PK
-                            </span>
-                          </div>
-                          <p className="mt-3 break-all font-mono text-sm text-slate-200">
-                            {getValuePreview(row?.[column.name])}
-                          </p>
-                          <p className="mt-1 text-xs text-slate-500">
-                            {getValueKind(row?.[column.name])}
-                          </p>
-                        </div>
-                      ))}
-                    </div>
-                  </section>
-                ) : null}
 
-                <section className="space-y-3">
-                  <div>
-                    <h3 className="text-sm font-medium text-slate-200">
-                      Editable Values
-                    </h3>
-                    <p className="mt-1 text-xs text-slate-400">
-                      Update any non-primary-key column and save to write the
-                      row back to SQLite.
-                    </p>
-                  </div>
+                            {compatibleKinds.length > 1 || allowNull ? (
+                              <div className="w-full max-w-[12rem]">
+                                <Select
+                                  aria-label={`Value type for ${column.name}`}
+                                  className="w-full"
+                                  isDisabled={submitting}
+                                  onChange={(value) => {
+                                    if (value == null) {
+                                      return;
+                                    }
 
-                  {editableColumns.length === 0 ? (
-                    <div className="rounded-2xl border border-white/8 bg-white/[0.03] p-4 text-sm text-slate-300">
-                      This row does not expose editable, non-primary-key
-                      columns.
-                    </div>
-                  ) : (
-                    <div className="space-y-4">
-                      {editableColumns.map((column) => {
-                        const draft =
-                          drafts[column.name] ??
-                          createFieldDraft(column, row?.[column.name]);
-                        const compatibleKinds = getCompatibleValueKinds(
-                          column,
-                          row?.[column.name],
-                        );
-                        const allowNull = canColumnBeNull(column);
-                        const shouldUseTextArea =
-                          draft.kind === 'blob-ish' ||
-                          draft.kind === 'json' ||
-                          (draft.kind === 'text' &&
-                            draft.rawValue.includes('\n'));
-
-                        return (
-                          <div
-                            key={column.name}
-                            className="rounded-2xl border border-white/8 bg-white/[0.03] p-4"
-                          >
-                            <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
-                              <div className="min-w-0">
-                                <label
-                                  htmlFor={`sqlite-row-edit-${column.name}`}
-                                  className="text-sm font-medium text-white"
+                                    handleKindChange(
+                                      column.name,
+                                      String(value) as EditableValueKind,
+                                    );
+                                  }}
+                                  value={draft.kind}
+                                  variant="secondary"
                                 >
-                                  {column.name}
-                                </label>
-                                <p className="mt-1 text-xs text-slate-500">
-                                  {column.type || 'value'}
-                                </p>
+                                  <Select.Trigger>
+                                    <Select.Value />
+                                    <Select.Indicator />
+                                  </Select.Trigger>
+                                  <Select.Popover>
+                                    <ListBox
+                                      aria-label={`Value type for ${column.name}`}
+                                    >
+                                      {compatibleKinds.map((kind) => (
+                                        <ListBox.Item
+                                          key={kind}
+                                          id={kind}
+                                          textValue={getKindLabel(kind)}
+                                        >
+                                          {getKindLabel(kind)}
+                                          <ListBox.ItemIndicator />
+                                        </ListBox.Item>
+                                      ))}
+                                      {allowNull ? (
+                                        <ListBox.Item
+                                          key="null"
+                                          id="null"
+                                          textValue="NULL"
+                                        >
+                                          NULL
+                                          <ListBox.ItemIndicator />
+                                        </ListBox.Item>
+                                      ) : null}
+                                    </ListBox>
+                                  </Select.Popover>
+                                </Select>
                               </div>
+                            ) : (
+                              <Chip size="sm" variant="soft">
+                                {getKindLabel(compatibleKinds[0] ?? 'text')}
+                              </Chip>
+                            )}
+                          </div>
 
-                              {compatibleKinds.length > 1 || allowNull ? (
-                                <div className="w-full max-w-[12rem]">
-                                  <label
-                                    htmlFor={`sqlite-row-edit-type-${column.name}`}
-                                    className="sr-only"
-                                  >
-                                    Value type
-                                  </label>
-                                  <select
-                                    id={`sqlite-row-edit-type-${column.name}`}
-                                    className="sqlite-select w-full"
-                                    value={draft.kind}
-                                    disabled={submitting}
-                                    onChange={(event) =>
-                                      handleKindChange(
-                                        column.name,
-                                        event.target.value as EditableValueKind,
-                                      )
-                                    }
+                          <div className="mt-3">
+                            {draft.kind === 'null' ? (
+                              <Surface
+                                className="rounded-xl border border-dashed border-border/70 px-3 py-2 text-sm text-muted"
+                                variant="secondary"
+                              >
+                                This field will be saved as SQL NULL.
+                              </Surface>
+                            ) : draft.kind === 'boolean' ? (
+                              <Select
+                                aria-label={`Value for ${column.name}`}
+                                className="w-full"
+                                isDisabled={submitting}
+                                onChange={(value) =>
+                                  setDrafts((current) => ({
+                                    ...current,
+                                    [column.name]: {
+                                      ...draft,
+                                      rawValue:
+                                        value == null ? '' : String(value),
+                                    },
+                                  }))
+                                }
+                                value={draft.rawValue}
+                                variant="secondary"
+                              >
+                                <Select.Trigger>
+                                  <Select.Value />
+                                  <Select.Indicator />
+                                </Select.Trigger>
+                                <Select.Popover>
+                                  <ListBox
+                                    aria-label={`Boolean value for ${column.name}`}
                                   >
-                                    {compatibleKinds.map((kind) => (
-                                      <option key={kind} value={kind}>
-                                        {kind === 'blob-ish'
-                                          ? 'Blob'
-                                          : kind === 'json'
-                                            ? 'JSON'
-                                            : kind === 'boolean'
-                                              ? 'Boolean'
-                                              : kind === 'number'
-                                                ? 'Number'
-                                                : 'Text'}
-                                      </option>
-                                    ))}
-                                    {allowNull ? (
-                                      <option value="null">NULL</option>
-                                    ) : null}
-                                  </select>
-                                </div>
-                              ) : (
-                                <span className="sqlite-chip sqlite-chip-static">
-                                  {compatibleKinds[0] === 'blob-ish'
-                                    ? 'Blob'
-                                    : compatibleKinds[0] === 'json'
-                                      ? 'JSON'
-                                      : compatibleKinds[0] === 'boolean'
-                                        ? 'Boolean'
-                                        : compatibleKinds[0] === 'number'
-                                          ? 'Number'
-                                          : 'Text'}
-                                </span>
-                              )}
-                            </div>
-
-                            <div className="mt-3">
-                              {draft.kind === 'null' ? (
-                                <div className="rounded-xl border border-dashed border-white/10 bg-black/10 px-3 py-2 text-sm text-slate-400">
-                                  This field will be saved as SQL NULL.
-                                </div>
-                              ) : draft.kind === 'boolean' ? (
-                                <select
+                                    <ListBox.Item
+                                      id="true"
+                                      key="true"
+                                      textValue="true"
+                                    >
+                                      true
+                                      <ListBox.ItemIndicator />
+                                    </ListBox.Item>
+                                    <ListBox.Item
+                                      id="false"
+                                      key="false"
+                                      textValue="false"
+                                    >
+                                      false
+                                      <ListBox.ItemIndicator />
+                                    </ListBox.Item>
+                                  </ListBox>
+                                </Select.Popover>
+                              </Select>
+                            ) : shouldUseTextArea ? (
+                              <TextField className="w-full">
+                                <TextArea
                                   id={`sqlite-row-edit-${column.name}`}
-                                  className="sqlite-select w-full"
-                                  value={draft.rawValue}
+                                  className="min-h-28 w-full resize-y"
                                   disabled={submitting}
                                   onChange={(event) =>
                                     setDrafts((current) => ({
@@ -387,32 +464,14 @@ export const SqliteRowEditModal = ({
                                       },
                                     }))
                                   }
-                                >
-                                  <option value="true">true</option>
-                                  <option value="false">false</option>
-                                </select>
-                              ) : shouldUseTextArea ? (
-                                <textarea
-                                  id={`sqlite-row-edit-${column.name}`}
-                                  className="sqlite-input min-h-28 w-full resize-y py-3"
                                   value={draft.rawValue}
-                                  disabled={submitting}
-                                  onChange={(event) =>
-                                    setDrafts((current) => ({
-                                      ...current,
-                                      [column.name]: {
-                                        ...draft,
-                                        rawValue: event.target.value,
-                                      },
-                                    }))
-                                  }
+                                  variant="secondary"
                                 />
-                              ) : (
-                                <input
+                              </TextField>
+                            ) : (
+                              <TextField className="w-full" type="text">
+                                <Input
                                   id={`sqlite-row-edit-${column.name}`}
-                                  type="text"
-                                  className="sqlite-input w-full"
-                                  value={draft.rawValue}
                                   disabled={submitting}
                                   onChange={(event) =>
                                     setDrafts((current) => ({
@@ -423,62 +482,62 @@ export const SqliteRowEditModal = ({
                                       },
                                     }))
                                   }
+                                  value={draft.rawValue}
+                                  variant="secondary"
                                 />
-                              )}
-                            </div>
-
-                            <p className="mt-2 text-xs text-slate-500">
-                              Current value:{' '}
-                              {getValuePreview(row?.[column.name])} (
-                              {getValueKind(row?.[column.name])}) · Compatible:{' '}
-                              {compatibleKinds
-                                .map((kind) =>
-                                  kind === 'blob-ish'
-                                    ? 'blob'
-                                    : kind === 'json'
-                                      ? 'json'
-                                      : kind,
-                                )
-                                .join(', ')}
-                              {allowNull ? ', null' : ''}
-                            </p>
+                              </TextField>
+                            )}
                           </div>
-                        );
-                      })}
-                    </div>
-                  )}
-                </section>
 
-                {error ? (
-                  <div className="sqlite-inline-error" aria-live="polite">
-                    <div>
-                      <p className="font-medium text-rose-100">Save Failed</p>
-                      <p className="mt-1 text-sm text-rose-100/90">{error}</p>
-                    </div>
+                          <Description className="mt-2 text-xs text-muted">
+                            Current value: {getValuePreview(row?.[column.name])}{' '}
+                            ({getValueKind(row?.[column.name])}) · Compatible:{' '}
+                            {compatibleKinds
+                              .map((kind) =>
+                                kind === 'blob-ish'
+                                  ? 'blob'
+                                  : kind === 'json'
+                                    ? 'json'
+                                    : kind,
+                              )
+                              .join(', ')}
+                            {allowNull ? ', null' : ''}
+                          </Description>
+                        </Surface>
+                      );
+                    })}
                   </div>
-                ) : null}
-              </div>
-
-              <div className="flex items-center justify-end gap-3 border-t border-white/8 px-5 py-5">
-                <button
-                  type="button"
-                  className={sqliteSecondaryButtonClassName}
-                  onClick={onClose}
-                  disabled={submitting}
+                )}
+              </section>
+
+              {error ? (
+                <Surface
+                  aria-live="polite"
+                  className="rounded-xl border border-danger/35 bg-danger/10 px-4 py-3 text-danger"
+                  variant="secondary"
                 >
-                  Cancel
-                </button>
-                <button
-                  type="button"
-                  className={sqlitePrimaryButtonClassName}
-                  onClick={() => void handleSave()}
-                  disabled={submitting || editableColumns.length === 0}
-                >
-                  <Save aria-hidden="true" className="h-4 w-4" />
-                  {submitting ? 'Saving…' : 'Save Changes'}
-                </button>
-              </div>
+                  <p className="font-medium">Save Failed</p>
+                  <p className="mt-1 text-sm text-danger">{error}</p>
+                </Surface>
+              ) : null}
             </Modal.Body>
+            <Modal.Footer className="flex justify-end gap-2">
+              <Button
+                isDisabled={submitting}
+                onPress={onClose}
+                variant="secondary"
+              >
+                Cancel
+              </Button>
+              <Button
+                isDisabled={submitting || editableColumns.length === 0}
+                onPress={() => void handleSave()}
+                variant="primary"
+              >
+                <Save aria-hidden="true" className="size-4" />
+                {submitting ? 'Saving…' : 'Save Changes'}
+              </Button>
+            </Modal.Footer>
           </Modal.Dialog>
         </Modal.Container>
       </Modal.Backdrop>
diff --git a/packages/sqlite-plugin/src/ui/value-utils.tsx b/packages/sqlite-plugin/src/ui/value-utils.tsx
index 48a046ff..27858189 100644
--- a/packages/sqlite-plugin/src/ui/value-utils.tsx
+++ b/packages/sqlite-plugin/src/ui/value-utils.tsx
@@ -1,4 +1,4 @@
-import { JSONTree } from 'react-json-tree';
+import { JsonInspector, type JsonInspectorTheme } from '@rozenite/ui';
 import type {
   SqliteQueryMetadata,
   SqliteQueryResult,
@@ -6,25 +6,6 @@ import type {
 } from '../shared/types';
 import { truncateText } from './utils';
 
-const jsonTreeTheme = {
-  base00: 'transparent',
-  base01: '#10233c',
-  base02: '#173150',
-  base03: '#7b94b6',
-  base04: '#bfd0e5',
-  base05: '#eef5ff',
-  base06: '#ffffff',
-  base07: '#ffffff',
-  base08: '#fb7185',
-  base09: '#f59e0b',
-  base0A: '#facc15',
-  base0B: '#34d399',
-  base0C: '#22d3ee',
-  base0D: '#60a5fa',
-  base0E: '#78b8ff',
-  base0F: '#f97316',
-};
-
 export const isStructuredValue = (
   value: unknown,
 ): value is Record<string, unknown> | unknown[] => {
@@ -89,14 +70,16 @@ export const getValuePreview = (value: unknown, maxLength = 120) => {
   return truncateText(stringifyValue(value).replace(/\s+/g, ' '), maxLength);
 };
 
-export const getMetadataBadgeClassName = (metadata: SqliteQueryMetadata) => {
+export const getMetadataChipColor = (
+  metadata: SqliteQueryMetadata,
+): 'success' | 'warning' | 'default' => {
   if (
     metadata.statementType === 'select' ||
     metadata.statementType === 'pragma' ||
     metadata.statementType === 'with' ||
     metadata.statementType === 'explain'
   ) {
-    return 'sqlite-badge sqlite-badge-success';
+    return 'success';
   }
 
   if (
@@ -104,23 +87,30 @@ export const getMetadataBadgeClassName = (metadata: SqliteQueryMetadata) => {
     metadata.statementType === 'update' ||
     metadata.statementType === 'delete'
   ) {
-    return 'sqlite-badge sqlite-badge-warning';
+    return 'warning';
   }
 
-  return 'sqlite-badge sqlite-badge-neutral';
+  return 'default';
 };
 
-export const renderStructuredValue = (value: unknown) => {
+export const renderStructuredValue = (
+  value: unknown,
+  theme?: JsonInspectorTheme,
+) => {
   if (!isStructuredValue(value)) {
     return null;
   }
 
   return (
-    <JSONTree
+    <JsonInspector
+      className="text-sm"
+      collectionLimit={100}
+      copyable
       data={value}
-      theme={jsonTreeTheme}
-      invertTheme={false}
+      hideRoot
       shouldExpandNodeInitially={(keyPath) => keyPath.length <= 2}
+      sortObjectKeys
+      theme={theme}
     />
   );
 };
diff --git a/packages/ui/src/json-inspector.tsx b/packages/ui/src/json-inspector.tsx
index 62b188c2..c71ef2ce 100644
--- a/packages/ui/src/json-inspector.tsx
+++ b/packages/ui/src/json-inspector.tsx
@@ -64,26 +64,27 @@ export const JsonInspector = ({
   const clipboardValue = useMemo(() => stringifyForClipboard(data), [data]);
 
   return (
-    <div className={cn('relative text-sm', className)}>
+    <div className={cn('text-sm', className)}>
       {copyable ? (
-        <Button
-          aria-label={isCopied ? 'Copied JSON' : 'Copy JSON'}
-          className="absolute right-0 top-0 z-10"
-          isIconOnly
-          onPress={() => {
-            void copy(clipboardValue).catch(() => {});
-          }}
-          size="sm"
-          variant="ghost"
-        >
-          {isCopied ? (
-            <Check className="size-4 text-success" />
-          ) : (
-            <Copy className="size-4 text-muted" />
-          )}
-        </Button>
+        <div className="mb-2 flex justify-end">
+          <Button
+            aria-label={isCopied ? 'Copied JSON' : 'Copy JSON'}
+            isIconOnly
+            onPress={() => {
+              void copy(clipboardValue).catch(() => {});
+            }}
+            size="sm"
+            variant="ghost"
+          >
+            {isCopied ? (
+              <Check className="size-4 text-success" />
+            ) : (
+              <Copy className="size-4 text-muted" />
+            )}
+          </Button>
+        </div>
       ) : null}
-      <div className={copyable ? 'pr-10' : undefined}>
+      <div>
         <JSONTree
           collectionLimit={collectionLimit}
           data={data}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 33926bba..baac965e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -119,7 +119,7 @@ importers:
         version: 2.37.0(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       '@expo/vector-icons':
         specifier: ^15.0.3
-        version: 15.0.3(expo-font@55.0.3)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+        version: 15.0.3(expo-font@55.0.3(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       '@react-native-async-storage/async-storage':
         specifier: ^3.0.1
         version: 3.0.1(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
@@ -673,7 +673,7 @@ importers:
         version: 7.7.0
       vitest:
         specifier: ^4.0.18
-        version: 4.1.0(@types/node@22.17.0)(@vitest/ui@3.2.4(vitest@3.2.4))(jiti@2.6.1)(jsdom@22.1.0)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
+        version: 4.1.0(@types/node@22.17.0)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@22.1.0)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
 
   packages/mmkv-plugin:
     dependencies:
@@ -1228,6 +1228,9 @@ importers:
       '@rozenite/plugin-bridge':
         specifier: workspace:*
         version: link:../plugin-bridge
+      '@rozenite/ui':
+        specifier: workspace:*
+        version: link:../ui
     devDependencies:
       '@codemirror/autocomplete':
         specifier: ^6.20.1
@@ -1256,12 +1259,6 @@ importers:
       '@dnd-kit/sortable':
         specifier: ^8.0.0
         version: 8.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)
-      '@heroui/react':
-        specifier: ^3.0.1
-        version: 3.0.1(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(tailwindcss@4.2.2)
-      '@heroui/styles':
-        specifier: ^3.0.1
-        version: 3.0.1(tailwind-merge@3.4.0)(tailwindcss@4.2.2)
       '@lezer/highlight':
         specifier: ^1.2.3
         version: 1.2.3
@@ -1298,9 +1295,6 @@ importers:
       react-dom:
         specifier: 'catalog:'
         version: 19.2.0(react@19.2.0)
-      react-json-tree:
-        specifier: ^0.20.0
-        version: 0.20.0(@types/react@19.2.14)(react@19.2.0)
       react-native:
         specifier: 'catalog:'
         version: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
@@ -3260,54 +3254,12 @@ packages:
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
-  '@radix-ui/colors@3.0.0':
-    resolution: {integrity: sha512-FUOsGBkHrYJwCSEtWRCIfQbZG7q1e6DgxCIOe1SUQzDe/7rXXeA47s8yCn6fuTNQAj1Zq4oTFi9Yjp3wzElcxg==}
-
   '@radix-ui/number@1.1.1':
     resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
 
   '@radix-ui/primitive@1.1.2':
     resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
 
-  '@radix-ui/react-accessible-icon@1.1.7':
-    resolution: {integrity: sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-accordion@1.2.11':
-    resolution: {integrity: sha512-l3W5D54emV2ues7jjeG1xcyN7S3jnK3zE2zHqgn0CmMsy9lNJwmgcrmaxS+7ipw15FAivzKNzH3d5EcGoFKw0A==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-alert-dialog@1.1.14':
-    resolution: {integrity: sha512-IOZfZ3nPvN6lXpJTBCunFQPRSvK8MDgSc1FB85xnIpUKOw9en0dJj8JmCAxV7BiZdtYlUpmrQjoTFkVYtdoWzQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-arrow@1.1.7':
     resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
     peerDependencies:
@@ -3321,32 +3273,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-aspect-ratio@1.1.7':
-    resolution: {integrity: sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-avatar@1.1.10':
-    resolution: {integrity: sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-avatar@1.1.11':
     resolution: {integrity: sha512-0Qk603AHGV28BOBO34p7IgD5m+V5Sg/YovfayABkoDDBM5d3NCx0Mp4gGrjzLGes1jV5eNOE1r3itqOR33VC6Q==}
     peerDependencies:
@@ -3360,32 +3286,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-checkbox@1.3.2':
-    resolution: {integrity: sha512-yd+dI56KZqawxKZrJ31eENUwqc1QSqg4OZ15rybGjF2ZNwMO+wCyHzAVLRp9qoYJf7kYy0YpZ2b0JCzJ42HZpA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-collapsible@1.1.11':
-    resolution: {integrity: sha512-2qrRsVGSCYasSz1RFOorXwl0H7g7J1frQtgpQgYrt+MOidtPAINHn9CPovQXb83r8ahapdx3Tu0fa/pdFFSdPg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-collection@1.1.7':
     resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
     peerDependencies:
@@ -3408,19 +3308,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-context-menu@2.2.15':
-    resolution: {integrity: sha512-UsQUMjcYTsBjTSXw0P3GO0werEQvUY2plgRQuKoCTtkNr45q1DiL51j4m7gxhABzZ0BadoXNsIbg7F3KwiUBbw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-context@1.1.2':
     resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
     peerDependencies:
@@ -3509,37 +3396,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-form@0.1.7':
-    resolution: {integrity: sha512-IXLKFnaYvFg/KkeV5QfOX7tRnwHXp127koOFUjLWMTrRv5Rny3DQcAtIFFeA/Cli4HHM8DuJCXAUsgnFVJndlw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-hover-card@1.1.14':
-    resolution: {integrity: sha512-CPYZ24Mhirm+g6D8jArmLzjYu4Eyg3TTUHswR26QgzXBHBe64BO/RHOJKzmF/Dxb4y4f9PKyJdwm/O/AhNkb+Q==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-icons@1.3.2':
-    resolution: {integrity: sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==}
-    peerDependencies:
-      react: ^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc
-
   '@radix-ui/react-id@1.1.1':
     resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
     peerDependencies:
@@ -3549,19 +3405,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-label@2.1.7':
-    resolution: {integrity: sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-menu@2.1.15':
     resolution: {integrity: sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew==}
     peerDependencies:
@@ -3575,8 +3418,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-menubar@1.1.15':
-    resolution: {integrity: sha512-Z71C7LGD+YDYo3TV81paUs8f3Zbmkvg6VLRQpKYfzioOE6n7fOhA3ApK/V/2Odolxjoc4ENk8AYCjohCNayd5A==}
+  '@radix-ui/react-popper@1.2.7':
+    resolution: {integrity: sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -3588,8 +3431,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-navigation-menu@1.2.13':
-    resolution: {integrity: sha512-WG8wWfDiJlSF5hELjwfjSGOXcBR/ZMhBFCGYe8vERpC39CQYZeq1PQ2kaYHdye3V95d06H89KGMsVCIE4LWo3g==}
+  '@radix-ui/react-portal@1.1.9':
+    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -3601,8 +3444,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-one-time-password-field@0.1.7':
-    resolution: {integrity: sha512-w1vm7AGI8tNXVovOK7TYQHrAGpRF7qQL+ENpT1a743De5Zmay2RbWGKAiYDKIyIuqptns+znCKwNztE2xl1n0Q==}
+  '@radix-ui/react-presence@1.1.4':
+    resolution: {integrity: sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -3614,8 +3457,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-password-toggle-field@0.1.2':
-    resolution: {integrity: sha512-F90uYnlBsLPU1UbSLciLsWQmk8+hdWa6SFw4GXaIdNWxFxI5ITKVdAG64f+Twaa9ic6xE7pqxPyUmodrGjT4pQ==}
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -3627,8 +3470,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-popover@1.1.14':
-    resolution: {integrity: sha512-ODz16+1iIbGUfFEfKx2HTPKizg2MN39uIOV8MXeHnmdd3i/N9Wt7vU46wbHsqA0xoaQyXVcs0KIlBdOA2Y95bw==}
+  '@radix-ui/react-primitive@2.1.4':
+    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -3640,8 +3483,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-popper@1.2.7':
-    resolution: {integrity: sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==}
+  '@radix-ui/react-roving-focus@1.1.10':
+    resolution: {integrity: sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -3653,8 +3496,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-portal@1.1.9':
-    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
+  '@radix-ui/react-scroll-area@1.2.9':
+    resolution: {integrity: sha512-YSjEfBXnhUELsO2VzjdtYYD4CfQjvao+lhhrX5XsHD7/cyUNzljF1FHEbgTPN7LH2MClfwRMIsYlqTYpKTTe2A==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -3666,8 +3509,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-presence@1.1.4':
-    resolution: {integrity: sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==}
+  '@radix-ui/react-separator@1.1.7':
+    resolution: {integrity: sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -3679,47 +3522,35 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-primitive@2.1.3':
-    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+  '@radix-ui/react-slot@1.2.0':
+    resolution: {integrity: sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-primitive@2.1.4':
-    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-progress@1.1.7':
-    resolution: {integrity: sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==}
+  '@radix-ui/react-slot@1.2.4':
+    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-radio-group@1.3.7':
-    resolution: {integrity: sha512-9w5XhD0KPOrm92OTTE0SysH3sYzHsSTHNvZgUBo/VZ80VdYyB5RneDbc0dKpURS24IxkoFRu/hI0i4XyfFwY6g==}
+  '@radix-ui/react-tabs@1.1.12':
+    resolution: {integrity: sha512-GTVAlRVrQrSw3cEARM0nAx73ixrWDPNZAruETn3oHCNP6SbZ/hNxdxp+u7VkIEv3/sFoLq1PfcHrl7Pnp0CDpw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -3731,73 +3562,53 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-roving-focus@1.1.10':
-    resolution: {integrity: sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==}
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-scroll-area@1.2.9':
-    resolution: {integrity: sha512-YSjEfBXnhUELsO2VzjdtYYD4CfQjvao+lhhrX5XsHD7/cyUNzljF1FHEbgTPN7LH2MClfwRMIsYlqTYpKTTe2A==}
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-select@2.2.5':
-    resolution: {integrity: sha512-HnMTdXEVuuyzx63ME0ut4+sEMYW6oouHWNGUZc7ddvUWIcfCva/AMoqEW/3wnEllriMWBa0RHspCYnfCWJQYmA==}
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-separator@1.1.7':
-    resolution: {integrity: sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==}
+  '@radix-ui/react-use-escape-keydown@1.1.1':
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-slider@1.3.5':
-    resolution: {integrity: sha512-rkfe2pU2NBAYfGaxa3Mqosi7VZEWX5CxKaanRv0vZd4Zhl9fvQrg0VM93dv3xGLGfrHuoTRF3JXH8nb9g+B3fw==}
+  '@radix-ui/react-use-is-hydrated@0.1.0':
+    resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-slot@1.2.0':
-    resolution: {integrity: sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==}
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -3805,8 +3616,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-slot@1.2.3':
-    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+  '@radix-ui/react-use-rect@1.1.1':
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -3814,8 +3625,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-slot@1.2.4':
-    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
+  '@radix-ui/react-use-size@1.1.1':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -3823,215 +3634,17 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-switch@1.2.5':
-    resolution: {integrity: sha512-5ijLkak6ZMylXsaImpZ8u4Rlf5grRmoc0p0QeX9VJtlrM4f5m3nCTX8tWga/zOA8PZYIR/t0p2Mnvd7InrJ6yQ==}
+  '@radix-ui/rect@1.1.1':
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+
+  '@react-aria/autocomplete@3.0.0-rc.6':
+    resolution: {integrity: sha512-uymUNJ8NW+dX7lmgkHE+SklAbxwktycAJcI5lBBw6KPZyc0EdMHC+/Fc5CUz3enIAhNwd2oxxogcSHknquMzQA==}
     peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
 
-  '@radix-ui/react-tabs@1.1.12':
-    resolution: {integrity: sha512-GTVAlRVrQrSw3cEARM0nAx73ixrWDPNZAruETn3oHCNP6SbZ/hNxdxp+u7VkIEv3/sFoLq1PfcHrl7Pnp0CDpw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-toast@1.2.14':
-    resolution: {integrity: sha512-nAP5FBxBJGQ/YfUB+r+O6USFVkWq3gAInkxyEnmvEV5jtSbfDhfa4hwX8CraCnbjMLsE7XSf/K75l9xXY7joWg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-toggle-group@1.1.10':
-    resolution: {integrity: sha512-kiU694Km3WFLTC75DdqgM/3Jauf3rD9wxeS9XtyWFKsBUeZA337lC+6uUazT7I1DhanZ5gyD5Stf8uf2dbQxOQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-toggle@1.1.9':
-    resolution: {integrity: sha512-ZoFkBBz9zv9GWer7wIjvdRxmh2wyc2oKWw6C6CseWd6/yq1DK/l5lJ+wnsmFwJZbBYqr02mrf8A2q/CVCuM3ZA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-toolbar@1.1.10':
-    resolution: {integrity: sha512-jiwQsduEL++M4YBIurjSa+voD86OIytCod0/dbIxFZDLD8NfO1//keXYMfsW8BPcfqwoNjt+y06XcJqAb4KR7A==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-tooltip@1.2.7':
-    resolution: {integrity: sha512-Ap+fNYwKTYJ9pzqW+Xe2HtMRbQ/EeWkj2qykZ6SuEV4iS/o1bZI5ssJbk4D2r8XuDuOBVz/tIx2JObtuqU+5Zw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-use-callback-ref@1.1.1':
-    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-controllable-state@1.2.2':
-    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-effect-event@0.0.2':
-    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-escape-keydown@1.1.1':
-    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-is-hydrated@0.1.0':
-    resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-layout-effect@1.1.1':
-    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-previous@1.1.1':
-    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-rect@1.1.1':
-    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-size@1.1.1':
-    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-visually-hidden@1.2.3':
-    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/rect@1.1.1':
-    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
-
-  '@radix-ui/themes@3.2.1':
-    resolution: {integrity: sha512-WJL2YKAGItkunwm3O4cLTFKCGJTfAfF6Hmq7f5bCo1ggqC9qJQ/wfg/25AAN72aoEM1yqXZQ+pslsw48AFR0Xg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: 16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: 16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@react-aria/autocomplete@3.0.0-rc.6':
-    resolution: {integrity: sha512-uymUNJ8NW+dX7lmgkHE+SklAbxwktycAJcI5lBBw6KPZyc0EdMHC+/Fc5CUz3enIAhNwd2oxxogcSHknquMzQA==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-
-  '@react-aria/breadcrumbs@3.5.32':
-    resolution: {integrity: sha512-S61vh5DJ2PXiXUwD7gk+pvS/b4VPrc3ZJOUZ0yVRLHkVESr5LhIZH+SAVgZkm1lzKyMRG+BH+fiRH/DZRSs7SA==}
+  '@react-aria/breadcrumbs@3.5.32':
+    resolution: {integrity: sha512-S61vh5DJ2PXiXUwD7gk+pvS/b4VPrc3ZJOUZ0yVRLHkVESr5LhIZH+SAVgZkm1lzKyMRG+BH+fiRH/DZRSs7SA==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
       react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
@@ -4411,6 +4024,8 @@ packages:
   '@react-native/codegen@0.83.1':
     resolution: {integrity: sha512-FpRxenonwH+c2a5X5DZMKUD7sCudHxB3eSQPgV9R+uxd28QWslyAWrpnJM/Az96AEksHnymDzEmzq2HLX5nb+g==}
     engines: {node: '>= 20.19.4'}
+    peerDependencies:
+      '@babel/core': '*'
 
   '@react-native/codegen@0.85.0':
     resolution: {integrity: sha512-5CHJkC9UpBxQokGju7gD6W615RO1zR17INuB1PB4kcXNy3rre7tyy6ufct+sllDD6ildRC9A//cyh6TI03+jxA==}
@@ -6905,9 +6520,6 @@ packages:
   class-variance-authority@0.7.1:
     resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
-  classnames@2.5.1:
-    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
-
   clean-css@5.3.3:
     resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==}
     engines: {node: '>= 10.0'}
@@ -10850,19 +10462,6 @@ packages:
   quick-format-unescaped@4.0.4:
     resolution: {integrity: sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==}
 
-  radix-ui@1.4.2:
-    resolution: {integrity: sha512-fT/3YFPJzf2WUpqDoQi005GS8EpCi+53VhcLaHUj5fwkPYiZAjk1mSxFvbMA8Uq71L03n+WysuYC+mlKkXxt/Q==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   railroad-diagrams@1.0.0:
     resolution: {integrity: sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A==}
 
@@ -11185,12 +10784,6 @@ packages:
       react: '>=16.6.0'
       react-dom: '>=16.6.0'
 
-  react-virtuoso@4.14.0:
-    resolution: {integrity: sha512-fR+eiCvirSNIRvvCD7ueJPRsacGQvUbjkwgWzBZXVq+yWypoH7mRUvWJzGHIdoRaCZCT+6mMMMwIG2S1BW3uwA==}
-    peerDependencies:
-      react: '>=16 || >=17 || >= 18 || >= 19'
-      react-dom: '>=16 || >=17 || >= 18 || >=19'
-
   react-virtuoso@4.18.5:
     resolution: {integrity: sha512-QDyNjyNEuurZG67SOmzYyxEkQYSyGmAMixOI6M15L/Q4CF39EgG+88y6DgZRo0q7rmy0HPx3Fj90I8/tPdnRCQ==}
     peerDependencies:
@@ -14581,7 +14174,7 @@ snapshots:
 
   '@expo/dom-webview@55.0.3(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)':
     dependencies:
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       react: 19.2.0
       react-native: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
 
@@ -14634,7 +14227,7 @@ snapshots:
     dependencies:
       '@expo/dom-webview': 55.0.3(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       anser: 1.4.10
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       react: 19.2.0
       react-native: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
       stacktrace-parser: 0.1.11
@@ -14661,7 +14254,7 @@ snapshots:
       postcss: 8.4.49
       resolve-from: 5.0.0
     optionalDependencies:
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
     transitivePeerDependencies:
       - bufferutil
       - supports-color
@@ -14671,7 +14264,7 @@ snapshots:
     dependencies:
       '@expo/log-box': 55.0.6(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       anser: 1.4.10
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       pretty-format: 29.7.0
       react: 19.2.0
       react-native: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
@@ -14729,7 +14322,7 @@ snapshots:
       '@expo/json-file': 10.0.12
       '@react-native/normalize-colors': 0.83.1
       debug: 4.4.3(supports-color@5.5.0)
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       resolve-from: 5.0.0
       semver: 7.7.3
       xml2js: 0.6.0
@@ -14784,7 +14377,7 @@ snapshots:
 
   '@expo/sudo-prompt@9.3.2': {}
 
-  '@expo/vector-icons@15.0.3(expo-font@55.0.3)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)':
+  '@expo/vector-icons@15.0.3(expo-font@55.0.3(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)':
     dependencies:
       expo-font: 55.0.3(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       react: 19.2.0
@@ -15485,52 +15078,10 @@ snapshots:
 
   '@polka/url@1.0.0-next.29': {}
 
-  '@radix-ui/colors@3.0.0': {}
-
   '@radix-ui/number@1.1.1': {}
 
   '@radix-ui/primitive@1.1.2': {}
 
-  '@radix-ui/react-accessible-icon@1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
-  '@radix-ui/react-accordion@1.2.11(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collapsible': 1.1.11(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
-  '@radix-ui/react-alert-dialog@1.1.14(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-dialog': 1.1.14(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
   '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -15540,28 +15091,6 @@ snapshots:
       '@types/react': 19.2.14
       '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-aspect-ratio@1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
-  '@radix-ui/react-avatar@1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
   '@radix-ui/react-avatar@1.1.11(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/react-context': 1.1.3(@types/react@19.2.14)(react@19.2.0)
@@ -15575,425 +15104,85 @@ snapshots:
       '@types/react': 19.2.14
       '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-checkbox@1.3.2(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
       '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
-  '@radix-ui/react-collapsible@1.1.11(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
-  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
-  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.14)(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-context-menu@2.2.15(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-menu': 2.1.15(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
-  '@radix-ui/react-context@1.1.2(@types/react@19.2.14)(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-context@1.1.3(@types/react@19.2.14)(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-dialog@1.1.14(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
-      aria-hidden: 1.2.6
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      react-remove-scroll: 2.7.1(@types/react@19.2.14)(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
-  '@radix-ui/react-direction@1.1.1(@types/react@19.2.14)(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-dismissable-layer@1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
-  '@radix-ui/react-dropdown-menu@2.1.15(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-menu': 2.1.15(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
-  '@radix-ui/react-focus-guards@1.1.2(@types/react@19.2.14)(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
-  '@radix-ui/react-form@0.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-label': 2.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
-  '@radix-ui/react-hover-card@1.1.14(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
-  '@radix-ui/react-icons@1.3.2(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
-
-  '@radix-ui/react-id@1.1.1(@types/react@19.2.14)(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@radix-ui/react-label@2.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
-  '@radix-ui/react-menu@2.1.15(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      aria-hidden: 1.2.6
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      react-remove-scroll: 2.7.1(@types/react@19.2.14)(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
-  '@radix-ui/react-menubar@1.1.15(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-menu': 2.1.15(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
-  '@radix-ui/react-navigation-menu@1.2.13(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
-  '@radix-ui/react-one-time-password-field@0.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
-  '@radix-ui/react-password-toggle-field@0.1.2(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.0)
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.14)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
-  '@radix-ui/react-popover@1.1.14(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
-      aria-hidden: 1.2.6
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      react-remove-scroll: 2.7.1(@types/react@19.2.14)(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
-  '@radix-ui/react-popper@1.2.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@floating-ui/react-dom': 2.1.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/rect': 1.1.1
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.0)
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
     optionalDependencies:
       '@types/react': 19.2.14
       '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.14)(react@19.2.0)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.0)
       react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
     optionalDependencies:
       '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-presence@1.1.4(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-context@1.1.2(@types/react@19.2.14)(react@19.2.0)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.0)
       react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
     optionalDependencies:
       '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-context@1.1.3(@types/react@19.2.14)(react@19.2.0)':
     dependencies:
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.0)
       react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
     optionalDependencies:
       '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-dialog@1.1.14(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
-      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.14)(react@19.2.0)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.2.14)(react@19.2.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
+      aria-hidden: 1.2.6
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
+      react-remove-scroll: 2.7.1(@types/react@19.2.14)(react@19.2.0)
     optionalDependencies:
       '@types/react': 19.2.14
       '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-progress@1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-direction@1.1.1(@types/react@19.2.14)(react@19.2.0)':
     dependencies:
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
     optionalDependencies:
       '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-radio-group@1.3.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-dismissable-layer@1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.0)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.14)(react@19.2.0)
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
     optionalDependencies:
       '@types/react': 19.2.14
       '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-roving-focus@1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-dropdown-menu@2.1.15(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
       '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.0)
       '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.0)
+      '@radix-ui/react-menu': 2.1.15(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.0)
       '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
@@ -16001,26 +15190,32 @@ snapshots:
       '@types/react': 19.2.14
       '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-scroll-area@1.2.9(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-focus-guards@1.1.2(@types/react@19.2.14)(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.2
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.0)
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
     optionalDependencies:
       '@types/react': 19.2.14
       '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-select@2.2.5(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-id@1.1.1(@types/react@19.2.14)(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.0)
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-menu@2.1.15(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
-      '@radix-ui/number': 1.1.1
       '@radix-ui/primitive': 1.1.2
       '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
@@ -16032,13 +15227,11 @@ snapshots:
       '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.0)
       '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.0)
       '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       aria-hidden: 1.2.6
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
@@ -16047,79 +15240,72 @@ snapshots:
       '@types/react': 19.2.14
       '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-separator@1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
-  '@radix-ui/react-slider@1.3.5(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-popper@1.2.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@floating-ui/react-dom': 2.1.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
       '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.0)
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.0)
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.14)(react@19.2.0)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.14)(react@19.2.0)
       '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.0)
+      '@radix-ui/rect': 1.1.1
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
     optionalDependencies:
       '@types/react': 19.2.14
       '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-slot@1.2.0(@types/react@19.2.14)(react@19.2.0)':
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.0)
       react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
     optionalDependencies:
       '@types/react': 19.2.14
+      '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-slot@1.2.3(@types/react@19.2.14)(react@19.2.0)':
+  '@radix-ui/react-presence@1.1.4(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.0)
       react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
     optionalDependencies:
       '@types/react': 19.2.14
+      '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-slot@1.2.4(@types/react@19.2.14)(react@19.2.0)':
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.0)
       react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
     optionalDependencies:
       '@types/react': 19.2.14
+      '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-switch@1.2.5(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.0)
+      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.14)(react@19.2.0)
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
     optionalDependencies:
       '@types/react': 19.2.14
       '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-tabs@1.1.12(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-roving-focus@1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
       '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
       '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.0)
       '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.0)
       '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
@@ -16127,81 +15313,63 @@ snapshots:
       '@types/react': 19.2.14
       '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-toast@1.2.14(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-scroll-area@1.2.9(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
+      '@radix-ui/number': 1.1.1
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
       '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.0)
       '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
     optionalDependencies:
       '@types/react': 19.2.14
       '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-toggle-group@1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-separator@1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.0)
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-toggle': 1.1.9(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
     optionalDependencies:
       '@types/react': 19.2.14
       '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-toggle@1.1.9(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-slot@1.2.0(@types/react@19.2.14)(react@19.2.0)':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
       react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
     optionalDependencies:
       '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-toolbar@1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-slot@1.2.3(@types/react@19.2.14)(react@19.2.0)':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-separator': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-toggle-group': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
       react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
     optionalDependencies:
       '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
 
-  '@radix-ui/react-tooltip@1.2.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-slot@1.2.4(@types/react@19.2.14)(react@19.2.0)':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-tabs@1.1.12(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
       '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.0)
       '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.0)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
     optionalDependencies:
@@ -16249,12 +15417,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
-  '@radix-ui/react-use-previous@1.1.1(@types/react@19.2.14)(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.14
-
   '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.14)(react@19.2.0)':
     dependencies:
       '@radix-ui/rect': 1.1.1
@@ -16269,29 +15431,8 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
-  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
   '@radix-ui/rect@1.1.1': {}
 
-  '@radix-ui/themes@3.2.1(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/colors': 3.0.0
-      classnames: 2.5.1
-      radix-ui: 1.4.2(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      react-remove-scroll-bar: 2.3.8(@types/react@19.2.14)(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
   '@react-aria/autocomplete@3.0.0-rc.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@react-aria/combobox': 3.15.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -17081,11 +16222,12 @@ snapshots:
       - '@babel/preset-env'
       - supports-color
 
-  '@react-native/babel-plugin-codegen@0.83.1':
+  '@react-native/babel-plugin-codegen@0.83.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/traverse': 7.29.0(supports-color@5.5.0)
-      '@react-native/codegen': 0.83.1
+      '@react-native/codegen': 0.83.1(@babel/core@7.29.0)
     transitivePeerDependencies:
+      - '@babel/core'
       - supports-color
 
   '@react-native/babel-plugin-codegen@0.85.0(@babel/core@7.29.0)':
@@ -17190,7 +16332,7 @@ snapshots:
       '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.29.0)
       '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.29.0)
       '@babel/template': 7.28.6
-      '@react-native/babel-plugin-codegen': 0.83.1
+      '@react-native/babel-plugin-codegen': 0.83.1(@babel/core@7.29.0)
       babel-plugin-syntax-hermes-parser: 0.32.0
       babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.29.0)
       react-refresh: 0.14.2
@@ -17248,7 +16390,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@react-native/codegen@0.83.1':
+  '@react-native/codegen@0.83.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/parser': 7.29.0
@@ -17257,8 +16399,6 @@ snapshots:
       invariant: 2.2.4
       nullthrows: 1.1.1
       yargs: 17.7.2
-    transitivePeerDependencies:
-      - supports-color
 
   '@react-native/codegen@0.85.0(@babel/core@7.29.0)':
     dependencies:
@@ -20116,7 +19256,7 @@ snapshots:
       resolve-from: 5.0.0
     optionalDependencies:
       '@babel/runtime': 7.26.10
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
     transitivePeerDependencies:
       - '@babel/core'
       - supports-color
@@ -20419,8 +19559,6 @@ snapshots:
     dependencies:
       clsx: 2.1.1
 
-  classnames@2.5.1: {}
-
   clean-css@5.3.3:
     dependencies:
       source-map: 0.6.1
@@ -21645,7 +20783,7 @@ snapshots:
   expo-asset@55.0.4(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0):
     dependencies:
       '@expo/image-utils': 0.8.12
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       expo-constants: 55.0.4(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))
       react: 19.2.0
       react-native: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
@@ -21674,19 +20812,19 @@ snapshots:
     dependencies:
       '@expo/config': 55.0.4
       '@expo/env': 2.1.0
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       react-native: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
     transitivePeerDependencies:
       - supports-color
 
   expo-file-system@55.0.5(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)):
     dependencies:
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       react-native: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
 
   expo-font@55.0.3(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0):
     dependencies:
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       fontfaceobserver: 2.3.0
       react: 19.2.0
       react-native: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
@@ -21712,7 +20850,7 @@ snapshots:
 
   expo-keep-awake@55.0.2(expo@55.0.0-preview.10)(react@19.2.0):
     dependencies:
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       react: 19.2.0
 
   expo-linking@55.0.4(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0):
@@ -21804,7 +20942,7 @@ snapshots:
   expo-sqlite@55.0.11(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0):
     dependencies:
       await-lock: 2.2.2
-      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      expo: 55.0.0-preview.10(@babel/core@7.29.0)(@expo/dom-webview@55.0.3)(@expo/metro-runtime@55.0.5)(expo-router@55.0.0-preview.7)(react-dom@19.2.0(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       react: 19.2.0
       react-native: 0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0)
 
@@ -21851,7 +20989,7 @@ snapshots:
       '@expo/log-box': 55.0.6(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       '@expo/metro': 54.2.0
       '@expo/metro-config': 55.0.5(expo@55.0.0-preview.10)
-      '@expo/vector-icons': 15.0.3(expo-font@55.0.3)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      '@expo/vector-icons': 15.0.3(expo-font@55.0.3(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       '@ungap/structured-clone': 1.3.0
       babel-preset-expo: 55.0.4(@babel/core@7.29.0)(@babel/runtime@7.26.10)(expo@55.0.0-preview.10)(react-refresh@0.14.2)
       expo-asset: 55.0.4(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
@@ -21891,7 +21029,7 @@ snapshots:
       '@expo/log-box': 55.0.6(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       '@expo/metro': 54.2.0
       '@expo/metro-config': 55.0.5(expo@55.0.0-preview.10)
-      '@expo/vector-icons': 15.0.3(expo-font@55.0.3)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      '@expo/vector-icons': 15.0.3(expo-font@55.0.3(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0))(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
       '@ungap/structured-clone': 1.3.0
       babel-preset-expo: 55.0.4(@babel/core@7.29.0)(@babel/runtime@7.26.10)(expo@55.0.0-preview.10)(react-refresh@0.14.2)
       expo-asset: 55.0.4(expo@55.0.0-preview.10)(react-native@0.83.1(@babel/core@7.29.0)(@react-native/metro-config@0.76.9)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
@@ -25448,69 +24586,6 @@ snapshots:
 
   quick-format-unescaped@4.0.4: {}
 
-  radix-ui@1.4.2(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-accessible-icon': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-accordion': 1.2.11(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-alert-dialog': 1.1.14(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-aspect-ratio': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-avatar': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-checkbox': 1.3.2(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-collapsible': 1.1.11(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-context-menu': 2.2.15(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-dialog': 1.1.14(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-dropdown-menu': 2.1.15(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-form': 0.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-hover-card': 1.1.14(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-label': 2.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-menu': 2.1.15(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-menubar': 1.1.15(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-navigation-menu': 1.2.13(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-one-time-password-field': 0.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-password-toggle-field': 0.1.2(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-popover': 1.1.14(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-progress': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-radio-group': 1.3.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-scroll-area': 1.2.9(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-select': 2.2.5(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-separator': 1.1.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slider': 1.3.5(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-switch': 1.2.5(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-tabs': 1.1.12(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-toast': 1.2.14(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-toggle': 1.1.9(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-toggle-group': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-toolbar': 1.1.10(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-tooltip': 1.2.7(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.0)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.11(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.1.11(@types/react@19.2.14)
-
   railroad-diagrams@1.0.0: {}
 
   ramda@0.29.1: {}
@@ -25845,7 +24920,7 @@ snapshots:
     dependencies:
       '@jest/create-cache-key-function': 29.7.0
       '@react-native/assets-registry': 0.83.1
-      '@react-native/codegen': 0.83.1
+      '@react-native/codegen': 0.83.1(@babel/core@7.29.0)
       '@react-native/community-cli-plugin': 0.83.1(@react-native/metro-config@0.76.9)
       '@react-native/gradle-plugin': 0.83.1
       '@react-native/js-polyfills': 0.83.1
@@ -25893,7 +24968,7 @@ snapshots:
     dependencies:
       '@jest/create-cache-key-function': 29.7.0
       '@react-native/assets-registry': 0.83.1
-      '@react-native/codegen': 0.83.1
+      '@react-native/codegen': 0.83.1(@babel/core@7.29.0)
       '@react-native/community-cli-plugin': 0.83.1(@react-native/metro-config@0.76.9)
       '@react-native/gradle-plugin': 0.83.1
       '@react-native/js-polyfills': 0.83.1
@@ -26062,11 +25137,6 @@ snapshots:
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
 
-  react-virtuoso@4.14.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
-    dependencies:
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-
   react-virtuoso@4.18.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
     dependencies:
       react: 19.2.0
@@ -27801,7 +26871,7 @@ snapshots:
       - tsx
       - yaml
 
-  vitest@4.1.0(@types/node@22.17.0)(@vitest/ui@3.2.4(vitest@3.2.4))(jiti@2.6.1)(jsdom@22.1.0)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1):
+  vitest@4.1.0(@types/node@22.17.0)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@22.1.0)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1):
     dependencies:
       '@vitest/expect': 4.1.0
       '@vitest/mocker': 4.1.0(vite@7.3.1(@types/node@22.17.0)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))