omnieye-theme-studio 1.0.0

package/src/preview/CamerasPreview.tsx

@@ -0,0 +1,140 @@
+import { useTokens } from '../theme/useTokens';
+import { useThemeStore } from '../store/useThemeStore';
+import { useFitCount } from './useFitCount';
+
+// Cameras screen — 1:1 port of the HTML app's camera surveillance screen.
+const CAM_STATS = [
+  { label: 'Cameras Online', val: '5 / 6' },
+  { label: 'Recording', val: '4' },
+  { label: 'Motion Alerts', val: '2' },
+  { label: 'Storage Used', val: '82%' },
+];
+const CAM_WALL = [
+  { name: 'CAM 01', loc: 'Main Lobby', rec: true, online: true, time: '14:32:08' },
+  { name: 'CAM 02', loc: 'North Gate', rec: true, online: true, time: '14:32:08' },
+  { name: 'CAM 03', loc: 'Loading Bay', rec: false, online: true, time: '14:32:07' },
+  { name: 'CAM 04', loc: 'Rooftop', rec: true, online: true, time: '14:32:08' },
+  { name: 'CAM 05', loc: 'Parking Deck', rec: false, online: false, time: '—' },
+  { name: 'CAM 06', loc: 'Server Room', rec: true, online: true, time: '14:32:08' },
+];
+const DETS = [
+  { cam: 'CAM 04', label: 'Motion detected — Rooftop', time: 'just now', sev: 'error' },
+  { cam: 'CAM 02', label: 'Person identified — North Gate', time: '6m ago', sev: 'info' },
+  { cam: 'CAM 01', label: 'Loitering cleared — Main Lobby', time: '22m ago', sev: 'success' },
+  { cam: 'CAM 06', label: 'Door forced — Server Room', time: '34m ago', sev: 'error' },
+  { cam: 'CAM 03', label: 'Vehicle detected — Loading Bay', time: '48m ago', sev: 'info' },
+  { cam: 'CAM 05', label: 'Signal restored — Parking Deck', time: '1h ago', sev: 'success' },
+  { cam: 'CAM 02', label: 'Tailgating flagged — North Gate', time: '1h ago', sev: 'error' },
+  { cam: 'CAM 04', label: 'Crowd density normal — Rooftop', time: '2h ago', sev: 'success' },
+  { cam: 'CAM 01', label: 'Object left behind — Main Lobby', time: '2h ago', sev: 'info' },
+  { cam: 'CAM 03', label: 'Motion detected — Loading Bay', time: '3h ago', sev: 'error' },
+  { cam: 'CAM 06', label: 'Access granted — Server Room', time: '3h ago', sev: 'success' },
+  { cam: 'CAM 05', label: 'Camera offline — Parking Deck', time: '4h ago', sev: 'error' },
+  { cam: 'CAM 02', label: 'Face match — North Gate', time: '5h ago', sev: 'info' },
+  { cam: 'CAM 01', label: 'Queue length normal — Main Lobby', time: '6h ago', sev: 'success' },
+  { cam: 'CAM 04', label: 'Perimeter breach — Rooftop', time: '7h ago', sev: 'error' },
+  { cam: 'CAM 03', label: 'Package scanned — Loading Bay', time: '8h ago', sev: 'info' },
+];
+
+export function CamerasPreview() {
+  const T = useTokens();
+  const s = useThemeStore((st) => st.settings);
+  const { t, rad, radSm, pad, padSm, gap, screenPad, tH1, tH2, tTitle, wH1: wH, headFam, headLH, accentBg, btnText, btnShadow, tBodySm, tCaption, tOverline, bwEmph, btnCase, bodyWeightEff, errSoft, errTxt, mediaBg, overlaySurface, overlayBorder, onOverlay, sevMap } = T;
+  const headFamCss = headFam + ',sans-serif';
+  const bodyFamCss = s.fontFamily + ',sans-serif';
+  const hc1 = T.hc1 || t.textPrimary, hc2 = T.hc2 || t.textPrimary, hc3 = T.hc3 || t.textPrimary;
+  const cardBorderCss = T.cardBorder === 'none' ? 'none' : T.cardBorder;
+
+  const cams = CAM_WALL.map((c) => ({ ...c, dotC: c.online ? s.successHex : t.textDisabled }));
+  const [detRef, detCount] = useFitCount(3, 3, 16);
+  const dets = DETS.slice(0, detCount).map((d) => ({ ...d, ...sevMap[d.sev] }));
+
+  const card: React.CSSProperties = { background: t.paper, border: cardBorderCss, borderRadius: rad, boxShadow: T.cardShadow, overflow: 'hidden' };
+  const cardHead: React.CSSProperties = { padding: `${padSm}px ${pad}px`, background: T.cardHdrBg, borderBottom: T.cardHdrBorder, boxShadow: T.cardHdrAccent, display: 'flex', alignItems: 'center', justifyContent: 'space-between' };
+  const secTitle: React.CSSProperties = { fontSize: tTitle, lineHeight: headLH, fontWeight: wH, color: hc3, fontFamily: headFamCss };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', background: t.paper, border: cardBorderCss, borderRadius: rad, boxShadow: T.cardShadow, overflow: 'hidden', fontFamily: bodyFamCss, fontWeight: bodyWeightEff, color: t.textPrimary }}>
+      {/* App header */}
+      <div style={{ padding: pad, background: T.cardHdrBg, borderBottom: T.cardHdrBorder, boxShadow: T.cardHdrAccent, display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 14 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <div style={{ fontSize: tH1, lineHeight: headLH, fontWeight: wH, color: hc1, letterSpacing: '-.3px', fontFamily: headFamCss }}>Camera Surveillance</div>
+          <span title="6 feeds · live monitoring & recording" style={{ width: 16, height: 16, borderRadius: '50%', border: '1.2px solid ' + t.textSecondary, color: t.textSecondary, fontSize: 9.5, fontWeight: bwEmph, fontStyle: 'italic', fontFamily: 'Georgia,serif', display: 'grid', placeItems: 'center', flexShrink: 0, cursor: 'help' }}>i</span>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: tCaption, fontWeight: bwEmph, color: errTxt, background: errSoft, padding: '6px 12px', borderRadius: 999 }}>
+            <span style={{ width: 7, height: 7, borderRadius: '50%', background: s.errorHex }} />LIVE
+          </span>
+          <button style={{ padding: '10px 18px', borderRadius: radSm, border: 'none', background: accentBg, color: btnText, fontSize: tBodySm, fontWeight: bwEmph, textTransform: btnCase as 'uppercase' | 'none', letterSpacing: '.4px', boxShadow: btnShadow, whiteSpace: 'nowrap', cursor: 'pointer' }}>+ Add Camera</button>
+        </div>
+      </div>
+
+      {/* Body */}
+      <div style={{ padding: screenPad, background: t.bgDefault, display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
+        {/* Stats */}
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap, marginBottom: gap }}>
+          {CAM_STATS.map((k) => (
+            <div key={k.label} style={card}>
+              <div style={{ padding: `${padSm}px ${pad}px`, background: T.cardHdrBg, borderBottom: T.cardHdrBorder, boxShadow: T.cardHdrAccent }}>
+                <span style={{ fontSize: tOverline, color: t.textSecondary, textTransform: 'uppercase', letterSpacing: '.6px', fontWeight: bwEmph }}>{k.label}</span>
+              </div>
+              <div style={{ padding: `${padSm}px ${pad}px` }}>
+                <div style={{ fontSize: tH2, fontWeight: wH, color: hc2, letterSpacing: '-.8px', lineHeight: 1 }}>{k.val}</div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Wall + detections */}
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap, flex: 1, minHeight: 0 }}>
+          <div style={{ ...card, display: 'flex', flexDirection: 'column' }}>
+            <div style={cardHead}>
+              <span style={secTitle}>Camera Wall</span>
+              <span style={{ fontSize: tCaption, color: t.textSecondary, fontWeight: bwEmph }}>2 × 3 grid</span>
+            </div>
+            <div style={{ padding: pad, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gridAutoRows: '1fr', gap }}>
+              {cams.map((c) => (
+                <div key={c.name} style={{ position: 'relative', borderRadius: radSm, overflow: 'hidden', background: mediaBg, minHeight: 104, border: '1px solid ' + t.divider }}>
+                  <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
+                    <span style={{ fontFamily: 'monospace', fontSize: tCaption, color: 'rgba(255,255,255,.3)', letterSpacing: 1 }}>{c.loc}</span>
+                  </div>
+                  <div style={{ position: 'absolute', top: 7, left: 7, display: 'flex', alignItems: 'center', gap: 5, background: overlaySurface, border: '1px solid ' + overlayBorder, borderRadius: 999, padding: '2px 8px' }}>
+                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: c.dotC }} />
+                    <span style={{ color: onOverlay, fontSize: tCaption, fontWeight: 700, letterSpacing: '.4px' }}>{c.name}</span>
+                  </div>
+                  {c.rec && (
+                    <div style={{ position: 'absolute', top: 7, right: 7, display: 'flex', alignItems: 'center', gap: 4, background: overlaySurface, borderRadius: 999, padding: '2px 7px' }}>
+                      <span style={{ width: 6, height: 6, borderRadius: '50%', background: s.errorHex }} />
+                      <span style={{ color: onOverlay, fontSize: 8, fontWeight: 800, letterSpacing: '.5px' }}>REC</span>
+                    </div>
+                  )}
+                  {c.online && (
+                    <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '5px 8px', background: 'linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,0))', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                      <span style={{ color: '#fff', fontSize: tCaption, fontWeight: 600, fontFamily: 'monospace' }}>{c.time}</span>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+          <div style={{ ...card, display: 'flex', flexDirection: 'column' }}>
+            <div style={{ padding: `${padSm}px ${pad}px`, background: T.cardHdrBg, borderBottom: T.cardHdrBorder, boxShadow: T.cardHdrAccent }}>
+              <span style={secTitle}>Recent Detections</span>
+            </div>
+            <div ref={detRef} style={{ padding: padSm, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 2, flex: 1, minHeight: 0 }}>
+              {dets.map((d, i) => (
+                <div key={i} style={{ display: 'flex', gap: 11, alignItems: 'flex-start', padding: '9px 8px', borderRadius: radSm }}>
+                  <div style={{ width: 28, height: 28, borderRadius: radSm, background: d.cb, color: d.cc, display: 'grid', placeItems: 'center', flexShrink: 0, fontSize: 11, fontWeight: 800, fontFamily: 'monospace' }}>●</div>
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ fontSize: tBodySm, color: t.textPrimary, fontWeight: bodyWeightEff, lineHeight: 1.35 }}>{d.label}</div>
+                    <div style={{ fontSize: tCaption, color: t.textSecondary, marginTop: 2 }}>{d.cam} · {d.time}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/preview/ComponentsPreview.tsx

@@ -0,0 +1,146 @@
+import { useTokens } from '../theme/useTokens';
+import { useThemeStore } from '../store/useThemeStore';
+
+// Components screen — 1:1 port of the HTML app's Component Library.
+export function ComponentsPreview() {
+  const T = useTokens();
+  const s = useThemeStore((st) => st.settings);
+  const {
+    t, rad, radSm, pad, padSm, gap, screenPad, tH1, tH2, tTitle, tH4, tH5, tH6, tBody, tBodySm, tCaption,
+    wH1: wH, headFam, headLH, accentBg, btnText, btnShadow, bwEmph, btnCase, bodyWeightEff, bodyLH, pMain,
+    errSoft, errTxt, warnSoft, warnTxt, infoSoft, infoTxt, sucSoft, sucTxt,
+  } = T;
+  const headFamCss = headFam + ',sans-serif';
+  const bodyFamCss = s.fontFamily + ',sans-serif';
+  const highlight = T.t.highlight, highlightSoft = T.t.highlightSoft, highlightBd = T.t.highlightBd;
+  const pContainer = t.pContainer, onPContainer = t.onPContainer, pContrast = t.pContrast;
+  const hc1 = T.hc1 || t.textPrimary, hc2 = T.hc2 || t.textPrimary, hc3 = T.hc3 || t.textPrimary, hc4 = T.hc4 || t.textPrimary, hc5 = T.hc5 || t.textPrimary, hc6 = T.hc6 || t.textPrimary;
+  const cardBorderCss = T.cardBorder === 'none' ? 'none' : T.cardBorder;
+
+  const card: React.CSSProperties = { display: 'flex', flexDirection: 'column', background: t.paper, border: cardBorderCss, borderRadius: rad, boxShadow: T.cardShadow, overflow: 'hidden', height: '100%' };
+  const cardHead: React.CSSProperties = { padding: `${padSm}px ${pad}px`, background: T.cardHdrBg, borderBottom: T.cardHdrBorder, boxShadow: T.cardHdrAccent };
+  const secTitle: React.CSSProperties = { fontSize: tTitle, lineHeight: headLH, fontWeight: wH, color: hc3, fontFamily: headFamCss };
+
+  const typeRows = [
+    { label: 'Dashboard Overview', size: tH1, w: wH, color: hc1, lh: 1.1, ls: '-.5px', name: 'H1', border: true },
+    { label: 'Revenue Report', size: tH2, w: wH, color: hc2, lh: 1.1, ls: '-.4px', name: 'H2', border: true },
+    { label: 'Performance Overview', size: tTitle, w: wH, color: hc3, lh: 1.15, name: 'H3', border: true },
+    { label: 'Active Users', size: tH4, w: wH, color: hc4, lh: 1.2, name: 'H4', border: true },
+    { label: 'Last updated 2m ago', size: tH5, w: wH, color: hc5, lh: 1.25, name: 'H5', border: true },
+    { label: 'Status · Live', size: tH6, w: wH, color: hc6, lh: 1.3, name: 'H6', border: true },
+  ];
+
+  const selRow = (selected: boolean) => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '11px 12px', borderBottom: '1px solid ' + t.divider, background: selected ? highlightSoft : 'transparent', boxShadow: selected ? 'inset 3px 0 0 ' + highlight : 'none' }}>
+      <div style={{ width: 16, height: 16, borderRadius: '50%', border: '2px solid ' + (selected ? highlight : t.outline), display: 'grid', placeItems: 'center', flexShrink: 0 }}>{selected && <div style={{ width: 8, height: 8, borderRadius: '50%', background: highlight }} />}</div>
+      <span style={{ flex: 1, fontSize: tBodySm, fontFamily: bodyFamCss, fontWeight: selected ? bwEmph : bodyWeightEff, color: t.textPrimary }}>{selected ? 'Selected item' : 'Unselected item'}</span>
+      {selected && <span style={{ fontSize: tCaption, fontFamily: bodyFamCss, fontWeight: bwEmph, color: t.textSecondary }}>Active</span>}
+    </div>
+  );
+  const inputBox = (focused: boolean, label: string, value: string) => (
+    <div style={{ position: 'relative', border: focused ? '2px solid ' + pMain : '1.5px solid ' + t.outline, borderRadius: radSm, padding: '12px 13px' }}>
+      <span style={{ position: 'absolute', top: -8, left: 10, background: t.paper, padding: '0 5px', fontSize: tCaption, color: focused ? pMain : t.textSecondary, fontWeight: focused ? bwEmph : undefined }}>{label}</span>
+      <span style={{ fontSize: tBody, color: focused ? t.textPrimary : t.textSecondary }}>{value}</span>
+    </div>
+  );
+  const chip = (bg: string, c: string, label: string) => <span style={{ padding: '5px 13px', borderRadius: 999, background: bg, color: c, fontSize: tCaption, fontWeight: bwEmph }}>{label}</span>;
+  const btn = (extra: React.CSSProperties): React.CSSProperties => ({ padding: '9px 20px', borderRadius: radSm, fontSize: tBodySm, fontWeight: bwEmph, textTransform: btnCase as 'uppercase' | 'none', letterSpacing: '.4px', cursor: 'pointer', ...extra });
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', background: t.paper, border: cardBorderCss, borderRadius: rad, boxShadow: T.cardShadow, overflow: 'hidden', fontFamily: bodyFamCss, fontWeight: bodyWeightEff, color: t.textPrimary }}>
+      {/* App header */}
+      <div style={{ padding: pad, background: T.cardHdrBg, borderBottom: T.cardHdrBorder, boxShadow: T.cardHdrAccent }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <div style={{ fontSize: tH1, lineHeight: headLH, fontWeight: wH, color: hc1, letterSpacing: '-.3px', fontFamily: headFamCss }}>Component Library</div>
+          <span title="Every Material UI component reflects your live theme" style={{ width: 16, height: 16, borderRadius: '50%', border: '1.2px solid ' + t.textSecondary, color: t.textSecondary, fontSize: 9.5, fontWeight: bwEmph, fontStyle: 'italic', fontFamily: 'Georgia,serif', display: 'grid', placeItems: 'center', flexShrink: 0, cursor: 'help' }}>i</span>
+        </div>
+      </div>
+
+      {/* Body */}
+      <div style={{ padding: screenPad, background: t.bgDefault, display: 'flex', flexDirection: 'column', gap, flex: 1, minHeight: 0 }}>
+        {/* Row 1: Type scale + Selection states */}
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap, alignItems: 'stretch' }}>
+          <div style={card}>
+            <div style={cardHead}><span style={secTitle}>Typography Scale</span></div>
+            <div style={{ padding: pad, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', flex: 1, minHeight: 0, gap: 6 }}>
+              {typeRows.map((r) => (
+                <div key={r.name} style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, borderBottom: '1px solid ' + t.divider, paddingBottom: 14 }}>
+                  <span style={{ fontSize: r.size, lineHeight: r.lh, fontWeight: r.w, color: r.color, fontFamily: headFamCss, letterSpacing: r.ls }}>{r.label}</span>
+                  <span style={{ fontSize: r.size, color: t.textSecondary, fontWeight: r.w, whiteSpace: 'nowrap', flexShrink: 0, fontFamily: headFamCss }}>{r.name} · {r.size}</span>
+                </div>
+              ))}
+              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
+                <span style={{ fontSize: tBody, lineHeight: bodyLH, color: t.textPrimary, fontFamily: bodyFamCss, fontWeight: bodyWeightEff }}>Body text — the quick brown fox jumps over the lazy dog.</span>
+                <span style={{ fontSize: tBody, color: t.textSecondary, fontWeight: bodyWeightEff, whiteSpace: 'nowrap', flexShrink: 0, fontFamily: bodyFamCss }}>Body · {tBody}</span>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
+                <span style={{ fontSize: tCaption, lineHeight: bodyLH, color: t.textSecondary, fontFamily: bodyFamCss, fontWeight: bodyWeightEff }}>Caption &amp; helper text style</span>
+                <span style={{ fontSize: tCaption, color: t.textSecondary, fontWeight: bodyWeightEff, whiteSpace: 'nowrap', flexShrink: 0, fontFamily: bodyFamCss }}>Caption · {tCaption}</span>
+              </div>
+            </div>
+          </div>
+          <div style={card}>
+            <div style={cardHead}><span style={secTitle}>Selection States</span></div>
+            <div style={{ padding: pad, display: 'flex', flexDirection: 'column', gap: 14 }}>
+              <div style={{ display: 'flex', gap: 2, borderBottom: '1.5px solid ' + t.divider }}>
+                <div style={{ flex: 1, textAlign: 'center', padding: '8px 4px', fontSize: tBodySm, fontWeight: bwEmph, color: t.textPrimary, background: highlightSoft, borderBottom: '2.5px solid ' + pMain, marginBottom: -1.5, borderRadius: '6px 6px 0 0' }}>Overview</div>
+                <div style={{ flex: 1, textAlign: 'center', padding: '8px 4px', fontSize: tBodySm, fontWeight: bwEmph, color: t.textSecondary }}>Activity</div>
+                <div style={{ flex: 1, textAlign: 'center', padding: '8px 4px', fontSize: tBodySm, fontWeight: bwEmph, color: t.textSecondary }}>Settings</div>
+              </div>
+              <div style={{ display: 'flex', flexDirection: 'column', border: '1px solid ' + t.divider, borderRadius: radSm, overflow: 'hidden' }}>
+                {selRow(true)}{selRow(false)}{selRow(false)}{selRow(false)}{selRow(true)}{selRow(false)}
+              </div>
+              <div style={{ display: 'inline-flex', alignSelf: 'flex-start', padding: '6px 12px', borderRadius: radSm, background: highlightSoft, border: '1px solid ' + highlightBd }}>
+                <span style={{ fontSize: tCaption, fontWeight: bwEmph, color: highlight }}>2 selected items</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Inputs & Selection */}
+        <div style={{ ...card, height: 'auto' }}>
+          <div style={cardHead}><span style={secTitle}>Inputs &amp; Selection</span></div>
+          <div style={{ padding: pad }}>
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap, marginBottom: gap }}>
+              {inputBox(false, 'Outlined', 'Placeholder…')}
+              {inputBox(true, 'Focused', 'Active value')}
+            </div>
+            <div style={{ display: 'flex', gap: 22, alignItems: 'center', flexWrap: 'wrap', paddingTop: padSm, borderTop: '1px solid ' + t.divider }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><div style={{ width: 18, height: 18, borderRadius: 4, background: pMain, display: 'grid', placeItems: 'center', color: pContrast, fontSize: 11, fontWeight: bwEmph }}>✓</div><span style={{ fontSize: tBodySm, color: t.textPrimary }}>Checkbox</span></div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><div style={{ width: 18, height: 18, borderRadius: '50%', border: '2px solid ' + pMain, display: 'grid', placeItems: 'center' }}><div style={{ width: 9, height: 9, borderRadius: '50%', background: pMain }} /></div><span style={{ fontSize: tBodySm, color: t.textPrimary }}>Radio</span></div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><div style={{ width: 38, height: 22, borderRadius: 999, background: pMain, position: 'relative' }}><div style={{ position: 'absolute', top: 3, right: 3, width: 16, height: 16, borderRadius: '50%', background: '#fff' }} /></div><span style={{ fontSize: tBodySm, color: t.textPrimary }}>Switch</span></div>
+            </div>
+          </div>
+        </div>
+
+        {/* Buttons + Chips/Alerts/Progress */}
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap, alignItems: 'stretch' }}>
+          <div style={card}>
+            <div style={cardHead}><span style={secTitle}>Buttons</span></div>
+            <div style={{ padding: pad, display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center' }}>
+              <button style={btn({ border: 'none', background: accentBg, color: btnText, boxShadow: btnShadow })}>Contained</button>
+              <button style={btn({ border: '1.5px solid ' + pMain, background: 'transparent', color: pMain })}>Outlined</button>
+              <button style={btn({ border: 'none', background: 'transparent', color: pMain })}>Text</button>
+              <button style={btn({ border: 'none', background: pContainer, color: onPContainer })}>Tonal</button>
+              <button style={btn({ border: 'none', background: accentBg, color: btnText, boxShadow: btnShadow, borderRadius: 999 })}>Rounded</button>
+              <button style={btn({ border: 'none', background: errSoft, color: errTxt })}>Error</button>
+            </div>
+          </div>
+          <div style={card}>
+            <div style={cardHead}><span style={secTitle}>Chips, Alerts &amp; Progress</span></div>
+            <div style={{ padding: pad }}>
+              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: gap }}>
+                {chip(pContainer, onPContainer, 'Primary')}{chip(sucSoft, sucTxt, 'Success')}{chip(warnSoft, warnTxt, 'Warning')}{chip(infoSoft, infoTxt, 'Info')}{chip(errSoft, errTxt, 'Error')}
+              </div>
+              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 7 }}>
+                <span style={{ fontSize: tBodySm, color: t.textPrimary, fontWeight: bwEmph }}>Revenue goal</span>
+                <span style={{ fontSize: tBodySm, color: pMain, fontWeight: bwEmph }}>74%</span>
+              </div>
+              <div style={{ height: 8, background: t.paper2, border: '1px solid ' + t.divider, borderRadius: 999, overflow: 'hidden' }}><div style={{ height: '100%', width: '74%', background: pMain, borderRadius: 999 }} /></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/preview/DashboardPreview.tsx

