omnieye-theme-studio 1.0.0

package/src/studio/StudioRail.tsx

@@ -0,0 +1,167 @@
+import { Box, Typography, IconButton, Tooltip } from '@mui/material';
+import type { ReactNode } from 'react';
+import RestartAltRoundedIcon from '@mui/icons-material/RestartAltRounded';
+import DarkModeOutlinedIcon from '@mui/icons-material/DarkModeOutlined';
+import LightModeOutlinedIcon from '@mui/icons-material/LightModeOutlined';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import { SectionAccordion } from '../shared/SectionAccordion';
+import { ThemeManagement } from '../panels/ThemeManagement';
+import { ColourPanel } from '../panels/ColourPanel';
+import { TypographyPanel } from '../panels/TypographyPanel';
+import { CardsPanel } from '../panels/CardsPanel';
+import { TablesPanel } from '../panels/TablesPanel';
+import { SurfacePanel } from '../panels/SurfacePanel';
+import { NotificationsPanel } from '../panels/NotificationsPanel';
+import { LoginPanel } from '../panels/LoginPanel';
+import { useStudioUi, type ScreenKey, PREVIEW_TABS } from '../store/useStudioUi';
+import { useThemeStore } from '../store/useThemeStore';
+import { PRESETS } from '../theme/presets';
+import { studioTokens } from '../theme/studioTokens';
+import { useRef } from 'react';
+
+interface Sec { id: string; title: string; info: string; icon: ReactNode; screen: ScreenKey; body: ReactNode; }
+
+// Studio rail: active-theme header + all sections in HTML order (one open at a time).
+export function StudioRail({ onClose }: { onClose?: () => void }) {
+  const openId = useStudioUi((s) => s.openSection);
+  const setOpen = useStudioUi((s) => s.setOpenSection);
+  const setScreen = useStudioUi((s) => s.setPreviewScreen);
+  const curScreen = useStudioUi((s) => s.previewScreen);
+  const previewMenuOpen = useStudioUi((s) => s.previewMenuOpen);
+  const setPreviewMenuOpen = useStudioUi((s) => s.setPreviewMenuOpen);
+  const settings = useThemeStore((s) => s.settings);
+  const saved = useThemeStore((s) => s.savedThemes);
+  const set = useThemeStore((s) => s.set);
+  const reset = useThemeStore((s) => s.reset);
+  const sk = studioTokens(settings.mode);
+  const lastAuto = useRef<string>('theme');
+
+  // Opening a section auto-switches the preview (guarded so re-opening the same section won't yank you back).
+  const toggle = (id: string, screen: ScreenKey) => {
+    const willOpen = openId !== id;
+    setOpen(willOpen ? id : '');
+    setPreviewMenuOpen(false);
+    if (willOpen && lastAuto.current !== id) { setScreen(screen); lastAuto.current = id; }
+  };
+
+  const activeName =
+    PRESETS.find((p) => p.id === settings.presetId)?.name ||
+    saved.find((z) => z.id === settings.presetId)?.name ||
+    'Custom Theme';
+
+  // Section icons — inline SVGs ported 1:1 from the HTML (18×18, stroke = studio body colour).
+  const strokeProps = { fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' } as const;
+  const Svg = ({ children }: { children: ReactNode }) => <svg width="18" height="18" viewBox="0 0 24 24" {...strokeProps}>{children}</svg>;
+
+  const icoTheme = <Svg><circle cx="13.5" cy="6.5" r="2.5" /><circle cx="17.5" cy="10.5" r="2.5" /><circle cx="8.5" cy="7.5" r="2.5" /><circle cx="6.5" cy="12.5" r="2.5" /><path d="M12 2a10 10 0 0 0 0 20 3 3 0 0 0 0-6 2 2 0 0 1 0-4 4 4 0 0 0 4-4 6 6 0 0 0-4-6z" /></Svg>;
+  const icoColor = (
+    <Box sx={{ display: 'flex', gap: '2px', width: 14, height: 14 }}>
+      <Box sx={{ flex: 1, background: settings.secondaryHex, borderRadius: '2px' }} />
+      <Box sx={{ flex: 1, background: settings.errorHex, borderRadius: '2px' }} />
+      <Box sx={{ flex: 1, background: settings.successHex, borderRadius: '2px' }} />
+    </Box>
+  );
+  const icoType = <Svg><path d="M4 20 9 5l5 15M6 14h6" /><path d="M15 20l3-9 3 9M16.2 17h3.6" /></Svg>;
+  const icoCards = <Svg><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18" /></Svg>;
+  const icoTables = <Svg><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18M3 15h18M9 3v18" /></Svg>;
+  const icoShape = <Svg><rect x="4" y="4" width="16" height="16" rx="4" /></Svg>;
+  const icoNotif = (
+    <>
+      <Svg><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" /><path d="M10 21a2 2 0 0 0 4 0" /></Svg>
+      <Box sx={{ position: 'absolute', top: '6px', right: '6px', width: 7, height: 7, borderRadius: '50%', background: settings.primaryHex, border: `1.5px solid ${sk.iconTile}` }} />
+    </>
+  );
+  const icoLogin = <Svg><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" /><path d="M10 17l5-5-5-5" /><path d="M15 12H3" /></Svg>;
+
+  // Dynamic header summaries — shown as the info-dot tooltip, 1:1 with the HTML *Summary values.
+  const isDark = settings.mode === 'dark';
+  const cap = (x: string) => x.charAt(0).toUpperCase() + x.slice(1);
+  const SIZE_L: Record<string, string> = { sm: 'Small', df: 'Default', lg: 'Large' };
+  const RAD_L: Record<string, string> = { sharp: 'Sharp', rounded: 'Rounded', round: 'Round' };
+  const DENS_L: Record<string, string> = { compact: 'Compact', default: 'Default', comfortable: 'Comfortable' };
+  const CARD_L: Record<string, string> = { flat: 'Flat', outlined: 'Outlined', soft: 'Soft', raised: 'Raised', elevated: 'Elevated', floating: 'Floating' };
+  const LOGIN_L: Record<string, string> = { split: 'Split Brand', centered: 'Centered Card' };
+  const NPOS_L: Record<string, string> = { 'top-center': 'Top Center', 'top-right': 'Top Right', 'bottom-left': 'Bottom Left', 'bottom-right': 'Bottom Right' };
+  const summary: Record<string, string> = {
+    theme: `${activeName} · ${isDark ? 'Dark' : 'Light'}`,
+    color: 'Secondary & status colours',
+    type: `${settings.fontFamily} · ${SIZE_L[settings.textSize] ?? 'Default'}`,
+    cards: 'Card style, header, nesting & surface tint',
+    tables: 'Table row density, dividers, striping & header style — previewed on the Orders screen',
+    shape: `${RAD_L[settings.radiusPreset] ?? 'Custom'} · ${DENS_L[settings.density] ?? 'Default'} · ${CARD_L[settings.cardStyle] ?? ''}`,
+    notif: `${NPOS_L[settings.notifPosition] ?? ''} · ${cap(settings.notifStyle)}`,
+    login: `${LOGIN_L[settings.loginLayout] ?? ''}${settings.loginImage ? ' · image' : ''}`,
+  };
+
+  const sections: Sec[] = [
+    { id: 'theme', title: 'Theme Settings', info: 'Presets, saved themes & light/dark mode.', icon: icoTheme, screen: 'dashboard', body: <ThemeManagement /> },
+    { id: 'color', title: 'Colour Settings', info: 'Brand, text & status colours.', icon: icoColor, screen: 'components', body: <ColourPanel /> },
+    { id: 'type', title: 'Typography', info: 'Fonts, sizes, weight & line-height.', icon: icoType, screen: 'components', body: <TypographyPanel /> },
+    { id: 'cards', title: 'Cards', info: 'Card style, header, nesting & tint.', icon: icoCards, screen: 'dashboard', body: <CardsPanel /> },
+    { id: 'tables', title: 'Tables', info: 'Row/column density, dividers & alignment.', icon: icoTables, screen: 'orders', body: <TablesPanel /> },
+    { id: 'shape', title: 'Surface & Shape', info: 'Radius, density, elevation & spacing.', icon: icoShape, screen: 'dashboard', body: <SurfacePanel /> },
+    { id: 'notif', title: 'Notifications', info: 'Toast placement & behaviour.', icon: icoNotif, screen: 'operations', body: <NotificationsPanel /> },
+    { id: 'login', title: 'Login Screen', info: 'Brand image, logo & panel colour.', icon: icoLogin, screen: 'login', body: <LoginPanel /> },
+  ];
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', bgcolor: sk.card }}>
+      {/* Active-theme header */}
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 1.5, py: 1.1, borderBottom: `1px solid ${sk.divider}`, bgcolor: sk.card }}>
+        <Box sx={{ display: 'flex', gap: 0.5, flexShrink: 0 }}>
+          <Box sx={{ width: 13, height: 13, borderRadius: '3px', bgcolor: settings.primaryHex }} />
+          <Box sx={{ width: 13, height: 13, borderRadius: '3px', bgcolor: settings.secondaryHex }} />
+        </Box>
+        <Typography variant="caption" sx={{ flex: 1, minWidth: 0, fontWeight: 800, color: sk.text, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{activeName}</Typography>
+        <Tooltip title="Reset to defaults" arrow>
+          <IconButton size="small" onClick={reset} sx={{ bgcolor: 'action.selected' }}><RestartAltRoundedIcon sx={{ fontSize: 16 }} /></IconButton>
+        </Tooltip>
+        <Tooltip title={settings.mode === 'dark' ? 'Switch to light' : 'Switch to dark'} arrow>
+          <IconButton size="small" onClick={() => set({ mode: settings.mode === 'dark' ? 'light' : 'dark' })} sx={{ bgcolor: 'action.selected' }}>
+            {settings.mode === 'dark' ? <LightModeOutlinedIcon sx={{ fontSize: 16 }} /> : <DarkModeOutlinedIcon sx={{ fontSize: 16 }} />}
+          </IconButton>
+        </Tooltip>
+        {onClose && (
+          <Tooltip title="Close studio" arrow>
+            <IconButton size="small" onClick={onClose} sx={{ bgcolor: 'action.selected' }}><CloseRoundedIcon sx={{ fontSize: 16 }} /></IconButton>
+          </Tooltip>
+        )}
+      </Box>
+
+      {/* Change-preview-screen popover (toggled by the monitor icon on any section header) */}
+      {previewMenuOpen && (
+        <Box sx={{ borderBottom: '1px solid', borderColor: 'divider', borderLeft: '3px solid #eab308', bgcolor: (t) => t.palette.mode === 'dark' ? 'rgba(234,179,8,0.14)' : '#fef9c3', px: 1.6, py: 1.5 }}>
+          <Typography sx={{ fontSize: 10, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '.6px', color: (t) => t.palette.mode === 'dark' ? '#f2cd5c' : '#854d0e', mb: 1 }}>Previewing Screen</Typography>
+          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0.75 }}>
+            {PREVIEW_TABS.map((sc) => {
+              const on = curScreen === sc.key;
+              return (
+                <Box key={sc.key} component="button"
+                  onClick={() => { if (curScreen !== sc.key) setScreen(sc.key); setPreviewMenuOpen(false); }}
+                  sx={{ px: 0.75, py: 1, borderRadius: 2, cursor: 'pointer', fontSize: 11, fontWeight: on ? 800 : 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
+                    border: '1.5px solid', borderColor: on ? '#d4a915' : '#e6dca8', bgcolor: on ? '#fde68a' : 'background.paper', color: on ? '#713f12' : 'text.secondary' }}>
+                  {sc.label}
+                </Box>
+              );
+            })}
+          </Box>
+        </Box>
+      )}
+
+      {sections.map((sec) => (
+        <SectionAccordion
+          key={sec.id}
+          icon={sec.icon}
+          title={sec.title}
+          info={summary[sec.id] ?? sec.info}
+          open={openId === sec.id}
+          dimmed={openId !== '' && openId !== sec.id}
+          onToggle={() => toggle(sec.id, sec.screen)}
+          onPreviewMenu={() => setPreviewMenuOpen(!previewMenuOpen)}
+        >
+          {sec.body}
+        </SectionAccordion>
+      ))}
+    </Box>
+  );
+}

