npm - omnieye-theme-studio - Versions diffs - 1.0.0 - Mend

omnieye-theme-studio 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (54) hide show

package/.claude/launch.json +11 -0
package/.github/workflows/ci.yml +88 -0
package/.github/workflows/promote.yml +48 -0
package/Dockerfile +20 -0
package/README.md +52 -0
package/dist/assets/index-B0UK7Lt_.js +200 -0
package/dist/index.html +18 -0
package/index.html +18 -0
package/nginx.conf +15 -0
package/package.json +26 -0
package/src/App.tsx +79 -0
package/src/chrome/Footer.tsx +21 -0
package/src/chrome/IconRail.tsx +49 -0
package/src/chrome/StudioSubHeader.tsx +14 -0
package/src/chrome/TopBar.tsx +35 -0
package/src/main.tsx +23 -0
package/src/panels/CardsPanel.tsx +75 -0
package/src/panels/ColourPanel.tsx +175 -0
package/src/panels/LoginPanel.tsx +62 -0
package/src/panels/NotificationsPanel.tsx +37 -0
package/src/panels/SurfacePanel.tsx +66 -0
package/src/panels/TablesPanel.tsx +57 -0
package/src/panels/ThemeManagement.tsx +178 -0
package/src/panels/TypographyPanel.tsx +154 -0
package/src/preview/CamerasPreview.tsx +140 -0
package/src/preview/ComponentsPreview.tsx +146 -0
package/src/preview/DashboardPreview.tsx +138 -0
package/src/preview/LoginPreview.tsx +111 -0
package/src/preview/OperationsPreview.tsx +103 -0
package/src/preview/OrdersPreview.tsx +108 -0
package/src/preview/PreviewPane.tsx +111 -0
package/src/preview/ReportsPreview.tsx +140 -0
package/src/preview/ToastLayer.tsx +34 -0
package/src/preview/useFitCount.ts +68 -0
package/src/shared/ChipGroup.tsx +52 -0
package/src/shared/CropModal.tsx +73 -0
package/src/shared/InfoBadge.tsx +13 -0
package/src/shared/SectionAccordion.tsx +89 -0
package/src/shared/StudioSlider.tsx +103 -0
package/src/shared/SwatchPicker.tsx +44 -0
package/src/shared/TabStrip.tsx +51 -0
package/src/store/useStudioUi.ts +47 -0
package/src/store/useThemeStore.ts +103 -0
package/src/studio/StudioRail.tsx +167 -0
package/src/theme/buildMuiTheme.ts +53 -0
package/src/theme/color.ts +68 -0
package/src/theme/presets.ts +17 -0
package/src/theme/settings.ts +158 -0
package/src/theme/studioTokens.ts +24 -0
package/src/theme/tokens.ts +243 -0
package/src/theme/useTokens.ts +10 -0
package/tsconfig.json +23 -0
package/tsconfig.tsbuildinfo +1 -0
package/vite.config.ts +7 -0

package/src/shared/CropModal.tsx ADDED Viewed

