omnieye-theme-studio 1.0.0

package/src/preview/OperationsPreview.tsx

@@ -0,0 +1,103 @@
+import { useTokens } from '../theme/useTokens';
+import { useThemeStore } from '../store/useThemeStore';
+import { rgbaOf } from '../theme/color';
+import { useFitCount } from './useFitCount';
+
+// Operations screen (modules) — 1:1 port of the HTML app's operations center.
+const NOTIFS = [
+  { ic: '!', label: 'Camera 04 motion detected — Loading Bay', time: 'just now', sev: 'error', unread: true },
+  { ic: '✓', label: 'Stream reconnected — North Gate feed', time: '4m ago', sev: 'success', unread: true },
+  { ic: 'i', label: 'Access request — J. Okoro (Operator)', time: '22m ago', sev: 'info', unread: false },
+  { ic: '!', label: 'Report archive storage 82% full', time: '1h ago', sev: 'warning', unread: false },
+  { ic: '✓', label: 'Backup completed — 12,480 clips archived', time: '2h ago', sev: 'success', unread: false },
+  { ic: 'i', label: 'Firmware update available — 3 devices', time: '3h ago', sev: 'info', unread: false },
+  { ic: '!', label: 'Camera 02 lens obstruction detected', time: '5h ago', sev: 'error', unread: false },
+  { ic: '✓', label: 'Nightly health check passed — all nodes', time: '6h ago', sev: 'success', unread: false },
+  { ic: 'i', label: 'New operator invited — M. Fernandez', time: '7h ago', sev: 'info', unread: false },
+  { ic: '!', label: 'Bandwidth spike on West Wing uplink', time: '8h ago', sev: 'warning', unread: false },
+  { ic: '✓', label: 'Retention policy applied — 30 day window', time: '9h ago', sev: 'success', unread: false },
+  { ic: 'i', label: 'Scheduled maintenance — Sat 02:00 UTC', time: '11h ago', sev: 'info', unread: false },
+  { ic: '!', label: 'Motion zone breach — Perimeter Gate 3', time: '12h ago', sev: 'error', unread: false },
+  { ic: '✓', label: 'Clip export finished — Incident #4821', time: '14h ago', sev: 'success', unread: false },
+  { ic: 'i', label: 'Analytics model updated — v2.4.1', time: '16h ago', sev: 'info', unread: false },
+  { ic: '!', label: 'Disk latency elevated — NVR-02', time: '18h ago', sev: 'warning', unread: false },
+];
+
+export function OperationsPreview() {
+  const T = useTokens();
+  const s = useThemeStore((st) => st.settings);
+  const { t, rad, radSm, pad, padSm, gap, screenPad, tH1, tTitle, wH1: wH, headFam, headLH, accentBg, btnText, tBodySm, tCaption, tOverline, bwEmph, bodyWeightEff, bodyLH, errSoft, errTxt, pMain, mediaBg, overlaySurface, overlayBorder, onOverlay, sevMap } = T;
+  const headFamCss = headFam + ',sans-serif';
+  const bodyFamCss = s.fontFamily + ',sans-serif';
+  const hc1 = T.hc1 || t.textPrimary, hc3 = T.hc3 || t.textPrimary;
+  const cardBorderCss = T.cardBorder === 'none' ? 'none' : T.cardBorder;
+
+  const [notifRef, notifCount] = useFitCount(7, 4, 16);
+  const notifs = NOTIFS.slice(0, notifCount).map((n) => ({ ...n, ...sevMap[n.sev], rowBg: n.unread ? rgbaOf(s.primaryHex, T.isDark ? 0.12 : 0.05) : 'transparent' }));
+  const unreadCount = notifs.filter((n) => n.unread).length;
+
+  const card: React.CSSProperties = { display: 'flex', flexDirection: 'column', minHeight: 0, 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 };
+  const zBtn: React.CSSProperties = { height: 30, borderRadius: radSm, border: 'none', background: 'rgba(255,255,255,.14)', color: onOverlay, fontSize: tCaption, fontWeight: bwEmph, cursor: 'pointer', fontFamily: 'inherit' };
+
+  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 }}>Operations Center</div>
+          <span title="Live map, camera feeds, alerts & access — every module themed end to end" 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', flex: 1, minHeight: 0 }}>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap, flex: 1, minHeight: 0 }}>
+          {/* Live Map */}
+          <div style={card}>
+            <div style={cardHead}>
+              <span style={secTitle}>Live Map · Street View</span>
+              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: tCaption, fontWeight: bwEmph, color: errTxt, background: errSoft, padding: '3px 10px', borderRadius: 999 }}>
+                <span style={{ width: 7, height: 7, borderRadius: '50%', background: s.errorHex }} />LIVE
+              </span>
+            </div>
+            <div style={{ position: 'relative', flex: 1, minHeight: 320, background: mediaBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <span style={{ fontFamily: 'monospace', fontSize: tCaption, color: 'rgba(255,255,255,.42)', letterSpacing: 1.5 }}>◍ GOOGLE STREET VIEW / EARTH EMBED</span>
+              <div style={{ position: 'absolute', top: 12, left: 12, display: 'flex', alignItems: 'center', gap: 7, background: overlaySurface, border: '1px solid ' + overlayBorder, borderRadius: 999, padding: '6px 12px' }}>
+                <span style={{ color: onOverlay, fontSize: tCaption, fontWeight: bwEmph }}>◎ 40.7128, -74.0060 · Manhattan</span>
+              </div>
+              <div style={{ position: 'absolute', bottom: 12, left: '50%', transform: 'translateX(-50%)', display: 'flex', alignItems: 'center', gap: 4, background: overlaySurface, border: '1px solid ' + overlayBorder, borderRadius: radSm, padding: 5 }}>
+                <button style={{ width: 30, height: 30, borderRadius: radSm, border: 'none', background: accentBg, color: btnText, fontSize: 16, fontWeight: bwEmph, cursor: 'pointer' }}>+</button>
+                <button style={{ width: 30, height: 30, borderRadius: radSm, border: 'none', background: 'rgba(255,255,255,.14)', color: onOverlay, fontSize: 16, fontWeight: bwEmph, cursor: 'pointer' }}>−</button>
+                <div style={{ width: 1, height: 18, background: overlayBorder, margin: '0 3px' }} />
+                <button style={{ ...zBtn, padding: '0 12px' }}>Layers</button>
+                <button style={{ ...zBtn, padding: '0 12px' }}>◎ Locate</button>
+              </div>
+            </div>
+          </div>
+
+          {/* Notifications */}
+          <div style={card}>
+            <div style={cardHead}>
+              <span style={secTitle}>Notifications</span>
+              <span style={{ fontSize: tOverline, fontWeight: bwEmph, color: t.pContrast, background: pMain, padding: '2px 9px', borderRadius: 999 }}>{unreadCount} NEW</span>
+            </div>
+            <div ref={notifRef} style={{ padding: padSm, display: 'flex', flexDirection: 'column', gap: 2, flex: 1, minHeight: 0 }}>
+              {notifs.map((n, i) => (
+                <div key={i} style={{ display: 'flex', gap: 11, alignItems: 'flex-start', padding: '9px 8px', borderRadius: radSm, background: n.rowBg }}>
+                  <div style={{ width: 26, height: 26, borderRadius: radSm, background: n.cb, color: n.cc, display: 'grid', placeItems: 'center', flexShrink: 0, fontSize: 13, fontWeight: bwEmph }}>{n.ic}</div>
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ fontSize: tBodySm, color: t.textPrimary, fontWeight: bodyWeightEff, lineHeight: bodyLH }}>{n.label}</div>
+                    <div style={{ fontSize: tCaption, color: t.textSecondary, marginTop: 2 }}>{n.time}</div>
+                  </div>
+                  {n.unread && <div style={{ width: 8, height: 8, borderRadius: '50%', background: pMain, flexShrink: 0, marginTop: 6 }} />}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/preview/OrdersPreview.tsx

@@ -0,0 +1,108 @@
+import { useTokens } from '../theme/useTokens';
+import { useThemeStore } from '../store/useThemeStore';
+import { useFitRows } from './useFitCount';
+
+// Orders screen — 1:1 port of the HTML app's orders table (rows fill the card via tblFit).
+const ALL_ROWS = [
+  { id: 'ORD-1042', cust: 'Acme Corporation', status: 'Delivered', amt: '$12,400', date: 'Jun 18' },
+  { id: 'ORD-1041', cust: 'Globex Ltd', status: 'Processing', amt: '$8,750', date: 'Jun 17' },
+  { id: 'ORD-1040', cust: 'Initech', status: 'Pending', amt: '$5,200', date: 'Jun 16' },
+  { id: 'ORD-1039', cust: 'Umbrella Co', status: 'Shipped', amt: '$22,100', date: 'Jun 15' },
+  { id: 'ORD-1038', cust: 'Waystar Royco', status: 'Delivered', amt: '$9,800', date: 'Jun 14' },
+  { id: 'ORD-1037', cust: 'Stark Industries', status: 'Processing', amt: '$31,500', date: 'Jun 13' },
+  { id: 'ORD-1036', cust: 'Wayne Enterprises', status: 'Delivered', amt: '$18,240', date: 'Jun 12' },
+  { id: 'ORD-1035', cust: 'Soylent Corp', status: 'Pending', amt: '$4,120', date: 'Jun 11' },
+  { id: 'ORD-1034', cust: 'Hooli Inc', status: 'Shipped', amt: '$27,900', date: 'Jun 10' },
+  { id: 'ORD-1033', cust: 'Cyberdyne Systems', status: 'Delivered', amt: '$14,650', date: 'Jun 09' },
+  { id: 'ORD-1032', cust: 'Massive Dynamic', status: 'Processing', amt: '$10,300', date: 'Jun 08' },
+  { id: 'ORD-1031', cust: 'Tyrell Corp', status: 'Delivered', amt: '$16,780', date: 'Jun 07' },
+  { id: 'ORD-1030', cust: 'Oscorp', status: 'Shipped', amt: '$7,940', date: 'Jun 06' },
+  { id: 'ORD-1029', cust: 'Nakatomi Trading', status: 'Pending', amt: '$3,560', date: 'Jun 05' },
+  { id: 'ORD-1028', cust: 'Gekko & Co', status: 'Delivered', amt: '$25,300', date: 'Jun 04' },
+  { id: 'ORD-1027', cust: 'Bluth Company', status: 'Processing', amt: '$6,410', date: 'Jun 03' },
+];
+const COLS = '100px 1fr 120px 100px 80px 70px';
+
+export function OrdersPreview() {
+  const T = useTokens();
+  const s = useThemeStore((st) => st.settings);
+  const { t, rad, radSm, pad, padSm, screenPad, rowPy, tH1, wH1: wH, headFam, headLH, accentBg, btnText, btnShadow, tBody, tBodySm, tCaption, tOverline, bwEmph, btnCase, bodyWeightEff, pMain, table } = T;
+  const headFamCss = headFam + ',sans-serif';
+  const bodyFamCss = s.fontFamily + ',sans-serif';
+  const hc1 = T.hc1 || t.textPrimary;
+
+  const [headRef, bodyRef, rowCount] = useFitRows(12, 3, 16);
+  const rows = ALL_ROWS.slice(0, rowCount).map((x, i) => ({
+    ...x,
+    ...(table.statusMap[x.status] || { sb: t.divider, sc: t.textSecondary }),
+    rowBg: s.tableStripe && i % 2 === 1 ? table.stripeBg : 'transparent',
+  }));
+  const cardBorderCss = T.cardBorder === 'none' ? 'none' : T.cardBorder;
+
+  const headCell = (_label: string): React.CSSProperties => ({
+    fontSize: tOverline, fontWeight: bwEmph, color: t.textSecondary, textTransform: 'uppercase', letterSpacing: '.5px',
+    borderRight: table.colBorder, alignSelf: 'stretch', display: 'flex', alignItems: table.cellAI, justifyContent: table.cellJC, padding: `${table.rowPy} ${table.cellPx}`,
+  });
+  const cellBase: React.CSSProperties = { alignSelf: 'stretch', display: 'flex', alignItems: table.cellAI, justifyContent: table.cellJC, padding: `${table.rowPy} ${table.cellPx}` };
+
+  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 }}>Orders</div>
+          <span title="1,284 orders · June 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: btnShadow, whiteSpace: 'nowrap', cursor: 'pointer' }}>+ New Order</button>
+      </div>
+
+      {/* Body */}
+      <div style={{ padding: screenPad, background: t.bgDefault, display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
+        <div style={{ display: 'flex', flexDirection: 'column', background: t.paper, border: cardBorderCss, borderRadius: rad, boxShadow: T.cardShadow, overflow: 'hidden', flex: 1, minHeight: 0 }}>
+          {/* Toolbar */}
+          <div style={{ padding: `${padSm}px ${pad}px`, background: T.cardHdrBg, borderBottom: T.cardHdrBorder, boxShadow: T.cardHdrAccent, display: 'flex', gap: 9, alignItems: 'center', flexWrap: 'wrap' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: t.paper, border: '1.5px solid ' + t.divider, borderRadius: 999, padding: '8px 15px', flex: 1, minWidth: 170 }}>
+              <span style={{ color: t.textSecondary, fontSize: 13 }}>⌕</span>
+              <span style={{ fontSize: tBodySm, color: t.textSecondary }}>Search orders…</span>
+            </div>
+            {table.filters.map((tf) => (
+              <button key={tf.label} style={{ padding: '7px 14px', borderRadius: 999, border: '1px solid ' + tf.brd, background: tf.bg, color: tf.c, fontSize: tCaption, fontWeight: bwEmph, whiteSpace: 'nowrap', cursor: 'pointer' }}>{tf.label}</button>
+            ))}
+          </div>
+
+          {/* Head */}
+          <div ref={headRef} style={{ display: 'grid', gridTemplateColumns: COLS, padding: `0 ${pad}px`, borderBottom: table.rowBorder, background: table.headBg }}>
+            {['Order ID', 'Customer', 'Status', 'Amount', 'Date'].map((h) => <div key={h} style={headCell(h)}>{h}</div>)}
+            <div style={{ alignSelf: 'stretch', padding: `${table.rowPy} 0` }} />
+          </div>
+
+          {/* Rows */}
+          <div ref={bodyRef} style={{ position: 'relative', display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
+            <div style={{ position: 'absolute', inset: 0, padding: `0 ${pad}px`, display: 'grid', gridTemplateColumns: COLS, pointerEvents: 'none', zIndex: 2 }}>
+              <div style={{ borderRight: table.colBorder }} /><div style={{ borderRight: table.colBorder }} /><div style={{ borderRight: table.colBorder }} /><div style={{ borderRight: table.colBorder }} /><div style={{ borderRight: table.colBorder }} /><div />
+            </div>
+            {rows.map((row) => (
+              <div key={row.id} style={{ display: 'grid', gridTemplateColumns: COLS, padding: `0 ${pad}px`, borderBottom: table.rowBorder, alignItems: 'stretch', background: row.rowBg }}>
+                <div style={{ ...cellBase, fontSize: tBodySm, fontWeight: bwEmph, color: pMain, fontFamily: bodyFamCss }}>{row.id}</div>
+                <div style={{ ...cellBase, fontSize: tBody, color: t.textPrimary, fontWeight: bwEmph }}>{row.cust}</div>
+                <div style={cellBase}><span style={{ padding: '4px 11px', borderRadius: 999, fontSize: tCaption, fontWeight: bwEmph, background: row.sb, color: row.sc, whiteSpace: 'nowrap' }}>{row.status}</span></div>
+                <div style={{ ...cellBase, fontSize: tBody, color: t.textPrimary, fontWeight: bwEmph }}>{row.amt}</div>
+                <div style={{ ...cellBase, fontSize: tBodySm, color: t.textSecondary }}>{row.date}</div>
+                <div style={cellBase}><button style={{ fontSize: tCaption, color: pMain, background: t.pContainer, border: 'none', fontWeight: bwEmph, padding: '5px 11px', borderRadius: radSm, cursor: 'pointer' }}>View</button></div>
+              </div>
+            ))}
+          </div>
+
+          {/* Pagination */}
+          <div style={{ padding: `${rowPy}px ${pad}px`, display: 'flex', alignItems: 'center', gap: 7, borderTop: '1px solid ' + t.divider }}>
+            <span style={{ fontSize: tBodySm, color: t.textSecondary, flex: 1 }}>Showing 1–{rows.length} of 1,284</span>
+            <button style={{ width: 32, height: 32, borderRadius: radSm, border: '1px solid ' + t.outline, background: 'transparent', color: t.textSecondary, cursor: 'pointer' }}>‹</button>
+            <button style={{ width: 32, height: 32, borderRadius: radSm, border: 'none', background: accentBg, color: btnText, fontWeight: bwEmph, cursor: 'pointer' }}>1</button>
+            <button style={{ width: 32, height: 32, borderRadius: radSm, border: '1px solid ' + t.outline, background: 'transparent', color: t.textSecondary, cursor: 'pointer' }}>2</button>
+            <button style={{ width: 32, height: 32, borderRadius: radSm, border: '1px solid ' + t.outline, background: 'transparent', color: t.textSecondary, cursor: 'pointer' }}>›</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/preview/PreviewPane.tsx

@@ -0,0 +1,111 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+import { Box, Typography, Select, MenuItem } from '@mui/material';
+import DesktopWindowsOutlinedIcon from '@mui/icons-material/DesktopWindowsOutlined';
+import { DashboardPreview } from './DashboardPreview';
+import { OrdersPreview } from './OrdersPreview';
+import { ComponentsPreview } from './ComponentsPreview';
+import { CamerasPreview } from './CamerasPreview';
+import { OperationsPreview } from './OperationsPreview';
+import { ReportsPreview } from './ReportsPreview';
+import { LoginPreview } from './LoginPreview';
+import { ToastLayer } from './ToastLayer';
+import { useStudioUi, SCREENS } from '../store/useStudioUi';
+import { useThemeStore } from '../store/useThemeStore';
+
+const ZOOMS = [75, 90, 100, 125];
+
+export function PreviewPane() {
+  const screen = useStudioUi((s) => s.previewScreen);
+  // Edge gap — space between the preview frame and the screen area (0 = flush). Operations
+  // (the full-bleed map screen) is always flush, matching the HTML's screenAreaPad.
+  const edgePadPx = useThemeStore((s) => s.settings.edgePadPx) || 0;
+  const edgePad = screen === 'operations' ? 0 : edgePadPx;
+  const [zoom, setZoom] = useState<'fit' | number>('fit');
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const innerRef = useRef<HTMLDivElement>(null);
+  const [fitPct, setFitPct] = useState(100);
+
+  // Fit/zoom — ported from the HTML app's fitPreview: the content is responsive (fills the pane
+  // width), and "Fit" scales it down to fit the pane's width AND height, capped at 100% (never
+  // scales up), snapping to exactly 100% when the natural scale is ≥ 0.985. Fixed % just applies
+  // that zoom. `zoom` is a non-standard CSS property but is what the original uses.
+  useLayoutEffect(() => {
+    const outer = scrollRef.current, inner = innerRef.current;
+    if (!outer || !inner) return;
+    const run = () => {
+      const cs = getComputedStyle(outer);
+      const padY = (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0);
+      if (zoom !== 'fit') {
+        const z = zoom / 100;
+        inner.style.zoom = String(z);
+        const availH = outer.clientHeight - padY;
+        inner.style.minHeight = (availH > 0 ? Math.floor(availH / z) : 0) + 'px';
+        setFitPct(zoom);
+        return;
+      }
+      // Measure the natural (unscaled) content size, then scale to fit.
+      inner.style.zoom = '1';
+      inner.style.minHeight = '0px';
+      void inner.offsetHeight;
+      const padX = (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
+      const availW = outer.clientWidth - padX, availH = outer.clientHeight - padY;
+      const needW = inner.scrollWidth, needH = inner.scrollHeight;
+      if (needW <= 0 || needH <= 0 || availW <= 0 || availH <= 0) return;
+      const scale = Math.min(availW / needW, availH / needH, 1);
+      const z = scale < 0.985 ? Math.max(0.36, scale) : 1;
+      inner.style.zoom = String(z);
+      // Fill height with content up to the *width* scale only. needW (content width) is independent
+      // of the dynamic row counts, so this is a stable target — unlike availH/z, which feeds back
+      // through the counts and creates multiple fixed points (e.g. a fixed-zoom → Fit round-trip
+      // getting stuck at 67%). When width fits, this is just availH → counts fill the visible pane.
+      const zWidth = Math.min(availW / needW, 1);
+      inner.style.minHeight = Math.floor(availH / Math.max(zWidth, 0.36)) + 'px';
+      setFitPct(Math.round(z * 100));
+    };
+    // The dynamic list counts (useFitCount) and this fit are mutually dependent — the counts fill
+    // the frame, which changes its natural height, which changes the fit. Re-run the fit on a short
+    // rAF loop (~0.6s) so the pair converges, then keep observing for later resizes/content changes.
+    let raf = 0;
+    let frames = 0;
+    const loop = () => { run(); if (++frames < 36) raf = requestAnimationFrame(loop); };
+    loop();
+    const ro = new ResizeObserver(run);
+    ro.observe(outer);
+    ro.observe(inner);
+    return () => { cancelAnimationFrame(raf); ro.disconnect(); };
+  }, [zoom, edgePad, screen]);
+
+  const label = SCREENS.find((s) => s.key === screen)?.label ?? '';
+
+  return (
+    <Box sx={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', bgcolor: 'background.default' }}>
+      <Box sx={{ px: 2.5, py: 1.25, borderBottom: '1px solid', borderColor: 'divider', display: 'flex', alignItems: 'center', gap: 1.5, bgcolor: 'background.paper' }}>
+        <DesktopWindowsOutlinedIcon sx={{ fontSize: 22, color: 'text.secondary' }} />
+        <Typography variant="h5" sx={{ flex: 1, fontSize: 18, fontWeight: 700, letterSpacing: '-.2px' }}>Previewing {label}</Typography>
+        <Select
+          size="small" value={zoom}
+          onChange={(e) => setZoom(e.target.value === 'fit' ? 'fit' : Number(e.target.value))}
+          sx={{ minWidth: 128, fontSize: 13, fontWeight: 600, '& .MuiSelect-select': { py: 0.75 } }}
+        >
+          <MenuItem value="fit">Fit ({fitPct}%)</MenuItem>
+          {ZOOMS.map((z) => <MenuItem key={z} value={z}>{z}%</MenuItem>)}
+        </Select>
+      </Box>
+
+      <Box ref={scrollRef} sx={{ flex: 1, overflow: 'auto', p: `${edgePad}px`, position: 'relative', bgcolor: 'background.default' }}>
+        {/* #dc-fit-inner — flex column so the preview frame (its single child, flex:1) stretches
+            to the minHeight the fit sets, filling the viewport vertically like the original. */}
+        <Box ref={innerRef} sx={{ width: '100%', display: 'flex', flexDirection: 'column', '& > *': { flex: '1 1 0%', minHeight: 0 } }}>
+          {screen === 'dashboard' && <DashboardPreview />}
+          {screen === 'orders' && <OrdersPreview />}
+          {screen === 'reports' && <ReportsPreview />}
+          {screen === 'cameras' && <CamerasPreview />}
+          {screen === 'operations' && <OperationsPreview />}
+          {screen === 'components' && <ComponentsPreview />}
+          {screen === 'login' && <LoginPreview />}
+        </Box>
+        {screen !== 'login' && <ToastLayer />}
+      </Box>
+    </Box>
+  );
+}

package/src/preview/ReportsPreview.tsx

@@ -0,0 +1,140 @@
+import { useTokens } from '../theme/useTokens';
+import { useThemeStore } from '../store/useThemeStore';
+import { useFitRows } from './useFitCount';
+
+// Reports screen — 1:1 port of the HTML app's reports screen.
+const REPORT_KPIS = [
+  { label: 'Reports Generated', val: '248' },
+  { label: 'Avg Generation', val: '1.2s' },
+  { label: 'Data Points', val: '84.2K' },
+  { label: 'Scheduled', val: '12' },
+];
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
+const H1 = [44, 60, 50, 74, 88, 96];
+const H2 = [24, 32, 30, 42, 52, 60];
+const SERIES = [
+  { l: 'Reports', h: 72 }, { l: 'Cameras', h: 92 }, { l: 'Alerts', h: 40 }, { l: 'Users', h: 58 }, { l: 'Storage', h: 80 },
+];
+const REPORTS = [
+  { name: 'Q2 Revenue Summary', type: 'Financial', date: 'Jun 20', status: 'Ready' },
+  { name: 'Camera Uptime Audit', type: 'Operations', date: 'Jun 19', status: 'Ready' },
+  { name: 'User Access Log', type: 'Security', date: 'Jun 18', status: 'Ready' },
+  { name: 'Inventory Forecast', type: 'Analytics', date: 'Jun 17', status: 'Processing' },
+  { name: 'Monthly KPI Digest', type: 'Executive', date: 'Jun 15', status: 'Ready' },
+  { name: 'Incident Response Log', type: 'Security', date: 'Jun 14', status: 'Ready' },
+  { name: 'Storage Utilization Report', type: 'Operations', date: 'Jun 13', status: 'Ready' },
+  { name: 'Weekly Traffic Analysis', type: 'Analytics', date: 'Jun 12', status: 'Processing' },
+  { name: 'Vendor SLA Compliance', type: 'Financial', date: 'Jun 11', status: 'Ready' },
+  { name: 'Motion Event Rollup', type: 'Operations', date: 'Jun 10', status: 'Ready' },
+  { name: 'Quarterly Audit Trail', type: 'Security', date: 'Jun 09', status: 'Ready' },
+  { name: 'Energy Consumption Digest', type: 'Analytics', date: 'Jun 08', status: 'Processing' },
+  { name: 'Executive Board Pack', type: 'Executive', date: 'Jun 07', status: 'Ready' },
+  { name: 'Device Firmware Ledger', type: 'Operations', date: 'Jun 06', status: 'Ready' },
+  { name: 'Access Anomaly Report', type: 'Security', date: 'Jun 05', status: 'Ready' },
+  { name: 'Cost Allocation Summary', type: 'Financial', date: 'Jun 04', status: 'Ready' },
+];
+const RCOLS = '1fr 130px 110px 90px 70px';
+
+export function ReportsPreview() {
+  const T = useTokens();
+  const s = useThemeStore((st) => st.settings);
+  const { t, rad, radSm, pad, padSm, gap, screenPad, rowPy, tH1, tH2, tTitle, wH1: wH, headFam, headLH, accentBg, btnText, btnShadow, tBody, tBodySm, tCaption, tOverline, bwEmph, btnCase, bodyWeightEff, pMain, sMain, chartPalette } = 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 [headRef, bodyRef, reportCount] = useFitRows(5, 3, 16);
+  const reports = REPORTS.slice(0, reportCount).map((r) => ({ ...r, sb: r.status === 'Ready' ? T.sucSoft : T.warnSoft, sc: r.status === 'Ready' ? T.sucTxt : T.warnTxt }));
+  const series = SERIES.map((r, i) => ({ ...r, c: chartPalette[i % chartPalette.length] }));
+
+  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 };
+  const th: React.CSSProperties = { fontSize: tOverline, fontWeight: bwEmph, color: t.textSecondary, textTransform: 'uppercase', letterSpacing: '.5px' };
+
+  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 }}>Reports</div>
+          <span title="Generated insights across every module" 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: btnShadow, whiteSpace: 'nowrap', cursor: 'pointer' }}>↓ Export PDF</button>
+      </div>
+
+      {/* Body */}
+      <div style={{ padding: screenPad, background: t.bgDefault, display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
+        {/* KPI row */}
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap, marginBottom: gap }}>
+          {REPORT_KPIS.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>
+
+        {/* Charts row */}
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap, marginBottom: gap }}>
+          <div style={card}>
+            <div style={cardHead}>
+              <span style={secTitle}>Revenue &amp; Profit Trend</span>
+              <span style={{ fontSize: tCaption, color: t.textSecondary, fontWeight: bwEmph }}>6 months</span>
+            </div>
+            <div style={{ padding: pad, display: 'flex', alignItems: 'flex-end', gap: 12, height: 160 }}>
+              {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>
+          <div style={card}>
+            <div style={{ padding: `${padSm}px ${pad}px`, background: T.cardHdrBg, borderBottom: T.cardHdrBorder, boxShadow: T.cardHdrAccent }}>
+              <span style={secTitle}>By Module</span>
+            </div>
+            <div style={{ padding: pad, display: 'flex', alignItems: 'flex-end', gap: 10, height: 128 }}>
+              {series.map((r) => (
+                <div key={r.l} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-end', height: '100%' }}>
+                  <div style={{ width: '100%', height: r.h + '%', background: r.c, borderRadius: `${radSm} ${radSm} 0 0` }} />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Recent Reports table */}
+        <div style={{ ...card, display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
+          <div style={{ padding: `${padSm}px ${pad}px`, background: T.cardHdrBg, borderBottom: T.cardHdrBorder, boxShadow: T.cardHdrAccent }}>
+            <span style={secTitle}>Recent Reports</span>
+          </div>
+          <div ref={headRef} style={{ display: 'grid', gridTemplateColumns: RCOLS, padding: `${rowPy}px ${pad}px`, borderBottom: '1px solid ' + t.divider, background: t.paper2 }}>
+            {['Report', 'Type', 'Status', 'Date'].map((h) => <div key={h} style={th}>{h}</div>)}
+            <div />
+          </div>
+          <div ref={bodyRef} style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
+            {reports.map((row) => (
+              <div key={row.name} style={{ display: 'grid', gridTemplateColumns: RCOLS, padding: `${rowPy}px ${pad}px`, borderBottom: '1px solid ' + t.divider, alignItems: 'center' }}>
+                <div style={{ fontSize: tBody, color: t.textPrimary, fontWeight: bwEmph }}>{row.name}</div>
+                <div style={{ fontSize: tBodySm, color: t.textSecondary }}>{row.type}</div>
+                <div><span style={{ padding: '4px 11px', borderRadius: 999, fontSize: tCaption, fontWeight: bwEmph, background: row.sb, color: row.sc, whiteSpace: 'nowrap' }}>{row.status}</span></div>
+                <div style={{ fontSize: tBodySm, color: t.textSecondary }}>{row.date}</div>
+                <div><button style={{ fontSize: tCaption, color: pMain, background: t.pContainer, border: 'none', fontWeight: bwEmph, padding: '5px 11px', borderRadius: radSm, cursor: 'pointer' }}>↓ PDF</button></div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/preview/ToastLayer.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { useTokens } from '../theme/useTokens';
+import { useThemeStore } from '../store/useThemeStore';
+import { rgbaOf } from '../theme/color';
+
+// Sample "Low stock alert" toast — 1:1 with the HTML app's sampleToast. Placement, width,
+// accent and style all come from the token engine (Notifications settings).
+export function ToastLayer() {
+  const T = useTokens();
+  const s = useThemeStore((st) => st.settings);
+  const [dismissed, setDismissed] = useState(false);
+  if (dismissed) return null;
+
+  const { t, npos, nacc, toastDeco, toastBg, rad, radSm, tBodySm, tCaption } = T;
+  const width = (s.toastW > 0 ? s.toastW : 252) + 'px';
+
+  return (
+    <div style={{ position: 'absolute', zIndex: 40, width, maxWidth: '70%', boxSizing: 'border-box', background: toastBg, borderRadius: rad, display: 'flex', gap: '10px', alignItems: 'flex-start', padding: '12px 13px', fontFamily: s.fontFamily + ',sans-serif', ...npos, ...toastDeco }}>
+      <div style={{ width: '30px', height: '30px', borderRadius: radSm, background: nacc.icbg, color: nacc.icc, display: 'grid', placeItems: 'center', flexShrink: 0, fontSize: '15px', fontWeight: 800 }}>!</div>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ fontSize: tBodySm + 'px', fontWeight: 700, color: t.textPrimary, marginBottom: '2px' }}>Low stock alert</div>
+        <div style={{ fontSize: tCaption + 'px', color: t.textSecondary, lineHeight: 1.4 }}>Widget Pro is down to 12 units left.</div>
+      </div>
+      {s.notifAutoDismiss && (
+        <div title="Auto-dismiss countdown" style={{ flexShrink: 0, marginTop: '1px', minWidth: '26px', height: '20px', padding: '0 7px', borderRadius: '999px', background: rgbaOf(nacc.dot, 0.14), color: nacc.dot, fontSize: (tCaption - 0.5) + 'px', fontWeight: 800, display: 'grid', placeItems: 'center', fontVariantNumeric: 'tabular-nums' }}>
+          {(s.autoDismissSec > 0 ? s.autoDismissSec : 8) + 's'}
+        </div>
+      )}
+      <button title="Dismiss notification" onClick={() => setDismissed(true)} style={{ flexShrink: 0, width: '20px', height: '20px', marginTop: '1px', border: 'none', background: 'transparent', color: t.textSecondary, cursor: 'pointer', borderRadius: '6px', display: 'grid', placeItems: 'center', padding: 0, lineHeight: 1 }}>
+        <svg width={13} height={13} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.4} strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12" /></svg>
+      </button>
+    </div>
+  );
+}

package/src/preview/useFitCount.ts

@@ -0,0 +1,68 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+
+// Dynamic list length — ported 1:1 from the HTML app's fit logic (actFit / tblFit / reportFit /
+// detFit / notifFit). Measures the average row height and the list's available (flex-filled)
+// height, then shows as many rows as fit, clamped to [min, max]. This is how the original fills
+// vertical space with *content* (more rows) instead of leaving a gap.
+//
+// Usage: const [ref, count] = useFitCount(base, min, max); attach `ref` to the scrolling list
+// wrapper (which must be flex:1 inside its card) and render `pool.slice(0, count)`.
+export function useFitCount(base: number, min: number, max: number) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [count, setCount] = useState(base);
+
+  useLayoutEffect(() => {
+    const wrap = ref.current;
+    if (!wrap) return;
+    const run = () => {
+      const n = wrap.children.length;
+      if (!n) return;
+      const gap = parseFloat(getComputedStyle(wrap).rowGap) || 0;
+      let sum = 0;
+      for (const c of Array.from(wrap.children)) sum += (c as HTMLElement).offsetHeight;
+      const rowH = sum / n;
+      const avail = wrap.clientHeight;
+      if (avail <= 0 || rowH <= 0) return;
+      setCount(Math.max(min, Math.min(max, Math.floor((avail + gap) / (rowH + gap)))));
+    };
+    run();
+    const raf = requestAnimationFrame(run);
+    const t = setTimeout(run, 300);
+    const ro = new ResizeObserver(run);
+    ro.observe(wrap);
+    return () => { cancelAnimationFrame(raf); clearTimeout(t); ro.disconnect(); };
+  }, [min, max]);
+
+  return [ref, count] as const;
+}
+
+// Table variant — ports tblFit / reportFit: use the header-row height as the row unit and divide
+// it into the body's available height (no gap). Attach `headRef` to the header row and `bodyRef`
+// to the flex:1 rows container.
+export function useFitRows(base: number, min: number, max: number) {
+  const headRef = useRef<HTMLDivElement>(null);
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const [count, setCount] = useState(base);
+
+  useLayoutEffect(() => {
+    const body = bodyRef.current;
+    if (!body) return;
+    const run = () => {
+      // Use the actual data-row height (the first non-absolute child), not the header — the header
+      // can be shorter than rows (which carry status pills / buttons), which would overfill.
+      const rows = Array.from(body.children).filter((c) => getComputedStyle(c as HTMLElement).position !== 'absolute');
+      const rowH = rows.length ? (rows[0] as HTMLElement).offsetHeight : (headRef.current?.offsetHeight || 36);
+      const avail = body.clientHeight;
+      if (avail <= 0 || rowH <= 0) return;
+      setCount(Math.max(min, Math.min(max, Math.floor(avail / rowH))));
+    };
+    run();
+    const raf = requestAnimationFrame(run);
+    const t = setTimeout(run, 300);
+    const ro = new ResizeObserver(run);
+    ro.observe(body);
+    return () => { cancelAnimationFrame(raf); clearTimeout(t); ro.disconnect(); };
+  }, [min, max]);
+
+  return [headRef, bodyRef, count] as const;
+}

package/src/shared/ChipGroup.tsx

@@ -0,0 +1,52 @@
+import { Box, Tooltip } from '@mui/material';
+import { useThemeStore } from '../store/useThemeStore';
+import { palette, rgbaOf } from '../theme/color';
+
+// Segmented chip selector — tokens ported verbatim from Theme Manager.dc.html chip():
+// active  = highlight-tint bg + primary(dark-brand) border + brand-dark text, weight body+200
+// inactive= white/#262b34 bg + neutral border + neutral text.
+export interface ChipOption { key: string; label: string; info?: string; }
+export interface ChipGroupProps { options: ChipOption[]; value: string; columns?: number; onChange: (key: string) => void; }
+
+export function ChipGroup({ options, value, columns = 3, onChange }: ChipGroupProps) {
+  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 pal = palette(primary);
+  const bwEmph = Math.min(900, bodyWeight + 200);
+
+  const onBg = rgbaOf(highlight, dark ? 0.30 : 0.18);
+  const onBorder = dark ? pal[400] : primary;
+  const onColor = dark ? pal[200] : pal[700];
+  const offBg = dark ? '#262b34' : '#ffffff';
+  const offBorder = dark ? '#363d48' : '#e3e8ee';
+  const offColor = dark ? '#aeb6c0' : '#5a6573';
+
+  return (
+    <Box sx={{ display: 'grid', gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: '6px' }}>
+      {options.map((o) => {
+        const on = o.key === value;
+        const el = (
+          <Box
+            key={o.key}
+            onClick={() => onChange(o.key)}
+            sx={{
+              py: '9px', px: '4px', borderRadius: '10px', textAlign: 'center', cursor: 'pointer', userSelect: 'none',
+              fontSize: '11px', fontWeight: on ? bwEmph : bodyWeight,
+              border: `1px solid ${on ? onBorder : offBorder}`,
+              bgcolor: on ? onBg : offBg,
+              color: on ? onColor : offColor,
+              transition: 'color .14s ease, background .14s ease, border-color .14s ease',
+              '&:hover': on ? {} : { borderColor: dark ? '#4a5361' : '#c9d0d9' },
+            }}
+          >
+            {o.label}
+          </Box>
+        );
+        return o.info ? <Tooltip key={o.key} title={o.info} arrow>{el}</Tooltip> : el;
+      })}
+    </Box>
+  );
+}