omnieye-theme-studio 1.0.0

package/src/panels/NotificationsPanel.tsx

@@ -0,0 +1,37 @@
+import { Box, FormControlLabel, Switch } from '@mui/material';
+import { useState } from 'react';
+import { useThemeStore } from '../store/useThemeStore';
+import { TabStrip } from '../shared/TabStrip';
+import { ChipGroup } from '../shared/ChipGroup';
+import { StudioSlider } from '../shared/StudioSlider';
+
+export function NotificationsPanel() {
+  const [tab, setTab] = useState('placement');
+  const s = useThemeStore((st) => st.settings);
+  const set = useThemeStore((st) => st.set);
+  return (
+    <>
+      <TabStrip active={tab} onChange={setTab} tabs={[
+        { key: 'placement', label: 'Placement', info: 'Where toasts appear.' },
+        { key: 'behaviour', label: 'Behaviour', info: 'Width & auto-dismiss.' },
+      ]} />
+      <Box sx={{ p: '12px 2px 2px' }}>
+      {tab === 'placement' && (
+        <ChipGroup columns={2} value={s.notifPosition} onChange={(v) => set({ notifPosition: v as any })}
+          options={[
+            { key: 'top-center', label: 'Top Center' }, { key: 'top-right', label: 'Top Right' },
+            { key: 'bottom-left', label: 'Bottom Left' }, { key: 'bottom-right', label: 'Bottom Right' },
+          ]} />
+      )}
+      {tab === 'behaviour' && (
+        <>
+          <StudioSlider label="Toast width" value={s.toastW} effective={s.toastW || 252} min={200} max={500} unit="px" softMax={500} onChange={(v) => set({ toastW: v })} />
+          <FormControlLabel sx={{ mt: 0.5 }} control={<Switch checked={s.notifBadge} onChange={(e) => set({ notifBadge: e.target.checked })} />} label="Show unread badge" />
+          <FormControlLabel sx={{ mt: 0.5, display: 'flex' }} control={<Switch checked={s.notifAutoDismiss} onChange={(e) => set({ notifAutoDismiss: e.target.checked })} />} label="Auto-dismiss toasts" />
+          {s.notifAutoDismiss && <StudioSlider label="Dismiss after" value={s.autoDismissSec} effective={s.autoDismissSec || 5} min={5} max={30} unit="s" onChange={(v) => set({ autoDismissSec: v })} />}
+        </>
+      )}
+      </Box>
+    </>
+  );
+}

package/src/panels/SurfacePanel.tsx