@@ -0,0 +1,73 @@
+import { useRef, useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Box, Typography, Slider } from '@mui/material';
+// Crop modal — 1:1 with the HTML app's "Adjust brand image": drag + zoom, bright keep-frame,
+// dimmed cropped-out area, canvas export at the target aspect (CH=1000).
+export interface CropModalProps {
+  src: string;
+  aspect: number;         // keep-frame aspect (w/h)
+  onCancel: () => void;
+  onConfirm: (dataUrl: string) => void;
+}
+export function CropModal({ src, aspect, onCancel, onConfirm }: CropModalProps) {
+  const [zoom, setZoom] = useState(1);
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const frameRef = useRef<HTMLDivElement>(null);
+  const imgRef = useRef<HTMLImageElement>(null);
+  const keepRef = useRef<HTMLDivElement>(null);
+  const drag = useRef<{ sx: number; sy: number; ox: number; oy: number } | null>(null);
+  useEffect(() => {
+    const move = (ev: PointerEvent) => {
+      if (!drag.current) return;
+      setPos({ x: drag.current.ox + (ev.clientX - drag.current.sx), y: drag.current.oy + (ev.clientY - drag.current.sy) });
+    };
+    const up = () => { drag.current = null; };
+    document.addEventListener('pointermove', move);
+    document.addEventListener('pointerup', up);
+    return () => { document.removeEventListener('pointermove', move); document.removeEventListener('pointerup', up); };
+  }, []);
+  const startDrag = (e: React.PointerEvent) => { e.preventDefault(); drag.current = { sx: e.clientX, sy: e.clientY, ox: pos.x, oy: pos.y }; };
+  const confirm = () => {
+    const frame = frameRef.current, img = imgRef.current, keep = keepRef.current;
+    if (!frame || !img) { onConfirm(src); return; }
+    const fr = (keep || frame).getBoundingClientRect();
+    const CH = 1000, CW = Math.round(CH * aspect), sc = CW / fr.width;
+    const cv = document.createElement('canvas');
+    cv.width = CW; cv.height = CH;
+    const ctx = cv.getContext('2d');
+    if (!ctx) { onConfirm(src); return; }
+    const ir = img.getBoundingClientRect();
+    const dx = (ir.left - fr.left) * sc, dy = (ir.top - fr.top) * sc, dw = ir.width * sc, dh = ir.height * sc;
+    try { ctx.drawImage(img, dx, dy, dw, dh); onConfirm(cv.toDataURL('image/png')); }
+    catch { onConfirm(src); }
+  };
+  // Portal to <body> so the fixed overlay escapes the open accordion's transform (which otherwise
+  // becomes the containing block for position:fixed and clips the modal / its buttons).
+  return createPortal(
+    <Box sx={{ position: 'fixed', inset: 0, zIndex: 1400, bgcolor: 'rgba(15,23,42,.6)', display: 'flex', alignItems: 'center', justifyContent: 'center', p: 2.25, overflow: 'auto' }}>
+      <Box sx={{ width: '100%', maxWidth: 320, bgcolor: 'background.paper', border: '1px solid', borderColor: 'divider', borderRadius: 3, boxShadow: '0 20px 50px rgba(15,23,42,.4)', p: 2 }}>
+        <Typography sx={{ fontSize: 14, fontWeight: 800, mb: 0.5 }}>Adjust brand image</Typography>
+        <Typography sx={{ fontSize: 11.5, color: 'text.secondary', mb: 1.5, lineHeight: 1.45 }}>Drag and zoom to fit your image inside the bright frame. Anything in the dimmed area is cropped out.</Typography>
+        <Box ref={frameRef} onPointerDown={startDrag} sx={{ position: 'relative', width: '100%', aspectRatio: '1.55', borderRadius: 2.5, overflow: 'hidden', bgcolor: '#e9edf2', cursor: 'grab', touchAction: 'none', display: 'grid', placeItems: 'center', '&:active': { cursor: 'grabbing' } }}>
+          <img ref={imgRef} src={src} alt="" draggable={false} style={{ position: 'absolute', left: '50%', top: '50%', transform: `translate(-50%,-50%) translate(${pos.x}px,${pos.y}px) scale(${zoom})`, transformOrigin: 'center', maxWidth: '100%', maxHeight: '100%', width: 'auto', height: 'auto', userSelect: 'none', pointerEvents: 'none' }} />
+          <Box ref={keepRef} sx={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', height: '72%', aspectRatio: String(aspect), maxWidth: '90%', boxShadow: '0 0 0 9999px rgba(10,15,25,.62)', border: '2px solid #fff', borderRadius: '3px', pointerEvents: 'none' }} />
+        </Box>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, my: 1.5 }}>
+          <Typography sx={{ fontSize: 12, fontWeight: 700, color: 'text.secondary' }}>Zoom</Typography>
+          <Slider size="small" min={0.3} max={4} step={0.02} value={zoom} onChange={(_, v) => setZoom(v as number)} />
+        </Box>
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          <Box component="button" onClick={onCancel} sx={{ flex: 1, p: 1.25, borderRadius: 2.5, border: '1px solid', borderColor: 'divider', bgcolor: 'action.hover', color: 'text.secondary', fontSize: 12.5, fontWeight: 700, cursor: 'pointer' }}>Cancel</Box>
+          <Box component="button" onClick={confirm} sx={{ flex: 1, p: 1.25, borderRadius: 2.5, border: 'none', bgcolor: 'primary.main', color: 'primary.contrastText', fontSize: 12.5, fontWeight: 700, cursor: 'pointer' }}>Confirm</Box>
+        </Box>
+      </Box>
+    </Box>,
+    document.body,
+  );
+}