package/src/theme/buildMuiTheme.ts

@@ -0,0 +1,53 @@
+import { createTheme, type Theme } from '@mui/material/styles';
+import { buildTokens } from './tokens';
+import type { ThemeSettings } from './settings';
+
+// MUI theme for the studio chrome + MUI-based controls. Derived from the SAME token
+// engine the preview screens use, so chrome and preview stay in lockstep.
+export function buildMuiTheme(s: ThemeSettings): Theme {
+  const T = buildTokens(s);
+  const t = T.t;
+  const headFamCss = `${T.headFam},sans-serif`;
+  const bodyFamCss = `${T.bodyFam},sans-serif`;
+  const heading = (px: number) => ({ fontFamily: headFamCss, fontSize: px, fontWeight: T.wH1, lineHeight: T.headLH });
+
+  return createTheme({
+    cssVariables: true,
+    palette: {
+      mode: s.mode,
+      primary: { main: s.primaryHex, dark: T.pal[700], light: T.pal[300], contrastText: t.pContrast },
+      secondary: { main: s.secondaryHex, dark: T.spal[700], light: T.spal[300], contrastText: t.sContrast },
+      success: { main: s.successHex }, warning: { main: s.warningHex },
+      info: { main: s.infoHex }, error: { main: s.errorHex },
+      background: { default: t.bgDefault, paper: t.paper },
+      text: { primary: t.textPrimary, secondary: t.textSecondary, disabled: t.textDisabled },
+      divider: t.divider,
+    },
+    shape: { borderRadius: T.r },
+    typography: {
+      fontFamily: bodyFamCss,
+      fontSize: T.base,
+      h1: heading(T.tH1), h2: heading(T.tH2), h3: heading(T.tTitle),
+      h4: heading(T.tH4), h5: heading(T.tH5), h6: heading(T.tH6),
+      body1: { fontFamily: bodyFamCss, fontSize: T.tBody, lineHeight: T.bodyLH, fontWeight: T.bodyWeightEff },
+      body2: { fontFamily: bodyFamCss, fontSize: T.tBodySm, lineHeight: T.bodyLH, fontWeight: T.bodyWeightEff },
+      caption: { fontFamily: bodyFamCss, fontSize: T.tCaption, lineHeight: T.bodyLH },
+      button: { textTransform: T.btnCase as 'uppercase' | 'none', fontWeight: T.bwEmph },
+    },
+    components: {
+      // Match the HTML app's global `button{font-family:inherit}` so raw preview buttons
+      // inherit the body typeface instead of the browser default (Arial). MUI's own class-based
+      // font rules out-specify this element selector, so themed chrome buttons are unaffected.
+      MuiCssBaseline: {
+        styleOverrides: { 'button, input, textarea, select': { fontFamily: 'inherit' } },
+      },
+      MuiCard: {
+        styleOverrides: {
+          root: { borderRadius: T.r, border: T.cardBorder === 'none' ? 'none' : T.cardBorder, boxShadow: T.cardShadow, backgroundImage: 'none' },
+        },
+      },
+      MuiButton: { styleOverrides: { root: { borderRadius: T.r, boxShadow: 'none' } }, defaultProps: { disableElevation: true } },
+      MuiChip: { styleOverrides: { root: { borderRadius: 999 } } },
+    },
+  });
+}

