omnieye-theme-studio 1.0.0

package/src/theme/tokens.ts

@@ -0,0 +1,243 @@
+// buildTokens — a faithful port of renderVals()'s token math (Theme Manager.dc.html).
+// Pure function: settings -> the exact `t` token object + every derived scalar the
+// preview screens consume (colours, type scale, density, radius, shadows, card/table/notif tokens).
+// This is the single source of visual truth; screens read from it, so they match the HTML 1:1.
+
+import { palette, hexToHSL, hslToHex, contrast, rgbaOf, type Palette } from './color';
+import type { ThemeSettings } from './settings';
+
+export function buildTokens(S: ThemeSettings) {
+  const pal: Palette = palette(S.primaryHex);
+  const spal: Palette = palette(S.secondaryHex);
+  const isDark = S.mode === 'dark';
+
+  const pMain = isDark ? pal[300] : S.primaryHex;
+  const sMain = isDark ? spal[300] : S.secondaryHex;
+
+  const t: Record<string, string> = {
+    pMain, pDark: pal[700], pLight: pal[300],
+    highlight: S.highlightHex || '#ffd400',
+    highlightSoft: rgbaOf(S.highlightHex || '#ffd400', 0.15),
+    highlightBd: rgbaOf(S.highlightHex || '#ffd400', 0.34),
+    pContrast: S.contrastMode === 'light' ? '#ffffff' : S.contrastMode === 'dark' ? 'rgba(0,0,0,0.87)' : (contrast(pMain, '#ffffff') >= 2.9 ? '#ffffff' : 'rgba(0,0,0,0.87)'),
+    pContainer: isDark ? rgbaOf(S.primaryHex, 0.26) : pal[50],
+    onPContainer: isDark ? pal[100] : pal[800],
+    sMain, sContrast: contrast(sMain, '#ffffff') >= 2.9 ? '#ffffff' : 'rgba(0,0,0,0.87)',
+    bgDefault: isDark ? '#121212' : '#f3f5f8', paper: isDark ? '#1e1e1e' : '#ffffff', paper2: isDark ? '#262630' : '#f6f8fb',
+    frameGutterBg: isDark ? '#0a0a0a' : '#e3e7ec', footerBg: isDark ? '#17171c' : '#eceef2',
+    textPrimary: isDark ? 'rgba(255,255,255,0.92)' : 'rgba(0,0,0,0.87)',
+    textSecondary: isDark ? 'rgba(255,255,255,0.62)' : 'rgba(0,0,0,0.6)',
+    textDisabled: isDark ? 'rgba(255,255,255,0.4)' : 'rgba(0,0,0,0.38)',
+    divider: isDark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.12)',
+    outline: isDark ? 'rgba(255,255,255,0.23)' : 'rgba(0,0,0,0.23)',
+  };
+
+  const SB = S.statusBold;
+  const errSoft = SB ? S.errorHex : rgbaOf(S.errorHex, isDark ? 0.22 : 0.13);
+  const warnSoft = SB ? S.warningHex : rgbaOf(S.warningHex, isDark ? 0.22 : 0.14);
+  const infoSoft = SB ? S.infoHex : rgbaOf(S.infoHex, isDark ? 0.22 : 0.13);
+  const sucSoft = SB ? S.successHex : rgbaOf(S.successHex, isDark ? 0.22 : 0.13);
+  const errTxt = SB ? '#ffffff' : (isDark ? palette(S.errorHex)[300] : S.errorHex);
+  const warnTxt = SB ? '#ffffff' : (isDark ? palette(S.warningHex)[300] : palette(S.warningHex)[700]);
+  const infoTxt = SB ? '#ffffff' : (isDark ? palette(S.infoHex)[300] : S.infoHex);
+  const sucTxt = SB ? '#ffffff' : (isDark ? palette(S.successHex)[300] : palette(S.successHex)[700]);
+
+  // surface tint + contrast (post-process base tokens)
+  const pHue = hexToHSL(S.primaryHex)[0];
+  const TINTMAP: Record<string, [number, number]> = { neutral: [220, 6], warm: [32, 26], cool: [210, 30], brand: [pHue, 42], slate: [214, 16], snow: [0, 0] };
+  let tn = TINTMAP[S.surfaceTint] || TINTMAP.neutral;
+  if (S.tintIntensity > 0) { const hasChip = !!(S.surfaceTint && TINTMAP[S.surfaceTint] && S.surfaceTint !== 'snow'); tn = [hasChip ? tn[0] : pHue, Math.round((hasChip ? tn[1] : 42) * S.tintIntensity / 100)]; }
+  if (isDark) { t.bgDefault = hslToHex(tn[0], Math.round(tn[1] * 0.7), 7); t.paper = hslToHex(tn[0], Math.round(tn[1] * 0.7), 13); t.paper2 = hslToHex(tn[0], Math.round(tn[1] * 0.85), 19); }
+  else if (S.surfaceTint === 'snow' && !(S.tintIntensity > 0)) { t.bgDefault = '#ffffff'; t.paper = '#ffffff'; t.paper2 = '#ffffff'; }
+  else { t.bgDefault = hslToHex(tn[0], Math.round(tn[1] * 0.9), S.surfaceTint === 'brand' ? 92 : S.surfaceTint === 'cool' ? 94 : 96); t.paper = hslToHex(tn[0], Math.round(tn[1] * 0.4), 99); t.paper2 = hslToHex(tn[0], Math.round(tn[1] * 0.85), S.surfaceTint === 'brand' ? 95 : 96.5); }
+  if (S.pageBgHex) t.bgDefault = S.pageBgHex;
+  if (S.cardBgHex) t.paper = S.cardBgHex;
+
+  const CONLV: Record<string, number> = { soft: 0, standard: 1, medium: 2, high: 3 };
+  const ci = (CONLV[S.contrast] !== undefined) ? CONLV[S.contrast] : 1;
+  const CTXT = isDark
+    ? [['rgba(255,255,255,0.82)', 'rgba(255,255,255,0.55)', 'rgba(255,255,255,0.09)', 'rgba(255,255,255,0.16)'], ['rgba(255,255,255,0.92)', 'rgba(255,255,255,0.62)', 'rgba(255,255,255,0.12)', 'rgba(255,255,255,0.23)'], ['rgba(255,255,255,0.96)', 'rgba(255,255,255,0.74)', 'rgba(255,255,255,0.18)', 'rgba(255,255,255,0.34)'], ['#ffffff', 'rgba(255,255,255,0.87)', 'rgba(255,255,255,0.26)', 'rgba(255,255,255,0.46)']]
+    : [['rgba(0,0,0,0.72)', 'rgba(0,0,0,0.5)', 'rgba(0,0,0,0.08)', 'rgba(0,0,0,0.16)'], ['rgba(0,0,0,0.87)', 'rgba(0,0,0,0.6)', 'rgba(0,0,0,0.12)', 'rgba(0,0,0,0.23)'], ['rgba(0,0,0,0.92)', 'rgba(0,0,0,0.7)', 'rgba(0,0,0,0.18)', 'rgba(0,0,0,0.34)'], ['#000000', 'rgba(0,0,0,0.8)', 'rgba(0,0,0,0.24)', 'rgba(0,0,0,0.46)']];
+  t.textPrimary = CTXT[ci][0]; t.textSecondary = CTXT[ci][1]; t.divider = CTXT[ci][2]; t.outline = CTXT[ci][3];
+  if (S.textPrimaryHex) t.textPrimary = S.textPrimaryHex;
+  if (S.textSecondaryHex) t.textSecondary = S.textSecondaryHex;
+  if (S.dividerHex) t.divider = S.dividerHex;
+
+  if (S.nestedStyle === 'lighter') t.paper2 = isDark ? hslToHex(tn[0], Math.round(tn[1] * 0.9), 22) : hslToHex(tn[0], Math.max(Math.round(tn[1] * 0.3), 4), 100);
+  else if (S.nestedStyle === 'bordered') t.paper2 = t.paper;
+  else t.paper2 = isDark ? hslToHex(tn[0], Math.round(tn[1] * 0.9), Math.max(3, 7 - 2)) : hslToHex(tn[0], Math.min(Math.round(tn[1] * 1.1), 60), Math.max(88, 94 - (tn[1] * 0.18)));
+
+  const btnBg0 = S.btnColorHex || pMain;
+  const accentBg = S.accentGradient ? ('linear-gradient(135deg,' + btnBg0 + ',' + (S.btnColorHex ? palette(S.btnColorHex)[700] : pal[isDark ? 500 : 700]) + ')') : btnBg0;
+  const btnText = S.btnTextHex || (contrast(btnBg0, '#ffffff') >= 2.9 ? '#ffffff' : 'rgba(0,0,0,0.87)');
+  const hc1 = S.h1Color || null, hc2 = S.h2Color || null, hc3 = S.h3Color || null, hc4 = S.h4Color || null, hc5 = S.h5Color || null, hc6 = S.h6Color || null;
+
+  // scales
+  const SIZES = [{ key: 'sm', px: 13 }, { key: 'df', px: 12 }, { key: 'lg', px: 18 }];
+  const sizeObj = SIZES.find((x) => x.key === S.textSize) || SIZES[1];
+  const base = S.baseFontPx > 0 ? S.baseFontPx : sizeObj.px;
+  const bodyLH = S.bodyLineHeight > 0 ? S.bodyLineHeight : 1.5;
+  const h1base = S.h1Size > 0 ? S.h1Size : 20;
+  const tDisplay = Math.round(h1base * 1.1), tH1 = h1base, tH2 = Math.max(Math.round(h1base * 0.9), 11), tTitle = Math.max(Math.round(h1base * 0.8), 11), tH4 = Math.max(Math.round(h1base * 0.7), 10), tH5 = Math.max(Math.round(h1base * 0.6), 10), tH6 = Math.max(Math.round(h1base * 0.5), 9);
+  const tBody = base, tBodySm = Math.round(base * 0.92), tCaption = Math.round(base * 0.8), tOverline = Math.round(base * 0.72);
+  const wH = S.headingWeight;
+  const headLH = S.headingLH > 0 ? S.headingLH : 1.2;
+  const bodyWeightEff = S.bodyWeight > 0 ? S.bodyWeight : 400;
+  const bwEmph = Math.min(900, bodyWeightEff + 200);
+
+  // density
+  const DENS: Record<string, number> = { compact: 0.82, default: 1, comfortable: 1.16 };
+  const f = S.densityScale > 0 ? (S.densityScale / 100) : (DENS[S.density] ?? 1);
+  const pad = Math.round(20 * f), padSm = Math.round(14 * f), gap = S.cardGapPx > 0 ? S.cardGapPx : Math.round(16 * f);
+  const rowPy = Math.round(11 * f * ({ compact: 0.66, default: 1, comfortable: 1.32 }[S.tableDensity] ?? 1));
+  const screenPad = S.containerPadPx > 0 ? S.containerPadPx : Math.round(10 * f);
+
+  // radius
+  const r = S.radiusVal; const rad = r + 'px', radSm = Math.max(Math.round(r * 0.6), 2) + 'px';
+
+  // shadows
+  const SH: Record<number, string> = {
+    0: 'none',
+    1: '0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)',
+    2: '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)',
+    4: '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)',
+    8: '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)',
+  };
+  const dkb = '1px solid rgba(255,255,255,0.06)';
+  let cardShadow: string, cardBorder: string, btnShadow: string;
+  if (S.cardStyle === 'outlined') { cardShadow = 'none'; cardBorder = '1.5px solid ' + t.outline; btnShadow = 'none'; }
+  else if (S.cardStyle === 'soft') { cardShadow = SH[1]; cardBorder = isDark ? dkb : 'none'; btnShadow = SH[1]; }
+  else { cardShadow = SH[8]; cardBorder = isDark ? dkb : 'none'; btnShadow = SH[4]; }  // floating
+  if (S.cardShadowPx > 0) cardShadow = '0 ' + Math.round(S.cardShadowPx * 0.45) + 'px ' + S.cardShadowPx + 'px rgba(16,24,40,' + (isDark ? 0.55 : 0.16) + ')';
+
+  // card header
+  let cardHdrBg = 'transparent', cardHdrBorder = '1px solid ' + t.divider, cardHdrAccent = 'none';
+  if (S.cardHeader === 'plain') cardHdrBorder = 'none';
+  else if (S.cardHeader === 'tinted') cardHdrBg = t.pContainer;
+  else if (S.cardHeader === 'accent') cardHdrAccent = 'inset 3px 0 0 ' + pMain;
+  if (S.headerStrength > 0) { cardHdrAccent = 'inset ' + Math.max(1, Math.round(S.headerStrength * 0.06)) + 'px 0 0 ' + pMain; cardHdrBg = rgbaOf(S.primaryHex, (isDark ? 0.14 : 0.08) * (S.headerStrength / 100)); }
+  if (S.cardHdrHex) cardHdrBg = S.cardHdrHex;
+
+  const appbarShadow = isDark ? 'none' : SH[4]; const appbarBorder = isDark ? '1px solid ' + t.divider : 'none';
+  const nestBorder = (S.nestedStyle === 'bordered') ? ('1.5px solid ' + t.outline) : ('1px solid ' + t.divider);
+  const nestShadow = (S.nestedDepth > 0) ? ('inset 3px 0 0 ' + rgbaOf(S.primaryHex, 0.55) + ', 0 ' + Math.round(S.nestedDepth * 0.4) + 'px ' + S.nestedDepth + 'px rgba(16,24,40,' + (isDark ? 0.42 : 0.1) + ')') : 'none';
+
+  // brand
+  const words = (S.appName || '').trim().split(/\s+/);
+  const iconInitials = words.slice(0, 2).map((w) => w[0] || '').join('').toUpperCase() || 'AP';
+  const hasLogo = !!(S.logoMode === 'image' && S.logoUrl);
+  const hasLoginImage = !!S.loginImage;
+  const headFam = S.headingFont || S.fontFamily;
+  const bodyFam = S.customFont || S.fontFamily;
+
+  // charts
+  const chartHue = hexToHSL(S.primaryHex)[0];
+  const rotc = (h: number, l?: number) => hslToHex(((h % 360) + 360) % 360, 62, (l === undefined) ? (isDark ? 60 : 46) : l);
+  const CHARTSCHEMES: Record<string, string[]> = {
+    brand: [pMain, sMain, rotc(chartHue + 42), rotc(chartHue + 205), rotc(chartHue + 120)],
+    categorical: [rotc(chartHue), rotc(chartHue + 72), rotc(chartHue + 144), rotc(chartHue + 216), rotc(chartHue + 288)],
+    sequential: [hslToHex(chartHue, 55, isDark ? 40 : 78), hslToHex(chartHue, 60, isDark ? 50 : 64), pMain, hslToHex(chartHue, 70, isDark ? 70 : 38), hslToHex(chartHue, 78, isDark ? 82 : 26)],
+    cbsafe: ['#0072B2', '#E69F00', '#009E73', '#CC79A7', '#56B4E9'],
+    warm: [rotc(8), rotc(28), rotc(45), rotc(350), rotc(18)],
+    cool: [rotc(200), rotc(220), rotc(255), rotc(180), rotc(235)],
+  };
+  const chartPalette = CHARTSCHEMES[S.chartScheme] || CHARTSCHEMES.brand;
+  const avatarColors = [pal[600], spal[600], hslToHex((chartHue + 42) % 360, 55, 46), hslToHex((chartHue + 205) % 360, 50, 46)];
+  const sevMap: Record<string, { cb: string; cc: string }> = { error: { cb: errSoft, cc: errTxt }, success: { cb: sucSoft, cc: sucTxt }, info: { cb: infoSoft, cc: infoTxt }, warning: { cb: warnSoft, cc: warnTxt } };
+
+  // media / overlays
+  const lightGlass = S.mapGlass === 'light';
+  const overlaySurface = lightGlass ? 'rgba(255,255,255,0.84)' : 'rgba(15,20,28,0.74)';
+  const onOverlay = lightGlass ? '#1c2733' : '#f3f6fa';
+  const overlayBorder = lightGlass ? 'rgba(0,0,0,0.12)' : 'rgba(255,255,255,0.18)';
+  const mediaSurface = '#0f141c';
+  const mediaBg = 'repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 11px, rgba(255,255,255,0) 11px, rgba(255,255,255,0) 22px), radial-gradient(circle at 50% 38%, ' + rgbaOf(pMain, 0.22) + ', rgba(0,0,0,0) 60%), ' + mediaSurface;
+
+  // login gradients
+  const loginBrandGrad = 'linear-gradient(135deg,' + pMain + ',' + pal[700] + ')';
+  const loginScrimGrad = 'linear-gradient(180deg,' + rgbaOf(pal[900], 0.12) + ',' + rgbaOf(pal[900], 0.55) + ')';
+  const loginCenteredGrad = 'linear-gradient(135deg,' + pal[700] + ',' + pal[900] + ')';
+  const loginScrimGradC = 'linear-gradient(135deg,' + rgbaOf(pal[900], 0.55) + ',' + rgbaOf(S.primaryHex, 0.45) + ')';
+
+  // notification accent + placement
+  const NPOS: Record<string, Record<string, string>> = { 'top-right': { top: '14px', right: '14px' }, 'top-center': { top: '14px', left: '50%', transform: 'translateX(-50%)' }, 'bottom-right': { bottom: '14px', right: '14px' }, 'bottom-left': { bottom: '14px', left: '14px' } };
+  const npos = NPOS[S.notifPosition] || NPOS['top-right'];
+  const nacc = S.notifAccent === 'primary' ? { bar: pMain, icbg: t.pContainer, icc: t.onPContainer, dot: pMain }
+    : S.notifAccent === 'mono' ? { bar: t.textSecondary, icbg: t.paper2, icc: t.textPrimary, dot: t.textSecondary }
+      : { bar: S.warningHex, icbg: warnSoft, icc: warnTxt, dot: S.warningHex };
+  let toastDeco: Record<string, string>;
+  if (S.notifStyle === 'toast') toastDeco = { boxShadow: SH[8], border: (typeof cardBorder === 'string' && cardBorder !== 'none') ? cardBorder : 'none' };
+  else if (S.notifStyle === 'banner') toastDeco = { boxShadow: SH[2], borderLeft: '4px solid ' + nacc.bar };
+  else toastDeco = { boxShadow: 'none', border: '1px solid ' + t.divider };
+  const toastBg = S.notifCardHex || (isDark ? '#1e1e1e' : '#ffffff');
+
+  // table tokens
+  const TDENS: Record<string, string> = { compact: '7px', default: '11px', comfortable: '16px' };
+  const TCDENS: Record<string, string> = { compact: '6px', default: '12px', comfortable: '22px' };
+  const AVm: Record<string, string> = { top: 'flex-start', middle: 'center', bottom: 'flex-end' };
+  const AHm: Record<string, string> = { left: 'flex-start', center: 'center', right: 'flex-end' };
+  const THEAD: Record<string, string> = { plain: 'transparent', tinted: t.paper2, accent: t.highlightSoft };
+  const table = {
+    rowPy: TDENS[S.tableDensity] || '11px',
+    cellPx: TCDENS[S.tableColDensity] || '12px',
+    rowBorder: S.tableDividers ? ((S.tableRowDivW || 1) + 'px solid ' + t.divider) : 'none',
+    colBorder: S.tableColDividers ? ((S.tableColDivW || 1) + 'px solid ' + t.divider) : 'none',
+    headBg: THEAD[S.tableHeaderStyle] || t.paper2,
+    cellAI: AVm[S.tableCellAlignV] || 'center',
+    cellJC: AHm[S.tableCellAlignH] || 'flex-start',
+    stripeBg: isDark ? 'rgba(255,255,255,0.035)' : 'rgba(0,0,0,0.028)',
+    statusMap: {
+      Delivered: { sb: sucSoft, sc: sucTxt },
+      Processing: { sb: t.pContainer, sc: isDark ? t.pLight : t.pDark },
+      Pending: { sb: warnSoft, sc: warnTxt },
+      Shipped: { sb: infoSoft, sc: infoTxt },
+    } as Record<string, { sb: string; sc: string }>,
+    filters: ['All', 'Delivered', 'Processing', 'Pending'].map((label, i) => ({
+      label,
+      bg: i === 0 ? t.highlightSoft : 'transparent',
+      c: i === 0 ? t.textPrimary : t.textSecondary,
+      brd: i === 0 ? t.highlightBd : t.outline,
+    })),
+  };
+
+  // settings-screen summaries + category/nav data
+  const SIZE_LABEL: Record<string, string> = { sm: 'Small', df: 'Default', lg: 'Large' };
+  const DENS_LABEL: Record<string, string> = { compact: 'Compact', default: 'Default', comfortable: 'Comfortable' };
+  const CARDSTYLE_LABEL: Record<string, string> = { outlined: 'Outlined', soft: 'Soft', floating: 'Floating' };
+  const RAD_LABEL: Record<string, string> = { sharp: 'Sharp', rounded: 'Rounded', round: 'Round' };
+  const NAVS = [
+    { key: 'sidebar', label: 'Sidebar', desc: 'Full drawer', ic: '▤' },
+    { key: 'rail', label: 'Rail', desc: 'Icons only', ic: '▥' },
+    { key: 'topbar', label: 'Top Bar', desc: 'Horizontal', ic: '▦' },
+  ];
+  const typeSummary = S.fontFamily + ' · ' + (SIZE_LABEL[S.textSize] || 'Default');
+  const shapeSummary = (RAD_LABEL[S.radiusPreset] || 'Custom') + ' · ' + (DENS_LABEL[S.density] || 'Default') + ' · ' + (CARDSTYLE_LABEL[S.cardStyle] || 'Soft');
+  const SCATS = [
+    { label: 'General', ic: '◉' }, { label: 'Appearance', ic: '◧' }, { label: 'Modules', ic: '◫' },
+    { label: 'Team', ic: '◍' }, { label: 'Security', ic: '▣' }, { label: 'Billing', ic: '◳' },
+  ];
+  const settingsCats = SCATS.map((c, i) => ({ ...c, on: i === 1, bg: i === 1 ? t.highlightSoft : 'transparent', c: i === 1 ? t.textPrimary : t.textSecondary, bar: i === 1 ? '3px solid ' + t.highlight : '3px solid transparent' }));
+  const navSettingsChips = NAVS.map((x) => ({ ...x, active: S.navPattern === x.key, brd: S.navPattern === x.key ? pMain : t.divider, bg: S.navPattern === x.key ? t.pContainer : t.paper, color: S.navPattern === x.key ? t.onPContainer : t.textPrimary }));
+  const sidebarWidth = S.sidebarWidth;
+  const appBarHEff = S.appBarH > 0 ? S.appBarH : 56;
+  const appBarHLabel = S.appBarH > 0 ? S.appBarH + 'px' : 'Auto (56px)';
+
+  return {
+    pal, spal, isDark, pMain, sMain, t,
+    errSoft, warnSoft, infoSoft, sucSoft, errTxt, warnTxt, infoTxt, sucTxt, sevMap,
+    accentBg, btnText, hc1, hc2, hc3, hc4, hc5, hc6,
+    base, bodyLH, h1base, tDisplay, tH1, tH2, tTitle, tH4, tH5, tH6, tBody, tBodySm, tCaption, tOverline,
+    wH1: wH, wH2: wH, wH3: wH, wH4: wH, wH5: wH, wH6: wH, headLH, bodyWeightEff, bwEmph,
+    pad, padSm, gap, rowPy, screenPad, r, rad, radSm,
+    SH, cardShadow, cardBorder, btnShadow, cardHdrBg, cardHdrBorder, cardHdrAccent,
+    appbarShadow, appbarBorder, nestBorder, nestShadow,
+    iconInitials, hasLogo, hasLoginImage, headFam, bodyFam,
+    chartHue, chartPalette, avatarColors,
+    overlaySurface, onOverlay, overlayBorder, mediaBg,
+    loginBrandGrad, loginScrimGrad, loginCenteredGrad, loginScrimGradC,
+    npos, nacc, toastDeco, toastBg, btnCase: S.btnCase !== 'none' ? 'uppercase' : 'none',
+    table, typeSummary, shapeSummary, settingsCats, navSettingsChips, sidebarWidth, appBarHEff, appBarHLabel,
+  };
+}
+
+export type Tokens = ReturnType<typeof buildTokens>;