package/src/shared/InfoBadge.tsx ADDED Viewed

@@ -0,0 +1,13 @@
+import { Box, Tooltip } from '@mui/material';
+import { useThemeStore } from '../store/useThemeStore';
+import { studioTokens } from '../theme/studioTokens';
+// Small circled-i info badge — neutral chevron colour from studioTokens (theme-independent).
+export function InfoBadge({ text }: { text: string }) {
+  const sk = studioTokens(useThemeStore((s) => s.settings.mode));
+  return (
+    <Tooltip title={text} arrow>
+      <Box component="span" sx={{ width: 14, height: 14, borderRadius: '50%', border: `1.2px solid ${sk.chevron}`, color: sk.chevron, fontSize: 9, fontWeight: 800, fontStyle: 'italic', fontFamily: 'Georgia, serif', display: 'inline-grid', placeItems: 'center', cursor: 'help', flexShrink: 0 }}>i</Box>
+    </Tooltip>
+  );
+}

package/src/shared/SectionAccordion.tsx ADDED Viewed

@@ -0,0 +1,89 @@
+import { Box, Collapse } from '@mui/material';
+import type { ReactNode } from 'react';
+import { useThemeStore } from '../store/useThemeStore';
+import { studioTokens } from '../theme/studioTokens';
+import { buildTokens } from '../theme/tokens';
+import { palette, rgbaOf } from '../theme/color';
+// Collapsible studio section — ported 1:1 from Theme Manager.dc.html (rowChip):
+//  • OPEN   → wrapper tinted with the edited theme's primary (0.10 light / 0.22 dark),
+//             title recoloured to the accent, chevron turns primary, whole row lifts translateY(-2px).
+//  • DIMMED → when ANY section is open, the others drop to opacity 0.1 (the "transparency behaviour").
+//  • Icon tile stays a neutral studio surface in BOTH states (never filled with primary).
+export interface SectionAccordionProps {
+  icon: ReactNode;
+  title: string;
+  info?: string;
+  open: boolean;
+  dimmed?: boolean;
+  onToggle: () => void;
+  onPreviewMenu?: () => void;
+  children: ReactNode;
+}
+export function SectionAccordion({ icon, title, info, open, dimmed, onToggle, onPreviewMenu, children }: SectionAccordionProps) {
+  const settings = useThemeStore((s) => s.settings);
+  const dark = settings.mode === 'dark';
+  const primary = settings.primaryHex || '#1565c0';
+  const sk = studioTokens(settings.mode);
+  const pal = palette(primary);
+  const T = buildTokens(settings);
+  const wrapBg = open ? (dark ? rgbaOf(primary, 0.22) : rgbaOf(primary, 0.10)) : 'transparent';
+  const titleColor = open ? (dark ? pal[200] : pal[700]) : sk.text;
+  const chevColor = open ? primary : sk.chevron;
+  return (
+    <Box
+      sx={{
+        background: wrapBg,
+        opacity: dimmed ? 0.1 : 1,
+        transform: open ? 'translateY(-2px)' : 'none',
+        transition: 'opacity .22s ease, transform .22s ease',
+        borderBottom: `1px solid ${sk.divider}`,
+        overflow: 'hidden',
+      }}
+    >
+      <Box
+        component="button"
+        onClick={onToggle}
+        sx={{
+          width: '100%', display: 'flex', alignItems: 'center', gap: '9px', p: '7px 11px',
+          background: 'transparent', border: 'none', textAlign: 'left', cursor: 'pointer', fontFamily: 'inherit',
+        }}
+      >
+        <Box sx={{ width: 32, height: 32, borderRadius: '10px', background: sk.iconTile, color: sk.body, display: 'grid', placeItems: 'center', flexShrink: 0, position: 'relative' }}>
+          {icon}
+        </Box>
+        <Box sx={{ flex: 1, minWidth: 0 }}>
+          <Box sx={{ fontSize: `${T.tH5}px`, fontWeight: T.wH5, fontFamily: `${T.headFam},sans-serif`, lineHeight: 1.25, color: titleColor, letterSpacing: '-.2px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {title}
+          </Box>
+        </Box>
+        {onPreviewMenu && (
+          <Box
+            component="span"
+            title="Change preview screen"
+            onClick={(e) => { e.stopPropagation(); onPreviewMenu(); }}
+            sx={{ width: 16, height: 16, mr: '6px', flexShrink: 0, cursor: 'pointer', display: 'grid', placeItems: 'center', color: sk.chevron, transition: 'filter .15s ease, transform .1s ease', '&:hover': { filter: 'brightness(1.15)', transform: 'scale(1.12)' } }}
+          >
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="3" width="20" height="14" rx="2" /><path d="M8 21h8M12 17v4" /></svg>
+          </Box>
+        )}
+        {info && (
+          <Box component="span" title={info} sx={{ width: 15, height: 15, borderRadius: '50%', border: `1.2px solid ${sk.chevron}`, color: sk.chevron, fontSize: '9px', fontWeight: 800, fontStyle: 'italic', fontFamily: 'Georgia, serif', display: 'grid', placeItems: 'center', mr: '7px', flexShrink: 0, cursor: 'help' }}>i</Box>
+        )}
+        <Box sx={{ width: 20, height: 20, borderRadius: '6px', display: 'grid', placeItems: 'center', fontSize: '9px', color: chevColor, flexShrink: 0, transition: 'background .18s, border-color .18s' }}>
+          <Box component="span" sx={{ display: 'block', lineHeight: 1, transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }}>▼</Box>
+        </Box>
+      </Box>
+      <Collapse in={open} unmountOnExit timeout={280}>
+        {/* Panel body — a plain block wrapper (padding + top divider), matching every HTML panel
+            except Colour, which supplies its own flex/gap-11 wrapper internally. */}
+        <Box sx={{ p: '2px 13px 12px', borderTop: `1px solid ${sk.divider}` }}>
+          {children}
+        </Box>
+      </Collapse>
+    </Box>
+  );
+}

package/src/shared/StudioSlider.tsx ADDED Viewed

@@ -0,0 +1,103 @@
+import { Box, Typography, InputBase, Tooltip } from '@mui/material';
+import { useState, useEffect } from 'react';
+import type { ReactNode } from 'react';
+import { useThemeStore } from '../store/useThemeStore';
+import { studioTokens } from '../theme/studioTokens';
+import { useTokens } from '../theme/useTokens';
+// Slider with inline pencil-edit + validation, ported from the HTML dc-inline pattern.
+export interface StudioSliderProps {
+  label: string;
+  info?: string;
+  value: number;          // 0 may mean "auto" upstream; caller passes the effective value
+  effective: number;      // shown value (never 0-as-blank)
+  min: number;
+  max: number;
+  step?: number;
+  unit?: string;
+  autoLabel?: string;     // shown when value===0
+  softMin?: number;       // warn (not block) below
+  softMax?: number;       // warn (not block) above
+  extra?: ReactNode;      // extra control after the value pill (e.g. the H1 scale-ratio gear)
+  onChange: (v: number) => void;
+}
+export function StudioSlider(props: StudioSliderProps) {
+  const { label, info, value, effective, min, max, step = 1, unit = '', autoLabel, softMin, softMax, extra, onChange } = props;
+  const sk = studioTokens(useThemeStore((s) => s.settings.mode));
+  const T = useTokens();
+  const bodyFamCss = `${T.bodyFam},sans-serif`;
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(String(effective));
+  const [warn, setWarn] = useState('');
+  useEffect(() => { if (!editing) setDraft(String(effective)); }, [effective, editing]);
+  const commit = (raw: string) => {
+    const n = parseFloat(raw);
+    if (isNaN(n)) { setWarn('Enter a number'); return; }
+    if (softMin != null && n < softMin) setWarn(`Below ${softMin}${unit} may break the UI`);
+    else if (softMax != null && n > softMax) setWarn(`Above ${softMax}${unit} may break the UI`);
+    else setWarn('');
+    onChange(n);
+  };
+  const shown = value === 0 && autoLabel ? autoLabel : `${effective}${unit}`;
+  return (
+    <Box sx={{ mb: 1.5 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: '8px' }}>
+        <Typography sx={{ fontSize: `${T.tBodySm}px`, fontWeight: T.bwEmph, fontFamily: bodyFamCss, lineHeight: T.bodyLH, color: sk.label2, display: 'flex', alignItems: 'center', gap: '5px' }}>
+          {label}
+          {info && (
+            <Tooltip title={info} arrow>
+              <Box component="span" sx={{ width: 13, height: 13, borderRadius: '50%', border: `1.1px solid ${sk.chevron}`, color: sk.chevron, fontSize: 8, fontWeight: 800, fontStyle: 'italic', fontFamily: 'Georgia, serif', display: 'inline-grid', placeItems: 'center', cursor: 'help' }}>i</Box>
+            </Tooltip>
+          )}
+        </Typography>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: '5px', flexShrink: 0 }}>
+          {editing ? (
+            <InputBase
+              autoFocus
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+              onBlur={() => { commit(draft); setEditing(false); }}
+              onKeyDown={(e) => { if (e.key === 'Enter') { commit(draft); setEditing(false); } if (e.key === 'Escape') setEditing(false); }}
+              sx={{ width: 56, fontSize: `${T.tBodySm}px`, fontWeight: 700, fontFamily: bodyFamCss, border: '1.5px solid', borderColor: 'primary.main', borderRadius: '6px', px: '6px', py: '3px', '& input': { p: 0, textAlign: 'center' } }}
+            />
+          ) : (
+            // Value pill — the HTML dc-inline summary: value + pencil edit icon (click to edit inline).
+            <Box
+              component="button"
+              onClick={() => { setDraft(String(effective)); setEditing(true); }}
+              sx={{ display: 'inline-flex', alignItems: 'center', gap: '5px', fontFamily: bodyFamCss, fontSize: `${T.tBodySm}px`, fontWeight: 800, color: sk.body, bgcolor: 'rgba(130,140,155,0.14)', border: '1px solid rgba(130,140,155,0.28)', borderRadius: '6px', px: '7px', py: '2px', cursor: 'pointer', lineHeight: 1.3, '&:hover': { bgcolor: 'rgba(130,140,155,0.24)' } }}
+            >
+              {shown}
+              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ display: 'block', flexShrink: 0 }}>
+                <path d="M12 20h9" /><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" />
+              </svg>
+            </Box>
+          )}
+          {extra}
+        </Box>
+      </Box>
+      {/* Native styled range — 1:1 with the HTML: 4px #dde3ea track, 18px white thumb (no fill). */}
+      <Box
+        component="input"
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={effective}
+        onChange={(e) => { setWarn(''); onChange(parseFloat((e.target as HTMLInputElement).value)); }}
+        sx={{
+          WebkitAppearance: 'none', appearance: 'none', width: '100%', height: '4px', m: 0, p: 0, display: 'block',
+          borderRadius: '2px', outline: 'none', cursor: 'pointer', background: '#dde3ea', accentColor: 'primary.main',
+          '&::-webkit-slider-thumb': { WebkitAppearance: 'none', width: 18, height: 18, borderRadius: '50%', background: '#fff', cursor: 'pointer', boxShadow: '0 1px 4px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.05)' },
+          '&::-moz-range-thumb': { width: 18, height: 18, border: 'none', borderRadius: '50%', background: '#fff', cursor: 'pointer', boxShadow: '0 1px 4px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.05)' },
+        }}
+      />
+      {warn && <Typography variant="caption" sx={{ color: 'warning.main', fontSize: 10 }}>{warn}</Typography>}
+    </Box>
+  );
+}