@@ -0,0 +1,138 @@
+import { useTokens } from '../theme/useTokens';
+import { useThemeStore } from '../store/useThemeStore';
+import { useFitCount } from './useFitCount';
+
+// Dashboard screen — 1:1 port of the HTML app's dashboard, rendered from the exact token engine.
+
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
+const H1 = [44, 60, 50, 74, 88, 96];
+const H2 = [24, 32, 30, 42, 52, 60];
+
+export function DashboardPreview() {
+  const T = useTokens();
+  const s = useThemeStore((st) => st.settings);
+  const { t, rad, radSm, pad, padSm, gap, screenPad, tH1, tH2, tTitle, tH4, wH1: wH, headFam, headLH, accentBg, btnText, tBodySm, bwEmph, btnCase, bodyWeightEff, bodyLH, tCaption, pMain, sMain } = T;
+  const headFamCss = headFam + ',sans-serif';
+  const bodyFamCss = s.fontFamily + ',sans-serif';
+  const hc1 = T.hc1 || t.textPrimary, hc2 = T.hc2 || t.textPrimary, hc3 = T.hc3 || t.textPrimary;
+
+  const kpis = [
+    { label: 'Revenue', val: '$2.41M', chg: '+12.5%', up: true },
+    { label: 'Open Orders', val: '1,284', chg: '+3.2%', up: true },
+    { label: 'Inventory', val: '8,540', chg: '-1.8%', up: false },
+    { label: 'Active Users', val: '342', chg: '+5', up: true },
+  ].map((k) => ({ ...k, cc: k.up ? T.sucTxt : T.errTxt, cb: k.up ? T.sucSoft : T.errSoft, arrow: k.up ? '▲' : '▼' }));
+
+  // Activity pool + dynamic count — the list grows to fill the card height, 1:1 with the HTML's
+  // _actPool + actFit. Icon → colour mapping matches the original (✓ success, ! warning, + info, $/▤ primary).
+  const actClr = (ic: string) =>
+    ic === '✓' ? { cb: T.sucSoft, cc: T.sucTxt }
+      : ic === '!' ? { cb: T.warnSoft, cc: T.warnTxt }
+        : ic === '+' ? { cb: T.infoSoft, cc: T.infoTxt }
+          : { cb: t.pContainer, cc: T.isDark ? t.pLight : t.pDark };
+  const actPool = [
+    { title: 'Order ORD-1042 delivered to Acme Corp', time: '2m ago', ic: '✓' },
+    { title: 'Invoice #4821 paid — $12,400', time: '18m ago', ic: '$' },
+    { title: 'Low stock alert: Widget Pro (12 left)', time: '1h ago', ic: '!' },
+    { title: 'New customer onboarded: Globex Ltd', time: '3h ago', ic: '+' },
+    { title: 'Report "Q2 Summary" exported to PDF', time: '5h ago', ic: '▤' },
+    { title: 'Shipment SHP-2093 dispatched — Initech', time: '6h ago', ic: '✓' },
+    { title: 'Refund processed — $840 to Umbrella Co', time: '7h ago', ic: '$' },
+    { title: 'Payment overdue: Waystar Royco', time: '8h ago', ic: '!' },
+    { title: 'New support ticket — Stark Industries', time: '9h ago', ic: '+' },
+    { title: 'Backup completed — 12,480 records', time: '11h ago', ic: '✓' },
+    { title: 'Purchase order PO-771 approved', time: '13h ago', ic: '$' },
+    { title: 'Inventory reconciled — Warehouse 3', time: '15h ago', ic: '▤' },
+    { title: 'SLA breach warning — Hooli Inc', time: '17h ago', ic: '!' },
+    { title: 'New user invited — M. Fernandez', time: '19h ago', ic: '+' },
+    { title: 'Quarterly report scheduled', time: '21h ago', ic: '▤' },
+    { title: 'Order ORD-1039 delivered to Oscorp', time: '23h ago', ic: '✓' },
+  ].map((a) => ({ ...a, ...actClr(a.ic) }));
+  const [actRef, actCount] = useFitCount(5, 4, actPool.length);
+  const activity = actPool.slice(0, actCount);
+
+  const cardBorderCss = T.cardBorder === 'none' ? 'none' : T.cardBorder;
+  const cardBase: React.CSSProperties = { background: t.paper, border: cardBorderCss, borderRadius: rad, boxShadow: T.cardShadow, overflow: 'hidden' };
+  const cardHead: React.CSSProperties = { padding: `${padSm}px ${pad}px`, background: T.cardHdrBg, borderBottom: T.cardHdrBorder, boxShadow: T.cardHdrAccent, display: 'flex', alignItems: 'center', justifyContent: 'space-between' };
+  const secTitle: React.CSSProperties = { fontSize: tTitle, lineHeight: headLH, fontWeight: wH, color: hc3, fontFamily: headFamCss };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', background: t.paper, border: cardBorderCss, borderRadius: rad, boxShadow: T.cardShadow, overflow: 'hidden', fontFamily: bodyFamCss, fontWeight: bodyWeightEff, color: t.textPrimary }}>
+      {/* App header */}
+      <div style={{ padding: pad, background: T.cardHdrBg, borderBottom: T.cardHdrBorder, boxShadow: T.cardHdrAccent, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <div style={{ fontSize: tH1, lineHeight: 1.15, fontWeight: wH, color: hc1, letterSpacing: '-.3px', fontFamily: headFamCss }}>Dashboard</div>
+          <span title="Good morning, Admin · Jun 21, 2026" style={{ width: 16, height: 16, borderRadius: '50%', border: '1.2px solid ' + t.textSecondary, color: t.textSecondary, fontSize: 9.5, fontWeight: bwEmph, fontStyle: 'italic', fontFamily: 'Georgia,serif', display: 'grid', placeItems: 'center', flexShrink: 0, cursor: 'help' }}>i</span>
+        </div>
+        <button style={{ padding: '10px 20px', borderRadius: radSm, border: 'none', background: accentBg, color: btnText, fontSize: tBodySm, fontWeight: bwEmph, textTransform: btnCase as 'uppercase' | 'none', letterSpacing: '.4px', boxShadow: T.btnShadow, whiteSpace: 'nowrap', cursor: 'pointer' }}>+ New</button>
+      </div>
+
+      {/* Body */}
+      <div style={{ padding: screenPad, background: t.bgDefault, display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
+        {/* Overview card */}
+        <div style={{ ...cardBase, marginBottom: gap }}>
+          <div style={cardHead}>
+            <span style={{ ...secTitle }}>Performance Overview</span>
+            <span style={{ fontSize: tCaption, color: t.textSecondary, fontWeight: bwEmph }}>This month</span>
+          </div>
+          <div style={{ padding: pad, display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap }}>
+            {kpis.map((k) => (
+              <div key={k.label} style={{ background: t.paper2, border: T.nestBorder, borderRadius: radSm, boxShadow: T.nestShadow, padding: padSm }}>
+                <div style={{ fontSize: tH4, color: t.textSecondary, fontWeight: wH, fontFamily: headFamCss, textTransform: 'uppercase', letterSpacing: '.6px', marginBottom: 8 }}>{k.label}</div>
+                <div style={{ fontSize: tH2, fontWeight: wH, color: hc2, letterSpacing: '-.8px', lineHeight: 1, marginBottom: 6 }}>{k.val}</div>
+                <span style={{ fontSize: tCaption, fontWeight: bwEmph, color: k.cc, background: k.cb, padding: '3px 9px', borderRadius: 999 }}>{k.arrow} {k.chg}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Two-up row — stretches to fill the body (matches the HTML's flex:1 row). */}
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap, flex: 1, minHeight: 0 }}>
+          {/* Revenue Trend */}
+          <div style={{ ...cardBase, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+            <div style={cardHead}>
+              <span style={secTitle}>Revenue Trend</span>
+              <div style={{ display: 'flex', gap: 12 }}>
+                {[['Revenue', pMain], ['Profit', sMain]].map(([lab, col]) => (
+                  <div key={lab} style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
+                    <div style={{ width: 10, height: 10, borderRadius: 2, background: col }} />
+                    <span style={{ fontSize: tCaption, color: t.textSecondary }}>{lab}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div style={{ padding: `${padSm}px ${pad}px`, display: 'flex', alignItems: 'flex-end', gap: 12, flex: 1, minHeight: 200 }}>
+              {MONTHS.map((m, i) => (
+                <div key={m} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, height: '100%' }}>
+                  <div style={{ width: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', gap: 3, flex: 1 }}>
+                    <div style={{ width: '100%', height: H2[i] + '%', background: sMain, opacity: 0.55, borderRadius: `${radSm} ${radSm} 0 0` }} />
+                    <div style={{ width: '100%', height: H1[i] + '%', background: pMain, borderRadius: `${radSm} ${radSm} 0 0` }} />
+                  </div>
+                  <span style={{ fontSize: tCaption, color: t.textSecondary }}>{m}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Recent Activity */}
+          <div style={{ ...cardBase, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+            <div style={{ padding: `${padSm}px ${pad}px`, background: T.cardHdrBg, borderBottom: T.cardHdrBorder, boxShadow: T.cardHdrAccent }}>
+              <span style={secTitle}>Recent Activity</span>
+            </div>
+            <div ref={actRef} style={{ padding: padSm, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 4, flex: 1, minHeight: 0 }}>
+              {activity.map((ac, i) => (
+                <div key={i} style={{ display: 'flex', gap: 11, alignItems: 'flex-start', padding: 8, borderRadius: radSm }}>
+                  <div style={{ width: 28, height: 28, borderRadius: radSm, background: ac.cb, color: ac.cc, display: 'grid', placeItems: 'center', flexShrink: 0, fontSize: 13, fontWeight: bwEmph }}>{ac.ic}</div>
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ fontSize: tBodySm, color: t.textPrimary, fontFamily: bodyFamCss, fontWeight: bodyWeightEff, lineHeight: bodyLH, marginBottom: 2 }}>{ac.title}</div>
+                    <div style={{ fontSize: tCaption, color: t.textSecondary, fontFamily: bodyFamCss }}>{ac.time}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/preview/LoginPreview.tsx

@@ -0,0 +1,111 @@
+import { useTokens } from '../theme/useTokens';
+import { useThemeStore } from '../store/useThemeStore';
+
+const ImgIcon = ({ size }: { size: number }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.5" /><path d="m21 15-5-5L5 21" /></svg>
+);
+
+// Login screen — 1:1 port of the HTML app's full-frame login (split + centered layouts).
+export function LoginPreview() {
+  const T = useTokens();
+  const s = useThemeStore((st) => st.settings);
+  const {
+    t, rad, radSm, pad, tH1, tBody, tBodySm, tCaption, wH1: wH, headLH, accentBg, btnText, btnShadow,
+    bwEmph, pMain, iconInitials, hasLoginImage, loginCenteredGrad, loginScrimGradC,
+  } = T;
+  const bodyFamCss = s.fontFamily + ',sans-serif';
+  const hc1 = T.hc1 || t.textPrimary;
+  const pContrast = t.pContrast;
+  const cardBorderCss = T.cardBorder === 'none' ? 'none' : T.cardBorder;
+  const hasLogo = s.logoMode === 'image' && !!s.logoUrl;
+  const loginBrandBg = T.isDark ? t.paper2 : '#ffffff';
+  const loginFormBg = s.loginPanelColor || t.bgDefault;
+  const imgOpacity = s.loginImgOpacity > 0 ? s.loginImgOpacity : 1;
+
+  const bgImg = hasLoginImage ? <img src={s.loginImage} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', zIndex: 0, opacity: imgOpacity }} /> : null;
+
+  const card: React.CSSProperties = { background: t.paper, border: cardBorderCss, borderRadius: rad, boxShadow: T.cardShadow, padding: pad, display: 'flex', flexDirection: 'column', gap: 20 };
+  const inputWrap = (focused: boolean): React.CSSProperties => ({ position: 'relative', background: t.paper2, border: '1.5px solid ' + (focused ? pMain : t.outline), borderRadius: radSm });
+
+
+  if (s.loginLayout === 'centered') {
+    return (
+      <div style={{ minHeight: 560, background: loginCenteredGrad, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40, position: 'relative', overflow: 'hidden', fontFamily: bodyFamCss, borderRadius: rad }}>
+        {bgImg}
+        {hasLoginImage && <div style={{ position: 'absolute', inset: 0, background: loginScrimGradC, zIndex: 0 }} />}
+        <div style={{ position: 'relative', zIndex: 1, width: '100%', maxWidth: 380, background: t.paper, border: cardBorderCss, borderRadius: rad, boxShadow: '0 24px 60px rgba(0,0,0,.35)', padding: pad, display: 'flex', flexDirection: 'column', gap: 20, alignItems: 'center' }}>
+          <div style={{ width: 72, height: 72, borderRadius: 20, background: s.iconColor, display: 'grid', placeItems: 'center', boxShadow: '0 6px 18px ' + s.iconColor + '55' }}>
+            <span style={{ color: '#fff', fontSize: 24, fontWeight: bwEmph, letterSpacing: '-1px' }}>{iconInitials}</span>
+          </div>
+          <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 14 }}>
+            <div style={{ position: 'relative', border: '1.5px solid ' + t.outline, borderRadius: radSm, padding: '13px 14px' }}>
+              <span style={{ position: 'absolute', top: -8, left: 11, background: t.paper, padding: '0 5px', fontSize: 11, color: t.textSecondary }}>Email</span>
+              <span style={{ fontSize: tBody, color: t.textPrimary }}>admin@company.com</span>
+            </div>
+            <div style={{ position: 'relative', border: '1.5px solid ' + t.outline, borderRadius: radSm, padding: '13px 14px' }}>
+              <span style={{ position: 'absolute', top: -8, left: 11, background: t.paper, padding: '0 5px', fontSize: 11, color: t.textSecondary }}>Password</span>
+              <span style={{ fontSize: tBody, color: t.textPrimary, letterSpacing: 3 }}>••••••••</span>
+            </div>
+            <button style={{ padding: 13, borderRadius: radSm, border: 'none', background: accentBg, color: btnText, fontSize: tBody, fontWeight: bwEmph, textTransform: 'uppercase', letterSpacing: '.5px', boxShadow: btnShadow, cursor: 'pointer' }}>Sign in</button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // split
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '3fr 1fr', minHeight: 560, fontFamily: bodyFamCss, borderRadius: rad, overflow: 'hidden' }}>
+      {/* Brand panel */}
+      <div style={{ background: loginBrandBg, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '48px 40px', gap: 22, position: 'relative', overflow: 'hidden' }}>
+        {bgImg}
+        {!hasLoginImage && (
+          <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12, color: t.textSecondary, border: '1.5px dashed ' + t.outline, padding: 24, boxSizing: 'border-box' }}>
+            <ImgIcon size={46} />
+            <div style={{ fontSize: 14, fontWeight: bwEmph, color: t.textPrimary }}>No brand image</div>
+            <div style={{ fontSize: 12, color: t.textSecondary, textAlign: 'center', maxWidth: 220 }}>Upload an image in the Login Screen settings to fill this panel.</div>
+          </div>
+        )}
+      </div>
+
+      {/* Form panel */}
+      <div style={{ background: loginFormBg, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 22, padding: '48px 40px' }}>
+        {hasLogo
+          ? <img src={s.logoUrl} alt={s.appName} style={{ maxHeight: 64, maxWidth: 200, objectFit: 'contain' }} />
+          : <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6, maxWidth: 200, maxHeight: 64, border: '1.5px dashed ' + t.outline, borderRadius: radSm, boxSizing: 'border-box', color: t.textSecondary, padding: '8px 16px' }}><ImgIcon size={20} /><span style={{ fontSize: tCaption, fontWeight: bwEmph, color: t.textSecondary, whiteSpace: 'nowrap' }}>No logo uploaded</span></div>}
+        <div style={{ width: '100%', maxWidth: 340, ...card }}>
+          <div style={{ textAlign: 'center' }}>
+            <div style={{ fontSize: tH1, lineHeight: headLH, fontWeight: wH, color: hc1, letterSpacing: '-.4px', marginBottom: 5 }}>Welcome back</div>
+            <div style={{ fontSize: tBodySm, color: t.textSecondary }}>Sign in to continue</div>
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+            <div>
+              <div style={{ fontSize: tCaption, fontWeight: bwEmph, color: t.textPrimary, marginBottom: 7 }}>Email Address</div>
+              <div style={{ ...inputWrap(false), padding: '12px 14px 12px 40px' }}>
+                <span style={{ position: 'absolute', left: 13, top: '50%', transform: 'translateY(-50%)', color: t.textSecondary, fontSize: 14 }}>✉</span>
+                <span style={{ fontSize: tBody, color: t.textPrimary }}>admin@company.com</span>
+              </div>
+            </div>
+            <div>
+              <div style={{ fontSize: tCaption, fontWeight: bwEmph, color: t.textPrimary, marginBottom: 7 }}>Password</div>
+              <div style={{ ...inputWrap(true), padding: '12px 40px 12px 40px' }}>
+                <span style={{ position: 'absolute', left: 13, top: '50%', transform: 'translateY(-50%)', color: t.textSecondary, fontSize: 14 }}>🔒</span>
+                <span style={{ fontSize: tBody, color: t.textPrimary, letterSpacing: 3 }}>••••••••</span>
+                <span style={{ position: 'absolute', right: 13, top: '50%', transform: 'translateY(-50%)', color: t.textSecondary, fontSize: 14 }}>👁</span>
+              </div>
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <div style={{ width: 17, height: 17, borderRadius: 4, background: pMain, display: 'grid', placeItems: 'center', color: pContrast, fontSize: 11, fontWeight: bwEmph }}>✓</div>
+                <span style={{ fontSize: tBodySm, color: t.textPrimary }}>Remember me</span>
+              </div>
+              <span style={{ fontSize: tBodySm, color: pMain, fontWeight: bwEmph }}>Forgot password?</span>
+            </div>
+            <button style={{ padding: 13, borderRadius: radSm, border: 'none', background: accentBg, color: btnText, fontSize: tBody, fontWeight: bwEmph, letterSpacing: '.3px', boxShadow: btnShadow, marginTop: 2, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, cursor: 'pointer' }}>Login <span style={{ fontSize: 15 }}>→</span></button>
+          </div>
+          <div style={{ textAlign: 'center', fontSize: tCaption, color: t.textSecondary }}>Powered by <span style={{ color: pMain, fontWeight: bwEmph }}>{s.appName}</span> © 2026</div>
+        </div>
+      </div>
+    </div>
+  );
+}