OmniEye Theme Studio — React + TypeScript + MUI

A 1:1-in-progress port of Theme Manager.dc.html to React 19 + TypeScript + MUI v7, driven entirely by theme tokens: every control mutates a flat settings store, buildMuiTheme() compiles it into a MUI createTheme(), and one <ThemeProvider> themes both the studio chrome and the live preview.

Run it locally

cd react
npm install
npm run dev          # opens http://localhost:5173

Build for production:

npm run build        # tsc -b + vite build  ->  dist/
npm run preview

Requires Node 18+.

How it's wired (single source of truth)

src/theme/color.ts        Ported colour math (hexToHSL/hslToHex/palette/contrast/rgbaOf) — verbatim.
src/theme/settings.ts     Flat ThemeSettings type + DEFAULT_SETTINGS (the app's state).
src/theme/presets.ts      Colour presets.
src/theme/buildMuiTheme.ts  Token compiler: ThemeSettings -> createTheme(). Nothing else hardcodes colour/size.
src/store/useThemeStore.ts  Zustand (persisted): settings, savedThemes, dirty-baseline, presets, import.
src/store/useStudioUi.ts    Transient UI: open section, active preview screen.
src/App.tsx               Chrome: TopBar + StudioSubHeader + IconRail + StudioRail + PreviewPane + Footer.
src/studio/StudioRail.tsx   The 8 collapsible studio sections.
src/panels/*              Theme / Colour / Typography / Cards / Tables / Surface / Notifications / Login.
src/preview/*             The 9 live preview screens, themed by the tokens above.
src/shared/*              Reused control primitives (TabStrip, StudioSlider, ChipGroup, SwatchPicker…).

Change a control → store updates → buildMuiTheme recompiles → <ThemeProvider> repaints chrome and preview.

Status / parity

Full 1:1 port of Theme Manager.dc.html:

• Token engine (theme/tokens.ts) — the ~200-token compiler (surface tint, contrast levels, nested/header treatments, shadows, type scale, chart palettes, notif accents, table tokens, login gradients) ported from the original renderVals. Single source of visual truth.
• 9 preview screens — Dashboard, Orders, Reports, Cameras, Operations, Form, Components, Settings, Login (split + centered) — all token-driven.
• 9 studio panels — Theme (presets / My Themes / mode + JSON import-export-download), Colour (brand/text/status/buttons + per-heading swatches), Brand & Logo, Typography (font/heading/head-text/body-text + custom-font upload), Cards (style/header/nested/tint), Tables (rows/cols/cells/styling), Surface & Shape, Notifications, Login.
• Shell behaviors — resizable studio drawer (300–520px), close/reopen, save/discard-exit confirm (discard restores the baseline snapshot), image crop modal (drag + zoom, canvas export), and the two rail behaviors below.

Rail behaviors (match the original exactly)

• Section → screen auto-switch: opening a rail section jumps the preview to its mapped screen (theme/cards/brand/surface→Dashboard, colour/typography→Components, tables→Orders, notifications→Operations, login→Login), guarded so reopening the same section won't override a manual screen change.
• “Change preview screen” popover: the monitor icon on any section header toggles a shared “Previewing Screen” grid (all 8 screens); picking one sets it and closes; auto-hides when any section is opened/closed.

State persists to localStorage (omnieye-theme-studio)..