package/src/shared/SwatchPicker.tsx ADDED Viewed

@@ -0,0 +1,44 @@
+import { Box, Typography, Tooltip, Popover } from '@mui/material';
+import { useState } from 'react';
+import { useThemeStore } from '../store/useThemeStore';
+import { studioTokens } from '../theme/studioTokens';
+// Swatch colour picker: label + color well opening a native <input type=color>.
+export interface SwatchPickerProps {
+  label: string;
+  info?: string;
+  value: string;          // '' = using derived default
+  fallback: string;       // shown when value is empty
+  onChange: (hex: string) => void;
+  onReset?: () => void;
+}
+export function SwatchPicker({ label, info, value, fallback, onChange, onReset }: SwatchPickerProps) {
+  const sk = studioTokens(useThemeStore((s) => s.settings.mode));
+  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
+  const shown = value || fallback;
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 0.5 }}>
+      <Box
+        onClick={(e) => setAnchor(e.currentTarget)}
+        sx={{ width: 22, height: 22, borderRadius: 1.5, border: `1px solid ${sk.insetBd}`, bgcolor: shown, cursor: 'pointer', flexShrink: 0 }}
+      />
+      <Typography variant="caption" sx={{ flex: 1, color: sk.body, display: 'flex', alignItems: 'center', gap: 0.5 }}>
+        {label}
+        {info && (
+          <Tooltip title={info} arrow>
+            <Box component="span" sx={{ width: 13, height: 13, borderRadius: '50%', border: `1.1px solid ${sk.chevron}`, color: sk.chevron, fontSize: 8, fontWeight: 800, fontStyle: 'italic', fontFamily: 'Georgia, serif', display: 'inline-grid', placeItems: 'center', cursor: 'help' }}>i</Box>
+          </Tooltip>
+        )}
+      </Typography>
+      {value && onReset && (
+        <Box component="span" onClick={onReset} title="Reset to theme default" sx={{ fontSize: 13, color: sk.muted, cursor: 'pointer' }}>↺</Box>
+      )}
+      <Popover open={!!anchor} anchorEl={anchor} onClose={() => setAnchor(null)} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
+        <Box sx={{ p: 1 }}>
+          <input type="color" value={shown} onChange={(e) => onChange(e.target.value)} style={{ width: 160, height: 40, border: 'none', background: 'none' }} />
+        </Box>
+      </Popover>
+    </Box>
+  );
+}