@@ -0,0 +1,66 @@
+import { Box, Typography, Switch } from '@mui/material';
+import { useState } from 'react';
+import { useThemeStore } from '../store/useThemeStore';
+import { TabStrip } from '../shared/TabStrip';
+import { ChipGroup } from '../shared/ChipGroup';
+import { StudioSlider } from '../shared/StudioSlider';
+import { studioTokens } from '../theme/studioTokens';
+
+const DENS_F: Record<string, number> = { compact: 0.82, default: 1, comfortable: 1.16 };
+
+// Surface & Shape — 1:1 with the open preview.
+// Shape:   Corner Radius (chips) · Exact radius · Density (chips) · Exact density
+// Effects: Card-to-card gap · Container padding · Edge gap · Uppercase button labels · Status Chips
+export function SurfacePanel() {
+  const [tab, setTab] = useState('shape');
+  const s = useThemeStore((st) => st.settings);
+  const set = useThemeStore((st) => st.set);
+  const sk = studioTokens(s.mode);
+
+  const densEff = s.densityScale > 0 ? s.densityScale : Math.round((DENS_F[s.density] ?? 1) * 100);
+  const gapEff = s.cardGapPx > 0 ? s.cardGapPx : Math.round(16 * (DENS_F[s.density] ?? 1));
+  const padEff = s.containerPadPx > 0 ? s.containerPadPx : Math.round(10 * (DENS_F[s.density] ?? 1));
+
+  return (
+    <>
+      <TabStrip active={tab} onChange={setTab} tabs={[
+        { key: 'shape', label: 'Shape', info: 'Corner radius & layout density.' },
+        { key: 'effects', label: 'Effects', info: 'Spacing, button case & status chips.' },
+      ]} />
+      <Box sx={{ p: '12px 2px 2px' }}>
+      {tab === 'shape' && (
+        <>
+          <Typography variant="caption" sx={{ fontWeight: 700, color: sk.label2, textTransform: 'uppercase', letterSpacing: '.6px', display: 'block', mb: 0.75 }}>Corner Radius</Typography>
+          <ChipGroup value={s.radiusPreset} onChange={(v) => set({ radiusPreset: v as 'sharp' | 'rounded' | 'round', radiusVal: v === 'sharp' ? 0 : v === 'round' ? 18 : 9 })}
+            options={[{ key: 'sharp', label: 'Sharp' }, { key: 'rounded', label: 'Rounded' }, { key: 'round', label: 'Round' }]} />
+          <Box sx={{ mt: 1.25 }}>
+            <StudioSlider label="Exact radius" value={s.radiusVal} effective={s.radiusVal} min={0} max={28} unit="px" onChange={(v) => set({ radiusVal: v, radiusPreset: 'rounded' })} />
+          </Box>
+          <Typography variant="caption" sx={{ fontWeight: 700, color: sk.label2, textTransform: 'uppercase', letterSpacing: '.6px', display: 'block', mb: 0.75, mt: 0.5 }}>Density</Typography>
+          <ChipGroup value={s.densityScale > 0 ? '' : s.density} onChange={(v) => set({ density: v as 'compact' | 'default' | 'comfortable', densityScale: 0 })}
+            options={[{ key: 'compact', label: 'Compact' }, { key: 'default', label: 'Default' }, { key: 'comfortable', label: 'Comfortable' }]} />
+          <Box sx={{ mt: 1.25 }}>
+            <StudioSlider label="Exact density" info="Fine-tune spacing scale (%)." value={s.densityScale} effective={densEff} min={60} max={140} unit="%" onChange={(v) => set({ densityScale: v })} />
+          </Box>
+        </>
+      )}
+      {tab === 'effects' && (
+        <>
+          <StudioSlider label="Card-to-card gap" value={s.cardGapPx} effective={gapEff} min={0} max={40} step={2} unit="px" onChange={(v) => set({ cardGapPx: v })} />
+          <StudioSlider label="Container padding" value={s.containerPadPx} effective={padEff} min={0} max={40} step={2} unit="px" onChange={(v) => set({ containerPadPx: v })} />
+          <StudioSlider label="Edge gap" info="Space between the preview frame and the outer app card." value={s.edgePadPx} effective={s.edgePadPx} min={0} max={40} step={2} unit="px" autoLabel="0px (flush)" onChange={(v) => set({ edgePadPx: v })} />
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 1 }}>
+            <Typography variant="caption" sx={{ fontWeight: 700, color: sk.label2 }}>Uppercase button labels</Typography>
+            <Switch size="small" checked={s.btnCase === 'upper'} onChange={(e) => set({ btnCase: e.target.checked ? 'upper' : 'none' })} />
+          </Box>
+          <Box sx={{ mt: 1.25 }}>
+            <Typography variant="caption" sx={{ fontWeight: 700, color: sk.label2, textTransform: 'uppercase', letterSpacing: '.6px', display: 'block', mb: 0.75 }}>Status Chips</Typography>
+            <ChipGroup columns={2} value={s.statusBold ? 'bold' : 'soft'} onChange={(v) => set({ statusBold: v === 'bold' })}
+              options={[{ key: 'soft', label: 'Soft' }, { key: 'bold', label: 'Bold' }]} />
+          </Box>
+        </>
+      )}
+      </Box>
+    </>
+  );
+}

package/src/panels/TablesPanel.tsx

