Sprint 4: developer design-system screens

Two service screens accessible via Tweaks screen selector:

- DEV · Палитра — every color role grouped (primary / accent / warm /
  status / text / surfaces) with swatch, role name, CSS var name,
  hex code, and usage note. Key-color banner at top. Dynamic values
  (primary/accent/warm/success-50/fg-4/p300) recompute from
  ctx.palette when the user flips the color in Tweaks.

- DEV · Примеры — rendered components (buttons, chips, surfaces,
  status blocks, text hierarchy, avatars, badges, inputs, segmented
  control, shadow/radius scale) each labeled with the CSS vars it
  uses, so devs can read the theme visually.

Plumbed the active palette object via ctx.palette from App.jsx.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/PhoneApp.jsx

@@ -16,6 +16,7 @@ import {
 import { ChatsListScreen, ChatConversationScreen } from './screens/screens-chats.jsx';
 import { ArticlesScreen, ArticleDetailScreen } from './screens/screens-articles.jsx';
 import { HomeV2Screen, SearchScreen, ContactsScreen, PricesScreen } from './screens/screens-v2.jsx';
+import { DevColorsScreen, DevExamplesScreen } from './screens/screens-dev.jsx';
 
 function renderScreen(screenId, nav, ctx) {
   const parts = screenId.split(':');
@@ -51,6 +52,8 @@ function renderScreen(screenId, nav, ctx) {
     case 'search':          return <SearchScreen nav={nav} />;
     case 'contacts':        return <ContactsScreen nav={nav} />;
     case 'prices':          return <PricesScreen nav={nav} />;
+    case 'dev-colors':      return <DevColorsScreen nav={nav} ctx={ctx} />;
+    case 'dev-examples':    return <DevExamplesScreen nav={nav} ctx={ctx} />;
     default: return <div style={{padding: 40, textAlign: 'center'}}>Экран не найден: {screenId}</div>;
   }
 }