package/src/shared/TabStrip.tsx ADDED Viewed

@@ -0,0 +1,51 @@
+import { Box, Button, Tooltip } from '@mui/material';
+import { useThemeStore } from '../store/useThemeStore';
+import { rgbaOf } from '../theme/color';
+import { useTokens } from '../theme/useTokens';
+// Studio tab strip — tokens ported verbatim from Theme Manager.dc.html (colorTabs):
+// active  = highlight-tint fill + 3px primary underline, neutral text, opacity 1, weight body+200
+// inactive= transparent, opacity .3, neutral body text, 2px transparent underline; hover lifts+tints.
+export interface TabItem { key: string; label: string; info?: string; }
+export interface TabStripProps { tabs: TabItem[]; active: string; onChange: (key: string) => void; }
+export function TabStrip({ tabs, active, onChange }: TabStripProps) {
+  const mode = useThemeStore((s) => s.settings.mode);
+  const primary = useThemeStore((s) => s.settings.primaryHex) || '#1565c0';
+  const highlight = useThemeStore((s) => s.settings.highlightHex) || '#ffd400';
+  const bodyWeight = useThemeStore((s) => s.settings.bodyWeight) || 400;
+  const dark = mode === 'dark';
+  const bwEmph = Math.min(900, bodyWeight + 200);
+  const T = useTokens();
+  const activeTxt = dark ? '#e6edf3' : '#1c2127';
+  const inactiveTxt = dark ? '#cdd4de' : '#5a6573';
+  return (
+    <Box sx={{ display: 'flex', gap: '2px', mb: '2px', px: '2px', borderBottom: '1.5px solid rgba(120,130,145,0.5)' }}>
+      {tabs.map((t) => {
+        const on = t.key === active;
+        const btn = (
+          <Button
+            key={t.key}
+            onClick={() => onChange(t.key)}
+            disableRipple
+            sx={{
+              flex: 1, minWidth: 0, px: '4px', pt: '9px', pb: '8px', borderRadius: '6px 6px 0 0', mb: '-1px',
+              fontSize: `${T.tBodySm}px`, fontFamily: `${T.bodyFam},sans-serif`, fontWeight: on ? bwEmph : bodyWeight, letterSpacing: '.2px', textTransform: 'none',
+              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
+              color: on ? activeTxt : inactiveTxt,
+              opacity: on ? 1 : 0.3,
+              bgcolor: on ? rgbaOf(highlight, dark ? 0.26 : 0.18) : 'transparent',
+              borderBottom: on ? `3px solid ${primary}` : '2px solid transparent',
+              transition: 'color .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease',
+              '&:hover': on ? { bgcolor: rgbaOf(highlight, dark ? 0.26 : 0.18) } : { opacity: 1, bgcolor: 'rgba(150,160,175,0.35)', borderRadius: '8px', boxShadow: '0 6px 18px rgba(0,0,0,0.35)', transform: 'translateY(-2px)' },
+            }}
+          >
+            {t.label}
+          </Button>
+        );
+        return t.info ? <Tooltip key={t.key} title={t.info} arrow>{btn}</Tooltip> : btn;
+      })}
+    </Box>
+  );
+}