package/src/theme/useTokens.ts

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+import { useThemeStore } from '../store/useThemeStore';
+import { buildTokens, type Tokens } from './tokens';
+
+// Hook: the exact design tokens for the current settings. Preview screens read from this
+// so they render 1:1 with the HTML app.
+export function useTokens(): Tokens {
+  const settings = useThemeStore((s) => s.settings);
+  return useMemo(() => buildTokens(settings), [settings]);
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": { "@/*": ["src/*"] }
+  },
+  "include": ["src"]
+}

package/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/app.tsx","./src/main.tsx","./src/chrome/footer.tsx","./src/chrome/iconrail.tsx","./src/chrome/studiosubheader.tsx","./src/chrome/topbar.tsx","./src/panels/cardspanel.tsx","./src/panels/colourpanel.tsx","./src/panels/loginpanel.tsx","./src/panels/notificationspanel.tsx","./src/panels/surfacepanel.tsx","./src/panels/tablespanel.tsx","./src/panels/thememanagement.tsx","./src/panels/typographypanel.tsx","./src/preview/cameraspreview.tsx","./src/preview/componentspreview.tsx","./src/preview/dashboardpreview.tsx","./src/preview/loginpreview.tsx","./src/preview/operationspreview.tsx","./src/preview/orderspreview.tsx","./src/preview/previewpane.tsx","./src/preview/reportspreview.tsx","./src/preview/toastlayer.tsx","./src/preview/usefitcount.ts","./src/shared/chipgroup.tsx","./src/shared/cropmodal.tsx","./src/shared/infobadge.tsx","./src/shared/sectionaccordion.tsx","./src/shared/studioslider.tsx","./src/shared/swatchpicker.tsx","./src/shared/tabstrip.tsx","./src/store/usestudioui.ts","./src/store/usethemestore.ts","./src/studio/studiorail.tsx","./src/theme/buildmuitheme.ts","./src/theme/color.ts","./src/theme/presets.ts","./src/theme/settings.ts","./src/theme/studiotokens.ts","./src/theme/tokens.ts","./src/theme/usetokens.ts"],"version":"5.9.3"}

package/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { port: 5173, open: true },
+});