@@ -0,0 +1,57 @@
+import { Box, FormControlLabel, Switch } from '@mui/material';
+import { useState } from 'react';
+import { useThemeStore } from '../store/useThemeStore';
+import { TabStrip } from '../shared/TabStrip';
+import { ChipGroup } from '../shared/ChipGroup';
+import { StudioSlider } from '../shared/StudioSlider';
+
+export function TablesPanel() {
+  const [tab, setTab] = useState('rows');
+  const s = useThemeStore((st) => st.settings);
+  const set = useThemeStore((st) => st.set);
+  return (
+    <>
+      <TabStrip active={tab} onChange={setTab} tabs={[
+        { key: 'rows', label: 'Rows', info: 'Row density & dividers.' },
+        { key: 'cols', label: 'Columns', info: 'Column density & dividers.' },
+        { key: 'cells', label: 'Cells', info: 'Cell text & vertical alignment.' },
+        { key: 'styling', label: 'Styling', info: 'Header background & row striping.' },
+      ]} />
+      <Box sx={{ p: '12px 2px 2px' }}>
+      {tab === 'rows' && (
+        <>
+          <ChipGroup value={s.tableDensity} onChange={(v) => set({ tableDensity: v as any })}
+            options={[{ key: 'compact', label: 'Compact' }, { key: 'default', label: 'Default' }, { key: 'comfortable', label: 'Comfortable' }]} />
+          <FormControlLabel sx={{ mt: 1 }} control={<Switch checked={s.tableDividers} onChange={(e) => set({ tableDividers: e.target.checked })} />} label="Row dividers" />
+          {s.tableDividers && <StudioSlider label="Divider width" value={s.tableRowDivW} effective={s.tableRowDivW} min={1} max={4} unit="px" onChange={(v) => set({ tableRowDivW: v })} />}
+        </>
+      )}
+      {tab === 'cols' && (
+        <>
+          <ChipGroup value={s.tableColDensity} onChange={(v) => set({ tableColDensity: v as any })}
+            options={[{ key: 'compact', label: 'Compact' }, { key: 'default', label: 'Default' }, { key: 'comfortable', label: 'Comfortable' }]} />
+          <FormControlLabel sx={{ mt: 1 }} control={<Switch checked={s.tableColDividers} onChange={(e) => set({ tableColDividers: e.target.checked })} />} label="Column dividers" />
+          {s.tableColDividers && <StudioSlider label="Divider width" value={s.tableColDivW} effective={s.tableColDivW} min={1} max={4} unit="px" onChange={(v) => set({ tableColDivW: v })} />}
+        </>
+      )}
+      {tab === 'cells' && (
+        <>
+          <ChipGroup value={s.tableCellAlignH} onChange={(v) => set({ tableCellAlignH: v as any })}
+            options={[{ key: 'left', label: 'Left' }, { key: 'center', label: 'Center' }, { key: 'right', label: 'Right' }]} />
+          <Box sx={{ mt: 1 }}>
+            <ChipGroup value={s.tableCellAlignV} onChange={(v) => set({ tableCellAlignV: v as any })}
+              options={[{ key: 'top', label: 'Top' }, { key: 'middle', label: 'Middle' }, { key: 'bottom', label: 'Bottom' }]} />
+          </Box>
+        </>
+      )}
+      {tab === 'styling' && (
+        <>
+          <ChipGroup value={s.tableHeaderStyle} onChange={(v) => set({ tableHeaderStyle: v as any })}
+            options={[{ key: 'plain', label: 'Plain' }, { key: 'tinted', label: 'Tinted' }, { key: 'accent', label: 'Accent' }]} />
+          <FormControlLabel sx={{ mt: 1 }} control={<Switch checked={s.tableStripe} onChange={(e) => set({ tableStripe: e.target.checked })} />} label="Striped rows" />
+        </>
+      )}
+      </Box>
+    </>
+  );
+}

package/src/panels/ThemeManagement.tsx