package/src/store/useStudioUi.ts ADDED Viewed

@@ -0,0 +1,47 @@
+import { create } from 'zustand';
+// Preview screens, in the HTML app's order. label = header text, icon key = IconRail glyph.
+export const SCREENS = [
+  { key: 'dashboard', label: 'Dashboard' },
+  { key: 'orders', label: 'Orders' },
+  { key: 'reports', label: 'Reports' },
+  { key: 'cameras', label: 'Cameras' },
+  { key: 'operations', label: 'Operations' },
+  { key: 'components', label: 'Components' },
+  { key: 'login', label: 'Login' },
+] as const;
+export type ScreenKey = (typeof SCREENS)[number]['key'];
+// The "Change preview screen" popover lists only these 6 (matches the HTML app's PVT).
+export const PREVIEW_TABS: { key: ScreenKey; label: string }[] = [
+  { key: 'dashboard', label: 'Dashboard' },
+  { key: 'operations', label: 'Operations' },
+  { key: 'cameras', label: 'Cameras' },
+  { key: 'reports', label: 'Reports' },
+  { key: 'orders', label: 'Orders' },
+  { key: 'components', label: 'Components' },
+];
+// Transient studio UI state (not part of the saved theme / dirty snapshot).
+interface StudioUi {
+  openSection: string;                 // which rail section is expanded ('' = none)
+  setOpenSection: (id: string) => void;
+  previewScreen: ScreenKey;
+  setPreviewScreen: (k: ScreenKey) => void;
+  previewMenuOpen: boolean;
+  setPreviewMenuOpen: (v: boolean) => void;
+  studioOpen: boolean;
+  setStudioOpen: (v: boolean) => void;
+}
+export const useStudioUi = create<StudioUi>((set) => ({
+  openSection: '',
+  setOpenSection: (id) => set({ openSection: id }),
+  previewScreen: 'dashboard',
+  setPreviewScreen: (k) => set({ previewScreen: k }),
+  previewMenuOpen: false,
+  setPreviewMenuOpen: (v) => set({ previewMenuOpen: v }),
+  studioOpen: true,
+  setStudioOpen: (v) => set({ studioOpen: v }),
+}));