package/src/theme/color.ts

@@ -0,0 +1,68 @@
+// Colour math — ported VERBATIM from Theme Manager.dc.html. Correctness-critical for parity.
+
+export function hexToHSL(h: string): [number, number, number] {
+  if (!h || h.length < 7) return [210, 60, 45];
+  const r = parseInt(h.slice(1, 3), 16) / 255, g = parseInt(h.slice(3, 5), 16) / 255, b = parseInt(h.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min;
+  let hh = 0, s = 0; const l = (max + min) / 2;
+  if (d) {
+    s = d / (1 - Math.abs(2 * l - 1));
+    if (max === r) hh = ((g - b) / d) % 6;
+    else if (max === g) hh = (b - r) / d + 2;
+    else hh = (r - g) / d + 4;
+    hh = Math.round(hh * 60); if (hh < 0) hh += 360;
+  }
+  return [hh, Math.round(s * 100), Math.round(l * 100)];
+}
+
+export function hslToHex(h: number, s: number, l: number): string {
+  s /= 100; l /= 100;
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12, a = s * Math.min(l, 1 - l);
+    return Math.round((l - a * Math.max(-1, Math.min(k - 3, Math.min(9 - k, 1)))) * 255).toString(16).padStart(2, '0');
+  };
+  return '#' + f(0) + f(8) + f(4);
+}
+
+export type Palette = Record<number, string>;
+
+export function palette(hex: string): Palette {
+  try {
+    const [h, s] = hexToHSL(hex), sat = Math.max(s, 18);
+    return {
+      50: hslToHex(h, Math.max(Math.round(sat * 0.3), 10), 96),
+      100: hslToHex(h, Math.max(Math.round(sat * 0.42), 12), 91),
+      200: hslToHex(h, Math.max(Math.round(sat * 0.55), 16), 82),
+      300: hslToHex(h, Math.max(Math.round(sat * 0.7), 20), 70),
+      400: hslToHex(h, sat, 60),
+      500: hex,
+      600: hslToHex(h, Math.min(sat + 4, 100), 44),
+      700: hslToHex(h, Math.min(sat + 8, 100), 36),
+      800: hslToHex(h, Math.max(Math.round(sat * 0.92), 16), 26),
+      900: hslToHex(h, Math.max(Math.round(sat * 0.8), 14), 16),
+    };
+  } catch {
+    return { 50: '#eef', 100: '#dde', 200: '#bbd', 300: '#99c', 400: '#77b', 500: hex || '#1565c0', 600: '#1257a8', 700: '#0e4488', 800: '#0a3266', 900: '#062044' };
+  }
+}
+
+// WCAG relative-luminance contrast ratio.
+export function contrast(h1: string, h2: string): number {
+  try {
+    const lum = (h: string) => {
+      const rgb = [1, 3, 5].map((i) => {
+        const c = parseInt(h.slice(i, i + 2), 16) / 255;
+        return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+      });
+      return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
+    };
+    const a = lum(h1), b = lum(h2), hi = Math.max(a, b), lo = Math.min(a, b);
+    return (hi + 0.05) / (lo + 0.05);
+  } catch { return 1; }
+}
+
+export function rgbaOf(hex: string, a: number): string {
+  if (!hex || hex[0] !== '#' || hex.length < 7) return 'rgba(20,30,48,' + a + ')';
+  const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+  return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
+}