@@ -0,0 +1,178 @@
+import { Box, Typography, Button, Menu, MenuItem, Dialog, DialogTitle, DialogContent, DialogActions, TextField } from '@mui/material';
+import { useState } from 'react';
+import { useThemeStore } from '../store/useThemeStore';
+import { TabStrip } from '../shared/TabStrip';
+import { PRESETS } from '../theme/presets';
+import { studioTokens } from '../theme/studioTokens';
+import { rgbaOf } from '../theme/color';
+
+export function ThemeManagement() {
+  const [tab, setTab] = useState('presets');
+  const s = useThemeStore((st) => st.settings);
+  const dark = s.mode === 'dark';
+  const sk = studioTokens(s.mode);
+  const highlight = s.highlightHex || '#ffd400';
+  const cardActiveBg = rgbaOf(highlight, dark ? 0.30 : 0.18);
+  const cardActiveName = dark ? '#e6edf3' : '#1c2127';
+  const cardIdleName = dark ? 'rgba(255,255,255,0.82)' : '#2c333d';
+  const saved = useThemeStore((st) => st.savedThemes);
+  const applyPreset = useThemeStore((st) => st.applyPreset);
+  const applySaved = useThemeStore((st) => st.applySaved);
+  const saveTheme = useThemeStore((st) => st.saveTheme);
+  const renameSaved = useThemeStore((st) => st.renameSaved);
+  const deleteSaved = useThemeStore((st) => st.deleteSaved);
+  const importTheme = useThemeStore((st) => st.importTheme);
+  const set = useThemeStore((st) => st.set);
+  const isDirty = useThemeStore((st) => st.isDirty);
+
+  const downloadTheme = (name: string, snap: object) => {
+    const blob = new Blob([JSON.stringify({ name, snap }, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url; a.download = `${name.replace(/[^a-z0-9]+/gi, '-').toLowerCase()}.theme.json`;
+    a.click(); URL.revokeObjectURL(url);
+  };
+  const onImportFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const f = e.target.files?.[0];
+    if (!f) return;
+    const rd = new FileReader();
+    rd.onload = () => {
+      try {
+        const parsed = JSON.parse(rd.result as string);
+        const snap = parsed.snap ?? parsed;
+        importTheme(parsed.name || 'Imported Theme', snap);
+      } catch { /* ignore bad file */ }
+    };
+    rd.readAsText(f);
+    e.target.value = '';
+  };
+
+  const [menu, setMenu] = useState<{ el: HTMLElement; id: string } | null>(null);
+  const [saveOpen, setSaveOpen] = useState(false);
+  const [saveName, setSaveName] = useState('');
+  const [rename, setRename] = useState<{ id: string; name: string } | null>(null);
+  const [del, setDel] = useState<{ id: string; name: string } | null>(null);
+
+  const activeName = PRESETS.find((p) => p.id === s.presetId)?.name || saved.find((z) => z.id === s.presetId)?.name || 'Custom Theme';
+
+  const nameErr = (n: string, ignoreId?: string) => {
+    const t = n.trim();
+    if (!t) return 'Name required';
+    if (saved.some((x) => x.name.toLowerCase() === t.toLowerCase() && x.id !== ignoreId)) return 'Name already exists';
+    return '';
+  };
+
+  return (
+    <>
+      <TabStrip active={tab} onChange={setTab} tabs={[
+        { key: 'presets', label: 'Presets', info: 'Ready-made colour themes.' },
+        { key: 'saved', label: 'My Themes', info: 'Your saved custom themes.' },
+        { key: 'mode', label: 'Mode', info: 'Light / Dark.' },
+      ]} />
+      <Box sx={{ p: '12px 2px 2px' }}>
+
+      {tab === 'presets' && (
+        <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '9px' }}>
+          {PRESETS.map((p) => {
+            const active = s.presetId === p.id;
+            return (
+              <Box key={p.id} onClick={() => applyPreset(p.id, p.snap)} title={`${p.name} — applies this colour palette`}
+                sx={{ display: 'flex', alignItems: 'center', gap: '9px', p: '9px 10px', borderRadius: '11px', cursor: 'pointer', textAlign: 'left',
+                  border: `1px solid ${active ? highlight : (dark ? '#363d48' : '#e3e8ee')}`,
+                  bgcolor: active ? cardActiveBg : (dark ? '#262b34' : '#ffffff'), transition: 'all .14s ease' }}>
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: '2px', flexShrink: 0 }}>
+                  <Box sx={{ width: 20, height: 11, borderRadius: '3px', bgcolor: p.snap.primaryHex }} />
+                  <Box sx={{ width: 20, height: 7, borderRadius: '2px', bgcolor: p.snap.secondaryHex }} />
+                </Box>
+                <Box component="span" sx={{ fontSize: '11px', fontWeight: 600, color: active ? cardActiveName : cardIdleName, lineHeight: 1.3 }}>{p.name}</Box>
+              </Box>
+            );
+          })}
+        </Box>
+      )}
+
+      {tab === 'saved' && (
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+          {saved.length === 0 && <Typography variant="caption" sx={{ color: 'text.secondary', py: 2, textAlign: 'center' }}>No saved themes yet.</Typography>}
+          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0.9 }}>
+            {saved.map((z) => {
+              const active = s.presetId === z.id;
+              return (
+                <Box key={z.id} onClick={() => applySaved(z)} title="Apply this saved theme"
+                  sx={{ display: 'flex', flexDirection: 'column', gap: 0.9, p: '9px 10px', borderRadius: '11px', cursor: 'pointer',
+                    border: `1px solid ${active ? highlight : (dark ? '#363d48' : '#e3e8ee')}`, bgcolor: active ? cardActiveBg : (dark ? '#262b34' : '#ffffff'), transition: 'all .14s ease' }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: '2px', flexShrink: 0 }}>
+                      <Box sx={{ width: 20, height: 11, borderRadius: '3px', bgcolor: z.snap.primaryHex }} />
+                      <Box sx={{ width: 20, height: 7, borderRadius: '2px', bgcolor: z.snap.secondaryHex }} />
+                    </Box>
+                    <Box component="span" sx={{ flex: 1, minWidth: 0, fontSize: '11px', fontWeight: 600, color: active ? cardActiveName : cardIdleName, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{z.name}</Box>
+                  </Box>
+                  <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+                    <Box component="span" onClick={(e) => { e.stopPropagation(); setMenu({ el: e.currentTarget, id: z.id }); }} sx={{ cursor: 'pointer', color: sk.muted, px: 0.5 }}>⋮</Box>
+                  </Box>
+                </Box>
+              );
+            })}
+          </Box>
+          <Box sx={{ display: 'flex', gap: 1, mt: 1 }}>
+            <Button size="small" variant="outlined" component="label" sx={{ flex: 1, textTransform: 'none' }}>↑ Import
+              <input hidden type="file" accept=".json,application/json" onChange={onImportFile} />
+            </Button>
+            <Button size="small" variant="outlined" onClick={() => downloadTheme(activeName, s)} sx={{ flex: 1, textTransform: 'none' }}>⤓ Download</Button>
+            <Button size="small" variant="contained" disabled={!isDirty()} onClick={() => { setSaveName(''); setSaveOpen(true); }} sx={{ flex: 1, textTransform: 'none' }}>+ Save</Button>
+          </Box>
+        </Box>
+      )}
+
+      {tab === 'mode' && (
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          {(['light', 'dark'] as const).map((m) => (
+            <Button key={m} onClick={() => set({ mode: m })} variant={s.mode === m ? 'contained' : 'outlined'} sx={{ flex: 1, textTransform: 'capitalize' }}>{m}</Button>
+          ))}
+        </Box>
+      )}
+      </Box>
+
+      <Menu open={!!menu} anchorEl={menu?.el} onClose={() => setMenu(null)}>
+        <MenuItem onClick={() => { const z = saved.find((x) => x.id === menu!.id)!; applySaved(z); setMenu(null); }}>✏️ Edit</MenuItem>
+        <MenuItem onClick={() => { const z = saved.find((x) => x.id === menu!.id)!; setRename({ id: z.id, name: z.name }); setMenu(null); }}>✎ Rename</MenuItem>
+        <MenuItem onClick={() => { const z = saved.find((x) => x.id === menu!.id)!; setDel({ id: z.id, name: z.name }); setMenu(null); }}>🗑 Delete</MenuItem>
+        <MenuItem onClick={() => { const z = saved.find((x) => x.id === menu!.id)!; downloadTheme(z.name, z.snap); setMenu(null); }}>⤓ Download</MenuItem>
+      </Menu>
+
+      <Dialog open={saveOpen} onClose={() => setSaveOpen(false)}>
+        <DialogTitle>Save theme</DialogTitle>
+        <DialogContent>
+          <TextField autoFocus fullWidth size="small" label="Theme name" value={saveName} onChange={(e) => setSaveName(e.target.value)} error={!!nameErr(saveName)} helperText={nameErr(saveName)} sx={{ mt: 1 }} />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setSaveOpen(false)}>Cancel</Button>
+          <Button variant="contained" disabled={!!nameErr(saveName)} onClick={() => { saveTheme(saveName.trim()); setSaveOpen(false); }}>Save</Button>
+        </DialogActions>
+      </Dialog>
+
+      <Dialog open={!!rename} onClose={() => setRename(null)}>
+        <DialogTitle>Rename theme</DialogTitle>
+        <DialogContent>
+          <TextField autoFocus fullWidth size="small" label="New name" value={rename?.name ?? ''} onChange={(e) => setRename((r) => r && { ...r, name: e.target.value })} error={!!(rename && nameErr(rename.name, rename.id))} helperText={rename ? nameErr(rename.name, rename.id) : ''} sx={{ mt: 1 }} />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setRename(null)}>Cancel</Button>
+          <Button variant="contained" disabled={!!(rename && nameErr(rename.name, rename.id))} onClick={() => { renameSaved(rename!.id, rename!.name.trim()); setRename(null); }}>Rename</Button>
+        </DialogActions>
+      </Dialog>
+
+      <Dialog open={!!del} onClose={() => setDel(null)}>
+        <DialogTitle>Delete theme</DialogTitle>
+        <DialogContent>
+          <Typography variant="body2">Delete “{del?.name}”? This cannot be undone.</Typography>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setDel(null)}>Cancel</Button>
+          <Button color="error" variant="contained" onClick={() => { deleteSaved(del!.id); setDel(null); }}>Delete</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}