package/src/store/useThemeStore.ts ADDED Viewed

@@ -0,0 +1,103 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { DEFAULT_SETTINGS, type ThemeSettings } from '../theme/settings';
+export interface SavedTheme {
+  id: string;
+  name: string;
+  snap: ThemeSettings;
+}
+interface ThemeStore {
+  settings: ThemeSettings;
+  savedThemes: SavedTheme[];
+  baseline: string;
+  set: (patch: Partial<ThemeSettings>) => void;
+  applyPreset: (id: string, snap: Partial<ThemeSettings>) => void;
+  reset: () => void;
+  captureBaseline: () => void;
+  restoreBaseline: () => void;
+  isDirty: () => boolean;
+  saveTheme: (name: string) => void;
+  applySaved: (t: SavedTheme) => void;
+  renameSaved: (id: string, name: string) => void;
+  deleteSaved: (id: string) => void;
+  importTheme: (name: string, snap: ThemeSettings) => SavedTheme;
+}
+// Keys excluded from the dirty snapshot (transient / non-theme).
+const snapshot = (s: ThemeSettings) => JSON.stringify(s);
+export const useThemeStore = create<ThemeStore>()(
+  persist(
+    (setState, get) => ({
+      settings: { ...DEFAULT_SETTINGS },
+      savedThemes: [],
+      baseline: snapshot(DEFAULT_SETTINGS),
+      set: (patch) =>
+        setState((st) => ({ settings: { ...st.settings, ...patch, presetId: 'custom' } })),
+      applyPreset: (id, snap) =>
+        setState((st) => {
+          const next = { ...st.settings, ...snap, presetId: id };
+          return { settings: next, baseline: snapshot(next) };
+        }),
+      reset: () =>
+        setState(() => ({ settings: { ...DEFAULT_SETTINGS }, baseline: snapshot(DEFAULT_SETTINGS) })),
+      captureBaseline: () => setState((st) => ({ baseline: snapshot(st.settings) })),
+      restoreBaseline: () =>
+        setState((st) => {
+          try { return { settings: JSON.parse(st.baseline) as ThemeSettings }; }
+          catch { return {}; }
+        }),
+      isDirty: () => snapshot(get().settings) !== get().baseline,
+      saveTheme: (name) =>
+        setState((st) => {
+          const id = 'cust' + Date.now();
+          const snap = { ...st.settings };
+          return {
+            savedThemes: [...st.savedThemes, { id, name, snap }],
+            settings: { ...st.settings, presetId: id },
+            baseline: snapshot({ ...st.settings, presetId: id }),
+          };
+        }),
+      applySaved: (t) =>
+        setState(() => {
+          const next = { ...t.snap, presetId: t.id };
+          return { settings: next, baseline: snapshot(next) };
+        }),
+      renameSaved: (id, name) =>
+        setState((st) => ({
+          savedThemes: st.savedThemes.map((x) => (x.id === id ? { ...x, name } : x)),
+        })),
+      deleteSaved: (id) =>
+        setState((st) => ({ savedThemes: st.savedThemes.filter((x) => x.id !== id) })),
+      importTheme: (name, snap) => {
+        const existing = get().savedThemes.map((x) => x.name.toLowerCase());
+        let nm = name, i = 2;
+        while (existing.includes(nm.toLowerCase())) nm = `${name} ${i++}`;
+        const item: SavedTheme = { id: 'imp' + Date.now(), name: nm, snap };
+        setState((st) => {
+          const next = { ...snap, presetId: item.id };
+          return {
+            savedThemes: [...st.savedThemes, item],
+            settings: next,
+            baseline: snapshot(next),
+          };
+        });
+        return item;
+      },
+    }),
+    { name: 'omnieye-theme-studio' }
+  )
+);