package/src/theme/presets.ts

@@ -0,0 +1,17 @@
+import type { ThemeSettings } from './settings';
+
+export interface Preset {
+  id: string;
+  name: string;
+  snap: Partial<ThemeSettings>;
+}
+
+// Colour presets — 1:1 with the HTML app's THEMES list (applyPreset sets primary/secondary/iconColor).
+export const PRESETS: Preset[] = [
+  { id: 'corporate', name: 'Corporate Blue', snap: { primaryHex: '#1565c0', secondaryHex: '#00897b', iconColor: '#1565c0' } },
+  { id: 'emerald', name: 'Emerald', snap: { primaryHex: '#2e7d32', secondaryHex: '#00897b', iconColor: '#2e7d32' } },
+  { id: 'indigo', name: 'Indigo Violet', snap: { primaryHex: '#3949ab', secondaryHex: '#7c4dff', iconColor: '#3949ab' } },
+  { id: 'slate', name: 'Graphite', snap: { primaryHex: '#455a64', secondaryHex: '#78909c', iconColor: '#455a64' } },
+  { id: 'teal', name: 'Ocean Teal', snap: { primaryHex: '#00838f', secondaryHex: '#0277bd', iconColor: '#00838f' } },
+  { id: 'amber', name: 'Amber', snap: { primaryHex: '#e65100', secondaryHex: '#d84315', iconColor: '#e65100' } },
+];

