// core.jsx — dot+ macOS shared core: theme tokens, icons, atoms.
// dot+ Base v1.1. No emoji (project rule). SF-symbol-style line icons, 24-grid, 1.5pt.
const SANS = "'Inter', -apple-system, system-ui, sans-serif";
const MONO = "'JetBrains Mono', ui-monospace, 'SF Mono', monospace";
// ── Theme token sets → applied as CSS variables on a scope wrapper ───────────
const THEMES = {
dark: {
s0:'#0F0F14', s1:'#18181F', s2:'#222229', s3:'#2A2A33', s4:'#33333E',
c1:'#FFFFFF', c2:'#C8C8D4', c3:'#6B6B78', cdis:'#3A3A44',
border:'#2E2E38', borderSub:'#222229',
inkSurface:'#FAFAFC', inkContent:'#05050A',
pos:'#1F9E6E', warn:'#BB7A00', neg:'#E11900', info:'#276EF1',
popoverBg:'rgba(23,23,29,0.97)', popoverBorder:'rgba(255,255,255,0.10)',
shadow:'0 18px 60px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4)',
menuBar:'rgba(16,16,22,0.78)', menuText:'rgba(255,255,255,0.92)',
scrim:'rgba(5,5,10,0.55)', winBorder:'rgba(255,255,255,0.08)',
},
light: {
s0:'#FFFFFF', s1:'#FAFAFC', s2:'#F2F2F5', s3:'#E6E6EB', s4:'#DADAE2',
c1:'#05050A', c2:'#2E2E38', c3:'#6B6B78', cdis:'#C8C8D4',
border:'#E6E6EB', borderSub:'#F2F2F5',
inkSurface:'#05050A', inkContent:'#FFFFFF',
pos:'#05944F', warn:'#BB7A00', neg:'#E11900', info:'#276EF1',
popoverBg:'rgba(255,255,255,0.98)', popoverBorder:'rgba(0,0,0,0.08)',
shadow:'0 18px 60px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.10)',
menuBar:'rgba(248,248,251,0.82)', menuText:'rgba(0,0,0,0.85)',
scrim:'rgba(5,5,10,0.30)', winBorder:'rgba(0,0,0,0.10)',
},
};
// Build the inline CSS-variable style object for a scope.
function themeVars(theme, accent) {
const t = THEMES[theme] || THEMES.dark;
return {
'--s0':t.s0, '--s1':t.s1, '--s2':t.s2, '--s3':t.s3, '--s4':t.s4,
'--c1':t.c1, '--c2':t.c2, '--c3':t.c3, '--cdis':t.cdis,
'--border':t.border, '--border-sub':t.borderSub,
'--ink-s':t.inkSurface, '--ink-c':t.inkContent,
'--pos':t.pos, '--warn':t.warn, '--neg':t.neg, '--info':t.info,
'--accent':accent || t.info,
'--pop-bg':t.popoverBg, '--pop-border':t.popoverBorder, '--pop-shadow':t.shadow,
'--menu-bar':t.menuBar, '--menu-text':t.menuText, '--scrim':t.scrim,
'--win-border':t.winBorder,
color:'var(--c1)', fontFamily:SANS,
};
}
// ── Icons ────────────────────────────────────────────────────────────────────
function Icon({ size = 20, stroke = 1.6, fill = 'none', color = 'currentColor', children, vb = 24, style }) {
return (
);
}
const I = {
record: (p)=>,
stop: (p)=>,
play: (p)=>,
pause: (p)=>,
mic: (p)=>,
system: (p)=>,
waves: (p)=>,
sparkles: (p)=>,
search: (p)=>,
gear: (p)=>,
plus: (p)=>,
cmd: (p)=>,
cal: (p)=>,
clock: (p)=>,
people: (p)=>,
person: (p)=>,
folder: (p)=>,
tag: (p)=>,
chev: (p)=>,
chevDown: (p)=>,
check: (p)=>,
x: (p)=>,
share: (p)=>,
copy: (p)=>,
doc: (p)=>,
star: (p)=>,
circle: (p)=>,
checkfill:(p)=>,
pin: (p)=>,
pencil: (p)=>,
sliders: (p)=>,
minimize: (p)=>,
expand: (p)=>,
send: (p)=>,
detach: (p)=>,
ellipsis: (p)=>,
bolt: (p)=>,
trash: (p)=>,
grip: (p)=>,
arrowOut: (p)=>,
wifi: (p)=>,
battery: (p)=>,
control: (p)=>,
bell: (p)=>,
list: (p)=>,
apple: (p)=>,
};
const fmtInitial = (n) => (n || '').trim().charAt(0).toUpperCase();
const SPK = ['#276EF1', '#1F9E6E', '#C2603A', '#8A5CD6'];
// ── Atoms ─────────────────────────────────────────────────────────────────────
function Avatar({ name, idx = 0, size = 28, ring }) {
const named = !!name;
return (
{named ? fmtInitial(name) : }
);
}
const TAG_TINT = { positive:'var(--pos)', warning:'var(--warn)', negative:'var(--neg)', info:'var(--accent)' };
function Tag({ children, variant = 'default', dot }) {
const tint = TAG_TINT[variant];
const isSemantic = !!tint;
return (
{dot && }
{children}
);
}
// Generic button: variant primary | secondary | ghost | record | danger
function Btn({ children, variant = 'secondary', size = 'default', shape = 'default', onClick, style, title, full }) {
const H = { mini:28, small:34, default:42, large:52 }[size];
const PX = { mini:12, small:14, default:16, large:20 }[size];
const FS = size === 'mini' || size === 'small' ? 13 : 15;
const base = {
primary: { background:'var(--ink-s)', color:'var(--ink-c)', border:'1px solid transparent' },
secondary: { background:'var(--s2)', color:'var(--c1)', border:'1px solid transparent' },
ghost: { background:'transparent', color:'var(--c1)', border:'1px solid var(--border)' },
accent: { background:'var(--accent)', color:'#fff', border:'1px solid transparent' },
record: { background:'var(--ink-s)', color:'var(--ink-c)', border:'1px solid transparent' },
danger: { background:'var(--neg)', color:'#fff', border:'1px solid transparent' },
}[variant];
const radius = shape === 'pill' ? 999 : shape === 'circle' ? '50%' : 8;
return (
);
}
// Soft circular icon button used in headers / nav
function IconBtn({ icon, onClick, size = 30, title, active }) {
return (
);
}
// Keycap glyph for hotkeys
function Key({ children }) {
return {children};
}
// Animated live audio meter (vertical bars)
function Meter({ active, bars = 5, color = 'var(--c1)', h = 18 }) {
const [seed, setSeed] = React.useState(0);
React.useEffect(() => {
if (!active) return;
const id = setInterval(() => setSeed(s => s + 1), 110);
return () => clearInterval(id);
}, [active]);
return (
{Array.from({ length: bars }).map((_, i) => {
const v = active ? 0.25 + Math.abs(Math.sin((seed + i * 1.7) * 0.9)) * 0.75 : 0.18;
return ;
})}
);
}
const mm = (s) => `${String(Math.floor(s/60)).padStart(2,'0')}:${String(Math.floor(s%60)).padStart(2,'0')}`;
const PANEL_W = { Compact:340, Standard:386, Roomy:440 };
Object.assign(window, {
SANS, MONO, THEMES, themeVars, Icon, I, fmtInitial, SPK, PANEL_W,
Avatar, Tag, Btn, IconBtn, Key, Meter, mm,
});