package/src/panels/TypographyPanel.tsx

@@ -0,0 +1,154 @@
+import { Box, InputBase } from '@mui/material';
+import { useState, useEffect } from 'react';
+import { useThemeStore } from '../store/useThemeStore';
+import { TabStrip } from '../shared/TabStrip';
+import { StudioSlider } from '../shared/StudioSlider';
+import { studioTokens } from '../theme/studioTokens';
+import { palette, rgbaOf } from '../theme/color';
+
+// Body-font chips carry a descriptive sub-label and render in their own typeface (1:1 with HTML fontChips).
+const FONTS = [
+  { key: 'Roboto', label: 'Roboto', sub: 'Material' },
+  { key: 'Inter', label: 'Inter', sub: 'Enterprise' },
+  { key: 'DM Sans', label: 'DM Sans', sub: 'Modern' },
+  { key: 'Manrope', label: 'Manrope', sub: 'Geometric' },
+  { key: 'Plus Jakarta Sans', label: 'Jakarta', sub: 'Friendly' },
+  { key: 'Nunito Sans', label: 'Nunito', sub: 'Rounded' },
+];
+const HEAD_FONTS = [
+  { key: 'Figtree', label: 'Google Sans' }, { key: 'Roboto', label: 'Roboto' }, { key: 'Inter', label: 'Inter' },
+  { key: 'Arial', label: 'Arial' }, { key: 'Manrope', label: 'Manrope' }, { key: 'Plus Jakarta Sans', label: 'Jakarta' },
+];
+
+// Font chip — 1:1 with the HTML: a single font-name label rendered in its own typeface,
+// no descriptive sub-label. (`sub` is accepted but intentionally not rendered.)
+function FontChip({ label, fam, active, onClick }: { label: string; sub?: string; fam: string; active: boolean; onClick: () => void }) {
+  const mode = useThemeStore((s) => s.settings.mode);
+  const primary = useThemeStore((s) => s.settings.primaryHex) || '#1565c0';
+  const highlight = useThemeStore((s) => s.settings.highlightHex) || '#ffd400';
+  const dark = mode === 'dark';
+  const pal = palette(primary);
+  const onBg = rgbaOf(highlight, dark ? 0.30 : 0.18);
+  return (
+    <Box onClick={onClick} sx={{ py: '17px', px: '4px', borderRadius: '10px', textAlign: 'center', cursor: 'pointer', border: `1px solid ${active ? (dark ? pal[400] : primary) : (dark ? '#363d48' : '#e3e8ee')}`, bgcolor: active ? onBg : (dark ? '#262b34' : '#ffffff'), transition: 'all .14s ease', '&:hover': active ? {} : { borderColor: dark ? '#4a5361' : '#c9d0d9' } }}>
+      <Box sx={{ fontFamily: `${fam}, sans-serif`, fontSize: 13, fontWeight: 700, lineHeight: 1, color: active ? (dark ? pal[200] : pal[700]) : (dark ? '#aeb6c0' : '#5a6573') }}>{label}</Box>
+    </Box>
+  );
+}
+
+function UploadFont({ label, current, onLoad }: { label: string; current: string; onLoad: (name: string, url: string) => void }) {
+  const sk = studioTokens(useThemeStore((s) => s.settings.mode));
+  const onFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const name = file.name.replace(/\.[^.]+$/, '');
+    const url = URL.createObjectURL(file);
+    const style = document.createElement('style');
+    style.textContent = `@font-face{font-family:'${name}';src:url('${url}');font-display:swap;}`;
+    document.head.appendChild(style);
+    onLoad(name, url);
+  };
+  return (
+    <Box sx={{ mt: 1.5 }}>
+      <Box component="label" sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0.75, bgcolor: sk.inset, border: `1.5px dashed ${sk.insetBd}`, borderRadius: '9px', p: 1.5, cursor: 'pointer', color: sk.body, fontSize: 11.5, fontWeight: 600, textAlign: 'center' }}>
+        ⬆ {label}<Box component="span" sx={{ color: sk.muted }}>.woff2 / .ttf / .otf</Box>
+        <input type="file" accept=".woff2,.woff,.ttf,.otf" onChange={onFile} style={{ display: 'none' }} />
+      </Box>
+      {current && (
+        <Box sx={{ mt: 0.9, display: 'flex', alignItems: 'center', gap: 0.9, bgcolor: 'success.main', borderRadius: 2, px: 1.4, py: 0.9, color: 'success.contrastText' }}>
+          <Box component="span" sx={{ fontWeight: 900, fontSize: 12 }}>✓</Box>
+          <Box component="span" sx={{ fontSize: 11.5 }}>Loaded: <b>{current}</b></Box>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+// Scale-ratio gear (H1 size row) — 1:1 with the HTML: a gear pill that opens an inline number
+// input editing the modular scale ratio (scaleRatioCustom). Ratio presets: compact 1.15, default
+// 1.25, airy 1.414.
+const RATIO_PRESET: Record<string, number> = { compact: 1.15, default: 1.25, airy: 1.414 };
+function RatioGear() {
+  const s = useThemeStore((st) => st.settings);
+  const set = useThemeStore((st) => st.set);
+  const sk = studioTokens(s.mode);
+  const [editing, setEditing] = useState(false);
+  const ratioEff = s.scaleRatioCustom > 0 ? s.scaleRatioCustom : (RATIO_PRESET[s.scaleRatio] ?? 1.25);
+  const [draft, setDraft] = useState(ratioEff.toFixed(2));
+  useEffect(() => { if (!editing) setDraft(ratioEff.toFixed(2)); }, [ratioEff, editing]);
+  const commit = () => { const n = parseFloat(draft); if (!isNaN(n)) set({ scaleRatioCustom: n }); setEditing(false); };
+  if (editing) {
+    return (
+      <InputBase autoFocus value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={commit}
+        onKeyDown={(e) => { if (e.key === 'Enter') commit(); if (e.key === 'Escape') setEditing(false); }}
+        sx={{ width: 56, fontSize: '11.5px', fontWeight: 700, border: '1.5px solid', borderColor: 'primary.main', borderRadius: '6px', px: '6px', py: '3px', '& input': { p: 0, textAlign: 'center' } }} />
+    );
+  }
+  return (
+    <Box component="button" title="Configure scale ratio — each heading is the one above ÷ this value"
+      onClick={() => { setDraft(ratioEff.toFixed(2)); setEditing(true); }}
+      sx={{ display: 'inline-grid', placeItems: 'center', color: sk.body, bgcolor: 'rgba(130,140,155,0.14)', border: '1px solid rgba(130,140,155,0.28)', borderRadius: '6px', px: '6px', py: '3px', cursor: 'pointer', '&:hover': { bgcolor: 'rgba(130,140,155,0.24)' } }}>
+      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ display: 'block' }}>
+        <circle cx="12" cy="12" r="3" />
+        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+      </svg>
+    </Box>
+  );
+}
+
+export function TypographyPanel() {
+  const [tab, setTab] = useState('bodyFont');
+  const s = useThemeStore((st) => st.settings);
+  const set = useThemeStore((st) => st.set);
+
+  return (
+    <>
+      <TabStrip
+        active={tab}
+        onChange={setTab}
+        tabs={[
+          { key: 'bodyFont', label: 'Body Font', info: 'Typeface used for body / paragraph text (headings use the Heading Font)' },
+          { key: 'headFont', label: 'Heading Font', info: 'Choose a separate typeface for headings (or match the body font)' },
+          { key: 'headText', label: 'Heading Text', info: 'Fine-tune size & weight per heading level (H1–H4)' },
+          { key: 'bodyText', label: 'Body Text', info: 'Adjust base font size and line height for body copy' },
+        ]}
+      />
+      <Box sx={{ p: '12px 2px 2px' }}>
+      {tab === 'bodyFont' && (
+        <>
+          <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '10px' }}>
+            {FONTS.map((f) => <FontChip key={f.key} label={f.label} sub={f.sub} fam={f.key} active={s.fontFamily === f.key} onClick={() => set({ fontFamily: f.key })} />)}
+            {s.customFont && <FontChip label={s.customFont} sub="Custom" fam={s.customFont} active={s.fontFamily === s.customFont} onClick={() => set({ fontFamily: s.customFont })} />}
+          </Box>
+          <UploadFont label="Upload custom font" current={s.customFont} onLoad={(name) => set({ customFont: name, fontFamily: name })} />
+        </>
+      )}
+      {tab === 'headFont' && (
+        <>
+          <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '10px' }}>
+            {HEAD_FONTS.map((f) => <FontChip key={f.key} label={f.label} fam={f.key} active={s.headingFont === f.key} onClick={() => set({ headingFont: f.key })} />)}
+            {s.customHeadFont && <FontChip label={s.customHeadFont} sub="Custom" fam={s.customHeadFont} active={s.headingFont === s.customHeadFont} onClick={() => set({ headingFont: s.customHeadFont })} />}
+          </Box>
+          <UploadFont label="Upload heading font" current={s.customHeadFont} onLoad={(name) => set({ customHeadFont: name, headingFont: name })} />
+        </>
+      )}
+      {tab === 'headText' && (
+        <>
+          <StudioSlider label="H1 size" info="All heading levels scale from H1 by a modular ratio (configurable via the gear icon)." value={s.h1Size} effective={s.h1Size || 20} min={18} max={56} unit="px" extra={<RatioGear />} onChange={(v) => set({ h1Size: v })} />
+          <StudioSlider label="Weight (all headings)" value={s.headingWeight} effective={s.headingWeight} min={300} max={900} step={100} onChange={(v) => set({ headingWeight: v })} />
+          <StudioSlider label="Line height (all headings)" value={s.headingLH} effective={s.headingLH || 1.2} min={0.9} max={2} step={0.05} autoLabel="Auto (1.20)" onChange={(v) => set({ headingLH: v })} />
+        </>
+      )}
+      {tab === 'bodyText' && (
+        <>
+          <StudioSlider label="Base font size" info="Root body text size." value={s.baseFontPx} effective={s.baseFontPx || 12} min={9} max={20} unit="px" softMin={9} onChange={(v) => set({ baseFontPx: v })} />
+          <StudioSlider label="Body weight" value={s.bodyWeight} effective={s.bodyWeight || 400} min={300} max={900} step={100} autoLabel="Auto (400)" onChange={(v) => set({ bodyWeight: v })} />
+          <StudioSlider label="Body line height" value={s.bodyLineHeight} effective={s.bodyLineHeight || 1.5} min={1.2} max={2} step={0.05} autoLabel="Auto (1.50)" onChange={(v) => set({ bodyLineHeight: v })} />
+        </>
+      )}
+      </Box>
+    </>
+  );
+}