package/src/theme/settings.ts

@@ -0,0 +1,158 @@
+// Full theme-setting state — a 1:1 port of the HTML app's design state (this.state design keys).
+// Transient UI keys (open/menu/zoom/fit counts) live in component state, not here.
+
+export type Mode = 'light' | 'dark';
+
+export interface ThemeSettings {
+  // Identity / brand
+  appName: string;
+  appTagline: string;
+  logoMode: 'icon' | 'image';
+  logoUrl: string;
+  iconColor: string;
+  presetId: string;
+  mode: Mode;
+
+  // Brand / status colour
+  primaryHex: string;
+  secondaryHex: string;
+  highlightHex: string;
+  errorHex: string;
+  warningHex: string;
+  infoHex: string;
+  successHex: string;
+
+  // Surface / text overrides ('' = derive)
+  cardBgHex: string;
+  cardHdrHex: string;
+  pageBgHex: string;
+  notifCardHex: string;
+  textPrimaryHex: string;
+  textSecondaryHex: string;
+  dividerHex: string;
+  btnColorHex: string;
+  btnTextHex: string;
+
+  // Per-heading colour overrides ('' = derive)
+  h1Color: string; h2Color: string; h3Color: string; h4Color: string; h5Color: string; h6Color: string;
+
+  // Typography
+  fontFamily: string;
+  headingFont: string;
+  customFont: string;
+  customHeadFont: string;
+  textSize: 'sm' | 'df' | 'lg';
+  baseFontPx: number;        // 0 = use textSize
+  bodyLineHeight: number;    // 0 = auto (1.5)
+  bodyWeight: number;        // 0 = auto (400)
+  letterSpace: number;
+  scaleRatio: 'compact' | 'default' | 'airy';
+  scaleRatioCustom: number;
+  h1Size: number;            // 0 = 20
+  h2Size: number; h3Size: number; h4Size: number; h5Size: number; h6Size: number;
+  h1Weight: number; h2Weight: number; h3Weight: number; h4Weight: number; h5Weight: number; h6Weight: number;
+  headingWeight: number;
+  headingLH: number;         // 0 = auto (1.2)
+
+  // Shape / density
+  radiusPreset: 'sharp' | 'rounded' | 'round';
+  radiusVal: number;
+  density: 'compact' | 'default' | 'comfortable';
+  densityScale: number;      // 0 = use density preset
+  cardShadowPx: number;      // 0 = use cardStyle preset
+  contrast: 'soft' | 'medium' | 'high';
+  contrastMode: 'auto' | 'light' | 'dark';
+  containerPadPx: number;
+  edgePadPx: number;
+  cardGapPx: number;
+
+  // Cards / surfaces
+  cardStyle: 'outlined' | 'soft' | 'floating';
+  cardHeader: 'plain' | 'tinted' | 'accent';
+  surfaceTint: 'snow' | 'neutral' | 'warm' | 'cool' | 'brand' | 'slate';
+  nestedStyle: 'recessed' | 'lighter' | 'bordered';
+  nestedDepth: number;
+  headerStrength: number;
+  tintIntensity: number;
+
+  // Global toggles
+  btnCase: 'none' | 'upper';
+  accentGradient: boolean;
+  statusBold: boolean;
+  mapGlass: 'light' | 'dark';
+  chartScheme: 'brand' | 'categorical' | 'sequential' | 'cbsafe' | 'warm' | 'cool';
+
+  // Tables
+  tableDensity: 'compact' | 'default' | 'comfortable';
+  tableColDensity: 'compact' | 'default' | 'comfortable';
+  tableDividers: boolean;
+  tableColDividers: boolean;
+  tableRowDivW: number;
+  tableColDivW: number;
+  tableStripe: boolean;
+  tableHeaderStyle: 'plain' | 'tinted' | 'accent';
+  tableCellAlignH: 'left' | 'center' | 'right';
+  tableCellAlignV: 'top' | 'middle' | 'bottom';
+
+  // Notifications
+  notifPosition: 'top-right' | 'top-center' | 'bottom-right' | 'bottom-left';
+  notifStyle: 'toast' | 'banner' | 'inline';
+  notifAccent: 'severity' | 'primary' | 'mono';
+  notifBadge: boolean;
+  notifAutoDismiss: boolean;
+  autoDismissSec: number;
+  toastW: number;
+
+  // Nav / chrome
+  navPattern: 'sidebar' | 'rail' | 'topbar';
+  sidebarWidth: number;
+  appBarH: number;
+
+  // Login
+  loginLayout: 'split' | 'centered';
+  loginImage: string;
+  loginShowTagline: boolean;
+  loginPanelColor: string;
+  loginImgOpacity: number;
+  loginCardW: number;
+}
+
+export const DEFAULT_SETTINGS: ThemeSettings = {
+  appName: 'Crystal Ball', appTagline: 'Run your whole business in one place',
+  logoMode: 'icon', logoUrl: '', iconColor: '#1565c0', presetId: 'corporate', mode: 'light',
+
+  primaryHex: '#1565c0', secondaryHex: '#00897b', highlightHex: '',
+  errorHex: '#d32f2f', warningHex: '#ed6c02', infoHex: '#0288d1', successHex: '#2e7d32',
+
+  cardBgHex: '', cardHdrHex: '', pageBgHex: '', notifCardHex: '',
+  textPrimaryHex: '', textSecondaryHex: '', dividerHex: '', btnColorHex: '', btnTextHex: '',
+  h1Color: '', h2Color: '', h3Color: '', h4Color: '', h5Color: '', h6Color: '',
+
+  fontFamily: 'Roboto', headingFont: 'Figtree', customFont: '', customHeadFont: '',
+  textSize: 'df', baseFontPx: 0, bodyLineHeight: 0, bodyWeight: 0, letterSpace: 0,
+  scaleRatio: 'default', scaleRatioCustom: 0,
+  h1Size: 0, h2Size: 0, h3Size: 0, h4Size: 0, h5Size: 0, h6Size: 0,
+  h1Weight: 0, h2Weight: 0, h3Weight: 0, h4Weight: 0, h5Weight: 0, h6Weight: 0,
+  headingWeight: 600, headingLH: 0,
+
+  radiusPreset: 'rounded', radiusVal: 9,
+  density: 'default', densityScale: 0, cardShadowPx: 0,
+  contrast: 'medium', contrastMode: 'auto', containerPadPx: 0, edgePadPx: 0, cardGapPx: 0,
+
+  cardStyle: 'soft', cardHeader: 'plain', surfaceTint: 'snow',
+  nestedStyle: 'recessed', nestedDepth: 0, headerStrength: 0, tintIntensity: 0,
+
+  btnCase: 'upper', accentGradient: false, statusBold: false, mapGlass: 'light', chartScheme: 'brand',
+
+  tableDensity: 'default', tableColDensity: 'default', tableDividers: false, tableColDividers: false,
+  tableRowDivW: 1, tableColDivW: 1, tableStripe: false, tableHeaderStyle: 'tinted',
+  tableCellAlignH: 'left', tableCellAlignV: 'middle',
+
+  notifPosition: 'bottom-right', notifStyle: 'toast', notifAccent: 'severity',
+  notifBadge: true, notifAutoDismiss: false, autoDismissSec: 0, toastW: 0,
+
+  navPattern: 'sidebar', sidebarWidth: 220, appBarH: 0,
+
+  loginLayout: 'split', loginImage: '', loginShowTagline: true, loginPanelColor: '',
+  loginImgOpacity: 0, loginCardW: 0,
+};

package/src/theme/studioTokens.ts

@@ -0,0 +1,24 @@
+// Fixed neutral tokens for the Theme Studio CHROME — theme-independent (only mode-dependent),
+// ported verbatim from Theme Manager.dc.html (sLabel2/sBody/sInsetBd/sCard/sMuted/sChevron…).
+// The studio panel must NOT recolour itself with the theme being edited.
+export interface StudioTokens {
+  studioBg: string; studioBd: string;
+  card: string; cardBd: string;
+  inset: string; insetBd: string;
+  divider: string; iconTile: string;
+  text: string; label: string; label2: string;
+  body: string; muted: string; chevron: string;
+}
+
+export function studioTokens(mode: 'light' | 'dark'): StudioTokens {
+  const d = mode === 'dark';
+  return {
+    studioBg: d ? '#15181d' : '#f5f7fa', studioBd: d ? '#2a2f38' : '#d8dee6',
+    card: d ? '#1e222a' : '#ffffff', cardBd: d ? '#2b313b' : '#e6eaf0',
+    inset: d ? '#262b34' : '#f7f9fb', insetBd: d ? '#363d48' : '#e9edf2',
+    divider: d ? '#262b34' : '#f0f3f7', iconTile: d ? '#2b313b' : '#eef1f6',
+    text: d ? 'rgba(255,255,255,0.92)' : '#1c2127', label: d ? 'rgba(255,255,255,0.5)' : '#9aa4b0',
+    label2: d ? 'rgba(255,255,255,0.6)' : '#7a8593', body: d ? 'rgba(255,255,255,0.78)' : '#5a6573',
+    muted: d ? 'rgba(255,255,255,0.42)' : '#aeb6c0', chevron: d ? 'rgba(255,255,255,0.42)' : '#b3bcc7',
+  };
+}